<!--
 * @Description: 审批意见
 * @Autor: renchao
 * @LastEditTime: 2023-10-23 14:08:24
-->
<template>
  <div class="spyj" v-Loading="loading">
    <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="ruleForm'">
          <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)"
                      :disabled="!viewEdit|| item.show">常用意见</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>
  </div>
</template>
<script>
  import { saveSpyjBySlsq, getSpyjList } from "@/api/opinion.js";
  import { mapGetters } from "vuex";
  import { getNewDatesh } from "@/utils/util";
  export default {
    computed: {
      ...mapGetters(["dqhj", "yjsqOptions", "userInfo"]),
    },
    data () {
      return {
        loading: false,
        currentindex: 0,
        refresh: 10,
        viewEdit: false,
        bsmSlsq: this.$route.query.bsmSlsq,
        bestepid: this.$route.query.bestepid,
        propsParam: {},
        tableData: [],
        shows: false,
      };
    },

    watch: {
      yjsqOptions: {
        handler (val) {
          this.add(val.opinion);
        },
        deep: true,
        immediate: true,
      },
      dqhj: {
        handler (val) {
          this.propsParam = this.$attrs;
          this.dataset()
          this.getShList();

        },
        deep: true,
        immediate: true,
      },

    },
    methods: {
      /**
      * @description: dataset
      * @param {*} 数据处理
      * @author: renchao
      */
      dataset () {
        this.viewEdit = this.$parent.currentSelectTab.ableOperation;
      },
      /**
       * @description: getShList
       * @param {*} obj
       * @author: renchao
       */
      getShList () {
        this.loading = true
        var formdata = new FormData();
        formdata.append("bsmBusiness", this.propsParam.bsmBusiness);
        formdata.append("bestepid", this.$route.query.bestepid);

        getSpyjList(formdata).then((res) => {
          if (res.code === 200 && res.result) {
            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;
              }
            });
            this.loading = false
          }
        })
      },
      /**
       * @description: onSubmit
       * @author: renchao
       */
      onSubmit () {

        this.tableData.forEach((item, index) => {
          item["bsmBusiness"] = this.propsParam.bsmBusiness;
          item["czjg"] = "1";
        });
        var index = this.tableData.findIndex(
          (item) => item.shyj == null || item.shyj == ""
        );
        if (index == -1) {
          this.shows = true;
          saveSpyjBySlsq(this.tableData).then((res) => {
            if (res.code === 200) {
              this.$message.success("保存成功");
              this.refresh += 1;
              this.getShList();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("意见不能为空");
        }

      },
      //打开常用意见列表弹窗
      /**
       * @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.tableData.length > 0) {
          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;
    .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>