<template>
  <div class="opinion-container">
    <textarea
      placeholder="请输入意见内容......"
      rows="3"
      maxlength="500"
      @input="opinionInput"
      v-model="opinion"
      :validate="'email'"
    />

    <el-row style="padding: 10px;background: #fafafa;">
      <el-col :span="22">
        <el-button
            @click="addCommonOpinion"
            title="添加常用语"
            icon="el-icon-plus"
            size="mini"
            style="margin-right: 10px"/>
        <span>常用语：</span>
        <span v-for="commonOpinion in approvalItem" :key="commonOpinion">
          <el-tag
            @click.native="choseCommonOpinion(commonOpinion)"
            v-if="commonOpinion.length > 30"
          >{{commonOpinion.substring(0,30)}}...</el-tag>
          <el-tag v-else @click.native="choseCommonOpinion(commonOpinion)">{{commonOpinion}}</el-tag>
        </span>
      </el-col>
      <el-col :span="2" class="number-opinion">
        <span :span="2">{{wordCount}}/500</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import bpmDeputy from "../../api/bpmDeputy";
export default {
  name: "opinionText",
  props:["procDefKey","text"],
  data() {
    return {
      wordCount: 0,
      opinion: ""
    };
  },
  watch: {
      text: function(newVal,oldVal){
          this.opinion = newVal;  //newVal即是instId
      },
			opinion: function(newVal,oldVal){
				this.$emit("getOpinion",this.opinion);
			}
  },
  computed: mapState({
    approvalItem: state => state.storeProcess.approvalItem
  }),
  methods: {
    opinionInput() {
      this.wordCount = this.opinion.length;
    },
    choseCommonOpinion(commonOpinion) {
      this.opinion += commonOpinion;
      this.opinionInput();
    },
    getOpinion(){
      return this.opinion;
    },
    addCommonOpinion(){
      if (!this.opinion){
        this.$message.warning("请输入审批意见");
        return;
      }
      this.$confirm("确认添加'"+this.opinion+"'为常用语？").then(()=>{
        let param = {
          expression: this.opinion,
          departmentId: "",
          postId: "",
          roleId: "",
          type: 4
        }
        bpmDeputy.addApprovalItem(param).then(data=> {
          if (data.state) {
            this.$message({type: "success", message: data.message});
            this.$store.dispatch("storeProcess/getApprovalByDefKeyAndTypeId",this.procDefKey);
          }
        })
      }).catch(()=>{})
    }
  },
  created(){
     this.$store.dispatch("storeProcess/getApprovalByDefKeyAndTypeId",this.procDefKey);
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/element-variables.scss";
.opinion-container {
  border: 1px solid #ebeef5;
}

.opinion-container > textarea {
  padding: 5px;
  margin-bottom: -3px;
  border: none;
  width: calc(100% - 10px);
  resize: none;
  outline: none;
}

.number-opinion {
  text-align: right;
}

.el-tag {
  margin-right: 7px;
  height: 23px;
  line-height: 21px;
  color: #666;
  background-color: transparent;
  border-color: #ebeef5;
  cursor: pointer;
}

.el-tag:hover {
  border-color: $--theme-color;
  color: $--theme-color;
}
</style>
