<template>
  <div class="member-tag">
    <div class="tag-container">
      <nav-crumb :navpath="navpath"></nav-crumb>

      <div class="member-box">
        <div class="tag-input">
          <el-input placeholder="请输入关键词回车搜索标签" prefix-icon="el-icon-search" style="width: 348px" v-model="memberTag" @keyup.native.enter="searchMemberList" clearable></el-input>
        </div>
        <div class="main-tag">
          <div class="tag-list">
            <div class="search-box"></div>
            <p class="user-info">我的用户</p>
            <div class="list-box">
              <TagType v-for="(list, i) in tagList" :key="i" :tag-list="list" @handleFristTag="handleFristTag"> </TagType>
            </div>
          </div>

          <div class="tag-all">
            <p class="tag-name">
              {{ tagName }}
              <el-button type="primary" class="add-newtag" @click="addNewTag" v-show="handTag == 1">新增标签</el-button>
            </p>
            <tag-container :data="memberTagList" :handTag="handTag" :groupId="groupId" @deleteHandTag="deleteHandTag"> </tag-container>

            <div class="page-box" v-if="total > 0">
              <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"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot-box">
      <vue-gic-footer></vue-gic-footer>
    </div>
  </div>
</template>

<script>
import navCrumb from '@/components/nav/nav.vue';
import TagType from './tag-type';
import TagContainer from './tag-container';
import { getMemberTag, getMemberTagList } from '@/request/api';

export default {
  name: 'member-tag',

  componentName: 'member-tag',

  components: {
    navCrumb,
    TagType,
    TagContainer
  },

  data() {
    return {
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: `${window.location.origin}/report/#/memberSummary`,
          relocation: true
        },
        {
          name: '会员管理',
          path: ''
        },
        {
          name: '会员标签',
          path: ''
        }
      ],
      tagList: [],
      memberTagList: [], // 会员标签列表
      tagName: '全部标签',
      memberTag: '', // 搜索会员标签关键字
      tagCategory: '', // 当前标签类别
      pageSize: 20,
      pageNum: 1,
      currentPage: 1,
      total: 0
    };
  },

  methods: {
    async getTagList() {
      const Data = await getMemberTag();
      if (Data.result && Data.result.length) {
        this.tagList = Data.result;
      } else {
        this.tagList = [];
      }
    },

    async loadMemberTagList(opt) {
      const params = {
        requestProject: 'gic-member-tag-web',
        search: opt.searchName || null, // 标签名
        tagLevelGroupId: opt.id || 0, // 标签层级
        tagType: opt.type || null, // 标签类型
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const Data = await getMemberTagList(params);
      if (Data.result.result && Data.result.result.length) {
        this.memberTagList = Data.result.result;
        this.total = Data.result.totalCount;
      } else {
        this.memberTagList = [];
        this.total = 0;
      }
    },

    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadMemberTagList({});
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadMemberTagList({});
    },
    // 模糊查询会员标签
    searchMemberList() {
      this.loadMemberTagList({
        searchName: this.memberTag
      });
    },
    // 一级标签
    handleFristTag(list) {
      this.loadMemberTagList({
        id: list.id,
        type: list.handTag ? 1 : -1 // 手工标签传1
      });
      this.groupId = list.id;
      this.handTag = list.handTag;
      this.changeTagTitle(list.name);
      this.saveTagLevelGroupId(list);
    },
    changeTagTitle(name) {
      this.tagName = name || '全部标签';
    },
    saveTagLevelGroupId(list) {
      if (list.handTag == 1) {
        const hangObj = {
          name: list.name,
          id: list.id
        };
        localStorage.setItem('groupId', JSON.stringify(hangObj));
      }
    },
    // 添加手工标签
    addNewTag() {
      this.$router.push('/manualTagEdit');
    },
    // 删除手工
    deleteHandTag(id) {
      console.log(id);
      this.loadMemberTagList({
        id: id,
        type: 1 // 手工标签传1
      });
    }
  },

  beforeMount() {
    this.handTag = null;
    this.groupId = '';
    this.getTagList();
    if (localStorage.getItem('groupId')) {
      const hangObj = JSON.parse(localStorage.getItem('groupId'));
      this.loadMemberTagList({
        tagType: 1,
        id: hangObj.id
      });
      this.tagName = hangObj.name;
      this.handTag = true;
    } else {
      this.loadMemberTagList({
        tagType: -1
      });
    }
  },
  mounted() {
    this.$on('refersh-member-list', () => {
      this.getTagList();
    });

    // 处理二级标签
    this.$on('handle-second-tag', list => {
      this.loadMemberTagList({
        id: list.id,
        type: list.handTag ? 1 : -1 // 手工标签传1
      });
      this.groupId = list.id;
      this.handTag = list.handTag;
      this.changeTagTitle(list.name);
      this.saveTagLevelGroupId(list);
    });
    // 处理三级标签
    this.$on('handle-third-tag', list => {
      this.loadMemberTagList({
        id: list.id,
        type: list.handTag ? 1 : -1 // 手工标签传1
      });
      this.groupId = list.id;
      this.handTag = list.handTag;
      this.changeTagTitle(list.name);
      this.saveTagLevelGroupId(list);
    });
  }
};
</script>

<style lang="scss" scoped>
.member-tag {
  width: 100%;
  overflow-y: auto;
  .tag-container {
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 93px;
  }
  .foot-box {
    margin-top: -100px;
  }
  .main-tag {
    display: flex;
    border-top: 1px solid #ebeef5;
    .tag-list {
      overflow-y: auto;
      flex: 0 0 470px;
      padding: 23px 0 0 25px;
      height: 580px;
      border-right: 1px solid #ebeef5;
      .user-info {
        font-size: 16px;
        color: #909399;
      }
    }
    .tag-all {
      flex: 1;
      position: relative;
      .tag-name {
        line-height: 34px;
        padding: 10px 20px;
        font-size: 16px;
        color: #303133;
        font-weight: bold;
      }
      .page-box {
        position: absolute;
        bottom: 10px;
        right: 20px;
      }
      .add-newtag {
        float: right;
        margin-bottom: 10px;
      }
    }
  }
  .member-box {
    margin: 20px 32px 0;
    background-color: #fff;
    .tag-input {
      padding: 16px 20px;
    }
  }
}
</style>
