<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="计算结果" width="70%" :footer="null" @cancel="handleCancel">
    <BasicTable @register="registerTable1" v-if="mode === '1'">
      <!-- 查询条件与表格之间的插槽 -->
      <template #extra-toolbar>
        <a-radio-group v-model:value="mode">
          <a-radio-button value="1">查看参数信息</a-radio-button>
          <a-radio-button value="2">查看计算信息</a-radio-button>
        </a-radio-group>
      </template>
      <template #jssz1="{ record }">
        <span v-if="record.jstype === 1 || record.jstype === 3">{{ record.jssz1 }}</span>
      </template>
      <template #jssz2="{ record }">
        <span v-if="record.jstype === 2 || record.jstype === 3">{{ record.jssz2 }}</span>
      </template>
    </BasicTable>
    <BasicTable @register="registerTable2" v-if="mode === '2'">
      <template #extra-toolbar>
        <a-radio-group v-model:value="mode">
          <a-radio-button value="1">查看参数信息</a-radio-button>
          <a-radio-button value="2">查看计算信息</a-radio-button>
        </a-radio-group>
      </template>
      <template #jssz1="{ record }">
        <span v-if="record.jstype === 1 || record.jstype === 3">{{ record.jssz1 }}</span>
      </template>
      <template #jssz2="{ record }">
        <span v-if="record.jstype === 2 || record.jstype === 3">{{ record.jssz2 }}</span>
      </template>
    </BasicTable>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { BasicColumn } from '/@/components/Table';
  import { JsCsjg, Jsjg, getJsWrwlist } from '@/views/zcgl/wrcdfxpg/api';
  import { FormSchema } from '/@/components/Table';
  import { useRouter } from 'vue-router';
  let router = useRouter();
  const param = ref<any>(router.currentRoute.value.query);
  const props = defineProps({
    wrdkid: {
      type: String,
      default: '',
    },
  });
  const searchFormSchema: FormSchema[] = [
    {
      label: '污染物',
      field: 'mxwrwId',
      component: 'ApiSelect',
      colProps: { span: 6 },
      componentProps: () => {
        return {
          sync: false,
          params: {
            wrdkid: param.value.wrdkid || props.wrdkid,
          },
          api: getJsWrwlist,
          resultField: 'records',
          labelField: 'wrwmc',
          valueField: 'id',
        }
      },
    },
  ];
  const columns1: BasicColumn[] = [
    {
      title: '参数符号',
      dataIndex: 'csfh',
      resizable: true,
    },
    {
      title: '参数名称',
      dataIndex: 'csmc',
      resizable: true,
    },
    {
      title: '单位',
      dataIndex: 'csdw',
      resizable: true,
    },
    {
      title: '第一类用地推荐值',
      dataIndex: 'jssz1',
      resizable: true,
    },
    {
      title: '第二类用地推荐值',
      dataIndex: 'jssz2',
      resizable: true,
    },
    {
      title: '说明',
      dataIndex: 'bz',
      resizable: true,
    },
  ];
  const columns2: BasicColumn[] = [
    {
      title: '参数',
      dataIndex: 'gscs',
      resizable: true,
    },
    {
      title: '描述',
      dataIndex: 'gsms',
      resizable: true,
    },
    {
      title: '第一类用地推荐值',
      dataIndex: 'jssz1',
      resizable: true,
    },
    {
      title: '第二类用地推荐值',
      dataIndex: 'jssz2',
      resizable: true,
    },
  ];
  const { tableContext: tableContext1 } = useListPage({
    tableProps: {
      title: '',
      beforeFetch: async (params) => {
        console.log('*第一个-1*', param.value.wrdkid);
        console.log('*第一个-2*', props.wrdkid);
        params.wrdkid = param.value.wrdkid || props.wrdkid;
      },
      api: JsCsjg,
      afterFetch(res: any) {
        let arr = [...columns1];
        if (res[0]?.jstype === '1') {
          arr = columns1.filter((column: any) => column.dataIndex !== 'jssz2');
        }
        if (res[0]?.jstype === '2') {
          arr = columns1.filter((column: any) => column.dataIndex !== 'jssz1');
        }
        setColumns1(arr);
      },
      columns: columns1,
      canResize: false,
      showIndexColumn: true,
      showActionColumn: false,
      formConfig: {
        schemas: searchFormSchema,
      },
    },
  });
  const { tableContext: tableContext2 } = useListPage({
    tableProps: {
      title: '',
      beforeFetch: async (params) => {
        console.log('*第二个-1*', param.value.wrdkid);
        console.log('*第二个-2*', props.wrdkid);
        params.wrdkid = param.value.wrdkid || props.wrdkid;
      },
      api: Jsjg,
      afterFetch(res: any) {
        let arr = [...columns2];
        if (res[0]?.jstype === '1') {
          arr = columns2.filter((column: any) => column.dataIndex !== 'jssz2');
        }
        if (res[0]?.jstype === '2') {
          arr = columns2.filter((column: any) => column.dataIndex !== 'jssz1');
        }
        setColumns2(arr);
      },
      columns: columns2,
      canResize: false,
      showIndexColumn: true,
      showActionColumn: false,
      formConfig: {
        schemas: searchFormSchema,
      },
    },
  });
  const mode = ref('1');
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    mode.value = '1';
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
  });
  const [registerTable1, { setColumns: setColumns1 }, {}] = tableContext1;
  const [registerTable2, { setColumns: setColumns2 }, {}] = tableContext2;
  const handleCancel = () => {
    mode.value = '';
  };
</script>
