<template>
  <BaseTable
    ref="tableRef"
    showIndex
    :tableName="tableName"
    :params="{ ...params, sortOrder: 1 }"
    :api="api"
    :searchLimitNum="3"
    @searchChange="changeFun($event, 'search')"
    v-bind="$attrs"
    @load="tableOnLoadFun"
    :exportApi="exportDemandApi"
    :exportFileName="exportFileName"
    :exportParams="{ ...params, sortOrder: 1 }"
    fullHeight
    :action-list="actionList"
  >
    <template #leftOptions>
      <slot name="leftOptions"> </slot>
    </template>
    <template #relationTask="{ row }">
      <span class="see-relation-task-btn" @click="showTaskListDialogFun(row)">查看</span>
    </template>
    <!-- <template #demandStatus="{row}">

    </template> -->
    <template #demandStatus="{ row }">
      <StatusDot
        :status="demandStatus(row.demandStatus)"
        :title="DEMAND_STATUS_MAP[row.demandStatus as keyof typeof DEMAND_STATUS_MAP]"
      />
    </template>
    <!-- <template #achieveStatus="{row}">
      {{ TASK_CALCULATE_STATUS_OBJ[row.achieveStatus as keyof typeof DEMAND_STATUS_MAP] || '未分析' }}
    </template> -->
    <template #achieveStatus="{ row }">
      <StatusDot
        :status="getTaskAchieveStyleClass(row.achieveStatus)"
        :title="
          TASK_CALCULATE_STATUS_OBJ[row.achieveStatus as keyof typeof DEMAND_STATUS_MAP] || '未分析'
        "
      />
    </template>
    <template #progress="{ row }"> {{ row.progress || 0 }}% </template>
    <template #approvalStatus="{ row }">
      {{ row.approvalStatus || '未审批' }}
    </template>
    <template #attachments="{ row }">
      <el-link type="primary" @click="seeAttachments(row.uuid)">查看附件</el-link>
    </template>
    <template #demandType="{ row }">
      {{ DEMAND_TYPE.O[row.demandType] }}
    </template>
    <template #simType="{ row }">
      {{ disposeSimType(row.demandType, row.simType) }}
    </template>
    <template #projectId="{ row }">
      {{ row.projectName }}
    </template>
    <template #phaseId="{ row }">
      {{ row.phaseName }}
    </template>
    <template #workspace="{ row }">
      {{ row.workspaceName }}
    </template>
    <template #pMemberList="{ row }">
      <!-- {{ row.pMemberList }} -->
      {{ disposeMemberList(row, 'pMemberList') }}
    </template>
    <template #aMemberList="{ row }">
      {{ disposeMemberList(row, 'aMemberList') }}
    </template>
    <template #tMemberList="{ row }">
      {{ disposeMemberList(row, 'tMemberList') }}
    </template>
    <template #demandName="{ row }">
      <span v-if="nameClick" class="see-relation-task-btn" @click="nameClickFun(row)">
        {{ row.demandName }}
      </span>
      <span v-else>
        {{ row.demandName }}
      </span>
    </template>
    <template #isMoldMaking="{ row }">
      <span v-if="row?.isMoldMaking">
        {{ IS_MOLD_MARKING.O[row.isMoldMaking] }}
      </span>
      <span v-else> -- </span>
    </template>
    <template #materialNo="{ row }">
      <span v-if="row?.isMoldMaking === 'Y'">{{ row.materialNo }}</span>
      <span v-else> -- </span>
    </template>
  </BaseTable>
  <attachments :demandId="demandInfo.uuid" v-model:visible="attachmentsVisible"></attachments>
  <TaskListDialog
    v-model:showDialog="showTaskListDialog"
    :demandUid="demandInfo.uuid"
    :projectUid="demandInfo.projectUid"
    :phaseUid="demandInfo.phaseUid"
  ></TaskListDialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, type PropType } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { getChildrenNodeList } from '../../projectDetail/components/projectApi';
import { NODE_TYPE } from '@/utils/enum/node';
import { CommonStore } from '@/stores/common';
import attachments from '@/views/task/simulationTask/components/attachments.vue';
import { disposeMemberList } from '../../projectDetail/components/project';
import { useDict } from '@/utils/useDict';
import { disposeSimType } from '@/utils/task';
import { DEMAND_STATUS_MAP, TASK_CALCULATE_STATUS_OBJ } from '@/utils/enum/task';
import { setDemandSearchOptions } from '../taskPage';
import { exportDemandApi } from '@/api/project/demand';
import StatusDot from '@/components/common/statusDot/index.vue';
import { demandStatus, getTaskAchieveStyleClass } from '@/components/common/statusDot/statusMap';
import TaskListDialog from './taskListDialog.vue';

defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
  tableName: {
    type: String,
    default: '',
  },
  api: {
    type: Function as PropType<(params: any) => Promise<any>>,
    default: () => {},
  },
  exportFileName: {
    type: String,
    default: '',
  },
  actionList: {
    type: Array,
    default: () => [],
  },
  nameClick: {
    type: Boolean,
    default: true,
  },
});

const commonStore = CommonStore();

const { DEMAND_TYPE, IS_MOLD_MARKING } = useDict('DEMAND_TYPE', 'IS_MOLD_MARKING');
const emits = defineEmits(['show']);

const attachmentsVisible = ref(false);

const tableRef = ref();

const tableFormRef = ref();

const demandInfo = reactive({
  id: 0,
  uuid: '',
  projectUid: '',
  phaseUid: '',
});

const changeFun = async (val: any, type: string) => {
  let optionRef: any;
  if (type === 'search') {
    optionRef = tableRef.value;
  } else {
    optionRef = tableFormRef.value;
  }
  if (val.key === 'projectId') {
    let nodeType = '';
    let nextKey = '';
    let nodeId = '';
    if (val.key === 'projectId') {
      nodeType = NODE_TYPE.PHASE;
      nextKey = 'phaseId';
      nodeId = val.data.projectId;
    }
    if (nodeId) {
      const optionList = await getPhaseList(nodeType, nodeId);
      optionRef.setOptionsFun(nextKey, optionList);
    } else {
      optionRef.setOptionsFun(nextKey, []);
      optionRef?.setSearchParamsFun({
        ...optionRef?.getSearchParamsFun(),
        phaseId: '',
      });
    }
  }
  if (val.key === 'demandType') {
    const simTypeList: any = commonStore.getDictData(val.data.demandType);
    optionRef.setOptionsFun('simType', simTypeList.A);
  }
};
const getPhaseList = async (nodeType: string, projectUuid: string) => {
  let optionList = await getChildrenNodeList(nodeType, projectUuid);
  optionList = optionList.map((item: any) => {
    return {
      label: item.nodeName,
      value: item.uuid,
    };
  });
  return optionList;
};

const seeAttachments = (demandUId: string) => {
  attachmentsVisible.value = true;
  demandInfo.uuid = demandUId;
};

const tableOnLoadFun = () => {
  setDemandSearchOptions(tableRef.value);
};

const showTaskListDialog = ref(false);

const showTaskListDialogFun = (row: any) => {
  demandInfo.uuid = row.uuid;
  demandInfo.projectUid = row.projectId;
  demandInfo.phaseUid = row.phaseId;
  showTaskListDialog.value = true;
};

const nameClickFun = (row: any) => {
  emits('show', row);
};

// const searchChange = async (val: any) => {
//     const optionList = await getPhaseList(nodeType, nodeId);
//     tableFormRef.value.setOptionsFun(nextKey, optionList);
// };
defineExpose({ tableRef });
onMounted(() => {});
</script>
<style lang="scss" scoped>
.see-relation-task-btn {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
