<template>
  <div class="project-monitor flex flex-col h-full">
    <SearchForm :fields="fields" :params="params" :search="search">
      <template #service="{ item, params }">
        <select-service-unit v-model="params[item.prop]"></select-service-unit>
      </template>
      <template #customer="{ item, params }">
        <select-customer v-model="params[item.prop]"></select-customer>
      </template>
      <template #buttons>
        <t-button theme="primary" @click="search">搜索</t-button>
      </template>
    </SearchForm>

    <div class="flex-1 page-wrap">
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
        }"
        v-loading="tableLoading"
      >
        <template #regionCoordinator="{ col, row }">
          <t-link
            theme="primary"
            hover="color"
            @click="showCard(row.regionCoordinator?.userId)"
          >
            {{
              row.regionCoordinator
                ? row.regionCoordinator?.supplierName +
                  '_' +
                  row.regionCoordinator?.userName +
                  '_' +
                  row.regionCoordinator?.mobileNumber
                : ''
            }}
          </t-link>
        </template>
        <template #projectManager="{ col, row }">
          <t-link
            theme="primary"
            hover="color"
            @click="showCard(row.projectManager?.userId)"
          >
            {{
              row.projectManager?.supplierName +
              '_' +
              row.projectManager?.userName +
              '_' +
              row.projectManager?.mobileNumber
            }}
          </t-link>
        </template>
        <template #engineerList="{ col, row }">
          <t-link
            theme="primary"
            hover="color"
            v-for="(item, index) in row.engineerList || []"
            @click="showCard(item.userId)"
          >
            {{
              item?.supplierName +
              '_' +
              item?.userName +
              '_' +
              item?.mobileNumber
            }}
            <span
              v-if="
                row.engineerList?.length &&
                index !== row.engineerList.length - 1
              "
              >、</span
            >
          </t-link>
        </template>
        <template #process="{ col, row }">
          {{ PROJECT_PROCESS[row.process] }}
        </template>
      </t-table>
    </div>
    <WorkCard
      v-if="showCardFlag"
      @close="showCardFlag = false"
      :userId="userId"
    ></WorkCard>
  </div>
</template>
<script name="ProjectMonitor" setup>
import { reactive, ref } from 'vue';
import { PROJECT_PROCESS } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import { projectMonitorList } from '@/api/sop';
import useFetchTable from '@/hooks/useFetchTable';

const showCardFlag = ref(false);
const userId = ref();
const showCard = (id) => {
  if (id) {
    userId.value = id;
    showCardFlag.value = true;
  }
};

const fields = ref([
  {
    prop: 'serviceUnitId',
    label: '服务单元',
    cell: 'service',
    labelWidth: 70,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'customerId',
    label: '客户',
    cell: 'customer',
    labelWidth: 70,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'process',
    label: '进度',
    labelWidth: 70,
    type: 'select',
    options: [...dictToOptionList(PROJECT_PROCESS)],
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'buttons',
    colSpan: 4,
    labelWidth: 16,
  },
]);
const params = reactive({
  serviceUnitId: '',
  customerId: '',
  process: '',
});

const columns = [
  { colKey: 'customName', title: '客户名称', minWidth: 100, fixed: 'left' },
  { colKey: 'crmName', title: '项目名称', width: 140 },
  { colKey: 'courseName', title: '科目名称', width: 120 },
  { colKey: 'process', title: '当前进度', width: 100 },
  { colKey: 'leadName', title: '大区经理', width: 120 },
  { colKey: 'regionCoordinator', title: '区域协调人', width: 300 },
  { colKey: 'projectManager', title: '项目经理', width: 300 },
  { colKey: 'engineerList', title: '工程师', width: 300 },
];

const {
  loading: tableLoading,
  pagination,
  tableData,
  search,
  fetchData,
  onChange,
} = useFetchTable(projectMonitorList, {
  params: params,
});
</script>
<style lang="less" scoped></style>
