<!--
 * @Author: renxin renxin0828@163.com
 * @Date: 2023-05-26 13:56:16
 * @LastEditors: renxin renxin0828@163.com
 * @LastEditTime: 2023-06-30 10:58:58
 * @FilePath: \yx-admin\src\views\dataSupport\groundDisasterId\serviceManagement\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <BasicTable :rowSelection="{ type: 'checkbox' }" @register="registerTable">
      <template #toolbar>
        <Authority value="api:groundDisasterId:muSourceData:muSourceDataAdd">
          <a-button type="primary" @click="addMethod">新增</a-button>
        </Authority>
        <Authority value="api:groundDisasterId:muSourceData:muSourceDataDelete">
          <Popconfirm
            title="您确定要删除数据"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDeleteOrBatchDelete(null)"
          >
            <a-button color="error" :disabled="hasBatchDelete"> 删除 </a-button>
          </Popconfirm>
        </Authority>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '预览',
              auth: 'api:groundDisasterId:muSourceData:muSourceDataPreview',

              onClick: previewMethod.bind(null, record),
            },
            {
              label: '详情',
              auth: 'api:groundDisasterId:muSourceData:muSourceDataPreview',

              onClick: viewMethod.bind(null, record),
            },
            {
              label: '修改',
              auth: 'api:groundDisasterId:muSourceData:muSourceDataUpdate',

              onClick: updateMethod.bind(null, record),
            },
            {
              label: '删除',
              auth: 'api:groundDisasterId:muSourceData:muSourceDataDelete',
              color: 'error',

              popConfirm: {
                title: '是否确认删除',
                confirm: handleDeleteOrBatchDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <AddMethod @register="registerModal" @success="handleSuccess" />
    <ViewMethod @register="registerModalT" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, nextTick, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getPage, deleteDzsbsjjr } from '/@/api/datamanager/groundDisasterId/serviceManagement';
  import { useModal } from '/@/components/Modal';
  import AddMethod from './AddMethod.vue';
  import ViewMethod from './ViewMethod.vue';
  import { RoleEnum } from '/@/enums/roleEnum';
  import { Authority } from '/@/components/Authority';
  import { useBatchDelete } from '/@/hooks/web/useBatchDeleteString';
  import { Popconfirm } from 'ant-design-vue';
  import moment from 'moment';
  import { searchFormSchema, columns } from './account.data';
  export default defineComponent({
    name: 'MuSourceDataManagement',
    components: { BasicTable, TableAction, Authority, Popconfirm, AddMethod, ViewMethod },
    setup() {
      const [registerModal, { openModal: openModal }] = useModal();
      const [registerModalT, { openModal: openModalT }] = useModal();
      //权限控制标识
      const bottomAuthority = 'api:groundDisasterId:muSourceData:';
      const authList = {
        addAuth: bottomAuthority + 'muSourceDataAdd', //新增权限控制
        deleteAuth: bottomAuthority + 'muSourceDataDelete', //删除权限控制
        auditAuth: bottomAuthority + 'muSourceDataAudit', //详情
        editAuth: bottomAuthority + 'muSourceDataEdit', //修改
      };
      /**
       * 新增
       */
      function addMethod() {
        openModal(true, {
          isUpdate: false,
        });
      }
      /**
       * 预览
       */

      function previewMethod(record) {
        window.open(record.fbdz.includes('http') ? record.fbdz : 'http://' + record.fbdz);
      }
      /**
       * 详情
       */
      function viewMethod(record) {
        openModalT(true, {
          record,
        });
      }
      /**
       * 修改
       */
      function updateMethod(record) {
        openModal(true, {
          record,
          isUpdate: true,
        });
        console.log(record, getSelectRows);
      }

      const [registerTable, { setProps, reload, getSelectRows, getForm, setShowPagination }] =
        useTable({
          title: '服务管理',
          api: getPage,
          columns: columns,
          formConfig: {
            autoSubmitOnEnter: true,
            labelWidth: 120,
            schemas: [
              {
                field: 'searchStr',
                label: '关键字',
                componentProps: {
                  maxLength: 32,
                  placeholder: '请输入数据名称、数据编码',
                },
                component: 'Input',
                colProps: { span: 6 },
              },
              {
                field: 'scene',
                label: '使用场景',
                component: 'ApiSelect',
                componentProps: {
                  options: [
                    { label: '地形', value: '1' },
                    { label: '三维', value: '3' },
                    { label: '二维', value: '2' },
                  ],
                },
                colProps: { span: 6 },
              },
              {
                field: 'queryDate',
                label: '发布时间',
                component: 'RangePicker',
                colProps: { span: 6 },
              },
            ],
            fieldMapToTime: [['queryDate', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
          },
          beforeFetch: (params: any) => {
            const data = {
              endTime: params.endTime ? moment(params.endTime).format('YYYY-MM-DD 23:59:59') : '',
              startTime: params.startTime
                ? moment(params.startTime).format('YYYY-MM-DD 00:00:00')
                : '',
              current: params['result.pages'],
              size: params['result.size'],
              scene: params.scene,
              searchStr: params.searchStr,
              bq: '1',
            };
            return preProcessData(data);
          },
          pagination: {
            pageSize: 100,
            hideOnSinglePage: false,
          },
          useSearchForm: true,
          showTableSetting: true,
          bordered: true,
          showIndexColumn: true,
          actionColumn: {
            width: 200,
            title: '操作',
            dataIndex: 'action',
            slots: { customRender: 'action' },
            fixed: 'right',
          },
          fetchSetting: {
            pageField: 'result.pages',
            sizeField: 'result.size',
            listField: 'result.records',
            totalField: 'result.total',
          },
        });

      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
        deleteDzsbsjjr,
        handleSuccess,
        setProps
      );
      nextTick(() => {
        setProps(selectionOptions);
      });
      function handleSuccess() {
        reload();
        setShowPagination(true);
      }
      function pressEnter(val) {
        console.log(val);

        reload();
      }

      onMounted(() => {
        // const { setFieldsValue } = getForm();

        console.log(getForm().getFieldsValue());

        // setFieldsValue({ deviceProfileId: queryParams.deviceProfileId });
      });
      function preProcessData(data) {
        Object.keys(data).forEach((item) => {
          if (typeof data[item] === 'undefined' || data[item] === null || data[item] === '') {
            delete data[item];
          }
        });
        return data;
      }
      return {
        authList,
        registerTable,
        handleSuccess,
        RoleEnum,
        hasBatchDelete,
        registerModal,
        registerModalT,
        addMethod,
        previewMethod,
        viewMethod,
        updateMethod,
        handleDeleteOrBatchDelete,
        pressEnter,
      };
    },
  });
</script>
