<template>
 <div
 v-if="variable"
 class="we-variable">
 <div class="we-variable-header">
 <div>
 <div class="we-variable-header-title">
 <span>{{ variable.name }}</span>
 <span>({{ variable.settings.length }})</span>
 </div>
 <span
 class="we-variable-header-control"
 @click="handleControl">{{ controlLabel }}</span>
 </div>
 </div>
 <div
 v-show="!isHide"
 class="we-variable-content">
 <div
 v-for="(item, index) in variable.settings"
 :key="index"
 :title="item.description"
 class="we-variable-content-item"
 v-if="getItemIsShow(item)">
 <span class="we-variable-content-label-group">
 <span>{{ item.name }}</span>
 <span class="we-variable-content-label-key">[{{ item.key }}]</span>
 </span>
 <input
 v-model="item.value"
 :placeholder="item.defaultValue ? `默认值:${item.defaultValue}` : '无默认值'"
 type="text"
 class="we-variable-content-input"
 :class="{'un-valid': unValid && unValid.key === item.key}">
 <span
 v-if="unValid && unValid.key === item.key"
 class="we-warning-bar">{{ unValid.msg }}</span>
 </div>
 </div>
 <!--<div
 v-show="!isHide"
 class="we-variable-bottom">
 <div @click="add">
 <Icon
 type="ios-add"
 color="#2d8cf0"
 size="20"/>
 <span class="we-variable-bottom-add">新增变量</span>
 </div>
 </div>
 -->
 </div>
</template>
<script>
export default {
 props: {
 variable: Object,
 unValidMsg: String,
 isAdvancedShow: Boolean,
 },
 data() {
 return {
 isHide: false,
 controlLabel: '收起',
 unValid: null,
 };
 },
 watch: {
 unValidMsg(val, oldval) {
 this.setUnValidMsg(val);
 },
 },
 methods: {
 handleControl() {
 this.isHide = !this.isHide;
 this.controlLabel = this.isHide ? '展开' : '收起';
 },
 isNewAdd(item) {
 return item.hasOwnProperty('isNew');
 },
 add() {
 },
 handleOk(item) {
 this.$emit('add-item', item, this.variable, (flag) => {
 item.isNew = false;
 });
 },
 handleDelete(item) {
 this.$emit('remove-item', item, this.variable, (flag) => {
 });
 },
 setUnValidMsg(msg) {
 const key = msg.slice(msg.lastIndexOf(':') + 1, msg.indexOf('-'));
 const valid = msg.slice(msg.indexOf('['), msg.lastIndexOf(']') + 1);
 const value = msg.slice(msg.lastIndexOf('-') + 1, msg.length);
 const message = `值为${value}非法,取值范围是${valid}`;
 this.unValid = {
 key,
 msg: message,
 };
 },
 getItemIsShow(item) {
 if (item.hidden) {
 return !item.hidden;
 }
 if (item.advanced && this.isAdvancedShow) {
 return true;
 } else if (item.advanced && !this.isAdvancedShow) {
 return false;
 }
 return true;
 },
 },
};
</script>
<style lang="scss" src="./index.scss">

</style>