<template>
  <div class="office-sop 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 #user="{ item, params }">
        <select-filter-user
          v-model="params[item.prop]"
          clearable
        ></select-filter-user>
      </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"
        :selected-row-keys="selectedRowKeys"
        @select-change="selectChange"
      >
        <template #code="{ col, row }">
          <more-content
            :content="row[col.colKey]"
            @action="handleDetail(row)"
          ></more-content>
        </template>
        <template #createTime="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #flowTime="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #operate="{ row }">
          <div v-if="perm.LINK_Finish" class="table-operations">
            <t-link
              :disabled="
                row.projectExchangeFlowStatus !== 'UN_APPROVE' || !row.myself
              "
              theme="primary"
              hover="color"
              @click="handleApply(row)"
            >
              处理申请
            </t-link>
          </div>
        </template>
      </t-table>
    </div>

    <!-- PlanChangeDialog -->
    <plan-change-dialog
      v-if="perm.LINK_Finish"
      v-model:visible="showPlanChangeDialog"
      :sop="curSopData"
      :type="curType"
      @confirm="fetchData"
    ></plan-change-dialog>
  </div>
</template>

<script setup name="ProjectChangeReport">
import { ref, reactive, computed } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { dictToOptionList } from '@/utils/tool';
import { omit } from 'lodash';
import { planChangeList } from '@/api/sop';
import PlanChangeDialog from '../plan-change/plan-change-dialog.vue';
import usePermission from '@/hooks/usePermission';
const { perm } = usePermission();

import {
  PLAN_CHANGE_TYPE,
  CUSTOMER_TYPE,
  FLOW_CHECK_STATUS,
} from '@/config/constants';
import { timestampFilter } from '@/utils/filter';

const selectedRowKeys = ref([]);
const selectChange = (value) => {
  selectedRowKeys.value = value;
};

const columns = [
  { colKey: 'code', title: '变更申请编号', width: 200 },
  { colKey: 'serviceName', title: '服务单元', width: 140 },
  { colKey: 'customTypeStr', title: '客户类型', width: 120 },
  { colKey: 'customName', title: '客户名称', width: 140 },
  { colKey: 'crmNo', title: '项目单号', width: 200 },
  { colKey: 'crmName', title: '项目名称', width: 140 },
  { colKey: 'reason', title: '变更原因', minWidth: 140 },
  { colKey: 'exchangeTypeStr', title: '变更类型', width: 120 },
  { colKey: 'createRealName', title: '提交人', width: 140 },
  { colKey: 'createTime', title: '提交时间', width: 180 },
  { colKey: 'projectExchangeFlowStatusStr', title: '流程状态', width: 120 },
  { colKey: 'approveUsersName', title: '处理人', width: 140 },
  { colKey: 'flowTime', title: '处理时间', width: 180 },
  {
    title: '管理',
    colKey: 'operate',
    fixed: 'right',
    width: 120,
  },
];
const curSopData = ref({});
const showPlanChangeDialog = ref(false);
const curType = ref('audit');
const handleApply = (row) => {
  curSopData.value = row;
  curType.value = 'audit';
  showPlanChangeDialog.value = true;
};
const handleDetail = async (row) => {
  curSopData.value = row;
  curType.value = 'view';
  showPlanChangeDialog.value = true;
};
const fields = ref([
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 70,
    colSpan: 6,
    cell: 'service',
  },
  {
    prop: 'createUserId',
    label: '提交人',
    type: 'select',
    labelWidth: 80,
    colSpan: 6,
    cell: 'user',
  },
  {
    prop: 'type',
    label: '变更类型',
    type: 'select',
    labelWidth: 110,
    colSpan: 6,
    options: dictToOptionList(PLAN_CHANGE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'customType',
    label: '客户类型',
    type: 'select',
    labelWidth: 80,
    colSpan: 6,
    options: dictToOptionList(CUSTOMER_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'flowStatus',
    label: '流程状态',
    type: 'select',
    labelWidth: 70,
    colSpan: 6,
    options: dictToOptionList(FLOW_CHECK_STATUS),
    attrs: {
      clearable: true,
    },
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
  {
    prop: 'customName',
    label: '客户名称',
    labelWidth: 80,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'exchangeNo',
    label: '变更申请编号',
    labelWidth: 110,
    colSpan: 6,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'time',
    label: '提交时间',
    type: 'daterange',
    labelWidth: 70,
    colSpan: 12,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
]);
const params = reactive({
  serviceId: '',
  createUserId: '',
  type: '',
  customType: '',
  flowStatus: '',
  customName: '',
  exchangeNo: '',
  time: [],
});
const transParams = computed(() => {
  return {
    ...omit(params, 'time'),
    startTime: params.time[0],
    endTime: params.time[1],
  };
});

const {
  loading: tableLoading,
  pagination,
  tableData,
  search,
  fetchData,
  onChange,
} = useFetchTable(planChangeList, {
  params: transParams,
  fetchDataHandle: () => {
    selectedRowKeys.value = [];
  },
});
</script>
