<template>
  <t-drawer
    v-model:visible="visible"
    :header="false"
    size="80%"
    :close-btn="true"
  >
    <div class="drawer-body">
      <SearchForm :params="params" :fields="fields" noBorder>
        <template #crmUserId="{ item, params }">
          <select-type-user
            v-model="params[item.prop]"
            type="ACCOUNT_MANAGER"
          ></select-type-user>
        </template>
        <template #leadId="{ item, params }">
          <select-type-user
            v-model="params[item.prop]"
            type="REGION_MANAGER"
          ></select-type-user>
        </template>
      </SearchForm>
      <div class="table-wrap flex-1 overflow-auto">
        <t-table
          size="small"
          :columns="columns"
          :data="tableData"
          bordered
          :pagination="{
            defaultCurrent: 1,
            defaultPageSize: 10,
            onChange,
            showJumper: true,
            showPageSize: false,
            total: pagination.total,
            current: pagination.pageNumber,
          }"
          v-loading="tableLoading"
        ></t-table>
      </div>
    </div>
  </t-drawer>
</template>
<script name="DetailDrawer" setup>
import { useVModel } from '@vueuse/core';
import { ref, reactive, watch } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { getDetailByProcess } from '@/api/report';
import { PROJECT_PROCESS } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  process: { type: String, default: '' },
});
watch(
  () => props.process,
  (val) => {
    params.process = val;
  }
);
const columns = [
  { colKey: 'customName', title: '客户名称' },
  { colKey: 'crmName', title: '项目名称' },
  { colKey: 'courseName', title: '"科目名称' },
  { colKey: 'process', title: '当前进度' },
  { colKey: 'leadName', title: '大区经理' },
  {
    colKey: 'regionCoordinator',
    title: '区域协调人',
    cell: 'regionCoordinator',
  },
  { colKey: 'projectManager', title: '项目经理', cell: 'projectManager' },
  { colKey: 'engineerList', title: '工程师', cell: 'engineerList' },
];
const visible = useVModel(props, 'modelValue', emit);
const params = reactive({
  serviceUnitId: '',
  crmUserId: '',
  customName: '',
  process: '',
  leadId: '',
});
const fields = ref([
  {
    prop: 'crmUserId',
    label: '客户经理',
    labelWidth: 80,
    colSpan: 4.5,
    cell: 'crmUserId',
  },
  {
    prop: 'customName',
    label: '客户名称',
    labelWidth: 80,
    colSpan: 4.5,
  },
  {
    prop: 'process',
    label: '当前进度',
    labelWidth: 80,
    colSpan: 4.5,
    type: 'select',
    options: dictToOptionList(PROJECT_PROCESS),
  },
  {
    prop: 'leadId',
    label: '大区经理',
    labelWidth: 80,
    colSpan: 4.5,
    cell: 'leadId',
  },
  {
    type: 'buttons',
    colSpan: 6,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
      {
        type: 'button',
        text: '导出',
        onClick: () => {},
      },
    ],
  },
]);

const { pagination, tableData, fetchData, search, onChange } = useFetchTable(
  getDetailByProcess,
  {
    params: params,
  }
);
</script>
<style lang="less" scoped>
.table-search {
  padding-top: 0 !important;
}
.drawer-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
