<template>
  <div class="comp-content">
    <Dialog
      v-model="dialogVisible"
      diaTitle="需求详细信息"
      width="60%"
      height="80%"
      @close="closeFun"
      show-footer
    >
      <TableForm
        v-model:data="demandInfo"
        :show-disabled="true"
        ref="tableFormRef"
        tableName="SIMULATION_TASK_DEMAND_CREATE"
        :colNum="2"
        :hideKeys="['attachments']"
      >
        <template #form-downAttachments>
          <div class="attachments">
            <div class="file" v-for="item in attachmentFiles" :key="item.id">
              <span>{{ item.name }}</span>
              <el-icon size="18" @click="downloadFileById(item.id)"><Download /></el-icon>
            </div>
          </div>
        </template>
        <template #form-pMemberList>
          <el-select disabled v-model="demandInfo.pMemberList" filterable placeholder="请选择">
            <el-option
              v-for="item in deptOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </TableForm>
      <template #footer>
        <div>
          <el-button @click="closeFun">取消</el-button>
          <el-button type="primary" @click="closeFun">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import Dialog from '@/components/common/dialog/index.vue';
// import { ElMessage } from 'element-plus';
import { computed, ref, watch } from 'vue';
import TableForm from '@/components/common/table/tableForm.vue';
import { getDemandDetailApi } from '@/api/project/demand';
import { getMemberListIds } from '@/utils/task';
import { dataQueryDirApi } from '@/api/data/data';
import { downloadFileById } from '@/utils/file';
import { CommonStore } from '@/stores/common';
import { listDeptApi } from '@/api/system/departMent';

const props = defineProps<{
  showDialog: boolean;
  demandUid: string;
}>();

const commonStore = CommonStore();

const dialogVisible = computed({
  get() {
    return props.showDialog;
  },
  set(val) {
    emits('update:showDialog', val);
  },
});
const emits = defineEmits(['update:showDialog', 'confirm']);

const closeFun = () => {
  emits('update:showDialog', false);
};

const demandInfo = ref();

const tableFormRef = ref();

const getDemandInfo = async () => {
  const res: any = await getDemandDetailApi({ demandId: props.demandUid });
  if (res.code === 200) {
    demandInfo.value = {
      ...res.data,
      planTime: [res.data.beginTime, res.data.endTime],
      pMemberList: getMemberListIds(res.data.pMemberList),
      aMemberList: getMemberListIds(res.data.aMemberList),
      tMemberList: getMemberListIds(res.data.tMemberList),
    };
    tableFormRef.value.setOptionsFun('phaseId', [
      { label: res.data.phaseName, value: res.data.phaseId },
    ]);
    const simTypeList: any = commonStore.getDictData(res.data.demandType);
    tableFormRef.value.setOptionsFun('simType', simTypeList.A);
  }
};

const attachmentFiles = ref<any[]>([]);

const getAttachments = async () => {
  const res: any = await dataQueryDirApi({ uuid: props.demandUid, current: 1, size: 99 });
  attachmentFiles.value =
    res.data?.data?.map((item: { originalName: any; fileSize: any; id: number }) => {
      return {
        name: item.originalName,
        size: item.fileSize,
        id: item.id,
      };
    }) || [];
};
const deptOptions = ref<any[]>([]);
const getListDept = async () => {
  const res: any = await listDeptApi({ current: 1, size: 999 });
  if (res.code === 200) {
    deptOptions.value = res.data.data.map((item: { deptName: any; userId: any }) => {
      return {
        label: item.deptName,
        value: String(item.userId),
      };
    });
  }
};
watch(
  () => props.demandUid,
  (val) => {
    if (val) {
      getDemandInfo();
      getAttachments();
      getListDept();
    }
  }
);
</script>
<style lang="scss" scoped>
.table-box {
  height: 60vh;
}
.attachments {
  width: 100%;
  height: 100px;
  overflow-y: auto;
  .file {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-icon {
      color: var(--el-color-primary);
      cursor: pointer;
    }
  }
}
</style>
