<template>
  <div class="common-set-wrap store-frame-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content" :style="{ minHeight: minH }">
      <div class="right-box">
        <div class="store-estrutura-container common-frame-container">
          <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 } 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: ''
        }
      ],
      minH: window.screen.availHeight - 300 - 140 + 'px',
      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) {
      const that = this;
      let params = {
        keyWord
      };
      getRequest('/haoban-manage-web/store/searchpage', params)
        .then(res => {
          that.searchResult = res.data.result || {};
        })
        .catch(error => {
          that.$message.error({
            message: error.message
          });
        });
    },
    /**
     * 树形搜索结果选人处理
     */
    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>

<style lang="scss">
.store-frame-wrap {
  .store-info {
    height: auto;

    .handle-area {
      position: relative;
      left: 0;
    }
  }
}
</style>
