<template>
  <!-- 报废单审批及处理 -->
  <basic-container>
    <div v-loading="pageLoading" style="min-height: 750px">
      <el-form ref="form" :model="form"  label-width="140px"
        label-position="top">
        <div class="header">
          <img
            :src="icon"
            alt="..."
            style="transform: translateY(4px); margin-right: 10px"
          />
          <span class="header-text">仪器设备报废申报单</span>
        </div>
        <!-- 第一组 -->
        <el-main
          style="width: 100%; height: 100%; margin-left: 20px; margin-top: 30px"
        >
          <div class="add_all">
            <h1
              style="
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 20px;
              "
            >
              <span
                style="
                  border-left: 4px solid blue;
                  margin-top: -20px;
                  height: 15px;
                  display: inline-block;
                  transform: translateY(2px);
                "
              >
              </span
              >&ensp;<b>报修基本信息</b>
            </h1>
          </div>
          <el-row>
            <el-col :span="6">
              <el-form-item label="设备及标准物名称">
                <el-input v-model="form.name" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备员">
                <el-input v-model="form.equipmentName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发起日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.createTime"
                  style="width: 100%"
                  readonly
                />
              </el-form-item>
            </el-col>
             <el-col :span="6">
              <el-form-item label="设备及标准物编号">
                <el-input v-model="form.code" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
           
            <el-col :span="6">
              <el-form-item label="规格型号">
                <el-input v-model="form.model" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="购置日期">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.purchaseTime"
                  style="width: 100%"
                  readonly
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="处理情况">
                <el-input
                  v-model="form.handling"
                  placeholder="请输入处理情况"
                  :readonly="flag"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="金额(元)">
                <el-input-number
                  v-model="form.money"
                  controls-position="right"
                  placeholder="请输入金额"
                  :min="0"
                  :disabled="flag"
                  style="width:74%"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="23">
              <el-form-item label="报废原因及技术状况" label-width="100px">
                <el-input
                  type="textarea"
                  v-model="form.reasonAndState"
                  placeholder="请输入报废原因及技术状况"
                  :rows="3"
                  :readonly="flag"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二组 -->
          <div class="add_all" v-if="this.status !== 0">
            <h1
              style="
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 20px;
              "
            >
              <span
                style="
                  border-left: 4px solid blue;
                  margin-top: -20px;
                  height: 15px;
                  display: inline-block;
                  transform: translateY(2px);
                "
              >
              </span
              >&ensp;<b>报废申请表确认</b>
            </h1>
          </div>
          <el-row v-if="this.status !== 0">
            <el-col :span="6">
              <el-form-item label="部门负责人">
                <el-input v-model="form.applyDeptUserName" readonly></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="确认时间">
                <el-input v-model="form.applyDate" readonly></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三组 -->
          <div class="add_all" v-if="this.status">
            <h1
              style="
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 20px;
              "
            >
              <span
                style="
                  border-left: 4px solid blue;
                  margin-top: -20px;
                  height: 15px;
                  display: inline-block;
                  transform: translateY(2px);
                "
              >
              </span
              >&ensp;<b>报废申请表审核</b>
            </h1>
          </div>
          <el-row>
            <template v-if="this.status > 1">
              <el-col :span="6">
                <el-form-item label="技术负责人姓名" label-width="100px">
                  <el-input
                    v-model="form.businessOfficeName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="审核时间">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.reviewDate"
                    style="width: 100%"
                    readonly
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <el-row>
            <el-col :span="23" v-if="this.status">
              <el-form-item label="审核意见" >
                <el-input
                  placeholder="请输入审核意见"
                  type="textarea"
                  v-model="form.reviewComments"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第四组 -->
          <div class="add_all" v-if="this.status > 1">
            <h1
              style="
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 20px;
              "
            >
              <span
                style="
                  border-left: 4px solid blue;
                  margin-top: -20px;
                  height: 15px;
                  display: inline-block;
                  transform: translateY(2px);
                "
              >
              </span
              >&ensp;<b>报废申请表审批</b>
            </h1>
          </div>
          <el-row>
            <template v-if="this.status > 2">
              <el-col :span="6">
                <el-form-item label="中心主任姓名" label-width="100px">
                  <el-input
                    v-model="form.centerDirectorName"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="审批时间">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="form.approvalDate"
                    style="width: 100%"
                    readonly
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="23" v-if="this.status > 1">
              <el-form-item label="审批意见" label-width="100px">
                <el-input
                  type="textarea"
                  v-model="form.approvalComments"
                  :rows="3"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第五组 -->
          <el-row>
            <el-col span="23">
              <el-form-item label="备注" label-width="100px">
                <el-input
                  type="textarea"
                  v-model="form.remark"
                  :rows="3"
                  placeholder="请输入备注"
                  :readonly="flag"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-main>
      </el-form>
      <div class="footer">
        <el-button class="cus-cencel" @click="back" size="small">返回</el-button>
        <el-button
          type="primary"
          class="cus-confirm"
          @click="submit"
          size="small"
          :loading="subLoading"
          >提交</el-button
        >
      </div>
    </div>
  </basic-container>
</template>

<script>
import { mapGetters } from "vuex";

// import { getUserInfo } from "@/api/system/user"; //权限判定
import { confirmUpdate, add } from "@/api/lims/confirm";
export default {
  data() {
    return {
      icon: require("@/assets/img/weituodan.png"),
      form: {
        //设备名称
        name: "",
        //仪器编号
        code: "",
        //仪器设备类型
        type: "",
        //型号
        model: "",
        //确认时间
        applyDate: "",
        //申请日期
        createTime: "",
        //制造商
        manufacturer: "",
        //申请人
        equipmentName: "",
        //故障现象及用户要求
        reasonAndState: "",
        //申请维修部门
        name: "",
        //部门负责人
        applyDeptUserName: "",

        //业务室姓名
        businessOfficeName: "",
        //审核时间
        reviewDate: "",
        //审核意见
        reviewComments: "",
        //中心主任姓名
        centerDirectorName: "",
        //审批时间
        approvalDate: "",
        //审批意见
        approvalComments: "",
        //维修人
        maintainer: "",
        //维修时间
        maintainerDate: "",
        //维修记录
        maintenanceRecord: "",
        //验收人
        acceptedName: "",
        //验收时间
        acceptedDate: "",
        //用户意见
        userComments: "",
        //备注
        remark: "",
        // 购置日期
        purchaseTime: "",
        // 处理情况
        handling: "",
        // 金额
        money: "",
      },
      //状态
      status: 0,
      //当前行id
      id: "",
      instrumentId: "",
      flag: false,
      subLoading: false,
    };
  },
  created() {
    // 渲染表单
    this.fromList();
    // // 获取用户信息
    // this.getUserInfoList()
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    back() {
      if (this.$route.query.flag === 1) {
        this.$router.push("/limsConfig/equipmentManage");
      } else {
        this.$router.push("/repair/confirm");
      }
    },
    /**
     * 费用变动
     */
    changeCost() {
      this.form.totalCost =
        Number(this.form.laborCost) + Number(this.form.materialCost);
    },
    /**
     * 取当前用户的的信息
     */
    // async getUserInfoList(){
    //   const { data: { data: { id, name, deptName } } } = await getUserInfo();
    //   // 申请人id
    //   this.form.applyUser = id
    //   //申请人
    //   this.form.applyUserName = name
    //   //验收人
    //   this.form.acceptedName = name
    //   //申请维修部门
    //   this.form.name = deptName
    // },
    /**
     * 渲染表单
     */
    fromList() {
      let { row } = this.$route.query;
      row = JSON.parse(row);
      for (const key in this.form) {
        this.form[key] = row[key];
      }
      // 特殊属性的给默认值
      // this.form.workingHours = 0;
      // this.form.laborCost = 0;
      // this.form.materialCost = 0;
      // this.form.totalCost = 0;
      this.status = row.status;
      if (this.$route.query.flag === 1) {
        this.instrumentId = row.id;
      } else {
        this.flag = true;
        this.id = row.id;
        this.instrumentId = row.instrumentId;
      }
      this.form.equipmentName = this.userInfo.real_name;
    },
    /**
     * 按钮报修单提交
     */
    submit() {
      this.subLoading = true;
      if (this.$route.query.flag === 1) {
        let params = {
          status: this.status + 1,
          instrumentId: String(this.instrumentId),
          ...this.form,
          money: String(this.form.money),
        };
        add(params)
          .then((res) => {
            this.$message.success("提交成功");
            this.subLoading = false;
          })
          .catch((err) => {
            this.$message.error("提交失败");
            this.subLoading = false;
          });
      } else {
        let params = {
          status: this.status + 1,
          ...this.form,
          instrumentId: this.instrumentId,
          money: String(this.form.money),
          id: this.id,
        };
        confirmUpdate(params)
          .then((res) => {
            this.$message.success("确认成功");
          })
          .catch((err) => {
            this.$message.error("确认失败");
            this.subLoading = false;
          });
      }
      const tag = this.$store.getters.tagList.find(
        (item) => item.value === this.$route.fullPath
      );
      this.$store.commit("DEL_TAG", tag);
      this.$router.push({ path: "/repair/confirm" });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  padding-top: 20px;
  margin-bottom: 40px;
  box-sizing: border-box;

  .header-text {
    font-weight: 700;
    font-size: 22px;
  }
}
/deep/ .el-input__inner {
  width: 300px !important;
}
.footer {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}

</style>
