<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-03-16 09:59:39
 * @LastEditors: 无尘
 * @LastEditTime: 2020-05-12 11:25:33
 -->
<template>
  <div class="daily-set-wrap ">
    <div class="daily-set-content border-box">
      <div class="material-top">
        <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 text-center">
            <div class="add-group font-14 color-909399" @click="addGroup"><span class="el-icon-plus"></span><span class="p-l-5">新建分组</span></div>
          </div>
          <div class="group-body">
            <div :class="['no-group line-h-32 font-14 color-606266', currentCategoryId == '-1' ? 'current-group' : '']">未分组</div>
            <ul class="group-ul padding-lr-12">
              <li class="group-cell" v-for="(item, index) in groupData" :key="index + 'group'">
                <div>
                  <span :class="[item.expand ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"></span><span :class="['font-14 color-606266', 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="addChildGroup(item)">新增子分组</li>
                      <li class="line-h-32 font-14 color-606266" @click="editGroup(item)">编辑</li>
                      <li v-if="!item.children.length" class="line-h-32 font-14 color-606266" @click="delGroup(item)">删除</li>
                    </ul>
                    <span class="iconfont icongengduo color-f0f2f5" slot="reference"></span>
                  </el-popover>
                </div>
              </li>
            </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: {
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      let 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属性，并赋值
        }
        return father; //返回第一层
      });
      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', 2);
    document.documentElement.style.backgroundColor = '#f0f2f5';
    that.getData();
  },
  destroyed() {
    document.documentElement.style.backgroundColor = '#fff';
  },
  components: { groupDialog }
};
</script>
<style type="text/less" lang="less" scoped>
.bg-ebecf0 {
  background: #ebecf0;
}
.color-f0f2f5 {
  color: #f0f2f5;
}
.color-c0c4cc {
  display: inline-block;
  line-height: 34px;
  padding-left: 10px;
  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-body {
  position: relative;
  width: 100%;
  border-top: 1px solid #e4e7ed;
  .material-left {
    position: relative;
    width: 194px;
    .add-group {
      width: 154px;
      height: 32px;
      background: rgba(255, 255, 255, 1);
      border: 1px dashed rgba(192, 196, 204, 1);
    }
    .group-body {
      .group-ul {
      }
      .current-group {
        color: #2f54eb;
      }
    }
  }
  .material-right {
    position: relative;
    width: calc(100vw - 194px);
    border-left: 1px solid #e4e7ed;
  }
}
</style>
