<template>
  <!-- Tab标签页 -->
  <Tabs v-model:activeKey="activeKey" class="data-quality-page" type="line">
    <TabPane key="unresolved" tab="未解决">
      <div class="add-button">
        <a-button type="primary" preIcon="mdi:page-next-outline" @click="handleOpenModal({}, 'add')"> 新增问题 </a-button>
      </div>
      <BasicTable style="padding: 0" @register="registerUnresolvedTable">
        <template #action="{ record }">
          <button @click="handleOpenModal(record, 'edit')" class="action-btn">
            <SvgIcon name="edit" />
          </button>
          <button @click="handleDeleteRecord(record)" class="action-btn">
            <SvgIcon name="delete" />
          </button>
          <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
            <SvgIcon name="resolved" />
          </button>
          <button @click="handleGoToPage(record, '/basicInfo/accessStatistics')" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>
    <TabPane key="resolved" tab="已解决">
      <BasicTable @register="registerResolvedTable">
        <template #action="{ record }">
          <button @click="handleOpenModal(record, 'view')" class="action-btn">
            <SvgIcon name="details" />
          </button>
        </template>
      </BasicTable>
    </TabPane>
  </Tabs>

  <!-- 处理弹框 -->
  <DataQualityModal @register="registerModal" @success="handleModalSuccess" />
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue';
  import { useRouter } from 'vue-router';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { Tabs, TabPane } from 'ant-design-vue';
  import DataQualityModal from './components/DataQualityModal.vue';
  import { SvgIcon } from '/@/components/Icon';
  import { columns, searchFormSchema } from './dataQuality.data';
  import { getDataQuaQueList, addDataQuaQue, deleteDataQuaQue, editDataQuaQue } from '../basicInfo.api';
  // 路由实例
  const router = useRouter();
  // 响应式数据
  const activeKey = ref('unresolved'); // 激活的Tab键
  const pageMode = ref('add');
  // 未解决表格注册
  const [registerUnresolvedTable, { reload: reloadUnresolved }] = useTable({
    api: getQuaQueListByTab(),
    // dataSource: filteredUnresolved.value,
    columns,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      showAdvancedButton: false,
      schemaGroupNames: ['常规查询', '高级查询'],
    },
    useSearchForm: true,
    pagination: true,
    striped: true,
    // bordered: true,
    showIndexColumn: false,
    indexColumnProps: {
      title: '序号',
    },
    canResize: false,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 已解决表格注册
  const [registerResolvedTable, { reload: reloadResolved }] = useTable({
    api: getQuaQueListByTab(),
    columns,
    pagination: true,
    striped: true,
    bordered: true,
    showIndexColumn: false,
    indexColumnProps: {
      title: '序号',
    },
    actionColumn: {
      width: 60,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
    rowKey: 'id',
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      showAdvancedButton: false,
    },
  });

  // 弹框注册
  const [registerModal, { openModal }] = useModal();

  /**
   * 根据标签获取表格数据（已解决/未解决）
   * @param result 弹框数据
   */
  function getQuaQueListByTab() {
    return async (params: any) => {
      const isOk = activeKey.value === 'resolved' ? true : false;
      return await getDataQuaQueList({ ...params, isOk: isOk });
    };
  }
  /**
   * 表单搜索函数
   * @param values 表单数据
   */
  function handleSearch(values: any) {
    // 刷新表格
    reloadUnresolved();
    reloadResolved();
  }

  /**
   * 打开弹框函数
   * @param result 弹框数据
   */
  function handleOpenModal(record: any, mode: 'view' | 'edit' | 'add' = 'view') {
    pageMode.value = mode;
    openModal(true, {
      record,
      mode,
    });
  }

  /**
   * 弹框结果处理函数
   * @param result 弹框数据
   */
  function handleModalSuccess(result: any) {
    if (pageMode.value === 'add') {
      console.log(result);
      addDataQuaQue(result);
    } else if (pageMode.value === 'edit') {
      editDataQuaQue(result);
    }
    // 刷新表格
    reloadUnresolved();
    reloadResolved();
  }
  /**
   * 通用页面跳转方法
   * @param record 当前行数据
   * @param path 目标路径
   */
  function handleGoToPage(record: any, path: string) {
    // 跳转时携带当前煤矿的编号作为参数（根据实际需求调整携带的参数）
    router.push({
      path,
      // query: {
      //   orderNo: record.orderNo, // 煤矿编号
      //   mineName: record.mineName // 煤矿名称
      // }
    });
  }

  /**
   * 删除记录方法
   * @param record 当前行数据
   */
  function handleDeleteRecord(record: any) {
    deleteDataQuaQue({ id: record.id });
    reloadUnresolved();
  }
</script>

<style scoped lang="less">
  .data-quality-page {
    padding: 0 12px;
    margin: 16px;
    border: 1px solid @border-color-base;
    .ant-form {
      background-color: #fff;
    }
  }
  .form-part {
    padding: 12px 10px 6px 10px;
    margin-bottom: 8px;
    background-color: #ffffff;
    border-radius: 2px;
  }
  .add-button {
    margin-bottom: 10px;
  }
  .action-btn {
    height: 30px;
    cursor: pointer;
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }
</style>
