<template>
  <div class="examine-container">
    <div class="left-container">
      <template v-for="source in sourceTypes" :key="source.SERVICETYPE">
        <div class="soure-item-row" :class="{ active: current === source.SERVICETYPE }" @click="selectHandle(source)">
          {{ `${source.name}(${source.SUM})` }}
        </div>
      </template>
    </div>
    <div class="right-container">
      <BasicTable :rowSelection="{ type: 'checkbox' }" rowKey="serviceid" @register="registerTable">
        <template #toolbar>
          <Authority>
            <a-button type="primary" @click="batchExamine" :disabled="hasBatchDelete">批量审核</a-button>
          </Authority>
        </template>

        <template #action="{ record }">
          <TableAction :actions="[
            {
              label: '浏览',
              icon: '' /**clarity:note-edit-line*/,
              onClick: handleVliew.bind(null, record),
            },
            {
              label: '详情',
              icon: '' /**clarity:note-edit-line*/,
              onClick: handleDetail.bind(null, record),
            },
            {
              label: '审核',
              icon: '' /**clarity:note-edit-line*/,
              disabled: !record.status ? false : true,
              color: 'warning',
              onClick: handleEdit.bind(null, record),
            },
          ]" />
        </template>
        <template #pdate="{ record }">
          <Tag :color="'red'">
            {{ record.publishdate ? moment(record.publishdate).format('YYYY-MM-DD HH:mm:ss') : '' }}
          </Tag>
        </template>
        <template #status="{ record }">
          <Tag :style="`color:${record.status === 3 || record.status === 3 ? 'red' : ''};`">
            {{
              // record.status === 0
              // ? '待审核'
              // : record.status === 1
              // ? '审核通过'
              // : record.status === 2
              // ? '审核不通过'
              // : record.status === 3
              // ? '被驳回'
              // : '未提交'

              !record.status ? '待审核' : record.status == 2 ? '审核不通过' : record.status ? '审核通过' : ''

            }}
          </Tag>
        </template>
      </BasicTable>
      <check v-if="ischect" @register="registerModal1" @success="handleSuccess" />
      <map-resource-upload v-if="!ischect && current === 'MR'" @register="registerModalMR"
        @success="handleSuccess"></map-resource-upload>
      <scene-resource-upload v-if="!ischect && current === 'ER'" @register="registerModalER"
        @success="handleSuccess"></scene-resource-upload>
      <file-resource-upload v-if="!ischect && current === 'DR'" @register="registerModalDR"
        @success="handleSuccess"></file-resource-upload>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onBeforeMount, ref, watch } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { delRole, setRoleStatus } from '/@/api/system/system';
// import { useDrawer } from '/@/components/Drawer';
import { useModal } from '/@/components/Modal';
import MapResourceUpload from '/@/views/dataAdmin/dataAdmin/mapUpload/MapSourceModal.vue';
import FileResourceUpload from '/@/views/dataAdmin/dataAdmin/fileResourceUpload/AddMethod.vue';
import SceneResourceUpload from '/@/views/dataAdmin/dataAdmin/sceneResourceUpload/AddMethod.vue';
import check from './check.vue';
import { getFileUrl } from '/@/api/resource/files';
import { session } from '/@/utils/Memory.js';
import {
  columns,
  searchFormSchemaMR,
  searchFormSchemaER,
  searchFormSchemaDR,
  searchFormSchemaSR,
} from './map.data';
import { RoleEnum } from '/@/enums/roleEnum';
import { Authority } from '/@/components/Authority';
import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
import { useMessage } from '/@/hooks/web/useMessage';
import { Switch, Popconfirm } from 'ant-design-vue';
import { listPage, queryResourceById } from '/@/api/resource/map';
import Moment from 'moment';
import { getResourceGroup } from '/@/api/resource/examine';
import { onMounted } from 'vue';

export default defineComponent({
  name: 'RoleManagement',
  components: {
    BasicTable,
    check,
    TableAction,
    Authority,
    Switch,
    Popconfirm,
    MapResourceUpload,
    FileResourceUpload,
    SceneResourceUpload,
  },
  setup() {
    let current = ref('MR');
    //const [registerDrawer, { openDrawer }] = useDrawer();
    const [registerModal, { openModal }] = useModal();
    const registerModal1 = registerModal,
      openModal1 = openModal;
    const registerModalMR = registerModal,
      openModalMR = openModal;
    const registerModalDR = registerModal,
      openModalDR = openModal;
    const registerModalER = registerModal,
      openModalER = openModal;

    const registerModalSR = registerModal,
      openModalSR = openModal;
    const [registerTable, { getSelectRows, setProps, reload, setSelectedRowKeys }] = useTable({
      title: '地图资源审核列表',
      api: (param) => {
        const data = Object.assign(param, { type: current.value });
        return listPage(data);
      }, //求接口
      //dataSource: dataSources, //表格的数据
      columns,
      rowKey: 'serviceid',
      formConfig: {
        labelWidth: 90,
        schemas: searchFormSchemaMR,
      },
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      showIndexColumn: true,
      actionColumn: {
        width: 200,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      pagination: {
        hideOnSinglePage: false,
        pageSize: 20,
      },
      clickToRowSelect: true, //点击当前行多选框不选中,默认是true
      rowSelection: { type: 'checkbox' }, //是否有多选功能
      tableSetting: {
        redo: true,
        size: true,
        setting: false,
        fullScreen: false,
      },
    });
    const moment = Moment;
    const ischect = ref(false)
    const sourceTypes = ref([
      { SERVICETYPE: 'MR', name: '地图资源', SUM: 0 },
      { SERVICETYPE: 'ER', name: '场景资源', SUM: 0 },
      { SERVICETYPE: 'DR', name: '文件资源', SUM: 0 },
      { SERVICETYPE: 'SR', name: '组件资源', SUM: 0 },
    ]);
    const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
      useBatchDelete(delRole, handleSuccess, setProps);
    selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
      // Demo:status为1的选择框禁用
      // if (record.status === 1) {
      //   return { disabled: true };
      // } else {
      //   return { disabled: false };
      // }
    };
    watch(
      () => current.value,
      (val) => {
        let searchFormSchema = searchFormSchemaMR;
        let title = '地图资源审核列表';
        if (val === 'MR') {
          searchFormSchema = searchFormSchemaMR;
          title = '地图资源审核列表';
        } else if (val === 'ER') {
          searchFormSchema = searchFormSchemaER;
          title = '场景资源审核列表';
        } else if (val === 'DR') {
          searchFormSchema = searchFormSchemaDR;
          title = '文件资源审核列表';
        } else {
          searchFormSchema = searchFormSchemaSR;
          title = '组件资源审核列表';
        }
        setProps({
          title: title,
          formConfig: {
            labelWidth: 90,
            schemas: searchFormSchema,
          },
        });
        reload();
      }
    );
    nextTick(() => {
      setProps(selectionOptions);
    });

    function selectHandle(record) {
      current.value = record.SERVICETYPE;
    }

    /**
     * 详情
     */
    async function handleDetail(record: Recordable) {
      ischect.value = false
      const res = (await queryResourceById(record?.serviceid)) as any;
      if (res) {
        const result = Object.assign(res.metadata, res.servicebase);
        if (current.value === 'MR') {
          openModalMR(true, {
            record: result,
            isUpdate: true,
          });
        }

        if (current.value === 'DR') {
          openModalDR(true, {
            record: result,
            isUpdate: true,
          });
        }

        if (current.value === 'ER') {
          openModalER(true, {
            record: result,
            isUpdate: true,
          });
        }
      }
    }

    /**
     * 审核
     */
    function handleEdit(record: Recordable) {
      ischect.value = true,
        openModal1(true, {
          record,
          isUpdate: true,
        });
    }
    /**
     * 浏览
     */
    async function handleVliew(record: Recordable) {
      //场景资源
      if (current.value === 'ER') {
        window.open(
          `http://192.168.119.143:8080/onemapV5.0/sceneview.html?${record.serviceid}`,
          'target',
          ''
        );
      }
      //地图资源
      if (current.value === 'MR') {
        window.open(
          `http://192.168.119.143:8080/onemapV5.0/mapview.html?${record.serviceid}`,
          'target',
          ''
        );
      }
      //文件资源
      if (current.value === 'DR') {
        const obj = {
          id: record['fileid'],
          userid: record['userid'],
          parentId: session.getItem('sysFild').dirId,
        };
        const res = (await getFileUrl(obj)) as any;
        if (res) {
          const fileName = res.fileName;
          console.log('下载文件', fileName);
          const url = res.url;
          window.open(url);
        }
      }
      if (current.value === 'DR') {
        console.log('组件');
      }
    }

    function handleSuccess() {
      openModal(false, {
        isUpdate: false,
      });
      reload();
    }

    const statusChange = async (checked, record) => {
      setProps({
        loading: true,
      });
      setSelectedRowKeys([]);
      resetSelectedRowKeys();
      const newStatus = checked ? 1 : 0;
      const { createMessage } = useMessage();
      try {
        await setRoleStatus(record.id, newStatus);
        if (newStatus) {
          createMessage.success(`启用成功`);
        } else {
          createMessage.success('禁用成功');
        }
      } finally {
        setProps({
          loading: false,
        });
        reload();
      }
    };
    const batchExamine = () => {
      console.log('审核数据', getSelectRows());
    };

    onBeforeMount(async () => { });
    onMounted(() => {
      getResourceGroupTotal();
    })

    //分组统计所有资源数量
    function getResourceGroupTotal() {
      getResourceGroup().then((r) => {
        if (r.resp_code == 1 && r.resp_msg == '查询成功') {
          r.datas.map(i => i.name = i.SERVICETYPE == 'MR' ? '地图资源' : i.SERVICETYPE == 'ER' ? '场景资源' : i.SERVICETYPE == 'DR' ? '文件资源' : '组件资源')
          sourceTypes.value = r.datas;
        }
      })
    }

    return {
      current,
      moment,
      ischect,
      sourceTypes,
      registerTable,
      registerModal,
      registerModal1,
      registerModalMR,
      registerModalDR,
      registerModalER,
      registerModalSR,
      handleVliew,
      handleDetail,
      handleEdit,
      handleSuccess,
      RoleEnum,
      hasBatchDelete,
      handleDeleteOrBatchDelete,
      statusChange,
      batchExamine,
      selectHandle,
    };
  },
});
</script>
<style scoped lang="less">
.examine-container {
  display: flex;
  height: 100%;
  width: 100%;

  .left-container {
    width: 240px;
    height: calc(100% - 32px);
    margin: 16px 0 16px 10px;
    padding: 10px 20px;
    background-color: #fff;
    border-radius: 2px;

    .soure-item-row {
      height: 34px;
      width: 100%;
      margin: 20px 0;
      line-height: 34px;
      text-align: center;
      font-size: 14px;
      font-weight: normal;
      letter-spacing: 0px;
      color: #333333;
      background: #eff0f5;
      border-radius: 2px;
      cursor: pointer;
    }

    .active {
      background: #0671dd;
      color: #fff;
    }
  }

  .right-container {
    width: calc(100% - 260px);
    height: 100%;
  }
}
</style>

