<template>
  <div>
    <BasicTable
      :rowSelection="{ type: 'checkbox' }"
      @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>
      </template>

      <template #tcjb="{ record }">
        <Tag
          :color="
            record.tcjb == '一级' ? 'processing' : record.tcjb == '二级' ? 'warning' : 'error'
          "
          class="ml-2"
        >
          {{ record.tcjb }}
        </Tag>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              onClick: viewMethod.bind(null, record),
              color: iconList.details.color,
              tooltip: iconList.details.label,
              label: iconList.details.label,
              auth: authList.addAuth,
            },
            {
              onClick: editMethod.bind(null, record),
              tooltip: iconList.edit.label,
              color: iconList.edit.color,
              label: iconList.edit.label,
              auth: authList.editAuth,
            },

            {
              tooltip: iconList.delete.label,
              color: iconList.delete.color,
              label: iconList.delete.label,
              auth: authList.deleteAuth,
              popConfirm: {
                title: '是否确认删除',
                confirm: deleteMethod.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddMethod :destroyOnClose="true" @register="registerModal" @success="handleSuccess" />
    <ViewMethod @register="registerModalT" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { delRole } from '/@/api/system/system';
  import { RoleEnum } from '/@/enums/roleEnum';
  import { Authority } from '/@/components/Authority';
  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  import { Popconfirm, message, Tag } from 'ant-design-vue';
  import { searchFormSchema, columns } from './account.data';
  import cssClass from '/@/views/dataSupport/config/cssClass.ts';
  import tempButton from '/@/views/dataSupport/components/button.vue';
  import { getSkyInspectionPage, deleSkyInspectionByIds } from '../../method/api';
  import { useModal } from '/@/components/Modal';
  import AddMethod from './AddMethod.vue';
  import ViewMethod from './ViewMethod.vue';
  import moment from 'moment';
  export default defineComponent({
    name: 'OnlineEvaluation',
    components: {
      BasicTable,
      TableAction,
      Authority,
      Popconfirm,
      tempButton,
      AddMethod,
      ViewMethod,
      Tag,
    },
    setup() {
      //权限控制标识
      const bottomAuthority = 'api:basinHydropower:projectInfo:';
      const authList = {
        addAuth: bottomAuthority + 'projectInfoAdd', //新增权限控制
        deleteAuth: bottomAuthority + 'projectInfoDelete', //删除权限控制
        auditAuth: bottomAuthority + 'projectInfoAudit', //详情
        editAuth: bottomAuthority + 'projectInfoEdit', //修改
      };
      const [registerModal, { openModal: openModal }] = useModal();
      const [registerModalT, { openModal: openModalT }] = useModal();
      //table操作符号列表
      const { iconList, bottonType } = cssClass;
      //按钮配置
      const bottonList = {
        add: {
          type: bottonType.add.value,
          click: addMethod,
        },
        delete: {
          type: bottonType.delete.value,
          click: deleteMethod,
        },
        edit: {
          type: bottonType.edit.value,
          click: editMethod,
        },
      };
      /**
       * 修改
       */
      function editMethod(record) {
        openModal(true, {
          record,
          isUpdate: true,
        });
      }
      /**
       * 新增信息
       */
      function addMethod() {
        openModal(true, {
          isUpdate: false,
        });
      }
      /**
       * 详情
       */
      function viewMethod(record) {
        openModalT(true, {
          record,
        });
      }
      /**
       * 删除信息
       */
      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);
        deleSkyInspectionByIds(ids)
          .then((res) => {
            console.log('删除结果' + JSON.stringify(res));
            if (res.code == 1) {
              message.success('删除成功！');
              reload();
            } else {
              message.error('删除失败！');
            }
          })
          .catch((error) => {
            message.error('删除失败！');
          });
      }

      /**
       * 将当前操作的数据整合为数组以便于判断
       */
      function getSelectInfo(data) {
        let currentData = data;
        if (currentData.currentTarget) {
          currentData = getSelectRows();
        } else {
          currentData = [data];
        }
        return currentData;
      }

      function handleSuccess() {
        reload();
      }

      // function handleResult(params) {
      //   return new Promise(async (res) => {
      //     const tempData = await getSkyInspectionPage(params);
      //     res(tempData.result.records);
      //   });
      // }

      const [registerTable, { setProps, reload, getSelectRows }] = useTable({
        title: '天/空监测数据管理',
        api: getSkyInspectionPage,
        columns: columns, //表头
        formConfig: {
          //查询条件
          labelWidth: 120,
          schemas: searchFormSchema,
        },
        beforeFetch: (params: any) => {
          console.log('params', params);

          const data = {
            current: params['result.pages'],
            size: params['result.size'],
            jclx: params.jclx ? params.jclx.toString() : '',
            sjlx: params.sjlx ? params.sjlx.toString() : '',
            searchStr: params.searchStr,
          };

          return preProcessData(data);
        },
        pagination: {
          hideOnSinglePage: false,
        },
        useSearchForm: true, //是否使用查询条件
        showTableSetting: true, //显示表格设置工具
        bordered: true, //是否显示表格边框
        showIndexColumn: false, //展示序号
        actionColumn: {
          width: 200,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },

        fetchSetting: {
          pageField: 'result.pages',
          sizeField: 'result.size',
          listField: 'result.records',
          totalField: 'result.total',
        },
      });
      function preProcessData(data) {
        Object.keys(data).forEach((item) => {
          if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
            delete data[item];
          }
        });
        return data;
      }
      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
        delRole,
        handleSuccess,
        setProps
      );
      nextTick(() => {
        setProps(selectionOptions);
      });

      return {
        iconList,
        authList,
        bottonList,
        registerTable,
        handleSuccess,
        RoleEnum,
        hasBatchDelete,
        handleDeleteOrBatchDelete,
        deleteMethod,
        editMethod,

        viewMethod,
        registerModal,
        registerModalT,
      };
    },
  });
</script>
