<template>
	<el-dialog title="特惠" :visible.sync="open" width="600px" append-to-body>
		<!-- 添加或修改店铺对话框 -->
		<el-form :model="form" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="商品名称">
            {{ form.goodsName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="原售价">
            {{ form.price }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="折扣价">
            {{ form.discount }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="特惠价格">
          <el-input v-model="form.recommendPrice" placeholder="请输入特惠价格" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="特惠标签">
          <div style="border: 1px solid #ccc;height: 70px">
            <el-tag
              :key="tag"
              v-for="tag in recommendTagList"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)">
              {{tag}}
              </el-tag>
              <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
            />              
            <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加标签</el-button>
          </div>      
        </el-form-item>
      </el-row>	
    </el-form>
		<div class="dialog-footer">
			<el-button type="primary" @click="submitForm">确 定</el-button>
			<el-button @click="cancel">取 消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { addRecommend } from "@/api/system/shop";
export default {
	props: ['shopId'],
	data() {
		return {
			form: {
        goodsName :"",
        shopId : null,
        goodsId : null,
        price : null,
        discount : null,
        type : null,
        recommendPrice:null
      },
			open: false,
      tagValues:"",
      inputVisible: false,
      inputValue: '',
      recommendTagList:[],
      goodsTagList:[],
      goodsTagValue:""
		}
	},
	methods: {
    handleClose(tag) {      
      this.recommendTagList.splice(this.recommendTagList.indexOf(tag), 1);
      if(this.recommendTagList.length==0){
        this.tagValues="";
      }else{
        this.tagValues=this.tagValues.replace(tag,"");
      }
    },
    handleInputConfirm() {
      let length=0;
      let inputValues = this.inputValue;      
      if (inputValues) {
        if(this.recommendTagList.indexOf(inputValues)==-1 && this.goodsTagList.indexOf(inputValues)==-1){
          length=this.recommendTagList.length+this.goodsTagList.length;          
          if(length >= 3){
            this.$message.error('标签个数最多添加三个!');
          }else{
            this.tagValues=this.tagValues+inputValues;              
            if((this.goodsTagValue.length+this.tagValues.length)>13){
              this.$message.error('标签总字符数量最大13!');                
              this.tagValues=this.tagValues.replace(inputValues,"");
            }else{
              this.recommendTagList.push(inputValues);
            }
          }
        }else{
          this.$message.error('请重新添加标签，该标签已存在!');
        }          
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
		/** 提交按钮 */
		submitForm() {
      let obj=Object.assign({},this.form)
      if(obj.recommendPrice!=null){
        var regular=/(^[+]{0,1}([0-9]+)$)|(^[+]{0,1}([0-9]+)[\.]{1}[0-9]{2}$)/; //正数 ,小数可有可无，最多2位
        if(!regular.test(obj.recommendPrice)){   
          this.$message.error("请输入大于0的正数,最多保留2位小数!"); 
          return; 
        }
      }else{
        obj.recommendPrice=obj.discount
      }
      obj.recommendTagList=this.recommendTagList
      addRecommend(obj).then((res) => {
        if(res.code=="200"){
          this.$modal.msgSuccess("成功");
          this.open = false;
          this.$parent.getList();
        }
      });
		},
		// 取消按钮
		cancel() {
			this.open = false;
			//this.reset();
		},
		// 表单重置
		reset() {
			this.form = {};
			this.resetForm("form");
		},
		openModal(data) {
      console.log("data",data);      
      this.goodsTagValue="";
			this.form.goodsName = data.name
			this.form.shopId = this.shopId
			this.form.goodsId = data.id
			this.form.price = data.price
			this.form.discount = data.discount
			this.form.type = 2;
      this.recommendTagList=[];
      this.tagValues="";
      this.form.recommendPrice=null;
      this.goodsTagList=data.goodsTagList;
      if(this.goodsTagList.length>0){
        for(let i=0;i<this.goodsTagList.length;i++){
          this.goodsTagValue=this.goodsTagValue+this.goodsTagList[i];
        }
      }
      this.open = true
		}

	}
}
</script>

<style lang="scss" scoped>
.row_input {
	display: flex;
	justify-content: space-between;
}

.col12 {
	width: 48%;

}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>