<template>
 <div>
   <el-form ref="form" :model="form" label-width="100px">
     <headerTitle title="基本信息"></headerTitle>
     <el-row :gutter="12">
       <el-col :span="8">
         <el-form-item
           label="计划编号："
           prop="code"
           style="margin-bottom: 22px">
           {{ form.code }}
         </el-form-item>
       </el-col>
       <el-col :span="8">
         <el-form-item
           label="计划名称："
           prop="planName"
           style="margin-bottom: 22px">
           {{ form.planName }}
         </el-form-item>
       </el-col>
       <el-col :span="8">
         <el-form-item
           label="自动派单："
           prop="automatic"
           style="margin-bottom: 22px">
           {{ form.automatic ? '是' : '否' }}
         </el-form-item>
       </el-col>
     </el-row>
     <el-row :gutter="12">
       <el-col :span="8">
         <el-form-item
           label="计划时间："
           prop="planTimeStart"
           style="margin-bottom: 22px">
           {{ form.planTimeStart ? form.planTimeStart + '至' + form.planTimeEnd : '' }}
         </el-form-item>
       </el-col>
       <el-col :span="8">
         <el-form-item
           label="负责部门："
           prop="deptName"
           style="margin-bottom: 22px">
           {{ form.deptName }}
         </el-form-item>
       </el-col>
       <el-col :span="8">
         <el-form-item
           label="负责人："
           prop="responsiblePersonName"
           style="margin-bottom: 22px"
         >
           {{ form.responsiblePersonName }}
         </el-form-item>
       </el-col>

     </el-row>
     <el-row :gutter="12">
       <el-col :span="8">
         <el-form-item
           label="紧急程度："
           prop="urgencyLevel"
           style="margin-bottom: 22px">
           {{ getDictValue(form.urgencyLevel, 'logistic_urgency_level_type') }}
         </el-form-item>
       </el-col>
       <el-col :span="16">
         <el-form-item
           label="备注："
           prop="remark"
           style="margin-bottom: 22px">
           {{ form.remark }}
         </el-form-item>
       </el-col>
     </el-row>

   </el-form>
   <headerTitle title="任务信息"></headerTitle>
   <taskInfoTable ref="taskInfoRef" dialogType="view" v-if="form.trakNoteList.length"
                  :trakNoteList.sync="form.trakNoteList"></taskInfoTable>
 </div>
</template>

<script>
import {getFile} from '@/api/system/file';
import dictMixins from '@/mixins/dictMixins';
import bpmDetail from '@/views/bpm/processInstance/detail.vue';
import fileUpload from "@/components/upload/fileUpload.vue";
import personSelect from "@/components/CommomSelect/person-select.vue";
import taskInfoTable from "./taskInfoTable.vue";
import {logistictrakplanInfoAPI} from "@/api/bpm/components/transportManager/shipManage";
import {mapGetters} from "vuex";

export default {
  mixins: [dictMixins],
  components: {
    taskInfoTable,
    personSelect,
    fileUpload,
    bpmDetail
  },
  data() {
    return {
      activeComp: 'main',
      title: '详情',
      dialogType: '',
      form: {
        trakNoteList: []
      },
    };
  },
  props:{
    businessId: {
      default: ''
    }
  },
  computed: {
    ...mapGetters(['dict', 'getDict']),
    getDictValue() {
      return (val, dictCode = '') => {
        let dictList = this.dict[dictCode] || [];
        return dictList.find(item => item.dictCode == val)?.dictValue
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = '详情'
      this.dialogType = type
      await this.getInfo(this.businessId)
    },
    //获取详情
    async getInfo(id) {
      this.form = await logistictrakplanInfoAPI(id)
    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    cancel() {
      this.$emit('update:detailDialogFlag', false)
    }
  }
};
</script>

<style scoped lang="scss">
.ele-dialog-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}

.headbox {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .amount {
    font-size: 14px;
    font-weight: bold;
    margin-right: 20px;
  }
}
</style>
