<template>
  <approvalTypeHeader :data="data" />

  <div class="approvel-page">
    <div class="approval-operate">
      <el-form>
        <el-fomr-item label="难度系数">
          <el-select class="w200" v-model="difficult" @change="changeApprovalDifficultFun">
            <el-option
              v-for="item in difficultyTypeList"
              :key="item.uuid"
              :label="item.dictName"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-fomr-item>
      </el-form>
    </div>

    <div class="approval-content">
      <taskDetailPage
        :taskInfo="taskInfo"
        :showLeftOptions="false"
        :showPerformance="true"
      ></taskDetailPage>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref, watch } from 'vue';
import approvalTypeHeader from './approvalTypeHeader.vue';
import { getDictionaryDataApi } from '@/api/system/systemData';
import { editTaskApi, getTaskDetailApi } from '@/api/project/task';
import { ElMessage } from 'element-plus';
import taskDetailPage from '@/views/task/execution/components/taskDetailPage/index.vue';

interface Props {
  data: any;
}

const props = withDefaults(defineProps<Props>(), {
  data: {},
});
const baseTableRef = ref<any>(null);
const taskId = ref<any>('');
const taskInfo = ref<any>({});
const difficult = ref<any>('1');
// watchEffect(async () => {
//   if (props.data) {
//     const approveContents = JSON.parse(props.data?.approveContents || '{}');
//     taskId.value = approveContents?.taskId;
//     taskInfo.value = await getTaskInfo(approveContents?.taskId);
//     difficult.value = approveContents?.difficult.toString();
//     if (taskId.value) {
//       nextTick(() => {
//         baseTableRef.value.resetFun();
//       });
//     }
//   }
// });

const getTaskInfo = async (uuid: any) => {
  const param = {
    relatedResourceUuid: uuid,
  };

  try {
    const res: any = await getTaskDetailApi(param);
    if (res && res.code === 200) {
      const info: any = res.data || { uuid, status: 3 };
      info.status = 3;
      return info;
    } else {
      return { uuid, status: 3 };
    }
  } catch {
    return { uuid, status: 3 };
  }
};

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

const getDifficultyTypeFun = async () => {
  const res: any = await getDictionaryDataApi({ dictClass: 'DIFFICULTY_COEFFICIENT' });
  if (res && res.code === 200) {
    difficultyTypeList.value = res.data;
  } else {
    difficultyTypeList.value = [];
  }
};

const changeApprovalDifficultFun = async () => {
  const param = {
    editNodeList: [
      {
        uuid: taskId.value,
        nodeType: 'task',
        difficult: difficult.value,
      },
    ],
  };

  const res: any = await editTaskApi(param);
  if (res && res.code === 200) {
  } else {
    ElMessage.warning(res?.message);
  }
};

watch(
  () => props.data,
  async (newVal) => {
    const approvalData = newVal;
    const approveContents = JSON.parse(approvalData?.approveContents || '{}');
    taskId.value = approveContents?.taskId;
    taskInfo.value = await getTaskInfo(approveContents?.taskId);
    difficult.value = approveContents?.difficult.toString();
    if (taskId.value) {
      nextTick(() => {
        baseTableRef.value.resetFun();
      });
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(async () => {
  await getDifficultyTypeFun();
});
</script>

<style lang="scss" scoped>
.w200 {
  width: 200px;
}

.approvel-page {
  width: 100%;
  height: calc(100% - 50px);

  .approval-operate {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  .approval-content {
    width: 100%;
    height: calc(100% - 50px);
  }
}
</style>
