<template>
  <div class="storePermission-wrap common-set-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content">
      <div class="right-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <template v-for="(item,index) in brandList">
            <el-tab-pane :label="item.name" :name="item.groupId">
            </el-tab-pane>
          </template>
        </el-tabs>
        <div class="bg-fff permiss-contain">
          <set-permiss
            :permType="1"
            :authData="brandList.clerkData">
          </set-permiss>
          <set-permiss
            :permType="2"
            :authData="brandList.managerData">
          </set-permiss>
        </div>
        <div class="storePermission-wrap-switch m-t-24">
          <div class="storePermission-switch-title">
            门店信息变更是否需要审核
          </div>
          <div class="storePermission-switch-body">
            <div class="switch-cell">
              <el-switch
                v-model="switchList.addStoreClerkCheck"
                :inactive-text="switchList.addName">
              </el-switch>
            </div>
            <div class="switch-cell">
              <el-switch
                v-model="switchList.deleteStoreClerkCheck"
                :inactive-text="switchList.delName">
              </el-switch>
            </div>
            <!-- <div class="switch-cell">
              <el-switch
                v-model="switchList.storeInformationChangeCheck"
                :inactive-text="switchList.modName">
              </el-switch>
            </div> -->
            <div class="switch-cell p-l-94">
              <el-button type="primary" @click="saveSwitch">保存</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import setPermiss from '@/components/set/set-permiss.vue';

import strLength from '@/common/js/strlen';
import showMsg from '@/common/js/showmsg';
import errMsg  from '@/common/js/error';
import { _debounce } from "@/common/js/public";
import { getRequest, postRequest, postJson, postForm } from '@/api/api';
export default {
  name: "storePermission",
  data() {
    return {
      // 面包屑参数
      navpath: [
        {
          name: '首页',
          path: '/index'
        },
        {
          name: '设置',
          path: '/companyAddress'
        },
        {
          name: '通讯录信息',
          path: '/staffDetails'
        },
        {
          name: '门店权限设置',
          path: ''
        }
      ],
      // 品牌 tab
      activeName: '',// 显示的pannel,也是选择的 groupId
      brandList: [
        /*{
          id: 'a',
          name: 'A 品牌',
          clerkData: {},
          managerData: {}
        }*/
      ],
      // 审核开关
      switchList: {
        addName: '新增门店成员',
        addStoreClerkCheck: false,
        delName: '删除门店成员',
        deleteStoreClerkCheck: false,
        modName: '门店信息变更',
        storeInformationChangeCheck: false,
      }
    }
  },
  computed: {

  },
  methods: {
    /**
     * tab clcik
     */
    handleClick(tab, event) {
      const that = this;
      that.getStoreAuth(tab.name,Number.parseInt(tab.index));
      that.activeName = tab.name;
    },

    /**
     * save
     */
    saveSwitch: _debounce(function() {
      const that = this;
      let data = JSON.parse(JSON.stringify(that.switchList));
      data.addStoreClerkCheck = data.addStoreClerkCheck == true? 1: 0;
      data.deleteStoreClerkCheck = data.deleteStoreClerkCheck == true? 1: 0;
      data.storeInformationChangeCheck = data.storeInformationChangeCheck == true? 1: 0;
      that.setStoreAuth(data);
    },600),

    /**
     * 门店权限设置
     */
    setStoreAuth(data) {
      const that = this;
      let para = {
        brandId: data.brandId,
        groupId: that.activeName,
        addStoreClerkCheck: data.addStoreClerkCheck,
        deleteStoreClerkCheck: data.deleteStoreClerkCheck,
        storeInformationChangeCheck: data.storeInformationChangeCheck
      }
      postRequest('/haoban-manage-web/brand/saveStoreAuth',para)
      .then((res) => {
        let resData = res.data;
        if (resData.errorCode == 1) {
          showMsg.showmsg('保存成功','success')
          return;
        }
        errMsg.errorMsg(resData);
      })
      .catch(function (error) {
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    /**
     * 获取门店权限设置
     */
    getStoreAuth(groupId,index) {
      const that = this;
      let para = {
        groupId: groupId
      }
      postRequest('/haoban-manage-web/brand/storeAuth',para)
      .then((res) => {
        let resData = res.data;
        if (resData.errorCode == 1) {
          if (!!resData.result) {
            that.brandList.clerkData = resData.result;
            that.brandList.managerData = resData.result;
            // 设置开关
            let brandDTO = resData.result.brandDTO;
            brandDTO.addStoreClerkCheck = brandDTO.addStoreClerkCheck == 1? true: false;
            brandDTO.deleteStoreClerkCheck = brandDTO.deleteStoreClerkCheck == 1? true: false;
            brandDTO.storeInformationChangeCheck = brandDTO.storeInformationChangeCheck == 1? true: false;
            that.switchList = Object.assign(that.switchList,brandDTO);
            that.$forceUpdate();
          }else {
            that.$message.error({
              duration: 1000,
              message: '暂无数据'
            })
          }
          return;
        }
        errMsg.errorMsg(resData);
      })
      .catch(function (error) {
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    },

    /**
     * 获取品牌列表
     */
    getBrandData() {
      const that = this;
      postRequest('/haoban-manage-web/brand/list',{})
      .then((res) => {
        let resData = res.data;
        if (resData.errorCode == 1) {
          if (!!resData.result && !!resData.result.length ) {
            that.brandList = resData.result;
            that.activeName = resData.result[0].groupId;
            that.getStoreAuth(resData.result[0].groupId,0);
          }else {
            that.$message.error({
              duration: 1000,
              message: '暂无数据'
            })
          }
          return;
        }
        errMsg.errorMsg(resData);
      })
      .catch(function (error) {
        that.$message.error({
          duration: 1000,
          message: error.message
        })
      });
    }

  },
  mounted() {
    const that = this;
    that.getBrandData();
  },
  components: {
    navCrumb,
    setPermiss
  }
}

</script>
<style lang="less" scoped>
.bg-fff {
  background: #fff;
}

.right-content {
  /*width: 100%;*/
  padding: 24px;
  min-height: calc(100% - 240px);

  .right-box {
    /*background: #fff;*/
    /*padding: 24px;*/
    min-height: 500px;

    .m-t-24 {
      margin-top: 24px;
    }

    .el-tabs {
      background: #fff;
      /deep/ .el-tabs__nav-wrap {
        height: 54px;
        line-height: 54px;

        &::after {
          height: 1px;
        }

        .el-tabs__nav-scroll {
          padding-left: 20px;
        }

        .el-tabs__item {

        }
      }
      /deep/ .el-tabs__content {
        /*display: none;*/
      }
      .el-tab-pane {
        padding: 1px;
      }
    }

    .storePermission-wrap-switch {
      width: 100%;
      background: #fff;
    }

    .storePermission-switch-title {
      width: 100%;
      padding: 0 32px;
      height: 54px;
      line-height: 54px;
      font-size: 16px;
      color: #303133;
      border-bottom: 1px solid #E4E7ED;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }

    .p-l-94 {
      padding-left: 94px;
    }

    .storePermission-switch-body {
      width: 100%;
      padding: 34px 32px ;

      .switch-cell {
        margin-bottom: 42px;
      }
      .el-switch {
        /deep/ .is-active {
          color: #303133;
        }
      }
    }

  }
}
.permiss-contain {
  width: 100%;
  padding: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
