<!--
 * @Description: 审批意见
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:41:24
-->
<template>
  <div class="spyj loadingtext">
    <div class="box">
      <div class="spyj_title">
        <div class="leftadd" v-if="ableOperation">
                <i
                  class="el-icon-plus pointer"
                   @click="addClick()"
                ></i>
              </div>
            <div class="righttitle">审批表</div>
      </div>

      <div v-for="(item, index) in tableData" :key="index">
        <el-form
          :model="tableData[index]"
          label-width="120px"
          :rules="rules"
          :ref="'ruleFormRef' + index"
        >
          <div class="spyj_form">
            <div class="item_left">
              <div class="left" v-if="ableOperation">
                <i
                  class="el-icon-minus pointer"
                  @click="deleClick()"
                ></i>
              </div>
              <div class="left" v-else>
                 {{index+1}}
              </div>
              <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"
                    prop="shyj"
                  >
                    <el-input
                     :disabled="!ableOperation"
                      type="textarea"
                      :rows="4"
                      class="opinion"
                      placeholder="请输入审批意见"
                      v-model="item.shyj"
                    ></el-input>
                     <el-button class="opinion_btn" @click="commonOpinion(index)" v-if="ableOperation">常用意见</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="16">
                  <el-form-item label="审查人" prop="shryxm">
                    <el-input  :disabled="!ableOperation" v-model="item.shryxm"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item class="sjxzq" label="审核时间" prop="shkssj">
                    <el-date-picker
                     :disabled="!ableOperation"
                      v-model="item.shkssj"
                      type="date"
                     placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-form>
      </div>
      <div class="submit_button" v-if="ableOperation">
        <el-button type="primary" @click="onSubmit('ruleFormRef')"
          >保存</el-button
        >
      </div>
    </div>
    <!-- <el-empty v-if="isNoData" description="暂无数据"></el-empty> -->
  </div>
</template>
<script>
import { addidea, getShList } from "@/api/djbbl.js";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userData", "yjsqOptions"]),
  },
  data() {
    return {
      isNoData: false,
      currentindex:0,
      ableOperation: false,
      tableData: [{ jdmc: "初审" }],
      rules: {
        shyj: [{ required: true, message: "请填写意见", trigger: "blur" }],
        shryxm: [{ required: true, message: "审查人", trigger: "blur" }],
        shkssj: [{ required: true, message: "审核时间", trigger: "blur" }],
      },
    };
  },

   watch: {
      yjsqOptions: {
        handler (val) {
          this.add(val)
        },
        deep: true,
        immediate: true
      },
    },
  created() {},
  mounted() {
  this.ableOperation=this.$parent.ableOperation
    this.getShList();
  },
  methods: {
    deleClick(){
      if(this.tableData.length<=1){
        this.$message.error("最少填写一条初审意见");
      }else if(this.tableData.length>=2){
        this.tableData=this.tableData.slice(0,-1)
      }

    },
    addClick(){
       if(this.tableData.length==1){
        this.tableData.push({ jdmc: "复审" })
      }else if(this.tableData.length==2){
         this.tableData.push({ jdmc: "核定" })
      }else{
         this.$message.error("只允许添加三条意见");
      }


   },



    getShList() {
      this.$startLoading();
      var formdata = {
        bsmRepair: this.$parent.bsmRepair,
      };
      getShList(formdata).then((res) => {
        this.$endLoading();
        if (res.code === 200 && res.result) {
          if (res.result.length) {
            this.tableData = res.result;
          }

          // this.ruleForm = res.result[res.result.length - 1]
        }
      });
    },
    onSubmit(formName) {
      const falg = [];
      for (let index = 0; index < this.tableData.length; index++) {
        this.$refs[formName + index][0].validate((valid) => {
          if (valid) {
            falg.push(1);
          }
        });
      }
      if (falg.length == this.tableData.length) {
        this.tableData.forEach((item, index) => {
          item["bsmBusiness"] = this.$parent.bsmRepair;
        }),
          addidea(this.tableData).then((res) => {
            if (res.code === 200) {
              this.$message.success("保存成功");
              this.refresh += 1;
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        return false;
      }
    },
      //打开常用意见列表弹窗
      commonOpinion (index) {
        this.currentindex=index
        this.$popupDialog("常用意见", "workflow/components/dialog/commonOpinion", {}, "70%", true)
      },
      add(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;
         text-align: center;
         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: 80px;
      align-items: center;
      border-right: 1px solid $borderColor;

      .left {
        width: 30%;
        height: 100%;
           display: flex;
        font-size: 14px;
        text-indent: 20px;
        align-items: center;
        border-right: 1px solid $borderColor;
        .el-icon-minus{
        font-size: 14px;
        color: black;
        }
      }
      .right {
        width: 70%;
        height: 100%;
        color: #606266;
        display: flex;
        font-size: 14px;
        text-indent: 20px;
        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>