<!--
  功能：审批意见
  作者：calliope
-->
<template>
  <div class='spyj loadingtext'>
    <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>
    <el-empty v-if="isNoData" description="暂无数据"></el-empty>
    <commonDialog v-model="commonDialog" />
  </div>
</template>
<script>
import { getSpyjList, saveSpyj, saveSpyjBySlsq } from "@/api/fqsq.js";
import { popupDialog } from "@/utils/popup.js";
import commonDialog from "./commonOpinion.vue";
import { mapGetters } from 'vuex'
export default {
  components: { commonDialog },
  props: {
  },
  computed: {
    ...mapGetters(['userData'])
  },
  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: {},
      commonDialog: false
    }
  },
  mounted () {
    this.propsParam = this.$attrs;
    if (this.$route.query.viewtype) {
      this.ableOperation = false
    }
    this.list();
  },
  methods: {
    handleClick () {
      console.log(1)
    },
    //审批意见数据初始化
    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.commonDialog = true
    },
    //使用常用意见
    useOpinion (opinion) {
      this.ruleForm.shyj = opinion
    }
  }
}
</script>
<style scoped lang='scss'>
@import '~@/styles/mixin.scss';

.spyj {
  margin-left: 5px;
  height: 400px;

  .spyj_title {
    text-align: center;
    font-size: 18px;
    display: block;
    margin: 5px;
  }

  /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;
      @include flex-center;
      border-right: 1px solid $borderColor;
    }

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

      /deep/.el-form-item__label {
        background-color: #F8F8FA;
      }

      .opinion_item {
        /deep/.el-form-item__error {
          margin-top: -16px !important;
          left: 3px;
        }

        border-bottom: 1px solid $borderColor;
      }

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

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

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

  .submit_button {
    text-align: center;
    margin: 15px 0;
  }
}
</style>