<!--
 * @Description: 审批意见
 * @Autor: renchao
 * @LastEditTime: 2023-08-16 14:39:55
-->
<template>
  <div class="spyj loadingtext">
    <div class="box">
      <div class="spyj_title">
        <div class="righttitle">审批表</div>
      </div>

      <div v-for="(item, index) in tableData" :key="index">
        <el-form
          :model="tableData[index]"
          label-width="120px"
          ref="ruleFormRef'"
        >
          <div class="spyj_form">
            <div class="item_left">
              <div class="right">{{ item.jdmc }}意见</div>
            </div>
            <div class="item_right">
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="0" class="opinion_item">
                    <el-input
                      :disabled="!viewEdit || item.show"
                      type="textarea"
                      :rows="4"
                      class="opinion"
                      placeholder="请输入审批意见"
                      v-model="item.shyj"
                    ></el-input>
                    <el-button
                      class="opinion_btn"
                      @click="commonOpinion(index)"
                      v-if="viewEdit"
                      >常用意见</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="审查人">
                    {{ item.shryxm }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item disabled label="审核时间" :key="refresh">
                    {{ item.shjssj }}
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
      <div class="submit_button" v-if="viewEdit">
        <el-button type="primary" :disabled="shows" @click="onSubmit()">保存</el-button>
      </div>
    </div>
    <!-- <el-empty v-if="isNoData" description="暂无数据"></el-empty> -->
  </div>
</template>
<script>
import { saveSpyjBySlsq, getSpyjList } from "@/api/opinion.js";
import { mapGetters } from "vuex";
import { getNewDatesh } from "@/utils/util";
export default {
  computed: {
    ...mapGetters(["userData", "yjsqOptions", "userInfo"]),
  },
  data() {
    return {
      isNoData: false,
      currentindex: 0,
      bsmSlsq: "",
      refresh: 10,
      viewEdit: false,
      bsmSlsq: this.$route.query.bsmSlsq,
      bestepid: this.$route.query.bestepid,
      propsParam: {},
      tableData: [],
      falg: false,
      falg1: false,
      jdmc: "",
      indexdqlc: 0,
      shows:false
    };
  },

  watch: {
    yjsqOptions: {
      handler(val) {
        this.add(val);
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.propsParam = this.$attrs;
    this.viewEdit = this.$parent.currentSelectTab.ableOperation;
    this.getShList();

    switch (this.$parent.dqhj) {
      case "cs":
        this.indexdqlc = 0;
        this.jdmc = "初审";
        break;
      case "fs":
        this.indexdqlc = 1;
        this.jdmc = "复审";
        break;
      case "hd":
        this.indexdqlc = 2;
        this.jdmc = "核定";
        break;
    }
  },
  methods: {
    /**
     * @description: getShList
     * @param {*} obj
     * @author: renchao
     */
    getShList() {
      this.$startLoading();
      var formdata = new FormData();
      formdata.append("bsmBusiness", this.propsParam.bsmBusiness);
      formdata.append("bestepid", this.$route.query.bestepid);

      getSpyjList(formdata).then((res) => {
        this.$endLoading();
        if (res.code === 200 && res.result) {
          this.$nextTick(() => {
               this.tableData = res.result;
          if(this.shows){
              this.shows=false
          }

          var index = this.tableData.findIndex(
            (item) => item.jddm === this.$parent.dqhj
          );
          if (index == -1) {
            switch (this.$parent.dqhj) {
              case "cs":
                this.tableData.push({ jdmc: "初审", jddm: "cs", sxh: 1 });
                break;
              case "fs":
                this.tableData.push({ jdmc: "复审", jddm: "fs", sxh: 2 });
                break;
              case "hd":
                this.tableData.push({ jdmc: "核定", jddm: "hd", sxh: 3 });
                break;
            }
          }
          this.tableData.forEach((item) => {
            item.show = true;
            if (this.$parent.dqhj == item.jddm) {
              item["stepid"] = this.$route.query.bestepid;
              item.shjssj = getNewDatesh();
              item.shkssj = getNewDatesh();
              item["shryxm"] = this.userInfo.name;
              item["userid"] = this.userInfo.id;
              item.show = false;
            }
          });
          })

        }
      });
    },
    /**
     * @description: judgment
     * @param {*} obj
     * @author: renchao
     */
    judgment(obj) {},
    /**
     * @description: onSubmit
     * @author: renchao
     */
    onSubmit() {
      this.shows=true
      this.tableData.forEach((item, index) => {
        item["bsmBusiness"] = this.propsParam.bsmBusiness;
        item["czjg"] = "1";
      });
      saveSpyjBySlsq(this.tableData).then((res) => {
        if (res.code === 200) {
          this.$message.success("保存成功");
          this.refresh += 1;
            this.getShList();
        } else {
          this.$message.error(res.message);
        }
      });
      // } else {
      //   return false;
      // }
    },
    //打开常用意见列表弹窗
    /**
     * @description: 打开常用意见列表弹窗
     * @param {*} index
     * @author: renchao
     */
    commonOpinion(index) {
      this.currentindex = index;
      this.$popupDialog(
        "常用意见",
        "workflow/components/dialog/commonOpinion",
        {},
        "70%",
        true
      );
    },
    /**
     * @description: add
     * @param {*} val
     * @author: renchao
     */
    add(val) {
      if (val != "") {
        this.$set(this.tableData[this.currentindex], "shyj", val);
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";

.spyj {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 5px;
  .box {
    overflow-x: auto;
    width: 100%;
    height: 95%;
    background: #fff;
    text-align: center;
    padding: 4px;
    overflow-y: scroll;
    padding-top: 20px;
    padding: 20px 40px;
    .spyj_title {
      width: 100%;
      height: 80px;
      border: 1px solid $borderColor;
      background-color: #eceef2;
      display: flex;
    }
    .leftadd {
      width: 3%;
      height: 100%;
      display: flex;
      font-size: 14px;
      text-indent: 20px;
      align-items: center;
      border: 1px solid $borderColor;
    }
    .righttitle {
      width: 80%;
      height: 100%;
      line-height: 80px;
      border: 1px solid $borderColor;
      margin: auto;
      font-size: 22px;
      font-weight: 400;
    }
  }

  /deep/.el-form-item {
    margin-bottom: 0;
  }

  .bottom10 {
    margin-bottom: 15px;
  }

  .spyj_form {
    display: flex;
    border: 1px solid $borderColor;

    .item_left {
      width: 150px;
      background-color: #f8f8fa;
      color: #606266;
      display: flex;
      font-size: 14px;
      text-indent: 50px;
      align-items: center;
      border-right: 1px solid $borderColor;
    }

    .item_right {
      flex: 1;
      width: 100%;

      /deep/.el-form-item__label {
        background-color: #f8f8fa;
      }
      /deep/.el-form-item__content {
        display: block;
        text-align: left;
      }
      .opinion_item {
        /deep/.el-form-item__error {
          margin-top: -16px !important;
          left: 3px;
        }
        border-bottom: 1px solid $borderColor;
      }

      .opinion {
        position: relative;
        font-size: 14px;

        /deep/.el-textarea__inner {
          border: none;
        }
      }

      .opinion_btn {
        position: absolute;
        right: 15px;
        bottom: 10px;
      }
    }
  }

  .submit_button {
    text-align: center;
    margin: 15px 0;
  }

  .el-date-editor.el-input {
    width: 100%;
  }
}
</style>