<template>
  <div class="com-product-attr-item">
    <div class="item" v-for="(item,index) in items">
      <div class="name">
        <el-input v-model="item.name" placeholder="属性名称" size="small"></el-input>
      </div>
      <div class="type">
         <el-select
            v-model="item.type"
            placeholder="请选择类型"
            size="small"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
         </el-select>
      </div>
      <div class="options" v-if="item.type==1">
          <el-input v-model="item.value" placeholder="默认值" size="small"></el-input>
      </div>
      <div class="options" v-else>
          <el-input v-model="item.valueItems" placeholder="选项值,多项值,使用逗号分隔即可" size="small"></el-input>
      </div>
      <div class="btns">
           <svg-icon icon-class="CirclePlus" @click="onPlus" class="btn-icon"/>
           <svg-icon icon-class="CircleMinus" @click="onMinus(index)" class="btn-icon" v-if="index>0"/>
      </div>
    </div>

  </div>
</template>

<script>
  export default{
    name:"comProductAttrItem",
    emits:['onSetAttr'],
    props:{
       items:{
         type:Array,
         default:()=>{
           return [
              {
                 name:'',
                 value:'',
                 type:1,
                 valueItems:'',
              },
           ];
        }
       }
    },
    watch:{
       'items':{
         handler(val){
           this.$emit("onSetAttr",val);
         },
         immediate: true,
         deep: true
       }
    },
    data(){
      return {
          typeList:[
            {
              value:1,
              text:'文本'
            },
            {
              value:2,
              text:"单选"
            },
            {
              value:3,
              text:'多选'
            }
          ],
      }
    },
    methods:{
      //增加选项
      onPlus(e){
        this.items.push({
          name:'',
          value:'',
          type:1,
          valueItems:'',
        })
      },
      onMinus(e){
        this.items.splice(e,1);
      },
    }
  }
</script>
<style lang="scss">
 @import './index.scss'
</style>
