<template>
  <el-dialog
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :title="type==='tag'?'标签管理':'品种管理'"
    @close="cancelHandle"
    custom-class="dialog"
    center
    width="560px"
    v-dialogDrag
  >
    <div class="dialog-min">
      <el-input
        v-model="searchTxt"
        placeholder="请输入名称"
        prefix-icon="el-icon-search"
        size="medium"
        clearable 
        @input="inputVisible = false;"
      />
      <div class="tag-list">
        <div
          v-for="(item,index) in showList"
          :key="item.id"
          class="el-tag"
          :style="item.isEdit&&'padding:0;border:none;'"
          @dblclick="editTagOpen(item,index)"
        >

          <el-input
            v-model="item.label"
            v-if="item.isEdit"
            class="input-edit"
            :ref="`inputRef${index}`"
            size="small"
            @blur="editItemHandle(item)"
          />
          <span v-else>
            {{ item.label }}
            <el-popconfirm
              :title="`是否确认删除该${type==='tag'?'标签':'品种'}`"
              @onConfirm="closeItemHandle(item)"
            >
              <i
                slot="reference"
                class="el-tag__close el-icon-close" 
              />
                <!-- @click.stop="closeItemHandle(item)" -->
            </el-popconfirm>
          </span>
        </div>

        <el-input
          class="input-edit"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @blur="addNewTagHandle"
        >
        </el-input>
        <el-button v-else size="small" @click="addNewItem">+ {{type==='tag'?'标签':'品种'}}</el-button>

      </div>
    </div>

  </el-dialog>
</template>
<script>
import { crossVarietyInterface } from '@/api/modules/chartRelevanceApi';
export default {
  props: {
    isShow: {
      type: Boolean
    },
    type: { //tag  variety
      type: String
    },
    dataList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    isShow(nval) {
      if(!nval) return
      this.initData()
    },

    dataList(nval) {
      this.initData();
    }
  },
  computed: {
    showList() {
      return this.list.length ? this.list.filter(_ => _.label.includes(this.searchTxt)) : []
    }
  },
  data() {
    return {
      searchTxt: '',
      inputVisible: false,
      inputValue: '',
      list: []
    }
  },
  mounted(){

  },
  methods:{
    /* 关闭标签 */
    closeItemHandle(item) {
      this.delItem(item)
    },

    async delItem(item) {
      let res = this.type==='tag' 
        ? await crossVarietyInterface.tagDel({ChartTagId:item.id})
        : await crossVarietyInterface.varietyDel({ChartVarietyId:item.id})

      if(res.Ret !== 200) return
      this.$message.success('删除成功')
      
      this.refreshData()
    },

    addNewItem() {
      this.inputValue = '';
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    /* 新增标签 */
    async addNewTagHandle() {
      this.inputVisible = false;
      if(!this.inputValue) return

      let res = this.type==='tag' 
        ? await crossVarietyInterface.tagAdd({ TagName: this.inputValue})
        : await crossVarietyInterface.varietyAdd({ VarietyName: this.inputValue})
        
      if(res.Ret!==200) return
      this.refreshData()
      
    },

    editTagOpen(item,index) {
      this.$set(item,'isEdit',true)
      this.$nextTick(_ => {
        this.$refs[`inputRef${index}`][0].$refs.input.focus();
      });
    },

    /* 编辑标签 */
    async editItemHandle(item) {
      if(item.label===item.ChartVarietyName || item.label===item.ChartTagName) {
        item.isEdit = false;
        return
      }

      let res = this.type==='tag' 
        ? await crossVarietyInterface.tagEdit({ TagName: item.label,ChartTagId:item.id})
        : await crossVarietyInterface.varietyEdit({ VarietyName: item.label,ChartVarietyId:item.id})
      if(res.Ret !== 200) return

      item.isEdit = false;
      this.refreshData()
    },

    refreshData() {
      this.searchTxt = ''
      this.$emit('refresh')
    },

    initData() {
      this.list = this.dataList.map(_ => ({
        label: _.ChartTagName || _.ChartVarietyName,
        id:  _.ChartTagId || _.ChartVarietyId,
        ..._
      }))
    },

    cancelHandle() {
      this.searchTxt = '';
      this.inputVisible = false;
      this.$emit('update:isShow',false)
    }
  },
}
</script>
<style scoped lang='scss'>
.dialog-min {
  padding: 0 0 60px;
  .tag-list { 
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  .input-edit {
    width: 100px;
  }
}
</style>
