<template>
  <BasicModal v-bind="$attrs" @register="registerModal" @ok="handleSubmit" :title="title" width="70%">
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex == 'sfoSz'">
          <span>SF。</span>
          <div>————————</div>
          <span>(g/kg-d)^-1</span>
        </template>
        <template v-if="column.dataIndex == 'iurSz'">
          <span>IUR</span>
          <div>———————</div>
          <span>(mg/m3)^-1</span>
        </template>
        <template v-if="column.dataIndex == 'rfdoSz'">
          <span>RfD。</span>
          <div>———————</div>
          <span>mg/kg-d</span>
        </template>
        <template v-if="column.dataIndex == 'rfcSz'">
          <span>Rfc。</span>
          <div>———————</div>
          <span>mg/m3</span>
        </template>
        <template v-if="column.dataIndex == 'absgiSz'">
          <span>ABSgi</span>
          <div>———————</div>
          <span>无量纲</span>
        </template>
        <template v-if="column.dataIndex == 'daSz'">
          <span>Da</span>
          <div>———————</div>
          <span>cm2/s</span>
        </template>
        <template v-if="column.dataIndex == 'dwSz'">
          <span>DW</span>
          <div>———————</div>
          <span>cm2/s</span>
        </template>
        <template v-if="column.dataIndex == 'kocSz'">
          <span>KOC。</span>
          <div>———————</div>
          <span>cm3/g</span>
        </template>
        <template v-if="column.dataIndex == 'SSz'">
          <span>S</span>
          <div>———————</div>
          <span>mg/L</span>
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicColumn } from '/@/components/Table';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable } from '@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { wrList } from '../api';
  import { wrwsearchFormSchema } from '../data';

  const dwtjColumns: BasicColumn[] = [
    {
      title: '基础信息',
      dataIndex: 'szjd',
      resizable: true,
      width: 300,
      children: [
        {
          title: '中文名',
          dataIndex: 'wrwmc',
          width: 220,
          resizable: true,
        },
        {
          title: '英文名',
          dataIndex: 'wrwem',
          width: 300,
          resizable: true,
        },

        {
          title: 'CAS编码',
          dataIndex: 'cas',
          width: 120,
          resizable: true,
        },
      ],
    },
    {
      title: '污染物毒性参数',
      dataIndex: 'szjd',
      resizable: true,
      width: 300,
      children: [
        {
          title: 'SF。/(g/kg-d)-1',
          dataIndex: 'sfoSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'sfoSjly',
          width: 120,
          resizable: true,
        },

        {
          title: 'IUR/(mg/m3)^-1',
          dataIndex: 'iurSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'iurSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'RfD。/mg/kg-d',
          dataIndex: 'rfdoSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'rfdoSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'Rfc。/mg/m3',
          dataIndex: 'rfcSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'rfcSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'ABSgi/无量纲',
          dataIndex: 'absgiSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'absgiSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'ABSd/无量纲',
          dataIndex: 'absdSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'absdSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'SAF',
          dataIndex: 'safSz',
          width: 120,
          resizable: true,
        },
        {
          title: 'WAF',
          dataIndex: 'wafSz',
          width: 120,
          resizable: true,
        },
      ],
    },
    {
      title: '污染物理化性质',
      dataIndex: 'szjd',
      resizable: true,
      children: [
        {
          title: "H'",
          dataIndex: 'HSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'HSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'Da',
          dataIndex: 'daSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'daSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'DW/cm²/s',
          dataIndex: 'dwSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'dwSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'KOC。/cm³/g',
          dataIndex: 'kocSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'kocSjly',
          width: 120,
          resizable: true,
        },
        {
          title: 'S/mg/L',
          dataIndex: 'SSz',
          width: 120,
          resizable: true,
        },
        {
          title: '数据来源',
          dataIndex: 'SSjly',
          width: 120,
          resizable: true,
        },
      ],
    },
  ];
  // Emits声明
  const emit = defineEmits(['register', 'success']);

  const { tableContext } = useListPage({
    tableProps: {
      title: '',
      api: wrList,
      columns: dwtjColumns,
      canResize: false,
      rowSelection: { type: 'radio' },
      rowKey: 'id',
      clickToRowSelect: true,
      formConfig: {
        labelWidth: 120,
        schemas: wrwsearchFormSchema,
      },
    },
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    reload();
    selectedRows.value = [];
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: true });
  });
  const [registerTable, { reload }, { rowSelection, selectedRows }] = tableContext;
  //设置标题
  const title = ref('请选择污染物');

  // 确定
  function handleSubmit() {
    //关闭弹窗
    closeModal();
    emit('success', selectedRows.value);
  }
</script>

<style lang="less" scoped></style>
