<template>
  <BasicModal v-bind="$attrs" @register="registerModal" title="计算" :width="1000" @ok="handleSubmit" @cancel="handleCancel" okText="提交" @visible-change="visibleChange">
    <a-table :columns="columns" :dataSource="jgList" :loading="loading" :pagination="false" bordered size="middle">
      <template #jssz="{ record }">
        <span v-if="params.ydlx === '1'">{{ record.jssz1 }}</span>
        <span v-if="params.ydlx === '2'">{{ record.jssz2 }}</span>
      </template>
    </a-table>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicColumn } from '/@/components/Table';
  import { mxJs, mxJsTj } from '../api';
  import { useRouter } from 'vue-router';
  let router = useRouter();
  const param = ref<any>(router.currentRoute.value.query);
  const columns: BasicColumn[] = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 50,
      align: 'center',
      customRender: ({ index }) => {
        return index + 1;
      },
    },
    {
      title: '参数',
      dataIndex: 'gscs',
      resizable: true,
      align: 'center',
    },
    {
      title: '描述',
      dataIndex: 'gsms',
      resizable: true,
      align: 'center',
    },
    {
      title: '值',
      dataIndex: 'jssz',
      resizable: true,
      align: 'center',
      slots: { customRender: 'jssz' },
    },
  ];
  const params = ref();
  const jgList = ref([]);
  const addList = ref([]);
  const loading = ref(false);
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    params.value = data.record;
    params.value.wrdkid = param.value.wrdkid;
    params.value.csList.map((item) => {
      if (data.record.ydlx === '1') {
        item.tjz = item.tjz1;
      }
      if (data.record.ydlx === '2') {
        item.tjz = item.tjz2;
      }
    });
    try {
      loading.value = true;
      const res = await mxJs(params.value);
      jgList.value = res.jgList;
      addList.value = res.addList;
    } finally {
      loading.value = false;
    }
    setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: true });
  });
  const visibleChange = async (visible) => {
    console.log('visibleChange', visible);
    if (!visible) {
      jgList.value = [];
      addList.value = [];
    }
  };
  //表单提交事件
  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      Object.assign(params.value, { addList });
      delete params.value.csList;
      await mxJsTj(params.value);
      //关闭弹窗
      closeModal();
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>
