<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" @click="allTagList">我的用户</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 @deleteHandTag="deleteHandTag" :data="memberTagList" :handTag="handTag" :groupId="groupId" :refersh="refershList" @addTag="selectedTag" ref="tagContainer" />

            <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 class="my-pop-tagbox" @click="expendsGroupList">
              <p class="txt">已选标签</p>
              <p class="number-txt">{{ groupListNumber }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

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

    <div class="group-right-list" v-show="groupShow && groupListNumber">
      <div class="group-title">
        <i class="iconfont icon-17" />
        已经选标签：
        <strong class="label-count">
          {{ groupListNumber }}
        </strong>
        <i class="el-icon-close icon-right" @click="groupShow = false" />
      </div>
      <el-collapseTransition>
        <div class="wapper">
          <p class="desc-labeltxt" :class="{ 'margin-60': marginSixty }">（一个输入框内标签关系为且）</p>
          <div class="inner">
            <tags-group-list
              :selectedTagsData="selectedTags"
              :tagsGroupRelation="tagsGroupRelation"
              @editTags="editTags"
              :activeTagsGroupIndex.sync="activeTagsGroupIndex"
              :activeTagIndex.sync="activeTagIndex"
            />
            <div class="form-item" :class="{ 'margin-60': marginSixty }">
              <label for="">分组名称</label>
              <el-input v-model="tagConfig.groupName" :maxlength="10" style="width: 200px;" placeholder="请输入内容"></el-input>
              <span class="groupName-txt">{{ tagConfig.groupName.length }}/10</span>
            </div>
            <div class="form-item" :class="{ 'margin-60': marginSixty }">
              <label for="">分组有效期</label>
              <el-date-picker v-model="tagConfig.date" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:MM:SS" type="date" placeholder="选择日期"> </el-date-picker>
            </div>
            <div class="form-item" :class="{ 'margin-60': marginSixty }">
              <label for="">分组描述</label>
              <el-input type="textarea" v-model="tagConfig.textarea" :maxlength="200" style="width: 300px;" placeholder="请输入内容"></el-input>
              <span class="textarea-txt">{{ tagConfig.textarea.length }}/200</span>
            </div>
            <div class="form-item" v-show="tagConfig.isRealTime == 0" :class="{ 'margin-60': marginSixty }">
              <label for="">更新频率<span class="desc-labeltxt">（更新时间预计选择日期的凌晨0点至6点）</span></label>
              <el-select class="w-200" v-model="tagConfig.updateType" placeholder="请选择">
                <el-option v-for="(item, index) in rateData" :key="item.label" :label="item.label" :value="index + 1"></el-option>
              </el-select>
              <el-select class="w-200 p-l-8" v-model="tagConfig.updateDay" v-show="tagConfig.updateType != 1" placeholder="请选择">
                <el-option v-for="(item, index) in rateData[tagConfig.updateType ? tagConfig.updateType - 1 : 0].options" :key="item" :label="item" :value="index + 1"></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </el-collapseTransition>
      <div class="fixed-btn">
        <el-button type="primary" @click="createNewGroup">创建会员分组</el-button>
      </div>
    </div>
    <edit-tag :showEditTagPop.sync="showEditTagPop" :tagData="tagData" :title="editPopType === 'add' ? '添加标签' : '编辑标签'" @returnTagData="returnTagData" @refersh="refersh"></edit-tag>
  </div>
</template>

<script>
import Vue from 'vue';
import { CollapseTransition } from 'element-ui';
import navCrumb from '@/components/nav/nav.vue';
import TagsGroupList from '../memberGroup/tags-group-list';
import TagType from './tag-type';
import TagContainer from './tag-container';
import { getMemberTag, getMemberTagList, addNewGroup } from '@/request/api';
import EditTag from '../memberGroup/edit-tag';

Vue.component(CollapseTransition.name, CollapseTransition);

export default {
  name: 'member-tag',

  componentName: 'member-tag',

  components: {
    navCrumb,
    TagType,
    TagContainer,
    TagsGroupList,
    EditTag
  },

  data() {
    return {
      margin60: false,
      refershList: {},
      tagConfig: {
        groupName: '',
        textarea: '', // 描述
        date: '', // 有效期
        updateType: '', // 更新类型频率
        updateDay: '', // 更新类型时间
        isRealTime: 0, // 实时
        effectiveStatus: 1 // 有效状态nage
      },
      activeTagsGroupIndex: 0,
      activeTagIndex: 0,
      groupShow: false,
      selectedTags: [[]],
      tagsGroupRelation: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: `${window.location.origin}/report/#/memberSummary`,
          relocation: true
        },
        {
          name: '会员管理',
          path: ''
        },
        {
          name: '会员标签',
          path: ''
        }
      ],
      tagList: [],
      memberTagList: [], // 会员标签列表
      tagName: '全部标签',
      memberTag: '', // 搜索会员标签关键字
      tagCategory: '', // 当前标签类别
      pageSize: 20,
      pageNum: 1,
      total: 0,

      // 更新频率
      rateData: [
        {
          label: '每日一次',
          options: []
        },
        {
          label: '每周一次',
          options: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        {
          label: '每月一次',
          options: [
            '1号',
            '2号',
            '3号',
            '4号',
            '5号',
            '6号',
            '7号',
            '8号',
            '9号',
            '10号',
            '11号',
            '12号',
            '13号',
            '14号',
            '15号',
            '16号',
            '17号',
            '18号',
            '19号',
            '20号',
            '21号',
            '22号',
            '23号',
            '24号',
            '25号',
            '26号',
            '27号',
            '28号'
          ]
        }
      ],

      showEditTagPop: false,
      tagData: {},
      editPopType: 'add'
    };
  },

  computed: {
    groupListNumber() {
      let listNumber = 0;
      let index = 0;
      while (index < this.selectedTags.length) {
        listNumber += this.selectedTags[index].length;
        index++;
      }
      this.checkRealTime();
      return listNumber;
    },
    marginSixty() {
      return this.selectedTags.length > 1;
    }
  },

  methods: {
    // 刷新
    refersh(list) {
      list.changeRefersh = true;
      this.refershList = list;
    },
    allTagList() {
      localStorage.setItem('groupId', '');
      this.params.id = '';
      this.loadMemberTagList(this.params);
      this.tagName = '全部标签';
      this.$store.commit('modiftTagName', '全部标签');
    },
    checkRealTime() {
      let arr = this.selectedTags.reduce((curr, el) => {
        return curr.concat(el);
      }, []);

      let newActiveArr = arr.map(el => el.isActive);
      // 0 非实时 1 实时
      this.tagConfig.isRealTime = newActiveArr.indexOf(0) > -1 ? 0 : 1;
    },

    createNewGroup() {
      const param = {
        groupName: this.tagConfig.groupName,
        isRealTime: this.tagConfig.isRealTime,
        describle: this.tagConfig.textarea,
        updateType: this.tagConfig.updateType,
        updateDay: this.tagConfig.updateDay,
        effectiveStatus: 1,
        requestProject: 'gic-member-tag-web',
        json: JSON.stringify(this.selectedTags),
        effectiveDateTmp: this.tagConfig.date
      };
      // 必填项目
      if (param.groupName == '') {
        this.$message.warning({ message: '会员分组名称不能为空！' })
        return;
      }

      if (param.effectiveDateTmp == '') {
        this.$message.warning({ message: '会员分组有效期不能为空！' })
        return;
      }

      if (param.isRealTime === 0 && param.updateType !== 1 && param.updateDay === '') {
        this.$message.warning({ message: '会员分组更新频率不能为空！' })
        return;
      }

      addNewGroup(param)
        .then(res => {
          if (res.errorCode == 1) {
            this.$router.push({ path: 'memberGroupList' });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    expendsGroupList() {
      // if (this.selectedTags && this.selectedTags.length) {
      this.groupShow = true;
      // }
    },
    returnTagData(tagData) {
      let tagParams = JSON.parse(tagData.tagParams);
      tagData.newTagVal = JSON.stringify(tagParams.selectedVal);
      tagData.level = this.activeTagsGroupIndex;
      tagData.levelType = this.tagsGroupRelation[this.activeTagsGroupIndex] ? this.tagsGroupRelation[this.activeTagsGroupIndex] : 'or';
      switch (this.editPopType) {
        case 'add':
          this.selectedTags[this.activeTagsGroupIndex].push(tagData);
          break;
        case 'edit':
          // 注意有坑
          let tagsGroup = this.selectedTags[this.activeTagsGroupIndex];
          tagsGroup.splice(this.activeTagIndex, 1, { ...tagsGroup[this.activeTagIndex], ...tagData });
          this.selectedTags.splice(this.activeTagsGroupIndex, 1, tagsGroup);
          break;
      }
    },
    editTags() {
      this.editPopType = 'edit';
      this.showEditTagPop = true;
      this.$nextTick(_ => {
        this.tagData = Object.assign({}, this.tagData, this.selectedTags[this.activeTagsGroupIndex][this.activeTagIndex]);
        this.tagData.editCondition = true;
      });
    },
    // 新增选择标签
    selectedTag(tagData) {
      if (tagData.refersh) {
        // 表示是之前新增过的 要编辑一次
        this.editPopType = 'edit';
      } else {
        this.editPopType = 'add';
      }
      this.tagData = Object.assign({}, this.tagData, tagData);
      this.tagData.editCondition = false;
      this.showEditTagPop = true;
    },
    async getTagList() {
      const Data = await getMemberTag();
      if (Data.result && Data.result.length) {
        this.tagList = Data.result;
      } else {
        this.tagList = [];
      }
    },

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

    // 每页条数改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.params.pageSize = val;
      const param = this.JudgeIsHandTag();
      this.loadMemberTagList(param);
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.pageNum = val;
      this.loadMemberTagList(this.params);
    },
    /**
     * 判断是否是手工标签
     */
    JudgeIsHandTag() {
      let param = null;
      let keys = Object.keys(this.middleWareVariable);
      // 长度大于0就表示 有手工标签的值
      if (keys.length) {
        param = {
          id: this.middleWareVariable.id,
          type: this.middleWareVariable.type == 1 ? 1 : 0
        };
      }
      return param;
    },

    // 模糊查询会员标签
    searchMemberList() {
      if (this.memberTag) {
        this.tagName = this.memberTag;
      } else {
        this.tagName = '全部标签';
      }

      this.loadMemberTagList({
        searchName: this.memberTag
      });
      // this.tagName = '全部标签';
      // this.handTag = null;
    },
    // 一级标签
    handleFristTag(list) {
      this.pageNum = 1;
      this.pageSize = 20;
      this.params.pageNum = 1;
      this.params.pageSize = 20;
      this.saveTagLevelGroupId(list);
      this.loadMemberTagList(this.params);
      this.groupId = list.id;
      this.handTag = list.handTag;
      this.changeTagTitle(list.name);
    },
    changeTagTitle(name) {
      this.tagName = name || '全部标签';
      this.$store.commit('modiftTagName', this.tagName);
    },
    saveTagLevelGroupId(list) {
      this.params.id = list.id;
      if (list.handTag == 1) {
        const hangObj = {
          name: list.name,
          type: 1,
          id: list.id
        };
        // 要存下来是不是手工标签
        this.params.type = 1;
        localStorage.setItem('groupId', JSON.stringify(hangObj));
      } else {
        this.params.type = -1;
        localStorage.setItem('groupId', '');
      }
    },
    // 添加手工标签
    addNewTag() {
      this.$router.push('/manualTagEdit');
    },
    // 删除手工
    deleteHandTag(id) {
      this.loadMemberTagList({
        id: id,
        type: 1 // 手工标签传1
      });
    }
  },

  beforeMount() {
    // 一二三级都需要一个变量来保存自己的信息 在切换页码和数量的时候也要传参数过去
    this.middleWareVariable = {};
    /**
     * 列表数据的参数
     *
     * 如果选中手工标签就判断是不是手工标签 是的话我们就存下手工标签的id和类型
     * 如果是其他的就去掉 groupId 的storage内容
     *
     */
    this.params = {
      requestProject: 'gic-member-tag-web',
      id: '',
      searchName: this.memberTag,
      type: -1,
      pageNum: 1,
      pageSize: 20
    };
    this.tagConfig = {
      groupName: '',
      isRealTime: '',
      textarea: '',
      updateType: '',
      updateDay: '',
      date: ''
    };
    this.handTag = null;
    this.groupId = '';
    this.getTagList();
    if (localStorage.getItem('groupId')) {
      const hangObj = JSON.parse(localStorage.getItem('groupId'));
      this.middleWareVariable = JSON.parse(JSON.stringify(hangObj));

      this.params.type = 1;
      this.params.id = hangObj.id;
      this.loadMemberTagList(this.params);
      this.tagName = hangObj.name;
      this.$store.commit('modiftTagName', this.tagName);
      this.handTag = true;
    } else {
      this.loadMemberTagList(this.params);
    }
  },
  mounted() {
    this.$on('refersh-member-list', () => {
      this.getTagList();
    });

    // 处理二级标签
    this.$on('handle-second-tag', list => {
      this.middleWareVariable = {
        id: list.id,
        type: list.handTag,
        name: list.name
      };
      this.pageNum = 1;
      this.pageSize = 20;

      this.saveTagLevelGroupId(list);
      this.loadMemberTagList(this.params);
      this.groupId = list.id;
      this.handTag = list.handTag;
      this.changeTagTitle(list.name);
    });
    // 处理三级标签
    this.$on('handle-third-tag', list => {
      this.middleWareVariable = {
        id: list.id,
        type: list.handTag,
        name: list.name
      };
      this.pageNum = 1;
      this.pageSize = 20;
      this.params.pageNum = 1;
      this.params.pageSize = 20;
      this.saveTagLevelGroupId(list);
      this.loadMemberTagList(this.params);
      this.groupId = list.id;
      this.handTag = list.handTag;
      this.changeTagTitle(list.name);
    });
  }
};
</script>

<style lang="scss" scoped>
.member-tag {
  position: relative;
  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;
        cursor: pointer;
      }
    }
    .tag-all {
      flex: 1;
      position: relative;
      padding-bottom: 40px;
      .tag-name {
        line-height: 34px;
        padding: 10px 20px;
        font-size: 16px;
        color: #303133;
        font-weight: bold;
      }
      .page-box {
        float: right;
        margin: 20px;
      }
      .add-newtag {
        float: right;
        margin-bottom: 10px;
      }
    }
  }
  .member-box {
    padding-bottom: 20px;
    margin: 20px 32px 0;
    background-color: #fff;
    .tag-input {
      padding: 16px 20px;
    }
  }
  .my-pop-tagbox {
    position: absolute;
    z-index: 2;
    right: 40px;
    bottom: -15px;
    height: 70px;
    width: 70px;
    color: #fff;
    background-color: #1890ff;
    box-shadow: 0 0 5px #555;
    border-radius: 50%;
    cursor: pointer;
    .txt {
      text-align: center;
      padding-top: 25px;
      font-size: 12px;
    }
    .number-txt {
      text-align: center;
      padding-top: 5px;
      font-size: 14px;
    }
    &:hover {
      transition: all ease 0.3s;
      transform: scale(1.2);
    }
  }
  .group-right-list {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: 0 0 5px #bbb;
    background-color: #fff;
    z-index: 100;
    transition: all 0.3s ease-in-out;
    .group-title {
      padding: 10px;
      height: 50px;
      line-height: 30px;
      font-size: 14px;
      color: #303133;
      background-color: #f3f6f9;
      border: 1px solid rgba(235, 238, 245, 1);
      .label-count {
        font-size: 16px;
      }
      .icon-right {
        float: right;
        margin-top: 7px;
        cursor: pointer;
      }
    }
    .form-item {
      margin-top: 20px;
      margin-bottom: 20px;
      color: #606266;
      label {
        display: block;
        margin-bottom: 10px;
      }
    }
    .refresh-txt {
      color: #606266;
    }
    .wapper {
      height: calc(100% - 130px);
      padding: 10px;
      overflow-y: auto;
      .desc-labeltxt {
        padding: 10px;
        color: #909399;
        font-size: 14px;
      }
    }
    .marginwapper {
      margin-left: 0px;
    }
    .fixed-btn {
      position: absolute;
      height: 80px;
      line-height: 80px;
      right: 0px;
      left: 0px;
      bottom: 0px;
      width: 100%;
      text-align: center;
      background-color: #fff;
      box-shadow: 3px 0px 12px 2px rgba(220, 223, 230, 0.75);
    }
  }
  .groupName-txt {
    position: relative;
    color: #909399;
    top: 2px;
    left: -45px;
  }
  .textarea-txt {
    position: relative;
    color: #909399;
    left: -70px;
  }
}
.margin-60 {
  margin-left: 60px;
}
</style>
