<template>
  <div>
    <div v-for="(item,index) in value" :key="index" style=" margin-bottom: 10px; display: flex;">
      <div v-for="(tow,idex) in item" :key="idex" style="margin-bottom: 10px;margin-right: 10px;display: flex">
        <el-input placeholder="按钮" style="width: 100%" v-model="tow.text"></el-input>
        <el-input placeholder="链接" style="width: 100%" v-model="tow.url"></el-input>
        <i class="el-icon-remove" style="font-size: 28px;cursor: pointer;margin-top: 5px"
           @click="changeEmit(item,idex)"
        ></i>
        <i class="el-icon-circle-plus" style="font-size: 28px;cursor: pointer;margin-top: 5px"
           v-if="idex==item.length-1&&value[index].length <= 2"
           @click="add_line(index)"
        ></i>
      </div>
    </div>
    <el-button @click="value.push([{
          'text': '',
          'url': ''
        }])"
    >添加
    </el-button>
    <el-button @click="dialogVisible=true"> 预览</el-button>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      append-to-body
    >
      <span>
        <div v-for="(item,index) in value" :key="index" style=" margin-bottom: 10px; display: flex;">
          <div v-for="(tow,idex) in item" :key="idex"
               style="margin-bottom: 10px;margin-right: 10px;display: flex;width: 100%"
          >
            <el-button
              style="width: 100%                                                                                                   "
            >{{ tow.text }}</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
    console.log(this.value,'btns')
  },
  methods: {
    add_line(index) {
      this.value[index].push({ 'text': '', 'url': '' })
    },
    changeEmit(item, idex) {
      item.splice(idex, 1)
      this.$emit('changeBtn')
    }
  }
}

</script>
<style scoped lang="scss">

</style>
