<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.id">
              {{item.name}}
              <set-permiss></set-permiss>
            </el-tab-pane>
          </template>
        </el-tabs>
        <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.addStatus"
                :inactive-text="switchList.addName">
              </el-switch>
            </div>
            <div class="switch-cell">
              <el-switch
                v-model="switchList.delStatus"
                :inactive-text="switchList.delName">
              </el-switch>
            </div>
            <div class="switch-cell">
              <el-switch
                v-model="switchList.modStatus"
                :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',
          relocation: true
        },
        {
          name: '设置',
          path: '/companyAddress'
        },
        {
          name: '通讯录信息',
          path: '/staffDetails'
        },
        {
          name: '门店权限设置',
          path: ''
        }
      ],
      // 品牌 tab
      activeName: 'a',
      brandList: [
        {
          id: 'a',
          name: 'A 品牌'
        },
        {
          id: 'b',
          name: 'B 品牌'
        },
        {
          id: 'c',
          name: 'C 品牌'
        },
        {
          id: 'd',
          name: 'D 品牌'
        }
      ],

      // 审核开关
      switchList: {
        addName: '新增门店成员',
        addStatus: false,
        delName: '删除门店成员',
        delStatus: false,
        modName: '门店信息变更',
        modStatus: false,
      }
    }
  },
  computed: {

  },
  methods: {
    /**
     * tab clcik
     */
    handleClick(tab, event) {
      console.log(tab, event);
    },

    /**
     * save
     */
    saveSwitch() {
      const that = this
      console.log(that.switchList)
    }

  },
  mounted() {

  },
  components: {
    navCrumb,
    setPermiss
  }
}

</script>
<style lang="less" scoped>
.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 {

        }
      }
      .el-tab-pane {
        padding: 14px 32px 32px 32px;
      }
    }

    .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;
    }

    .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;
        }
      }
    }

  }
}
</style>
