<template>
  <div>
    <BasicTable
      :rowSelection="{ type: 'checkbox' }"
      @selection-change="useSelectionChange"
      @register="registerTable"
      :clickToRowSelect="false"
    >
      <template #toolbar>
        <Authority :value="authList.deleteAuth">
          <tempButton :disabled="hasBatchDelete" :buttonInfo='bottonList.delete'> </tempButton> 
        </Authority>
        <Authority :value="authList.exportAuth">
          <tempButton :disabled="hasBatchDelete" :buttonInfo='bottonList.export'> </tempButton>
        </Authority>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              //icon: iconList.details.icon,
              color: iconList.details.color,
              tooltip:iconList.details.label,
              label:iconList.details.label,
            },
            {
              auth: authList.editAuth,
              //icon: iconList.edit.icon,
              onClick: auditMethod.bind(null, record),
              tooltip:iconList.edit.label,
              color: iconList.edit.color,
              label:iconList.edit.label,
              //只能在填报或者审核完成后才能进行编辑
              //ifShow: (_action) => {
                //return record.status == proState.edit ||record.status == proState.complete;
              //},
            },
            {
              auth: authList.deleteAuth,
              //icon: iconList.audit.icon,
              onClick: deleteMethod.bind(null, record),
              tooltip:iconList.delete.label,
              color: iconList.delete.color,
              label:iconList.delete.label,
              //ifShow: (_action) => {//只能在审核过程中才能进行审核
                //return record.status == proState.audit;
              //},
            },
            {
              auth: authList.exportAuth,
              //icon: iconList.audit.icon,
              onClick: deleteMethod.bind(null, record),
              tooltip:iconList.export.label,
              color: iconList.export.color,
              label:iconList.export.label,
              //ifShow: (_action) => {//只能在审核过程中才能进行审核
                //return record.status == proState.audit;
              //},
            },
          ]"
        />
      </template>
    </BasicTable>
    <!-- <RoleDrawer @register="registerDrawer" @success="handleSuccess" /> -->
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { delRole, getRoleListByPage } from '/@/api/system/system';
  import { RoleEnum } from '/@/enums/roleEnum';
  import { Authority } from '/@/components/Authority';
  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
  import { Popconfirm } from 'ant-design-vue';
  import commom from '/@/views/dataSupport/method/commom.ts';
  import cssClass from '/@/views/dataSupport/config/cssClass.ts';
  import tempButton from '/@/views/dataSupport/components/button.vue';
  export default defineComponent({
    name: 'thematicGalleryManagement',
    components: { BasicTable, TableAction, Authority, Popconfirm ,tempButton},
    setup() {
      //权限控制标识
      const bottomAuthority="api:groundDisasterId:thematicGallery:";
      const authList={
        addAuth:bottomAuthority+"thematicGalleryAdd",//新增权限控制
        deleteAuth:bottomAuthority+"thematicGalleryDelete",//删除权限控制
        auditAuth:bottomAuthority+"thematicGalleryAudit",//审核权限控制
        editAuth:bottomAuthority+"thematicGalleryEdit",//审核权限控制
        exportAuth:bottomAuthority+"thematicGalleryExport",//审核权限控制
      }
      //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(){

      };

      /**
       * 删除信息
      */
      function deleteMethod(data){
        const currentData=getSelectInfo(data);
      };

      /**是否可以审核*/
      let hasBatchAudit=true;
      /**审核的状态参数*/
      const proState={
        edit:"",//编辑状态
        complete:"",//完结状态
        audit:"",//审核状态
      };
      
      /**
       * 审核信息(考虑多个内容一起审核)
      */
      function auditMethod(data){
        const currentData=getSelectInfo(data);
      };
      
      /**
       * 勾选事件(审核只能在)
      */
      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){
          currentData=getSelectRows();
        }else{
          currentData=[data];
        }
      }
      //查询条件
      const searchFormSchema=[{
          label:"关键字",
          field:"key",
        },{
          label:"地灾类型",
          component: 'ApiSelect',
          field:"ssly",
        }
      ]
      //列表信息 
      const columns=['xh','zttbh','zttmc','dzlx','ztr','ztdw','ztsj']
      // const [registerDrawer, { openDrawer }] = useDrawer();
      function handleSuccess() {
        reload();
      }

      const [registerTable, { setProps, reload,getSelectRows }] = useTable({
        title: '专题图库',
        api: getRoleListByPage,
        columns:commom.getInitColumns(columns),//表头
        formConfig: {//查询条件
          labelWidth: 120,
          schemas: commom.getInitInputList(searchFormSchema),
        },
        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,
        registerTable,
        handleSuccess,
        RoleEnum,
        hasBatchDelete,
        handleDeleteOrBatchDelete,
        deleteMethod,
        auditMethod,
        useSelectionChange,
        hasBatchAudit,
        proState
      };
    },
  });
</script>
