<template>
  <ele-modal
    custom-class="ele-dialog-form long-dialog-form"
    :centered="true"
    :visible.sync="detailDialogFlag"
    :title="title"
    :close-on-click-modal="false"
    width="70%"
    :before-close="cancel"
  >
    <div class="switch_left">
      <ul>
        <li
          v-for="item in tabOptions"
          :key="item.key"
          :class="{ active: activeComp == item.key }"
          @click="activeComp = item.key"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div v-if="activeComp === 'main'">
      <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">
              <el-input v-model="form.code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="计划名称："
              prop="planName"
              >
              <el-input v-model="form.planName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="自动派单："
              prop="automatic"
              >
              <el-select v-model="form.automatic" disabled style="width: 100%">
                <el-option :value="1" label="是"></el-option>
                <el-option :value="0" label="否"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item
              label="计划时间："
              prop="planTimeStart">
              <el-input :value="form.planTimeStart ? form.planTimeStart + '至' + form.planTimeEnd : ''" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="负责部门："
              prop="responsibleDeptName">
              <el-input v-model="form.responsibleDeptName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="负责人："
              prop="responsiblePersonName">
              <el-input v-model="form.responsiblePersonName" disabled></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="12">
          <el-col :span="8">
            <el-form-item
              label="紧急程度："
              prop="urgencyLevel"
              >
              <dict-selection dict-name="计划紧急程度" disabled v-model="form.urgencyLevel"></dict-selection>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item
              label="备注："
              prop="remark">
              <el-input type="textarea" v-model="form.remark" disabled></el-input>
            </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>
    <bpmDetail v-if="activeComp === 'bpm' && form.processInstanceId" :id="form.processInstanceId"></bpmDetail>
    <div slot="footer" class="footer">
      <el-button @click="cancel">返回</el-button>
    </div>
  </ele-modal>
</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 "@/views/transportManager/shipManage/dispatchManage/components/taskInfoTable.vue";
import {logistictrakplanInfoAPI} from "@/api/transportManager/shipManage";
import {mapGetters} from "vuex";

export default {
  mixins: [dictMixins],
  props: ['detailDialogFlag'],
  components: {
    taskInfoTable,
    personSelect,
    fileUpload,
    bpmDetail
  },
  data() {
    return {
      activeComp: 'main',
      tabOptions: [
        {key: 'main', name: '申请详情'},
        {key: 'bpm', name: '流程详情'}
      ],
      title: '详情',
      dialogType: '',
      form: {
        trakNoteList: []
      },
    };
  },
  computed: {
    ...mapGetters(['dict', 'getDictValue']),
    getDict() {
      return (dictName, val) => {
        return this.getDictValue(dictName, val)
      }
    }
  },
  methods: {
    //初始化
    async init(row = {}, type) {
      this.title = '详情'
      this.dialogType = type
      await this.getInfo(row.id)
    },
    //获取详情
    async getInfo(id) {
      this.form = await logistictrakplanInfoAPI(id)
      this.form.urgencyLevel = this.form.urgencyLevel + ''
    },
    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>
