<!--
  功能：审批意见
  作者：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">
        <div class="item_left">
          初审意见
        </div>
        <div class="item_right">
          <el-row>
            <el-col :span="24">
              <el-form-item label-width="0" class="opinion_item" prop="csyj">
                <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入内容" v-model="ruleForm.csyj">
                </el-input>
                <el-popover placement="right" width="50" trigger="hover">
                  <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="8">
              <el-form-item label="审查人" prop="scr">
                {{ ruleForm.scr }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核开始时间" prop="shkssj">
                {{ ruleForm.shkssj }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核结束时间" prop="shjssj">
                {{ ruleForm.shjssj }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="spyj_form">
        <div class="item_left">
          复审意见
        </div>
        <div class="item_right">
          <el-row>
            <el-col :span="24">
              <el-form-item label-width="0" class="opinion_item" prop="csyj">
                <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入内容" v-model="ruleForm.csyj">
                </el-input>
                <el-popover placement="right" width="50" trigger="hover">
                  <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="8">
              <el-form-item label="审查人" prop="scr">
                {{ ruleForm.scr }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核开始时间" prop="shkssj">
                {{ ruleForm.shkssj }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核结束时间" prop="shjssj">
                {{ ruleForm.shjssj }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="spyj_form">
        <div class="item_left">
          核定意见
        </div>
        <div class="item_right">
          <el-row>
            <el-col :span="24">
              <el-form-item label-width="0" class="opinion_item" prop="csyj">
                <el-input type="textarea" :rows="4" class="opinion" placeholder="请输入内容" v-model="ruleForm.csyj">
                </el-input>
                <el-popover placement="right" width="50" trigger="hover">
                  <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="8">
              <el-form-item label="审查人" prop="scr">
                {{ ruleForm.scr }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核开始时间" prop="shkssj">
                {{ ruleForm.shkssj }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核结束时间" prop="shjssj">
                {{ ruleForm.shjssj }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="submit_button">
        <el-button type="primary">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>

export default {
  components: {},
  data () {
    return {
      ruleForm: {
        csyj: '',
        scr: '',
      },
      rules: {
        csyj: [
          { required: true, message: '请输入审批意见', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleClick () {
      console.log(1)
    }
  },
}
</script>
<style scoped lang='scss'>
@import '~@/styles/mixin.scss';

.spyj {
  margin-left: 5px;

  .spyj_title {
    text-align: center;
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
  }

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

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

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

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