<template>
 <div class="container-addLabel">
     <el-dialog
      v-dialogDrag 
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      center
      top="5vh"
      :visible.sync="addLabeldialogVisib"
      customClass="custom-addLabel"
      :before-close="confirmPerson"
    >
    <div slot="title" style="display: flex; align-items: center">
        <img
          :src="$icons.add"
          style="color: #fff; width: 16px; height: 16px; margin-right: 5px"
        />
        <span style="font-size: 16px">
         {{addLabelType=='活动'?'活动标签':'快捷检索标签'}}   
            </span>
      </div>
     <div  class="inline"  v-for="(item, index) in dynamicItem"  :key="index" >
        <div class="inline-content">
        <span>{{index+1}}</span>
          <el-input
          class="inline-input"
          v-model="item.KeyWord"
          placeholder="请输入标签名称"
          clearable
        ></el-input>
         <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png"  :class="index == 0 ? 'defaultyi' : ''" alt="">
      </div>
      <div class="children-item">
        <div class="children-item" v-for="(key, indexs) in item.ListWords"  :key="indexs">
         <el-input
          class="inline-input"
          v-model="key.MirrorWord"
          placeholder="请输入标签名称"
          clearable
        ></el-input>
         <img @click="deleteChildren(index,indexs)" src="~@/assets/img/icons/delete-Item.png"  :class="indexs == 0 ? 'defaultyi' : ''" alt="">
      </div>
       <div class="children-box">
          <img  @click="addChildren(index)" :src="$icons.addblue">
          <span @click="addChildren(index)" >添加相关公司</span>
      </div>
      </div>
     </div>
    <div class="add-box">
          <img  @click="addItem" :src="$icons.addblue">
          <span @click="addItem" >添加</span>
      </div>
       <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmSubmit">确定</el-button>
        <el-button @click="confirmPerson">取消</el-button>
      </span>
    </el-dialog>
 </div>
</template>

<script>
import { raiInterface } from '@/api/api.js'
export default {
  name: '',
  components: {},
  props: {
      addLabeldialogVisib:{
          type: Boolean,
          default: false
      },
      addLabelType:{
          type:String,
          required: true,
      }
  },
  data () {
    return {
        dynamicItem:[]
    }
  },
  computed: {},
  watch: {
    addLabeldialogVisib(){
      if(this.addLabeldialogVisib){
        this.getList()
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    getList(){
      raiInterface.activityFastSearchKeWord().then(res=>{
        if(res.Ret === 200){
          this.dynamicItem= res.Data.List
        }
      })
    },
      //弹框取消事件
      confirmPerson(){
          this.dynamicItem=[]
          this.$emit('update:addLabeldialogVisib',false);
      },
      //弹框确认事件
      confirmSubmit(){
        this.dynamicItem=[]
        this.$emit('update:addLabeldialogVisib',false);
      },
      //添加活动标签
      addItem(){
          if(this.dynamicItem.length == 20) return 
          this.dynamicItem.push({KeyWord: "",ListWords:[]})
      },
      //删除活动标签
      deleteItem(index){
          this.dynamicItem.splice(index,1)
      },
      //添加标签下的相关公司
      addChildren(index){
         this.dynamicItem[index].ListWords.push({MirrorWord: ""})
      },
      //删除标签下的相关公司
      deleteChildren(index,indexs){
        this.dynamicItem[index].ListWords.splice(indexs,1)
      }
  }
}
</script>
<style  lang="less">
.container-addLabel {
 .custom-addLabel {
    width: 600px;  
  }
  .add-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #5882EF;
    margin-top: 30px;
    margin-bottom: 17px;
    img {   
    width: 16px;
    height: 16px;
    margin-right: 10px;
    }
  }
    .inline {
    margin-bottom: 20px;
    width: 440px;
    .inline-input {
     width: 370px !important;
    }
  p{
      padding-top: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #EF5858;
      opacity: 1;
    }
    .children-item {

      .children-item {
      margin-top: 20px;
      padding-right:20px;
      padding-left: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img { 
        width: 14px;
        height: 14px;
      }
      }
      .children-box {
        margin-top: 15px;
        padding-left: 25px;
        display: flex;
        align-items: center;
        color: #5882EF;
        img { 
          margin-right: 10px;
        }
      }
    }
  }
  .inline-content {
    padding-right:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img { 
      width: 14px;
      height: 14px;
    }
  }
   .el-input {
    width: 360px !important;
  }
  .el-switch__label  {
    color: #606266 ;
   font-size: 14px;
   font-weight:400;
  }
   .is-active {
    color: #409EFF !important;
  }
  .el-radio__label {
    font-weight:400;
  }
}

</style>
