<template>
  <div class="common-set-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content" :style="{'height': windowH}">
      <div class="right-box">
        <div class="store-estrutura-container common-frame-container" :style="{height: windowH}">
          <search-menu
            ref="searchMenu"
            :storeFrame="true"
            :treeData="menuData"
            :searchResult="searchResult"
            @handleSearchKey="handleSearchKey"
            @handleTreeSelection="handleTreeSelection"
            @handleStoreSelection="handleStoreSelection"
            @handleEmployeeSelection="handleEmployeeSelection">
            <template slot="buttonBox">
              <div class="slot-button">
                <el-button @click="addBrand" :disabled="disableBtn">新建品牌</el-button>
                <el-popover placement="right" width="200" content="若您的企业为集团企业，可通过新建品牌，不同品牌的门店可以创建在不同的品牌下面" trigger="hover"><i class="el-icon-info" slot="reference"></i>
                </el-popover>
              </div>
            </template>
          </search-menu>
          <clerk-info
            v-if="showEmployee == 'employee'"
            :perId="perId">
          </clerk-info>
          <store-info
            ref="store_info"
            v-else-if="showEmployee == 'store'"
            :storeInfo="storeInfo">
          </store-info>
          <div class="sf-right-container common-right-container" v-else v-loading="loading">
            <div class="sf-right-header common-right-header">
              <span class="title-span">{{groupInfo.groupName}}（{{total}}家）</span>
              <span class="id-span">部门ID： {{groupInfo.departmentId}}</span>
              <span class="handle-area">
                <el-button
                  class="no-bdr-btn"
                  :disabled="groupInfo.hasPression != 1"
                  @click="addSon">
                  添加子分组
                </el-button><span
                class="hurdle">
                </span><el-button
                  :href="'#/addGroup?level='+groupInfo.level+'&groupId='+groupInfo.departmentId"
                  :disabled="groupInfo.hasPression != 1"
                  class="no-bdr-btn"
                  @click="goToEdit(groupInfo.level)">
                  编辑
                </el-button>
              </span>
            </div>
            <div class="tab-div">
              <el-radio-group v-model="tableView" @change="switchView">
                <el-radio-button :label="1">门店视图</el-radio-button>
                <el-radio-button :label="2">店员视图</el-radio-button>
              </el-radio-group>
              <a :href="'#/recycle?dept=' + groupInfo.departmentId + '&showChild=' + showChildMember * 1 + '&type=' + storeType" class="a-href fr">
                <el-button type="primary" icon="el-icon-delete">回收站（{{recycleList.length}}）</el-button>
              </a>
            </div>
            <div>
              <template v-if="tableView == 1">
                <store-view
                  :tableData="storeList"
                  :departmentId="groupInfo.departmentId"
                  :brandId="groupInfo.brandId"
                  @setChildMemberShow="setChildMemberShow"
                  @getStoreList="getStoreList">
                </store-view>
              </template>
              <template v-else>
                <clerk-view
                  :tableData="storeList"
                  @setChildMemberShow="setChildMemberShow"
                  @selectByStatus="selectByStatus"
                  @selectByType="selectByType">
                </clerk-view>
              </template>
            </div>
            <div class="pagination" v-if="!!storeList.length">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[20, 40, 60, 80]"
                :page-size="pageSize"
                :current-page="pageNumber"
                layout="total, sizes, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
          <add-brand ref="add_brand" @addSuccess="addSuccess"></add-brand>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import searchMenu from "components/contacts/searchMenu";
import storeView from "components/contacts/storeFrame/storeView";
import clerkView from "components/contacts/storeFrame/clerkView";
import storeInfo from "components/contacts/storeFrame/storeInfo";
import addBrand from "components/contacts/storeFrame/addBrand";
import employeeInfo from "components/contacts/employeeInfo";
import clerkInfo from "components/contacts/storeFrame/clerkInfo";
import { getRequest, postRequest, postJsonRequest } from '@/api/api';
export default {
  name: "storeEstruturaContainer",
  components: {
    navCrumb,
    searchMenu,
    storeView,
    clerkView,
    employeeInfo,
    storeInfo,
    addBrand,
    clerkInfo
  },
  data() {
    return {
      // 面包屑参数
      navpath: [{
          name: '首页',
          path: '/index'
        },
        {
          name: '企业通讯录',
          path: '/administrativeFrame'
        },
        {
          name: '门店架构',
          path: ''
        }
      ],
      windowH: (window.screen.availHeight - 440) + 'px',
      tableH: window.screen.availHeight - 440 - 180 + 'px',
      boxHeight: window.screen.availHeight + 'px',
      menuData: [],
      searchResult: {},
      loading: true,
      groupInfo: {
        groupName: "",
        departmentId: ""
      },
      total: 0,
      showChildMember: false, // 是否显示子成员
      pageSize: 20,
      pageNumber: 1,
      storeList: [],
      tableView: 1,
      showEmployee: 'node',
      perId: "",
      storeInfo: {},
      disableBtn: true,
      storeStatus: "",
      storeType: "",
      recycleList: []
    };
  },

  beforeRouteUpdate(to, from, next) {
    next();
  },
  methods: {
    // 关键词搜索
    handleSearchKey(keyWord) {
      let params = {
        keyWord
      };
      getRequest("/haoban-manage-web/store/searchpage", params)
      .then(res => {
        this.searchResult = res.data.result || {};
      })
      .catch(e => {
        console.log(e, "error");
      });
    },
    /**
     * 树形搜索结果选人处理
     */
    handleEmployeeSelection(employee, showEmployee) {
      this.perId = employee.employeeClerkId;
      this.showEmployee = showEmployee;
    },
    /**
     * 新建品牌
     */
    addBrand() {
      this.$refs.add_brand.dialogVisible = true;
    },
    // 跳转添加子部门页面
    addSon() {
      location.href = '#/addGroup?addnew=1&groupId=' + this.groupInfo.departmentId;
    },
    // 跳转编辑部门页面
    goToEdit(level) {
      let type = level == 0 ? "brand" : "group";
      location.href = '#/addGroup?groupId=' + this.groupInfo.departmentId + '&type=' + type;
    },
    addSuccess() {
      this.getGroupData();
      this.$refs.add_brand.dialogVisible = false;
    },
    /**
     * 树形搜索结果选门店处理
     */
    handleStoreSelection(store) {
      let that = this;
      let params = { storeId: store.storeId };
      getRequest("/haoban-manage-web/store/findStoreById", params)
        .then(res => {
          if (res.data.errorCode == 1) {
            that.storeInfo = res.data.result;
            // that.$refs.store_info.formatStoreInfo(res.data.result);
            that.showEmployee = "store";
          } else {
            that.$message.error({
              message: res.data.message
            });
          }
        });
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getStoreList();
    },
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      this.getStoreList();
    },
    /**
     * 切换视图
     */
    switchView(view) {
      this.pageSize = 20;
      this.pageNumber = 1;
      this.storeList = [];
      this.showChildMember = false;
      this.storeStatus = "";
      this.getStoreList();
    },
    /**
     * 设置是否显示子成员
     */
    setChildMemberShow(show) {
      this.showChildMember = show;
      this.getStoreList();
    },
    /**
     * 获取树形分组数据
     */
    getGroupData() {
      let that = this;
      let params = {
        isStoreGroup: 1
      };
      getRequest("/haoban-manage-web/dept/deptList", params)
        .then(res => {
          if (res.data.errorCode == 1) {
            that.menuData = res.data.result || [];
            res.data.result.some(item => {
              if (item.level == 0) {
                that.groupInfo.departmentId = item.groupId;
                that.groupInfo.groupName = item.name;
                that.groupInfo.hasPression = item.hasPression;
              }
              return item.level == 0;
            });
            that.getStoreList();
          } else {
            that.menuData = [];
            that.loading = false;
            that.$message.error({
              duration: 1000,
              message: res.data.message
            });
          }
        })
        .catch(e => {
          that.$message.error({
            duration: 1000,
            message: e.message
          });
        });
    },
    /**
     * 获取店铺列表
     */
    getStoreList() {
      let that = this;
      that.loading = true;
      let params = {
        storeGroupId: that.groupInfo.departmentId,
        showChild: that.showChildMember * 1,
        showType: that.tableView,
        pageSize: that.pageSize,
        pageNum: that.pageNumber,
        status: that.storeStatus,
        storeType: that.storeType
      };
      getRequest("/haoban-manage-web/store/findSimplePage", params)
        .then(res => {
          if (res.data.errorCode == 1) {
            if (params.status == 4) { // 获取回收站列表数据
              that.recycleList = res.data.result.list || [];
              that.storeStatus = "";
              that.loading = false;
            } else {
              that.total = res.data.result.total;
              // 增加删除 popover 参数
              if (!!res.data.result.list && !!res.data.result.list.length) {
                res.data.result.list.forEach(function(ele,index){
                  ele.popVisible = false;
                  if(!!ele.clerks && !!ele.clerks.length) {
                    ele.clerks.forEach(function(el,key){
                      el.popVisible = false;
                    })
                  }
                })
              }
              that.storeList = res.data.result.list || [];
              that.loading = false;
              that.storeStatus = 4;
              that.getStoreList();
            }
          } else {
            that.loading = false;
            that.storeList = [];
            that.$message.error({
              duration: 1000,
              message: res.data.message
            });
          }
        })
        .catch(e => {
          that.loading = false;
          that.$message.error({
            duration: 1000,
            message: e.message
          });
        });
    },
    /**
     * 树形菜单选择项处理
     */
    handleTreeSelection(obj, node, showEmployee) {
      this.groupInfo.departmentId = obj.groupId;
      this.groupInfo.groupName = obj.name;
      this.groupInfo.brandId = obj.brandId
      this.showEmployee = showEmployee;
      this.groupInfo.hasPression = obj.hasPression;
      this.groupInfo.level = obj.level;
      this.getStoreList();
    },
    /**
     * 店员视图根据店铺状态筛选店铺
     */
    selectByStatus(val) {
      this.storeStatus = val;
      this.getStoreList();
    },
    /**
     * 店员视图根据店铺类型筛选店铺
     */
    selectByType(type) {
      this.storeType = type;
      this.getStoreList();
    }
  },
  beforeMount() {
    this.getGroupData();
  },
  mounted() {
    this.disableBtn = false;
  }
};

</script>
