<template>
  <div class="app-container">
    <el-row :gutter="20">
        <el-col :span="4" >
            <div class="grid-content bg-purple">
                <p>参数</p>
                <p style="font-size:12px;">根据商品特性设置相符的商品参数</p>
            </div>
        </el-col>
        <el-col :span="20" style="border-left:2px solid #fff;">
          <div  class='tablessst'>
            <p class="col_p">参数名称</p>
            <p class='col_pr'>参数值 拖动行可进行排序</p>
          </div>
           <div v-for="(item,index) in goodsPram" :key="index" v-dragging="{ list: goodsPram, item: item, group: 'knowTab' }" class='tablesss'>
            <p class="col_p"><el-input v-model="item.title" placeholder="如尺码,颜色等" style="width:calc(100% - 20px)"></el-input></p>
            <p class='col_pr'>
              <el-input v-model="item.value" placeholder="根据参数进行设置, 如 S/M/L/XL/XXl, 或红/黄/蓝"  style="width:calc(100% - 200px)"></el-input>
               <el-button icon="el-icon-close" style="margin-left:10px;" @click="deletearrinput(index)"></el-button>
               <el-button style="margin-left:10px;">拖动排序</el-button>
            </p>
          </div>

          <el-button @click="addguild()"  icon="el-icon-plus" style="margin-top:20px;"> 添加参数</el-button>
        </el-col>
    </el-row>

<!--    <el-button type="primary" @click="handleinfomationclick('ruleForm')">下一步</el-button>-->
    <el-button >重置</el-button>
  </div>
</template>

<script>
export default {
  name: 'goodsmeter',
    props: {
    parameterdata: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
     goodsPram:[{
       id:0,
       title:'',
       value:''
     }]


    }
  },
     components:{
    'hello':{
        render:function(createElement){

          return createElement(
            'h'+this.level,
            this.$se
          )

        }
    }
  },
  mounted() {
    // this.driver = new Driver()
     this.$dragging.$on('dragged', (value) => {
      //因为我这在排序的时候不需要做处理，所以空着就行
      // debugger
    })

  },
  watch:{
    goodsPram:{
      handler(val, oldVal){
            this.$emit('parameterclicks',val)
        },
        deep:true
    },
  parameterdata(curVal,oldVal){
  if(curVal){
    this.goodsPram= curVal
  }
  }
  },
  methods: {
     handleinfomationclick(formName) {
            this.$emit('parameterclicks',this.goodsPram)
       },
     addguild(){
      let arrchild={
            id:0,
            title:'',
            value:''
          }
      this.$set(this.goodsPram, this.goodsPram.length,arrchild)
    },
      deletearrinput(index){

        this.goodsPram.splice(index,1)
    },


  }
}
</script>
<style scoped>
.app-container{
    width:100%;
    height:100%;
    background: #f8f8f8;
}
ul,li{
  list-style: none;
  margin: 0;
  padding:0;
}
.ullist{
    border: 1px solid #e7eaec;
    padding: 10px;
    margin-bottom: 10px;
}
.el-input-group{
  width:calc(100% - 60px);
}
.col_p{
  width:30%;
  float:left;
}
.col_pr{
  width:70%;
  float:left;
}
.tablesss{
  height:70px;
  border-bottom: 1px solid #e6ebf5;
}
.tablessst{
  height:50px;
  border-bottom: 1px solid #e6ebf5;
}
</style>
