<template>
  <div>
    <BasicTable
      :rowSelection="{ type: 'checkbox' }"
      @selection-change="useSelectionChange"
      @register="registerTable"
      :clickToRowSelect="false"
    >
      <template #toolbar>
        <Authority :value="authList.addAuth">
          <tempButton :buttonInfo="bottonList.add" />
        </Authority>
        <Authority :value="authList.deleteAuth">
          <tempButton :disabled="hasBatchDelete" :buttonInfo="bottonList.delete" />
        </Authority>
        <Authority :value="authList.auditAuth">
          <tempButton :disabled="hasBatchAudit" :buttonInfo="bottonList.audit" />
        </Authority>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              //auth: authList.editAuth,
              //icon: iconList.edit.icon,
              label: iconList.edit.label,
              onClick: auditMethod.bind(null, record),
              tooltip: iconList.edit.label,
              color: iconList.edit.color,
              //ifShow: (_action) => {//只能在填报或者审核完成后才能进行编辑
              //return record.status == proState.edit ||record.status == proState.complete;
              //},
            },
            {
              //auth: authList.auditAuth,
              //icon: iconList.audit.icon,
              label: iconList.audit.label,
              onClick: auditMethod.bind(null, record),
              tooltip: iconList.audit.label,
              color: iconList.audit.color,
              //ifShow: (_action) => {//只能在审核过程中才能进行审核
              //return record.status == proState.audit;
              //},
            },
            {
              //auth: authList.deleteAuth,
              //icon: iconList.delete.icon,
              label: iconList.delete.label,
              color: iconList.delete.color,
              popConfirm: {
                title: '是否确认删除',
                confirm: deleteMethod.bind(null, record),
              },
              tooltip: iconList.delete.label,
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddMethod @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { RoleEnum } from '/@/enums/roleEnum';
  import { Authority } from '/@/components/Authority';
  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  // import { delRole, getRoleListByPage } from '/@/api/system/system';
  import { delRole } from '/@/api/system/system';
  // import { Popconfirm, message } from 'ant-design-vue';
  import { message } from 'ant-design-vue';
  import commom from '/@/views/dataSupport/method/commom';
  import cssClass from '/@/views/dataSupport/config/cssClass';
  import tempButton from '/@/views/dataSupport/components/button.vue';
  import { getBasinInformationPage, deleBasinInformationByIds } from '../../method/api';
  import AddMethod from './AddMethod.vue';
  export default defineComponent({
    name: 'BasinInformationManagement',
    components: {
      BasicTable,
      TableAction,
      Authority,
      // Popconfirm ,
      tempButton,
      AddMethod,
    },
    setup() {
      //权限控制标识
      const bottomAuthority = 'api:basinHydropower:basinInformation:';
      const authList = {
        addAuth: bottomAuthority + 'basinInformationAdd', //新增权限控制
        deleteAuth: bottomAuthority + 'basinInformationDelete', //删除权限控制
        auditAuth: bottomAuthority + 'basinInformationAudit', //审核权限控制
        editAuth: bottomAuthority + 'basinInformationUpdate', //审核权限控制
      };
      const [registerModal, { openModal: openModal }] = useModal();
      //table操作符号列表
      const { iconList, bottonType } = cssClass;
      //按钮配置
      const bottonList = {
        add: {
          type: bottonType.add.value,
          click: addMethod,
        },
        delete: {
          type: bottonType.delete.value,
          click: deleteMethod,
        },
        audit: {
          type: bottonType.audit.value,
          click: auditMethod,
        },
      };

      /**
       * 新增信息
       */
      function addMethod() {
        console.log('z这里点击新增');

        openModal(true, {
          isUpdate: false,
        });
      }

      /**
       * 删除信息
       */
      function deleteMethod(dataValue) {
        const currentData = getSelectInfo(dataValue);
        console.log('删除信息1' + JSON.stringify(currentData));
        let ids = '';
        currentData.forEach((item) => {
          ids += item.id + ',';
        });
        ids = ids.slice(0, ids.length - 1);
        deleBasinInformationByIds(ids)
          .then((res) => {
            console.log('删除结果' + JSON.stringify(res));
            if (res.code == 1) {
              message.success('删除成功！');
              reload();
            } else {
              message.error('删除失败！');
            }
          })
          .catch(() => {
            message.error('删除失败！');
          });
      }

      /**是否可以审核*/
      let hasBatchAudit = true;
      /**审核的状态参数*/
      const proState = {
        edit: '', //编辑状态
        complete: '', //完结状态
        audit: '', //审核状态
      };

      /**
       * 审核信息(考虑多个内容一起审核)
       */
      function auditMethod(data) {
        const currentData = getSelectInfo(data);
        openModal(true, {
          currentData,
          isUpdate: true,
        });
      }

      /**
       * 勾选事件(审核只能在)
       */
      function useSelectionChange() {
        const currentData = getSelectRows() || [];
        let temp = false;
        for (let i = 0; i < currentData.length; i++) {
          if (!temp) {
            if (currentData[i].state != proState.audit) {
              temp = true;
            }
          } else {
            break;
          }
        }
        hasBatchAudit = temp;
      }

      /**
       * 将当前操作的数据整合为数组以便于判断
       */
      function getSelectInfo(data) {
        let currentData = data;
        if (currentData.currentTarget) {
          currentData = getSelectRows();
        } else {
          currentData = [data];
        }
        return currentData;
      }
      //查询条件
      const searchFormSchema = [
        {
          label: '关键字',
          field: 'key',
        },
        {
          label: '流域状态',
          field: 'state',
        },
        {
          label: '所属库区',
          field: 'kq',
        },
      ];
      //列表信息
      const columns = [
        'xh',
        'lymc',
        'sskq',
        'fw',
        'createUser',
        'createTime',
        'editUser',
        'editTime',
        'lystate',
      ];
      // const [registerDrawer, { openDrawer }] = useDrawer();
      function handleSuccess() {
        reload();
        setShowPagination(true);
      }

      const handleResult = async (params) => {
        try {
          const data = await getBasinInformationPage(params);
          console.log('data-----------', data.result.records);
          // let newdata =[]
          data.result.records.map((e) => {
            e.createUser = e.createby;
            e.xh = e.id;
            // e.sskq=e.lymc
            e.fw = e.fanwei;
          });

          return data.result.records;
        } catch (error) {}
      };

      const [registerTable, { setProps, reload, getSelectRows, getForm, setShowPagination }] =
        useTable({
          title: '流域信息',
          api: handleResult,
          columns: commom.getInitColumns(columns), //表头
          formConfig: {
            //查询条件
            labelWidth: 120,
            schemas: commom.getInitInputList(searchFormSchema),
          },
          beforeFetch: (params: any) => {
            console.log(params, 'params');
            console.log(getForm().getFieldsValue());
            return {
              pages: params.page,
              size: params.pageSize,
              key: params.key,
              state: params.state,
              kq: params.kq,
            };
          },
          pagination: {
            pageSize: 100,
            hideOnSinglePage: false,
          },
          useSearchForm: true, //是否使用查询条件
          showTableSetting: true, //显示表格设置工具
          bordered: true, //是否显示表格边框
          showIndexColumn: false, //展示序号
          actionColumn: {
            width: 200,
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' },
            fixed: 'right',
          },
        });
      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
        delRole,
        handleSuccess,
        setProps
      );
      nextTick(() => {
        setProps(selectionOptions);
      });

      return {
        iconList,
        authList,
        bottonList,
        registerModal,
        registerTable,
        handleSuccess,
        RoleEnum,
        hasBatchDelete,
        handleDeleteOrBatchDelete,
        deleteMethod,
        auditMethod,
        useSelectionChange,
        hasBatchAudit,
        proState,
      };
    },
  });
</script>
