<template>
  <div>
    <div class="py-4 bg-[#fff] w-[99%] mx-auto mt-2">
      <a-button type="primary" @click="router.back()" style="margin-left: 10px">返回</a-button>
    </div>
    <div class="bg-[#fff] py-4" style="width: 99%; margin: 0 auto; margin-top: 10px">
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="地块调查阶段">
          <a-spin :spinning="spinning">
            <a-table :columns="columns" :data-source="dkdcTable" bordered>
              <template #bodyCell="{ column, text, record, index }">
                <template v-if="column.dataIndex === 'ydlx'">
                  <span>
                    {{ text == '1' ? '土壤点' : text == '2' ? '地下水点' : text == '3' ? '基坑样点' : '' }}
                  </span>
                </template>
                <template v-if="column.dataIndex === 'status'">
                  <span>
                    {{ text == '0' ? '未完成' : text == '1' ? '已完成' : '' }}
                  </span>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                  <div>
                    <a-button type="primary" size="small" @click="ydzsOpen(record)" :disabled="record.ydzs != '0'" style="margin-right: 15px"
                      >设置总数</a-button
                    >
                    <a-button type="primary" size="small" @click="intoPage(record)">采样</a-button>
                  </div>
                </template>
              </template>
            </a-table>
          </a-spin>
        </a-tab-pane>
        <a-tab-pane key="2" :tab="tabpaneName2" v-if="route.query.pgtype && route.query.pgtype != 'null' && route.query.pgtype != 'undefined'">
          <a-spin :spinning="spinning">
            <a-table :columns="columns" :data-source="xgpgTable" bordered>
              <template #bodyCell="{ column, text, record, index }">
                <template v-if="column.dataIndex === 'ydlx'">
                  <span>
                    {{ text == '1' ? '土壤点' : text == '2' ? '地下水点' : text == '3' ? '基坑样点' : '' }}
                  </span>
                </template>
                <template v-if="column.dataIndex === 'status'">
                  <span>
                    {{ text == '0' ? '未完成' : text == '1' ? '已完成' : '' }}
                  </span>
                </template>
                <template v-if="column.dataIndex === 'operation'">
                  <div>
                    <a-button type="primary" size="small" @click="ydzsOpen(record)" style="margin-right: 15px" :disabled="record.ydzs != '0'"
                      >设置总数</a-button
                    >
                    <a-button type="primary" size="small" @click="intoPage(record)">采样</a-button>
                  </div>
                </template>
              </template>
            </a-table>
          </a-spin>
        </a-tab-pane>
      </a-tabs>
    </div>
    <ydzsModal @register="registerModal" @sumbitTable="sumbitTable" />
  </div>
</template>

<script lang="ts" name="xcjd-xccy-lookData" setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { useModal } from '/@/components/Modal';
  import ydzsModal from './zsModal.vue';
  import { getCyList, setSzzs } from './api';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const [registerModal, { openModal, closeModal }] = useModal();
  let router = useRouter();
  let route = useRoute();
  const activeKey = ref('1');
  let spinning = ref<boolean>(false);
  let tabpaneName2 = ref('效果评估');
  //判断router-pagetype赋值效果评估-
  switch (route.query.pgtype) {
    case '1':
      tabpaneName2.value = '效果评估-风险管控';
      break;
    case '2':
      tabpaneName2.value = '效果评估-修复';
      break;
    case '3':
      tabpaneName2.value = '效果评估-管控与修复';
      break;
    default:
      break;
  }
  // 地块调查表格
  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      hidden: true, // 增加标识
    },
    {
      title: '样点名称',
      dataIndex: 'ydlx',
    },
    {
      title: '样点总数',
      dataIndex: 'ydzs',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '25%',
    },
  ].filter((v) => !v.hidden); // 增加filter过滤;
  let dkdcTable = ref([
    {
      ydlx: '1',
      id: '',
      ydzs: '0',
      status: '0',
    },
    {
      ydlx: '2',
      id: '',
      ydzs: '0',
      status: '0',
    },
  ]);

  let xgpgTable = ref([
    {
      id: '',
      ydlx: '1',
      ydzs: '0',
      status: '0',
    },
    {
      id: '',
      ydlx: '2',
      ydzs: '0',
      status: '0',
    },
    {
      id: '',
      ydlx: '3',
      ydzs: '0',
      status: '0',
    },
  ]);
  function ydzsOpen(params) {
    if (params.ydzs != 0) {
      createMessage.info('样点总数不为0，不可修改');
      return false;
    }
    openModal(true, {
      ...params,
      pgtype: activeKey.value == '1' ? '' : route.query.pgtype,
      wrdkid: route.query.wrdkid,
      scjdbm: activeKey.value == '1' ? 'S2' : 'S6',
    });
  }
  let Table1 = {
    ydlx: '1',
    id: '',
    ydzs: '0',
    status: '0',
  };
  let Table2 = {
    ydlx: '2',
    id: '',
    ydzs: '0',
    status: '0',
  };
  let Table3 = {
    ydlx: '3',
    id: '',
    ydzs: '0',
    status: '0',
  };
  // 页面请求之后赋值
  async function init() {
    // 请求赋值
    spinning.value = true;
    let result = await getCyList({ wrdkid: route.query.wrdkid, pgtype: route.query.pgtype });
    dkdcTable.value = result.dkjccy || dkdcTable.value;
    xgpgTable.value = result.xgpgcy || xgpgTable.value;
    // 检查对象是否在数组中 没有就添加
    if (!dkdcTable.value.find((obj) => obj.ydlx == '1')) {
      dkdcTable.value.push(Table1);
    }
    if (!dkdcTable.value.find((obj) => obj.ydlx == '2')) {
      dkdcTable.value.push(Table2);
    }
    if (!xgpgTable.value.find((obj) => obj.ydlx == '1')) {
      xgpgTable.value.push(Table1);
    }
    if (!xgpgTable.value.find((obj) => obj.ydlx == '2')) {
      xgpgTable.value.push(Table2);
    }
    if (!xgpgTable.value.find((obj) => obj.ydlx == '3')) {
      xgpgTable.value.push(Table3);
    }
    spinning.value = false;
  }
  init();
  async function sumbitTable(val) {
    // 获取modal传参 保存到表格里面
    console.log(val);
    // 调取设置总数接口
    await setSzzs(val);
    // 重新加载表格方法未解决
    closeModal();
    init();
  }
  // 跳转采样列表页
  function intoPage(record) {
    // alert('添加url跳转');
    if (record.ydzs == '0') {
      createMessage.info('请先设置总数，再填报采样信息');
    } else {
      router.push(`/xcjd/xccy/cyList?xccyId=${record.id}&ydlx=${record.ydlx}`);
    }
  }
</script>
<style scoped>
  .card-container p {
    margin: 0;
  }

  .card-container > .ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -16px;
  }

  .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
    padding: 16px;
    background: #fff;
  }

  .card-container > .ant-tabs-card > .ant-tabs-nav::before {
    display: none;
  }

  .card-container > .ant-tabs-card .ant-tabs-tab,
  [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }

  .card-container > .ant-tabs-card .ant-tabs-tab-active,
  [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
    background: #fff;
    border-color: #fff;
  }

  #components-tabs-demo-card-top .code-box-demo {
    padding: 24px;
    overflow: hidden;
    background: #f5f5f5;
  }

  [data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -8px;
  }

  [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
    background: transparent;
    border-color: transparent;
  }

  [data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
    background: #000;
  }

  [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
    background: #141414;
  }

  [data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
    background: #141414;
    border-color: #141414;
  }
</style>
