<template>
  <div class="p-4">
    <div class="top-search">
      <div class="left-search-input">
        <div class="input">
          <span>关键字</span>
          <a-input allowClear v-model:value="searchValue" style="width: 200px;" placeholder="请输入资源名称"></a-input>
        </div>
        <div class="input">
          <span>资源类型</span>
          <a-select allowClear v-model:value="selectTypeValue" style="width: 200px" :options="typeOptions">
          </a-select>
        </div>
        <div class="input">
          <span>应用系统</span>
          <a-select allowClear v-model:value="selectSystemValue" style="width: 200px" :options="sysOptions">
          </a-select>
        </div>
        <div class="input">
          <span>审核状态</span>
          <a-select allowClear v-model:value="selectStatusValue" style="width: 200px" :options="statusOptions">
          </a-select>
        </div>
        <!-- <div class="input">
          <span>申请时间</span>
          <a-date-picker v-model:value="searchTime" placeholder="申请时间" style="width: 200px" />
        </div> -->
      </div>
      <div class="right-btns">
        <a-button style="margin-right: 15px;" @click="handleReset">重置</a-button>
        <a-button type="primary" @click="handleSearch">查询</a-button>
      </div>
    </div>
    <div class="bottom-table">
      <BasicTable @register="registerTable" class="basic-table">
        <template #toolbar>
          <a-button style="background-color: #fc8b01;color: #fff;" :disabled="hasSelected"
            @click="handleAuditAll">批量审核</a-button>
        </template>
        <template #action="{ record }">
          <TableAction :actions="[
            {
              label: '详情',
              tooltip: '详情',
              onClick: handleDetail.bind(null, record),
            },
            {
              label: '审核',
              tooltip: '审核',
              onClick: handleAudit.bind(null, record),
            }
          ]" />
        </template>
      </BasicTable>
    </div>
    <AuditModal v-if="showAuditModal" @closeModal="showAuditModal = false" :bussInfo="bussInfo" @onSubmit="onSubmit" />
  </div>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs, computed, createVNode } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
//审核页面
import AuditModal from './AuditModal.vue';

import { columns } from './map.data';

import moment from 'moment';
import { session } from '/@/utils/Memory';
//查询用户需要授权的数据api
import { queryTaskInfoPage, queryTaskYbInfoPage } from '/@/api/resource/examine';

export default defineComponent({
  name: 'Empowerment',
  components: { BasicTable, TableAction, AuditModal },
  setup() {
    const searchValue = ref('')
    const selectTypeValue = ref('MR')
    const selectSystemValue = ref('')
    const selectStatusValue = ref('')
    const searchTime = ref(null)
    //mr是地图资源，dr是文件，er场景，sr组件
    const typeOptions = [
      {
        label: "地图资源",
        value: "MR"
      },
      {
        label: "场景资源",
        value: "ER"
      },
      {
        label: "文件资源",
        value: "DR"
      },
      {
        label: "组件资源",
        value: "SR"
      },
      {
        label: "接口服务",
        value: "interface"
      }
    ]
    const sysOptions = [
      {
        label: "xx系统",
        value: "1"
      },
      {
        label: "xxx系统",
        value: "2"
      },
      {
        label: "xx平台",
        value: "3"
      }
    ]
    const statusOptions = [
      {
        label: "在办",
        value: "在办"
      },
      {
        label: "已办结",
        value: "已办结"
      },
      // {
      //   label: "审核通过",
      //   value: "审核通过"
      // },
      // {
      //   label: "审核不通过",
      //   value: "审核不通过"
      // },
    ]
    const showAuditModal = ref(false)
    const bussInfo = ref({
      bussInfoId: "",
      resId: ""
    })
    onMounted(() => {
      // getAllData();
    })
    //获取所有状态的资源
    const getAllData = () => {
      return new Promise(async (resolve) => {
        let params = {
          page: 1,
          rows: 10000,
          serviceType: selectTypeValue.value,
          userId: session.getItem('userId'),
          keyStr: searchValue.value
        }
        let resdb = await queryTaskInfoPage(params)
        let resyb = await queryTaskYbInfoPage(params)
        // console.log(resdb);
        // console.log(resyb);
        let allData = removeDp(resyb, resdb)
        if (allData.length) {
          resolve(allData.filter(item => item.BUSSNAME.indexOf('授权') > -1))
        } else {
          resolve([])
        }
      })
    }
    //两个对象数组去重
    const removeDp = (arr1, arr2) => {
      let arr = arr1.concat(arr2)
      let obj = {}
      let newArray = arr.reduce((pre, cur) => {
        if (!obj[cur.BUSSID]) {
          obj[cur.BUSSID] = true
          pre.push(cur)
        }
        return pre
      }, [])
      return newArray;
    }
    //注册表格
    const [registerTable, { reload, getRowSelection, getSelectRowKeys, clearSelectedRowKeys }] = useTable({
      title: '授权资源列表',
      api: getAllData,
      // dataSource: [],
      columns,
      rowSelection: { type: 'checkbox' },
      useSearchForm: false,
      showTableSetting: true,
      bordered: false,
      striped: false,
      canResize: true,
      showIndexColumn: true,
      indexColumnProps: { fixed: 'left' },
      actionColumn: {
        width: 120,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      pagination: {
        hideOnSinglePage: false,
      },
      clickToRowSelect: false,
      tableSetting: {
        redo: true,
        size: true,
        setting: false,
        fullScreen: false
      },
    });

    //判断是否选中数据
    const hasSelected = computed(() => {
      const rowSelection = getRowSelection();
      return !(rowSelection.selectedRowKeys?.length);
    });
    //重置查询
    const handleReset = () => {
      searchValue.value = ''
      selectTypeValue.value = 'MR'
      selectSystemValue.value = '1'
      selectStatusValue.value = '未审核'
      searchTime.value = moment()
    }
    //条件查询
    const handleSearch = () => {
      reload();
    }
    // 批量审核
    const handleAuditAll = () => {
    }
    //资源详情
    const handleDetail = (record) => {

    }
    //单个审核，打开审核弹窗
    const handleAudit = (record) => {
      bussInfo.value.bussInfoId = record.BUSSID,
        bussInfo.value.resId = record.SERVICEID
      showAuditModal.value = true
    }
    //审核提交
    const onSubmit = (isPass) => {
      showAuditModal.value = false
      reload()
    }

    return {
      showAuditModal,
      bussInfo,
      searchValue,
      selectTypeValue,
      selectSystemValue,
      selectStatusValue,
      searchTime,
      typeOptions,
      sysOptions,
      statusOptions,
      hasSelected,
      registerTable,
      // registerDrawer,
      handleReset,
      handleSearch,
      handleAuditAll,
      handleDetail,
      handleAudit,
      onSubmit
    };
  },
});
</script>

<style lang="less" scoped>
.p-4 {
  height: 100%;

  .top-search {
    width: 100%;
    height: 74px;
    border-radius: 6px;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left-search-input {
      margin-left: 20px;
      display: flex;

      .input {
        margin-right: 30px;

        span {
          margin-right: 10px;
        }
      }
    }

    .right-btns {
      margin-right: 20px;
    }
  }

  .bottom-table {
    margin-top: 24px;
    padding: 20px;
    height: calc(100% - 98px);
    background-color: #fff;

    .basic-table {
      height: 100%;

      ::v-deep .ant-table-title {
        padding: 0 !important;

        .vben-basic-title {
          font-family: '阿里巴巴普惠体 2.0';
          font-size: 16px;
          font-weight: bold;
          color: #333333;
        }

      }
    }
  }
}
</style>
