<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 { searDkbm } from '../../views/zcgl/wrcdfxpg/api'

  const wrdkid = ref('')
  const mxwrwId = ref('')
  const optionsWrdk = ref([])
  
  const searchFormSchema: FormSchema[] = [
    {
        label: '地块编码',
        field: 'wrdkid',
        component: 'Select',
        colProps: { span: 10 },
        componentProps: ({ formModel, formActionType }) => {
          return {
            showSearch: true,
            filterOption: false,
            options: optionsWrdk.value,
            fieldNames: { label: 'wrdkmcid', value: 'wrdkid'} ,
            onSearch: (val: any) => {
              const { updateSchema } = formActionType;
              if (!val || val.length <3) {
                return
              }
              searchdk({wrdkbm: val}, updateSchema, formActionType, formModel)
            }
          };
        },
    },
    {
      label: '污染物',
      field: 'mxwrwId',
      component: 'ApiSelect',
      colProps: { span: 6 },
      componentProps: () => {
        return {
          onChange: (val: any) => {
            mxwrwId.value = val
          },
        }
      },
    }
  ];

    const searchdk = (data, updateSchema, formActionType, formModel) =>{
      searDkbm(data).then(res =>{
        res.forEach(element => {
          element.wrdkmcid = element.wrdkbm + '—' + element.wrdkmc
        });
        optionsWrdk.value = res
        updateSchema({
          field: 'wrdkid',
          component: 'Select',
          componentProps: {
            showSearch: true,
            filterOption: false,
            options: optionsWrdk.value,
            fieldNames: { label: 'wrdkmcid', value: 'wrdkid'} ,
            onSearch: (val: any) => {
              const { updateSchema } = formActionType;
              if (!val || val.length <3) {
                return
              }
              searchdk({wrdkbm: val}, updateSchema, formActionType, formModel)
              
            },
            onChange: (val: any) => {
              const { updateSchema } = formActionType;
              formModel.mxwrwId = undefined;
              if (val) {
                wrdkid.value = val
                updateSchema({
                  field: 'mxwrwId',
                  ifShow: true,
                  componentProps: {
                    api: getJsWrwlist,
                    params:{wrdkid: val},
                    labelField: 'wrwmc',
                    valueField: 'id',
                  },
                });
              } else {
                updateSchema({
                  field: 'mxwrwId',
                  ifShow: true,
                  componentProps: {
                    api: undefined,
                    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) => {
        params.wrdkid = wrdkid.value;
        params.mxwrwId = mxwrwId.value;
      },
      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) => {
        params.wrdkid = wrdkid.value;
        params.mxwrwId = mxwrwId.value;
      },
      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>
