text: import React, { useState, useEffect } from "react";
  import { useCookies } from 'react-cookie';
  import store from "data/store"
  import option from "data/option.js"
  import axios from "axios";
  // components
  import TablePage from "./Table/Payment_Table";
  import EditPage from "./Edit/Payment_Edit";
  import AddPage from "./Add/Payment_Add";
  
  import payment_area from "data/payment_area_type";
  
  // import option from "data/option.js"
  
  export default function User() {
      var data = {}
      const [cookies, setCookie] = useCookies();
      const [frame, setFrame] = useState();
  
      useEffect(() => {
          const headers = {
              'Authorization': 'Bearer ' + cookies.token
              // "Content-Type": "application/json"
          };
          axios.get(store.webApiUrl + 'Pay/GetByCompanyId/' + cookies.companyId, { headers })
              .then(r => {
                  if (r.status == "200") {
                      data = r.data.data
                      setFrame(<TablePage data={data} update={update} ></TablePage>)
                  }
              })
          const clonePayment = (id) => {
              axios.get(store.webApiUrl + 'Pay/Clone/' + id, { headers })
                  .then(r => {
                      if (r.status == "200") {
                          alert("複製成功");
                          window.location.reload(false);
                      }
                  });
          }
          const deletePayment = (id) => {
              axios.get(store.webApiUrl + 'Pay/Delete/' + id, { headers })
                  .then(r => {
                      if (r.status == "200") {
                          alert("刪除成功");
                          window.location.reload(false);
                      }
                  });
          }
          function update(action, index) {
              switch (action) {
                  case "edit":
                      axios.get(store.webApiUrl + 'PayArea/GetByPayId/' + data[index].id, { headers })
                          .then(r => {
                              if (r.status == "200") {
                                  let areaList = []
                                  r.data.data.forEach(e => {
                                      areaList.push(e.areaId)
                                  })
                                  let left = []
                                  let right = []
                                  payment_area.forEach(e => {
                                      if (areaList.includes(e.value)) {
                                          left = left.concat(e)
                                      } else {
                                          right = right.concat(e)
                                      }
                                  })
                                  setFrame(<EditPage data={data[index]} left={left} right={right}></EditPage>)
                              }
                          })
                      break;
                  case "add":
                      setFrame(<AddPage></AddPage>)
                      break;
                  case "clone":
                      clonePayment(data[index].id);
                      break;
                  case "delete":
                      deletePayment(data[index].id);
                      break;
              }
          }
      }, []);
      return (
          <>
              {/* <HeaderStats></HeaderStats> */}
              <div className="px-1 md:px-10 mx-auto w-full ">
                  <div className="flex flex-wrap">
                      <div className="w-full mb-12 md:px-4">
                          {frame}
                      </div>
                  </div>
              </div>
          </>
      );
  }