<template>
  <div class="app-container" v-loading="loading">
    <el-button type="success" @click="openPrint = true">打印</el-button>
    <h3 class="text-center"><b>{{ '调岗申请表' }}</b></h3>
    <el-form ref="transferForm" :model="form" :rules="rules" label-width="125px" disabled>
        <el-form-item label="申请人" prop="applier" >
            {{ getUserName(form.applier) }}
        </el-form-item>
        <el-row>
        <el-col :span="6" :xs="24">
            <el-form-item label="调岗前所在部门" prop="beforeDeptId" >
                {{ getDeptName(form.beforeDeptId) }}
            </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
            <el-form-item label="拟调整岗位" prop="beforePostId" >
                {{ getPostById(form.beforePostId) }}
            </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="6" :xs="24">
            <el-form-item label="调岗后所在部门" prop="beforeDeptId" >
                {{ getDeptName(form.afterDeptId) }}
            </el-form-item>
        </el-col>
        <el-col :span="6" :xs="24">
            <el-form-item label="调岗后岗位" prop="beforePostId" >
                {{ getPostById(form.afterPostId) }}
            </el-form-item>
        </el-col>
        </el-row>
        <el-form-item label="调岗前所在部门意见：" prop="beforeDeptComment">
            <el-input v-model="form.beforeDeptComment" placeholder="请输入调岗前所在部门意见" type="textarea"
            :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
            <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名" prop="deptUserId">
                <span class="auditor"> {{ form.beforeDeptLeader ? getUserName(form.beforeDeptLeader) : '' }}
                </span>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
                <span> {{ parseTime(form.beforeDeptTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="调岗后所在部门意见：" prop="afterDeptComment">
            <el-input v-model="form.afterDeptComment" placeholder="请输入调岗后所在部门意见：" type="textarea"
            :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
            <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名" prop="deptUserId">
                <span class="auditor"> {{ form.afterDeptLeader ? getUserName(form.afterDeptLeader) : '' }}
                </span>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
                <span> {{ parseTime(form.afterDeptTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="综合事务部意见：" prop="zhComment">
            <el-input v-model="form.zhComment" placeholder="请输入综合事务部意见：" type="textarea"
            :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
            <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名" prop="deptUserId">
                <span class="auditor"> {{ form.zhUserId ? getUserName(form.zhUserId) : '' }}
                </span>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
                <span> {{ parseTime(form.zhTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
            </el-col>
        </el-row>
         <el-form-item label="分管审批意见：" prop="managerComment">
            <el-input v-model="form.managerComment" placeholder="请输入分管审批意见" type="textarea"
            :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
            <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名" prop="deptUserId">
                <span class="auditor"> {{ form.managerUserId ? form.managerUser.nickName : '' }}
                </span>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
                <span> {{ parseTime(form.managerTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="总经理审批意见：" prop="zjlComment">
            <el-input v-model="form.zjlComment" placeholder="请输入总经理审批意见" type="textarea" 
            :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
            <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名" prop="deptUserId">
                <span class="auditor"> {{ form.zjlUserId ? form.zjlUser.nickName : '' }}
                </span>
            </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
                <span> {{ parseTime(form.zjlTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-dialog title="调岗申请表格预览" :visible.sync="openPrint" width="65%" append-to-body>
       <transfer-print :form="form" @cancel="openPrint = false"></transfer-print>
    </el-dialog>
  </div>
</template>

<script>
import { listTransfer, getTransfer, delTransfer, addTransfer, updateTransfer } from "@/api/oa/transfer/transfer";
import { getUser } from '@/api/system/user';
import { getProject } from "@/api/oa/project/project";
import transferPrint from '../../flowable/form/components/print/transferPrint.vue';
export default {
  components: { transferPrint },
  props: {
    taskForm: {
      type: Object,
      required: true
    }
  },
  computed: {
  },
  watch: {
    taskForm: {
      handler() {
        this.initForm();
      },
      deep: true
    }
  },
  data() {
    return {
      isEmpty: true,
      form: {},
      rules: {},
      postList: [],
      loading: false,
      openPrint: false,
    }
  },
  mounted() {
    this.initForm();
  },
  methods: {
    /** 查询cmc招聘列表 */
    initForm() {
      Promise.all([
        getTransfer(this.taskForm.formId),
        getUser(this.$store.state.user.id)
      ]).then(([transferRes, userRes]) => {
        if (transferRes.data) {
          this.isEmpty = false;
          this.form = transferRes.data;
        }
        this.postList = userRes.posts || [];
        this.loading = false;
      }).catch(error => {
        console.error('初始化数据失败:', error);
        this.loading = false;
      });
    },
    getPostById(val) {
      if (!val) {
        return '暂无岗位信息';
      }
      let postname = [];
      const postIds = val.split(",");
      postIds.map(id => {
        // 将字符ID转为数字进行比较
        const numericId = Number(id);
        const post = this.postList.find(post => post.postId == numericId);
        if (post) {
          postname.push(post.postName);
        }
      });

      const displayText = postname.join("、");
      return displayText;
    },
    }
  }
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #686a6e;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner,
.el-radio__input.is-disabled+span.el-radio__label {
  color: #686a6e;
}

::v-deep .el-radio__input.is-disabled+span.el-radio__label {
  color: #686a6e;
}
</style>