<!--
  功能：审批意见
  作者：calliope
-->
<template>
  <div class='spyj'>
    <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'"
                  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-popover placement="right" width="50" trigger="hover" v-if="item.stepShjy == '1'">
                  <ul class="pointer">
                    <li @click="handleClick">复审</li>
                    <li>初审意见</li>
                  </ul>
                  <el-button class="opinion_btn" slot="reference">常用意见</el-button>
                </el-popover>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="审查人：" prop="scr">
                {{ item.shryxm }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间：" prop="shjssj">
                {{ item.shjssj }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="submit_button">
        <el-button type="primary" v-if="tableData.length>0" @click="onSubmit">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getSpyjList, saveSpyj, saveSpyjBySlsq } from "@/api/fqsq.js";
export default {
  components: {},
  props: {
  },
  data () {
    return {
      bsmSlsq: '',
      bestepid: '',
      ruleForm: {
        shyj: '',
        bsmSlsq: this.$route.query.bsmSlsq,
        stepid: this.$route.query.bestepid
      },
      rules: {
        shyj: [
          { required: true, message: '请输入审批意见', trigger: 'blur' }
        ],
      },
      tableData: [],
      propsParam: {},
    }
  },
  created () {
    this.propsParam = this.$attrs;
    this.list();
  },
  methods: {
    handleClick () {
      console.log(1)
    },
    //审批意见数据初始化
    list () {
      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
          this.ruleForm.shyj = res.result[res.result.length - 1].shyj
        }
      })
    },
    onSubmit () {
      saveSpyjBySlsq(this.ruleForm).then(res => {
        if (res.code === 200) {
          this.$message.success("保存成功")
        } else {
          this.$message.error(res.message)
        }
      })

    },

  },
}
</script>
<style scoped lang='scss'>
@import '~@/styles/mixin.scss';

.spyj {
  margin-left: 5px;

  .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>