<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="safeForm" :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="disclosureAccepter">
          <el-select v-model="form.disclosureAccepter" 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="environmentComment">
          <el-input v-model="form.environmentComment" placeholder="请输入环境管理要求" type="textarea"
            :autosize="{ minRows: 8 }" />
        </el-form-item>
        <el-form-item label="安全生产与职业健康要求" prop="outsideComment">
          <el-input v-model="form.outsideComment" placeholder="请输入安全生产与职业健康要求" type="textarea"
            :autosize="{ minRows: 8 }" />
        </el-form-item>
        <el-form-item label="信息安全管理要求" prop="insideComment">
          <el-input v-model="form.insideComment" placeholder="请输入信息安全管理要求" type="textarea" :autosize="{ minRows: 8 }" />
        </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.disclosurerUser ? form.disclosurerUser.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.accepterUser ? form.accepterUser.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>
    </div>
    <el-dialog title="安全交底表格预览" :visible.sync="openPrint" width="65%" append-to-body>
      <safe-print :form="form" @cancel="openPrint = false"></safe-print>
    </el-dialog>
  </div>
</template>

<script>
import { listSafe, getSafe, delSafe, addSafe, updateSafe } from "@/api/oa/safe/safe";
import { listUser } from '@/api/system/user';
import { getProject } from "@/api/oa/project/project";
import safePrint from '../components/print/safePrint.vue';
export default {
  components: { safePrint },
  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 {
      isEmpty: true,
      form: {},
      rules: {},
      userList: [],
      loading: false,
      openPrint: false,
    }
  },
  mounted() {
    this.initForm();
    this.getUserList();
  },
  methods: {
    /** 查询cmc技术方案列表 */
    initForm() {
      getSafe(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>