<template>
  <!--  -->
  <el-dialog  :close-on-click-modal="false" :title="$t('申请 专项培养计划')" :visible.sync="visible" width="1200px" append-to-body>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="" label-width="80px">
      <el-form-item label="年度计划">
        <el-table  :data="yearplanList"  border>
          <el-table-column label="培养员工编号" align="center" prop="staffId" :show-overflow-tooltip="true"/>
          <el-table-column label="培养员工" align="center" fixed="left" prop="staffName" :show-overflow-tooltip="true"/>
          <el-table-column label="年度培养标题" align="center" prop="name" :show-overflow-tooltip="true"/>
          <el-table-column label="年份" align="center" prop="planYear" width="100">
          </el-table-column>
          <el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true"/>
        </el-table>
      </el-form-item>
      <el-form-item label="计划列表">
        <el-table
          :data="planList"
          border
          style="width: 100%">
          <el-table-column label="培养员工编号" align="center" prop="staffId" :show-overflow-tooltip="true"/>
          <el-table-column label="培养员工" align="center" fixed="left" prop="staffName" :show-overflow-tooltip="true"/>
          <el-table-column label="培养内容" align="center" prop="plantName" :show-overflow-tooltip="true"/>
          <el-table-column label="开始日期" align="center" prop="startDate" width="100">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束日期" align="center" prop="endDate" width="100">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="具体内容" align="center" prop="classContent" :show-overflow-tooltip="true"/>
        </el-table>
      </el-form-item>
      <el-form-item :label="$t('装置经理')" prop="zzjl">
        <el-select v-model="dataForm.zzjl" filterable :placeholder="$t('请选择')+$t('装置经理')">
          <el-option
            v-for="item in userOption"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">{{ $t('提交') }}</el-button>
      <el-button @click="cancel">{{ $t('取 消') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getToken} from "@/utils/auth";
import {addStPlanApprove} from "@/api/training/spec/stapprove";
import {listPostUser} from "@/api/system/user";
import {listPlanByYearId} from "@/api/training/spec/plan";

export default {
  name: "tapprove-add",
  data() {
    return {
      visible: false,
      yearplanList: [],
      planList: [],
      userOption:[],
      fileTips: '',
      showDelay: false,
      dataForm: {
        id: 0,
        approveType: 8,
        planId: '',
        zzjl: '',
      },
      conOptions: [],
      doc: {
        file: "",
        // 是否显示弹出层（报告附件）
        open: false,
        // 弹出层标题（报告附件）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 报告附件上传位置编号
        ids: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/sems/specfile/uploadFile",
        commonfileList: null,
        pType: 'traning',
        pId: null
      },
      dataRule: {
        approveType: [
          { required: true, message: this.$t('approveType') + this.$t('notEmpty'), trigger: 'blur' }
        ],
        content: [
          { required: true, message: this.$t('content') + this.$t('notEmpty'), trigger: 'blur' }
        ]
      },
      approveOption: [],
      plantOptions: [],
      belong: '',
      fileList: [],
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
  },
  methods: {
    init (row, type) {
      this.visible = true
      this.yearplanList = [row]
      this.fileList = []
      // planId 为年度计划id
      this.dataForm.planId = row.id
      listPostUser(this.queryParams).then(response => {
        this.userOption = response;
      });
      let planParam = {yearPlanId: row.id}
      listPlanByYearId(planParam).then(response => {
        this.planList = response.rows;
      });
    },

    // 审批类型字典翻译
    approveTypeFormat(row, column) {
      return this.selectDictLabel(this.approveTypeOptions, row.approveType);
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: 0,
        devType: 2,
        approveType: 7,
        devId: '',
        inspectorOne: '',
        inspectorTwo: '',
        inspectorThree: '',
        auditor: '',
        approver: '',
        checkDate: ''
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          addStPlanApprove(this.dataForm).then(response => {
              this.msgSuccess(this.$t('申请成功'));
              this.visible = false;
            });
        }
      });
      this.$emit('refreshDataList')
    },
}
}


</script>

<style scoped>

</style>
