<template>
  <div class="m-l-60">
    <tags-group
      v-for="(item, index) in selectedTagData"
      :key="index"
      :tagsData="item"
      :showTagsRelation="(index === 0 && selectedTagData.length > 1) || (index === 1 && selectedTagData.length > 2)"
      :tagsGroupIndex="index"
      tagsRelation="or"
      :showAddMenu="true"
      :active="activeTagsGroup === index"
      @addTags="addTags"
      @delTags="delTags"
      @editTags="editTags"
      @delTagsGroup="delTagsGroup"
      @changeTagsGroupRelation="changeTagsGroupRelation"
      @checkTagsGroup="checkTagsGroup"
    />
    <el-button class="m-t-10 m-l-60 w-548 el-icon-plus color-blue" v-show="selectedTagData.length < 3" @click="addTagsGroup">
      &nbsp;&nbsp;添加
    </el-button>
    <!-- 添加标签 -->
    <el-dialog :visible.sync="showAddTagPop" title="选择标签" custom-class="tags-body" width="980px">
      <div class="tags">
        <div class="tags-list">
          <el-tree :data="tagsList" :props="{ label: 'nameStr', children: 'children' }" :default-expand-all="true" :highlight-current="true" @node-click="treeClick"></el-tree>
        </div>
        <div class="tags-table">
          <div class="tags-search">
            <el-input type="search" placeholder="请输入关键词回车搜索标签" prefix-icon="el-icon-search" @keydown.native.enter="searchTags"></el-input>
          </div>
          <tag-container :data="tagsGroupList"></tag-container>
          <div class="page-box">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              v-if="total > 0"
            ></el-pagination>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/**
 * 添加标签的弹窗
 * 7个地方需要切换标签组选中状态，分别是
 *  默认标签组
 *  点击下拉菜单添加按钮
 *  点击下拉菜单删除按钮
 *  新增一个标签组
 *  编辑标签
 *  删除标签
 *  点击选择标签组
 * */
import './tags-detail.css';
import tagsGroup from './tags-group';
import tagContainer from '@/view/platformTag/tag-container.vue';
import { getMemberTagList } from '@/request/api.js';
import { getMemberTagCount } from '@/request/memberGroup.js';

export default {
  name: 'tags-detail',
  props: {
    selectedTagData: Array
  },
  components: {
    tagsGroup,
    tagContainer
  },
  data() {
    return {
      // 显示添加标签的弹窗
      showAddTagPop: false,
      // 标签分组的数据
      tagsList: [],
      // 一组标签的数据
      tagsGroupList: [],
      // 标签组选中状态的索引
      activeTagsGroup: 0,

      // 分页相关
      pageNum: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    // 添加一个标签组，最多只能有3个标签组
    addTagsGroup() {
      this.selectedTagData.length < 3 && this.selectedTagData.push([]);
      this.activeTagsGroup = this.selectedTagData.length - 1;
    },
    // 删除一个标签组
    delTagsGroup(data) {
      this.selectedTagData.splice(data.tagsGroupIndex, 1);
      this.activeTagsGroup = 0;
    },
    // 添加标签
    addTags(data) {
      this.activeTagsGroup = data.tagsGroupIndex;
      this.showAddTagPop = true;
    },
    // 删除标签
    delTags(data) {
      this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1);
      this.activeTagsGroup = data.tagsGroupIndex;
    },
    // 编辑一个标签
    editTags(data) {
      this.selectedTagData[data.tagsGroupIndex].splice(data.tagIndex, 1, data.tagData);
      this.activeTagsGroup = data.tagsGroupIndex;
    },
    // 修改两个标签组之间的关系
    changeTagsGroupRelation(data) {
      alert('修改两个标签组之间的关系');
    },
    // 点击标签组切换标签组的选中状态
    checkTagsGroup(data) {
      this.activeTagsGroup = data.tagsGroupIndex;
    },
    // 获取标签分类
    getTagsList() {
      getMemberTagCount().then(res => {
        if (res.result && res.result.length) {
          this.tagsList = res.result;
          this.tagsList.forEach(first => {
            first.nameStr = first.name;
            first.children.forEach(second => {
              second.nameStr = second.name;
              second.children.forEach(item => {
                item.nameStr = item.name;
                if (item.count && item.count > 0) {
                  item.nameStr = `${item.name} (${item.count})`;
                }
              });
            });
          });
        } else {
          this.tagsList = [];
        }
      });
    },
    // 获取一组标签
    getTagsGroupList(opt) {
      opt = opt ? opt : {};
      const params = {
        requestProject: 'gic-member-tag-web',
        search: opt.searchName || null, // 模糊查询的标签名
        tagLevelGroupId: opt.id || 0, // 标签层级
        tagType: opt.type || null, // 标签类型 手工标签传1
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      getMemberTagList(params).then(res => {
        if (res.result.result && res.result.result.length) {
          this.tagsGroupList = res.result.result;
          this.total = res.result.totalCount;
        } else {
          this.tagsGroupList = [];
          this.total = 0;
        }
        console.log('tagsGroupList', this.tagsGroupList);
      });
    },
    // 搜索标签
    searchTags(e) {
      if (e.target.value) {
        this.pageNum = 1;
        this.getTagsGroupList({
          searchName: e.target.value
        });
      }
    },
    // 点击tree 选择标签组
    treeClick(data, node) {
      if (node.level === 3) {
        this.pageNum = 1;
        this.getTagsGroupList({
          id: data.id,
          type: data.handTag
        });
      }
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getTagsGroupList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getTagsGroupList();
    }
  },
  mounted() {
    this.getTagsList();
    this.getTagsGroupList();
  }
};
</script>

<style lang="less" scoped>
.m-l-60 {
  margin-left: 60px;
}

.tags {
  display: flex;
  border-top: 1px solid #aaa;
  .tags-list {
    padding-top: 20px;
    width: 20%;
    height: 540px;
    border-right: 1px solid #aaa;
    overflow-x: scroll;
  }
  .tags-table {
    padding-top: 20px;
    width: 80%;

    .tags-search {
      margin: 0 0 20px 20px;
      width: 300px;
    }
  }
}

.page-box {
  transform: translate(0, -20px);
}
</style>
