text: import React, { useState } from "react";
  import store from "data/store"
  import axios from "axios";
  import { useCookies } from 'react-cookie';
  import { Icon, Button, Dropdown } from 'rsuite';
  
  import option_payment_service from "data/payment_service"
  
  import PropTypes from "prop-types";
  import MUIDataTable from "mui-datatables";
  import CustomFooter from 'components/TableFooter/footer';
  
  export default function CardUserTable({ data, update }) {
    const [resizableColumns, setResizableColumns] = useState(false);
    // const [imageSrc, setImageSrc] = useState(data['photolife'])
    const [cookies, setCookie] = useCookies();
  
    // const handleImageSelect = (e) => {
    //   setImageSrc(URL.createObjectURL(e.target.files[0]))
    // }
    const columns = [
      {
        name: "title",
        label: "名稱",
        options: {
          filter: false,
          sort: false
        }
      },
      {
        name: "service",
        label: "支付服務",
        options: {
          filter: false,
          sort: false,
          customBodyRenderLite: (dataIndex) => {
            let service = option_payment_service.find(option =>
              option.value == data[dataIndex]["payService"]).label;
  
            return service;
          },
        }
      },
      {
        name: 'tool',
        label: '狀態',
        options: {
          filter: false,
          sort: false,
          setCellProps: () => ({ style: { whiteSpace: 'nowrap' } }),
          filterOptions: {
            renderValue: v => (v) ? "已發佈" : "未發佈"
          },
          customFilterListOptions: {
            render: v => (v) ? "已發佈" : "未發佈"
          },
          customBodyRenderLite: (dataIndex) => {
            let value = data[dataIndex].active;
            return <td className="border-t-0  align-left border-l-0 border-r-0 text-xs  text-left">
              <i className={"fas fa-circle " + (value ? "text-emerald-500" : "text-red-500")}>
              </i>
              {(value) ? "已發佈" : "未發佈"}
              <Dropdown title="更多">
                <Dropdown.Item>
                  <Button onClick={() => update('edit', dataIndex)} appearance="ghost" color="blue" className="w-full hover:shadow-md ">
                    <Icon icon="edit" /> 編輯
                  </Button></Dropdown.Item>
                <Dropdown.Item>
                  <Button onClick={() => update('clone', dataIndex)} appearance="ghost" color="blue" className="w-full hover:shadow-md ">
                    <Icon icon="copy" />複製
                  </Button>
                </Dropdown.Item>
                <Dropdown.Item>
                  <Button onClick={() => update('delete', dataIndex)} appearance="ghost" color="blue" className="w-full hover:shadow-md ">
                    <Icon icon="trash" />刪除
                  </Button>
                </Dropdown.Item>
              </Dropdown>
            </td>
          },
        }
      },
      // {
      //   name: 'tool',
      //   label: '操作',
      //   options: {
      //     filter: false,
      //     sort: false,
      //     customBodyRenderLite: (dataIndex) => {
      //       let value = data[dataIndex].store_upload;
      //       return <>
      //         <Button onClick={() => update('edit', dataIndex)} appearance="ghost" color="blue" className="w-full hover:shadow-md lg:w-9/12">
      //           <Icon icon="edit" /> 編輯
      //         </Button>
      //       </>
      //     },
      //   }
      // },
    ];
    const deleteList = (idList) => {
      const headers = {
        'Authorization': 'Bearer ' + cookies.token
      };
      var jsonData = {}
      jsonData['idList'] = String(idList)
      axios.post(store.webApiUrl + 'Pay/DeleteList/', jsonData, { headers })
        .then(r => {
          if (r.status == "200") {
            alert('刪除成功')
            window.location.reload(false);
            return true;
          } else {
            alert('刪除失敗')
            return false
          }
        });
    }
    const options = {
      filter: true,
      filterType: 'dropdown',
      responsive: 'standard',
      fixedHeader: true,
      fixedSelectColumn: false,
      tableBodyHeight: '600px',
      rowsPerPage: 10,
      resizableColumns: resizableColumns,
      setRowProps: (row, dataIndex, rowIndex) => {
        if (dataIndex % 2 == 0)
          return {
            style: { backgroundColor: "rgba(186, 240, 253,.3)" },
          };
      },
      onRowsDelete: (rowsDeleted) => {
        var idList = []
        rowsDeleted.data.forEach(e => {
          idList.push(data[e.dataIndex].id)
        });
        return deleteList(idList)
      },
      // customFooter: (count, page, rowsPerPage, changeRowsPerPage, changePage, textLabels) => {
      //   return (
      //     <CustomFooter
      //       count={count}
      //       page={page}
      //       rowsPerPage={rowsPerPage}
      //       changeRowsPerPage={changeRowsPerPage}
      //       changePage={changePage}
      //       textLabels={textLabels}
      //     />
      //   );
      // },
    };
    var title = <>
      支付管理
      <button
        className=" bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-xs m-4 px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
        type="button"
        onClick={() => update("add")}
      >
        <Icon icon="plus" className="mr-1" />新增支付管理
      </button></>
    return (
      <>
        <div className={"z-0 relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded "}>
          <MUIDataTable title={title} data={data} columns={columns} options={options} />
        </div>
      </>
    );
  }