<!--
 * @Author: ysh
 * @Date: 2024-07-04 17:37:29
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-09-11 16:50:14
-->
<template>
  <div class="app-container" v-loading="loading">
    <el-empty description="未进行技术交底" v-if="isEmpty"></el-empty>
    <div v-if="!isEmpty">
      <el-button type="success" @click="openPrint = true">打印</el-button>
      <h3 class="text-center"><b>{{ form.projectNumber + '-' + form.projectName + ' 技术交底' }}</b></h3>
      <el-form ref="technicalForm" :model="form" :rules="rules" label-width="125px" disabled>
        <el-form-item label="项目编号：" prop="projectNumber">
          {{ form.projectNumber }}
        </el-form-item>
        <el-form-item label="项目名称：" prop="projectName">
          {{ form.projectName }}
        </el-form-item>
        <el-form-item label="接受交底人" prop="accepter">
          <el-select v-model="form.accepter" filterable clearable style="width:220px">
            <el-option v-for="item in userList" :key="item.userId" :label="item.nickName" :value="item.userId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="技术交底内容" prop="content">
          <el-input v-model="form.content" placeholder="请输入技术交底内容" type="textarea" :autosize="{ minRows: 8 }" />
        </el-form-item>
        <el-form-item label="附件" prop="document">
          <div v-if="form.document">
            <el-link type="primary" @click="reviewWord(`${baseUrl}${'/profile/upload' + form.document}`)">
              {{ getFileName(form.document) }}
            </el-link>
            <el-link class="ml20" type="warning" :href="`${baseUrl}${'/profile/upload' + form.document}`"
              :underline="false" target="_blank">
              <span class="el-icon-download">下载文件</span>
            </el-link>
          </div>
        </el-form-item>
        <el-form-item label="技术交底意见" prop="disclosureComment">
          <el-input v-model="form.disclosureComment" placeholder="请输入技术交底意见" type="textarea"
            :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
          <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名" prop="disclosurer">
              <span class="auditor"> {{ form.disclosureUser ? form.disclosureUser.nickName : '' }}
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
              <span> {{ parseTime(form.disclosureTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  -->
        <el-form-item label="接受交底意见" prop="acceptComment">
          <el-input v-model="form.acceptComment" placeholder="请输入接受交底意见" type="textarea" :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
          <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名">
              <span class="auditor"> {{ form.acceptUser ? form.acceptUser.nickName : '' }} </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
              <span> {{ parseTime(form.acceptTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  -->
        <el-form-item label="确认交底意见" prop="confirmComment">
          <el-input v-model="form.confirmComment" placeholder="请输入确认交底意见" type="textarea" :autosize="{ minRows: 4 }" />
        </el-form-item>
        <el-row>
          <el-col :span="6" :xs="24" :offset="12">
            <el-form-item label="签名">
              <span class="auditor"> {{ form.confirmUser ? form.confirmUser.nickName : '' }} </span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期：" label-width="120px">
              <span> {{ parseTime(form.confirmTime, '{y}-{m}-{d}') }} </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog title="技术交底表格预览" :visible.sync="openPrint" width="65%" append-to-body>
      <technical-print :form="form" @cancel="openPrint = false"></technical-print>
    </el-dialog>
  </div>
</template>

<script>
import { listTechnical, getTechnical, delTechnical, addTechnical, updateTechnical } from "@/api/oa/technical/technical";
import { listUser } from '@/api/system/user';
import { getProject } from "@/api/oa/project/project";
import technicalPrint from '../components/print/technicalPrint.vue';
export default {
  components: { technicalPrint },
  props: {
    taskForm: {
      type: Object,
      required: true
    }
  },
  computed: {
    projectNumber() {
      return this.$store.state.projectProcess.projectNumber;
    },
    projectName() {
      return this.$store.state.projectProcess.projectName;
    },
  },
  watch: {
    projectNumber(newval) {
      this.$set(this.form, "projectNumber", newval);
    },
    projectName(newval) {
      this.$set(this.form, "projectName", newval);
    },
    'taskForm.formId'() {
      this.loading = true;
      this.initForm();
    }
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      isEmpty: true,
      form: {},
      rules: {},
      userList: [],
      loading: false,
      openPrint:false,
    }
  },
  mounted() {
    this.initForm();
    this.getUserList();
  },
  methods: {
    /** 查询cmc技术方案列表 */
    initForm() {
      getTechnical(this.taskForm.formId).then((res) => {
        if (res.data) {
          this.isEmpty = false;
          this.form = res.data;
          if (this.projectNumber != '' && this.projectName != '') {
            this.$set(this.form, "projectNumber", this.projectNumber);
            this.$set(this.form, "projectName", this.projectName);
          } else {
            getProject(this.taskForm.formId).then(res => {
              if (res.data) {
                this.$set(this.form, "projectNumber", res.data.projectNumber);
                this.$set(this.form, "projectName", res.data.projectName);
                this.$set(this.form, "projectLeader", res.data.projectLeader);
                this.$set(this.form, "undertakingDept", res.data.undertakingDept);
                this.loading = false;
              }
            })
          }
        }
      });
    },
    // 查询用户列表
    getUserList() {
      listUser({ pageSize: 9999, pageNum: 1 }).then((res) => {
        this.userList = res.rows;
      });
    },
  }
}
</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>