<!--
 * @Description: 功能：审批意见
 * @Autor: renchao
 * @LastEditTime: 2023-05-17 10:41:24
-->
<template>
  <div class='spyj loadingtext'>
    <div class="box">
      <b class="spyj_title">审批表</b>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <div class="spyj_form" v-for="(item, index) in tableData" :key="index">
          <div class="item_left">
            {{ item.jdmc }}意见
          </div>
          <div class="item_right">
            <el-row>
              <el-col :span="24">
                <el-form-item label-width="0" class="opinion_item" prop="shyj">
                  <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入审批意见"
                    v-if="item.stepShjy == '1' && ableOperation" v-model="ruleForm.shyj"></el-input>
                  <el-input type="textarea" :rows="4" class="opinion" v-model="item.shyj" v-else :disabled="true">
                  </el-input>
                  <el-button class="opinion_btn" @click="commonOpinion"
                    v-if="item.stepShjy == '1' && ableOperation">常用意见</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item label="审查人" prop="shryxm">
                  {{ item.shryxm }}
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审核时间" prop="shjssj" :key="refresh">
                  {{ item.shjssj }}
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="submit_button" v-if="ableOperation">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </el-form>
    </div>
    <el-empty v-if="isNoData" description="暂无数据"></el-empty>
  </div>
</template>
<script>
  import { getSpyjList, saveSpyj, saveSpyjBySlsq } from "@/api/opinion.js";
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters(['userData', 'yjsqOptions'])
    },
    data () {
      return {
        isNoData: false,
        bsmSlsq: '',
        //刷新值
        refresh: 10,
        ableOperation: true,
        bsmSlsq: this.$route.query.bsmSlsq,
        bestepid: this.$route.query.bestepid,
        ruleForm: {},
        rules: {
          shyj: [
            { required: true, message: '请输入审批意见', trigger: 'blur' }
          ],
        },
        tableData: [],
        propsParam: {}
      }
    },
    watch: {
      yjsqOptions: {
        handler (val) {
          this.ruleForm.shyj = val
        },
        deep: true,
        immediate: true
      },
    },
    mounted () {
      this.propsParam.isEdit=this.$parent.isEdit
      this.propsParam = this.$attrs;
      if (this.$route.query.viewtype) {
        this.ableOperation = false
      }
      this.list();
    },
    methods: {
      //审批意见数据初始化
      list () {
        let that = this
        this.$startLoading()
        var formdata = new FormData();
        formdata.append("bsmBusiness", this.propsParam.bsmBusiness);
        formdata.append("bestepid", this.$route.query.bestepid);
        formdata.append("ableOperation", this.ableOperation)
        getSpyjList(formdata).then((res) => {
          this.$endLoading()
          if (res.code === 200 && res.result) {
            this.tableData = res.result ? res.result : []
            if (res.result.length == 0) {
              that.isNoData = true
            }
            this.ruleForm = res.result[res.result.length - 1]
          }
        })
      },
      onSubmit () {
        this.ruleForm.bsmSlsq = this.bsmSlsq
        this.ruleForm.bestepid = this.bestepid
        saveSpyjBySlsq(this.ruleForm).then(res => {
          if (res.code === 200) {
            this.$message.success("保存成功")
            this.refresh += 1
          } else {
            this.$message.error(res.message)
          }
        })
      },
      //打开常用意见列表弹窗
      commonOpinion () {
        this.$popupDialog("常用意见", "workflow/components/dialog/commonOpinion", {}, "70%", true)
      },
      //使用常用意见
      useOpinion (opinion) {
        this.ruleForm.shyj = opinion
      }
    }
  }
</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 {
      line-height: 68px;
      border: 1px solid $borderColor;
      text-align: center;
      font-size: 22px;
      font-weight: 400;
      background-color: #eceef2;
      display: block;
      border-bottom: none;
    }

    /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;
      }

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

        /deep/.el-form-item__label {
          background-color: #f8f8fa;
        }
        /deep/.el-form-item__content {
          display: block;
          text-align: left;
          text-indent: 10px;
        }
        .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;
    }
  }
</style>