<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-03-16 09:59:39
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-12 13:51:43
 -->
<template>
  <div class="daily-set-wrap ">
    <div class="daily-set-content border-box">
      <div class="material-top border-box">
        <el-input placeholder="请输入素材名称" v-model="searchInput" style="width: 394px;" @keyup.native="value => toInput(value, searchInput)" clearable @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
      </div>
      <div class="material-body flex m-t-20">
        <div class="material-left">
          <div class="material-left-add m-t-10 text-center">
            <div class="add-group font-14 color-909399 cursor-pointer line-h-32" @click="addGroup"><span class="el-icon-plus"></span><span class="p-l-5">新建分组</span></div>
          </div>
          <div class="group-body">
            <div :class="['no-group m-t-10 line-h-32 font-14 color-606266', currentCategoryId == '-1' ? 'current-group' : '']">未分组</div>
            <ul class="group-ul padding-lr-12">
              <template v-for="(item, index) in groupData">
                <li class="group-cell" :key="index + 'group'">
                  <div @click="selectGroup(item)">
                    <span v-if="item.children.length" :class="['color-c0c4cc font-12', item.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span :class="['font-14 color-606266 p-l-10', currentCategoryId == item.categoryId ? 'current-group' : '']">{{ item.categoryName }}</span
                    ><el-popover placement="bottom" width="100" trigger="click">
                      <ul>
                        <li class="line-h-32 font-14 color-606266" @click.stop="addChildGroup(item)">新增子分组</li>
                        <li class="line-h-32 font-14 color-606266" @click.stop="editGroup(item)">编辑</li>
                        <li v-if="!item.children.length" class="line-h-32 font-14 color-606266" @click.stop="delGroup(item)">删除</li>
                      </ul>
                      <span class="iconfont icongengduo color-afaeae cursor-pointer operate-icon" slot="reference"></span>
                    </el-popover>
                  </div>
                  <ul v-if="item.expand" class="p-l-10">
                    <template v-for="(itemTwo, ind) in item.children">
                      <li class="group-cell" :key="ind + 'group'">
                        <div @click.stop="selectGroup(itemTwo)">
                          <span v-if="itemTwo.children.length" :class="['color-c0c4cc font-12', itemTwo.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span :class="['font-14 color-606266 p-l-10', currentCategoryId == itemTwo.categoryId ? 'current-group' : '']">{{ itemTwo.categoryName }}</span
                          ><el-popover placement="bottom" width="100" trigger="click">
                            <ul>
                              <li class="line-h-32 font-14 color-606266" @click.stop="addChildGroup(itemTwo)">新增子分组</li>
                              <li class="line-h-32 font-14 color-606266" @click.stop="editGroup(itemTwo)">编辑</li>
                              <li v-if="!itemTwo.children.length" class="line-h-32 font-14 color-606266" @click.stop="delGroup(itemTwo)">删除</li>
                            </ul>
                            <span class="iconfont icongengduo color-afaeae cursor-pointer operate-icon" slot="reference"></span>
                          </el-popover>
                        </div>
                        <ul v-if="itemTwo.expand" class="p-l-10">
                          <template v-for="(itemThree, i) in itemTwo.children">
                            <li class="group-cell" :key="i + 'group'">
                              <div @click.stop="selectGroup(itemThree)">
                                <span v-if="itemThree.children.length" :class="['color-c0c4cc font-12', itemThree.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span :class="['font-14 color-606266 p-l-10', currentCategoryId == itemThree.categoryId ? 'current-group' : '']">{{ itemThree.categoryName }}</span
                                ><el-popover placement="bottom" width="100" trigger="click">
                                  <ul>
                                    <li class="line-h-32 font-14 color-606266" @click.stop="addChildGroup(itemThree)">新增子分组</li>
                                    <li class="line-h-32 font-14 color-606266" @click.stop="editGroup(itemThree)">编辑</li>
                                    <li v-if="!itemThree.children.length" class="line-h-32 font-14 color-606266" @click.stop="delGroup(itemThree)">删除</li>
                                  </ul>
                                  <span class="iconfont icongengduo color-afaeae cursor-pointer operate-icon" slot="reference"></span>
                                </el-popover>
                              </div>
                            </li>
                          </template>
                        </ul>
                      </li>
                    </template>
                  </ul>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="material-right"></div>
      </div>
    </div>
    <group-dialog v-if="addShow" :categoryParentId="categoryParentId" :editRow="editGroupRow" @closeGroup="closeGroup" @submitGroup="submitGroup"></group-dialog>
  </div>
</template>
<script>
import groupDialog from '@/components/set/group-dialog.vue';
import { getRequest } from '@/api/api';
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';

export default {
  props: {},
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('userInfos') ? JSON.parse(localStorage.getItem('userInfos')).wxEnterpriseId : '',
      searchInput: '',
      currentCategoryId: '-1', // 当前选中的分组
      groupData: [],
      categoryParentId: '',
      addShow: false,
      editGroupRow: {},
      tableData: []
    };
  },
  methods: {
    /**
     * 选中分组
     */
    selectGroup(item) {
      const that = this;
      item.expand = item.expand ? false : true;
      that.currentCategoryId = item.categoryId;
    },
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    }, 500),
    /**
     * 搜索标签清空
     */
    clearSearch() {
      const that = this;
      that.currentPage = 1;
      that.getTableList();
    },
    /**
     * 新增分组
     */
    addGroup() {
      const that = this;
      that.addShow = true;
      that.categoryParentId = '';
      that.editGroupRow = {};
    },
    closeGroup() {
      const that = this;
      that.addShow = false;
      that.editGroupRow = {};
    },
    submitGroup() {
      const that = this;
      that.addShow = false;
      that.editGroupRow = {};
      that.getGroupData();
    },
    addChildGroup(item) {
      const that = this;
      that.editGroupRow = {};
      that.categoryParentId = item.categoryId;
      that.addShow = true;
    },
    editGroup(item) {
      const that = this;
      that.addShow = true;
      that.categoryParentId = '';
      that.editGroupRow = item;
    },
    delGroup(item) {
      const that = this;
      that
        .$confirm('是否删除当前选中的分组?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          that.postDelData(item);
        })
        .catch(() => {});
    },
    /**
     * 获取数据
     */
    postDelData(item) {
      const that = this;
      let para = {
        categoryId: item.categoryId
      };
      getRequest('/haoban-manage3-web/category-del', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('删除成功', 'success');
            that.getGroupData();
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 简单数组-->父子数组对象
     */
    treeData(data) {
      let tree = data.filter(father => {
        //循环所有项
        let branchArr = data.filter(child => {
          return father.categoryId == child.categoryParentId; //返回每一项的子级数组
        });
        if (branchArr.length > 0) {
          father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
        } else {
          father.children = [];
        }
        return father.categoryParentId == 0; //返回第一层
      });
      console.log('tree:', tree);
      return tree;
    },
    /**
     * 获取数据
     */
    getGroupData(val) {
      const that = this;
      let para = {
        wxEnterpriseId: that.wxEnterpriseId
      };
      getRequest('/haoban-manage3-web/category-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.groupData = that.treeData(resData.result) || [];
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {},
  mounted() {
    const that = this;
    that.$emit('showTab', 3);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.getGroupData();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: { groupDialog }
};
</script>
<style type="text/less" lang="less" scoped>
.bg-ebecf0 {
  background: #ebecf0;
}
.color-afaeae {
  color: #afaeae;
}
.color-c0c4cc {
  color: #c0c4cc;
}
.condition-tips {
  display: inline-block;
  vertical-align: middle;
  line-height: 32px;
}
.p-l-30 {
  padding-left: 30px;
}
.p-l-40 {
  padding-left: 40px;
}
.p-l-55 {
  padding-left: 55px;
}
.p-l-85 {
  padding-left: 85px;
}
.m-l-20 {
  margin-left: 20px;
}
.line-50 {
  height: 50px;
  line-height: 50px;
}
.el-alert--info {
  width: 608px;
  font-size: 14px;
  color: #606266;
  background: rgba(240, 245, 255, 1);
  border-radius: 2px;
  border: 1px solid rgba(133, 165, 255, 1);
}
.el-icon-info {
  width: 12px;
  font-size: 12px;
  color: #2f54eb;
}
.line-h-32 {
  line-height: 32px;
}
.material-top {
  padding: 20px;
}
.operate-icon {
  position: absolute;
  right: 0;
  z-index: 1;
}
.material-body {
  position: relative;
  width: 100%;
  border-top: 1px solid #e4e7ed;
  .material-left {
    position: relative;
    width: 194px;
    .add-group {
      width: 154px;
      height: 32px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 1);
      border: 1px dashed rgba(192, 196, 204, 1);
    }
    .group-body {
      padding: 0 12px;
      .group-ul {
        .group-cell {
          position: relative;
          min-height: 32px;
          line-height: 32px;
        }
      }
      .current-group {
        color: #2f54eb;
      }
    }
  }
  .material-right {
    position: relative;
    width: calc(100vw - 194px);
    border-left: 1px solid #e4e7ed;
  }
}
</style>
