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

		<el-row style="padding: 10px; background: #fafafa;">
			<el-col :span="22">
				<el-button
					icon="el-icon-plus"
					size="mini"
					style="margin-right: 10px;"
					title="添加常用语"
					@click="addCommonOpinion"
				/>
				<span>常用语：</span>
				<span v-for="commonOpinion in approvalItem" :key="commonOpinion">
					<el-tag
						v-if="commonOpinion.length > 30"
						@click.native="choseCommonOpinion(commonOpinion)"
						>{{ 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 } 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) {
			//先判断输入长度不可大于500长度
			let strLength = this.opinion + commonOpinion;
			if (strLength.length < 500) {
				this.opinion = _.cloneDeep(strLength);
				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>
