<!--
 * @Descripttion: 导购标签分类列表
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-09-01 11:09:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-21 10:31:46
-->
<!--
  <tag-classify-list :tag-list="tagList" :current-classify-id="currentClassifyId" :brand-id="brandId" @refreshClassify="refreshClassify" @resetCurrentId="resetCurrentId" @changeClass="changeClass"></tag-classify-list>
  import tagClassifyList from '@/components/app/my-customer/tag-classify-list.vue';
-->
<template>
  <div>
    <ul class="tag-classify-body">
      <li :class="['tag-classify-item', { active: currentClassifyId == item.categoryId }]" v-for="(item, index) in tagList" :key="item.categoryId+index" @click="changeClassify(index, item)">
        <span class="tag-classify-name">{{ item.categoryName || '--' }}</span>
        <el-dropdown v-if="item.state != 0" class="tag-classify-drop" placement="bottom-start">
          <i class="iconfont icongengduo1 edit-icon"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="padding: 0 30px;" @click.native="toEditClassify(index, item)">编辑</el-dropdown-item>
            <el-dropdown-item style="padding: 0 30px;" @click.native="toDelClassify(index, item)">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </li>
      <li v-if="tagList.length == 0" class="no-data" >暂无数据</li>
    </ul>
    <tag-classify-dialog v-if="showTagClass" :brand-id="brandId" :edit-row="editRow" @closeClassify="closeClassify"></tag-classify-dialog>
  </div>
</template>

<script>
import tagClassifyDialog from '@/components/app/my-customer/tag-classify-dialog.vue';
import showMsg from '@/common/js/showmsg.js';
import api from '@/api/my-customer-app.js';
const { delClassify } = api;

export default {
  name: 'TagClassify',
  components: {
    tagClassifyDialog
  },
  props: {
    brandId: {
      type: String,
      default: ''
    },
    tagList: {
      type: Array,
      default: () => []
    },
    currentClassifyId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      editRow: {},
      showTagClass: false
    };
  },
  methods: {
    /**
     * @description: 选择分类
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    changeClassify(index, row) {
      this.$emit('changeClass', row);
    },
    /**
     * @description: 编辑分类
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    toEditClassify(index, row) {
      const that = this;
      that.editRow = row;
      that.showTagClass = true;
    },
    /**
     * @description: 关闭分类弹窗
     * @param {String} res
     * @return {Boolean}
     * @author: 无尘
     */
    closeClassify(res) {
      const that = this;
      that.showTagClass = false;
      that.$emit('refreshClassify');
      if (res == 'close') {
        return false;
      }
      that.editRow.categoryName = res;
    },
    /**
     * @description: 删除分类
     * @param {Number} index
     * @param {Object} row
     * @author: 无尘
     */
    toDelClassify(index, row) {
      const that = this;
      that
        .$confirm('删除该分类后，该分类内的所有标签将会被删除！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.delTagData(row.categoryId);
        })
        .catch(() => {});
    },
    delTagData(categoryId) {
      const that = this;
      const para = {
        categoryId,
        wxEnterpriseId: that.wxEnterpriseId,
        enterpriseId: that.brandId

      };
      delClassify(para, { headers: { sign: that.brandId } })
        .then(res => {
          // 这里要判断一下当前选中的分类和删除分类是不是同一个
          if (categoryId == that.currentClassifyId) {
            that.$emit('resetCurrentId');
          }else {
            that.$emit('refreshClassify');
          }
          if (res.code == '0000') {
            showMsg.showmsg('删除成功', 'success');
          }else {
            showMsg.showmsg(res.message || '接口异常', 'warning');
          }
        })
        .catch(function(error) {

        });
    },
  }
};
</script>

<style lang="less" scoped>
.tag-classify-drop {
  .el-dropdown-menu__item {
    padding: 0 30px;
  }
}
.tag-classify-body {
  .tag-classify-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px 0 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 10px;
    color: @gray02;
    cursor: pointer;
    &.active {
      color: @blue;
      background-color: rgba(47,84,235,0.05);;
    }
    &:hover {
      color: @blue;
      background-color: rgba(47,84,235,0.05);;
      .edit-icon {
        opacity: 1;
        color: #909399;
        background-color: none;
      }
    }
    .edit-icon {
      padding: 4px;
      opacity: 0;
      font-size: 16px;
      &:hover {
        opacity: 1;
        color: @blue;
        background-color: rgba(47,84,235,0.09);
      }
    }
    .tag-classify-name {
      display: block;
      width: 90%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .no-data {
    padding: 10px 0 40px 0;
    text-align: center;
    color: @gray03;
  }
}

</style>
