<template>
  <el-dialog
      title="提示"
      :visible.sync="visible"
      width="80%"
      @closed="onClose"
      @open="onOpen"
      center>

    <div class="keywords-box">
        <div class="keyword-item" v-for="(item,index) in keywordsArr" :key="item.uuid">
          <el-input
              type="text"
              class="my-keyword"
              placeholder="请输入关键字"
              v-model="item.text"
              maxlength="8"
              show-word-limit
          >
          </el-input>
          <el-input
              type="text"
              class="my-url"
              placeholder="请输入链接地址"
              v-model="item.url"
          >
          </el-input>
          <i class="el-icon-circle-plus-outline btn-icon" @click="addKeywords(index)"></i>
          <i class="el-icon-remove-outline btn-icon" v-if="keywordsArr.length!==1" @click="delKeywords(item)"></i>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="onCancel">取 消</el-button>
    <el-button type="primary" @click="onConfirm">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
export default {
  name: "keyWordsDialog",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    source: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      keywordsArr: [],
    }
  },
  watch: {
    show: {
      handler(newVal) {
        this.visible = newVal;
      }
    },
    source: {
      handler(newVal) {
        if (!newVal) {
          this.keywordsArr = [];
          this.addKeywords();
        } else {
          this.keywordsArr = JSON.parse(newVal);
        }
      },
      immediate: true
    }
  },
  methods: {
    addKeywords(index) {
      const uuid = Math.random() * 10000;
      this.keywordsArr.splice(index+1, 0, {text: '',url: '',uuid})
    },
    delKeywords({uuid}) {
      this.keywordsArr = this.keywordsArr.filter((item) => item.uuid !== uuid)
    },
    formatKeywords() {
      let isHasEmpty = false;
      const keywords = this.keywordsArr.map(item => {
        const {text, url} = item;
        if (text && url) {
          return {
            text,
            url
          }
        } else {
          isHasEmpty = true;
          return undefined
        }
      })
      const result = keywords.filter(item=> !!item);
      if (isHasEmpty) {
        this.$message.error('关键字和地址不能为空，请检测添加项')
      }
      return {isHasEmpty, result};
    },
    onClose() {
      this.$emit('update:show', false)
    },
    onOpen() {
      if (this.keywordsArr.length === 0) {
        this.addKeywords();
      }
    },
    onCancel() {
      this.visible = false;
    },
    onConfirm() {
      const {isHasEmpty, result} = this.formatKeywords();
      if (!isHasEmpty) {
        this.$emit('confirm', JSON.stringify(result))
        this.visible = false;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.keyword-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  .el-input {
    margin-right: 20px;

    &.my-keyword {
      width: 40%
    }
  }
  .btn-icon {
    font-size: 20px;
    cursor: pointer;
  }
}
.keywords-box {
  max-height: 300px;
  overflow: auto;
}
</style>