<template>
  <div>
    <p class="fsb-20 mb-5">Điều chỉnh tiêu đề</p>
    <div v-for="(v, i) in arr" :key="i" :class="(i>0? 'mt-4' : null)">
      <p class="fsb-14">Dòng thứ {{(i+1)}}<span class="has-text-danger"> *</span></p>
    <div class="field has-addons mt-1">
  <div class="control is-expanded">
    <input class="input" type="text" v-model="v.label">
  </div>
  <div class="control">
    <a class="button is-primary" @click="add()">
      <span class="icon">
        <i class="mdi mdi-plus"></i>
      </span>
    </a>
  </div>
  <div class="control" @click="remove(i)" v-if="(i>0)">
    <a class="button is-primary">
      <span class="icon">
        <i class="mdi mdi-minus"></i>
      </span>
    </a>
  </div>
</div>
  <p class="help has-text-danger" v-if="v.error"> {{v.error}} </p>
</div>
  <div class="buttons mt-5">
    <button class="button is-primary" @click="update()">Cập nhật</button>
    <button class="button is-dark" @click="$emit('close')">Hủy bỏ</button>
  </div>
  </div>
</template>

<script>
export default {
  props: ['label'],
  data() {
    return {
      arr: []
    }
  },
  created() {
    let arr1 = this.label.replace('<div>', '').replace('</div>', '').split("</p>")
    arr1.map(v=>{
      if(!this.$empty(v)) {
        let label = v + '</p>'
        label = this.$stripHtml(label)
        this.arr.push({label: label})
      }
    })
  },
  methods: {
    add() {
      this.arr.push({label: undefined})
    },
    remove(i) {
      this.$delete(this.arr, i)
    },
    checkError() {
      let error = false
      this.arr.map(v=>{
        if(this.$empty(v.label)) {
          v.error = 'Nội dung không được bỏ trống'
          error = true
        }
      })
      if(error) this.arr = this.$copy(this.arr)
      return error
    },
    update() {
      if(this.checkError()) return
      let label = ''
      if(this.arr.length>1) {
        this.arr.map((v,i)=>{
          label += `<p${i<this.arr.length-1? ' style="border-bottom: 1px solid white;"' : ''}>${v.label.trim()}</p>`
        })
        label = `<div>${label}</div>`
      } else label = this.arr[0].label.trim()
      this.$emit('modalevent', {name: 'label', data: label})
      this.$emit('close')
    }
  }
}
</script>