<template>
  <div class="task-performance-page">
    <el-form class="form-style" :model="taskFormData" labelPosition="left" labelWidth="120">
      <el-form-item label="任务名称">
        <el-input v-model="taskFormData.nodeName"></el-input>
      </el-form-item>
      <el-form-item label="英文名">
        <el-input v-model="taskFormData.englishName"></el-input>
      </el-form-item>
      <el-form-item label="任务状态">
        <el-select v-model="taskFormData.exeStatus">
          <el-option v-for="item in exeStatusList" :label="item.name" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="风险状态">
        <el-select v-model="taskFormData.achieveStatus">
          <el-option
            v-for="item in achieveStatusList"
            :label="item.name"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务编号">
        <el-input v-model="taskFormData.nodeCode"></el-input>
      </el-form-item>

      <el-form-item label="任务描述">
        <el-input type="textarea" v-model="taskFormData.description" :rows="4"></el-input>
      </el-form-item>

      <el-form-item label="计划开始时间">

        <el-date-picker
          v-model="taskFormData.beginTime"
          type="date"
          placeholder="选择计划开始时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="计划完成时间">

        <el-date-picker
          v-model="taskFormData.endTime"
          type="date"
          placeholder="选择计划开完成时间"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';

const props = defineProps({
  taskId: {
    type: Number,
    default: 100,
  },
  taskInfo: {
    type: Object,
    default: () => { },
  },
});

const taskFormData = reactive<any>({
  id: '',
  nodeName: '',
  englishName: '',
  exeStatus: '',
  achieveStatus: '',
  nodeType: '',
  nodeCode: '',
  memberList: '',
  beginTime: '',
  endTime: '',
  flowTemplateName: '',
  workRate: '',
  standard: '',
  days: '',
  performanceType: '',
  difficult: '',
  analyseSoftware: '',
  imageFileId: '',
  bCapacity: '',
  method: '',
  highValue: '',
  value: '',
  unit: '',
  department: '',
  section: '',
  group: '',
  description: '',
  operation: '',

});

const exeStatusList = ref([
  {
    name: '未开始',
    value: '0',
  },
  {
    name: '进行中',
    value: '1',
  },
  {
    name: '已完成',
    value: '2',
  },
  {
    name: '延期',
    value: '3',
  },
  {
    name: '终止',
    value: '4',
  },
]);

const achieveStatusList = ref([
  {
    name: '不合格',
    value: 1,
  },
  {
    name: '风险可控',
    value: 2,
  },
  {
    name: '未分析',
    value: 3,
  },
  {
    name: '合格',
    value: 4,
  },
]);

const getTaskInfoFn = () => {

  if (props.taskInfo) {

    for (const key in taskFormData) {
      taskFormData[key] = props.taskInfo[key];
    }

  }

  console.log('根据任务id获取任务详情数据' + taskFormData);

};

defineExpose({
  taskFormData,
});

onMounted(() => {
  getTaskInfoFn();

});

</script>

<style lang="scss" scoped>
.task-performance-page {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;

  .form-style {
    width: 70%;

    :deep(.el-form-item) {
      margin-bottom: 18px !important;
    }
  }

}
</style>
