<!--
 * @Descripttion: 管理员授权选择门店绑定弹窗
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-21 10:10:57
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-15 09:57:36
 -->
<!--
  <select-admin-store v-if="setVisible" :enterprise-id="enterpriseId" :select-mode="selectMode" :bind-range="authForm.bindRange" :share-range="authForm.shareRange"  :bind-type="bindType" @closeSet="closeSet"></select-admin-store>
  import selectAdminStore from '@/components/company/select-admin-store.vue';
  -->
<template>
  <div :class="['store-auth-range', visibleFlag ? 'show-range':'hide-range']">
    <div class="common-mask cursor-pointer" @click.stop="handleClose"></div>
    <div class="bind-body border-box">
      <div class="auth-range-title font-18 color-303133 m-b-20">门店管辖范围</div>
      <common-alert-tip :width="'100%'" :tip-content="tipContent"></common-alert-tip>
      <div class="el-form-item el-form-item--large m-t-20">
        <label for="name" class="el-form-item__label" style="width: 143px;">
          门店绑定授权范围
        </label>
        <div class="el-form-item__content" style="margin-left: 143px;">
          <el-radio v-model="bindFormData.bindStoreMode" :label="0" disabled>所有门店</el-radio>
          <el-radio class="m-l-40 m-r-8" v-model="bindFormData.bindStoreMode" :label="1" disabled>选择分组</el-radio>
          <el-radio class="m-l-40 m-r-8" v-model="bindFormData.bindStoreMode" :label="2" disabled>选择门店</el-radio>
          <store-auth-group-dis v-if="bindFormData.bindStoreMode == '1'" :company-id="selectEnterpriseId" :store-type="1" :select-group="bindFormData.bindStoreMode == 1 ? bindFormData.bindRange : []"></store-auth-group-dis>
          <store-auth-store-dis v-if="bindFormData.bindStoreMode == '2'" :company-id="selectEnterpriseId" :store-type="1" :select-store="bindFormData.bindStoreMode == 2 ? bindFormData.bindRange : []"></store-auth-store-dis>
        </div>
      </div>
      <div class="el-form-item el-form-item--large">
        <label for="name" class="el-form-item__label" style="width: 143px;">
          门店共享授权范围
        </label>
        <div class="el-form-item__content" style="margin-left: 143px;">
          <el-radio v-model="bindFormData.shareStoreMode" :label="0" disabled>所有门店</el-radio>
          <el-radio class="m-l-40 m-r-8" v-model="bindFormData.shareStoreMode" :label="1" disabled>选择分组</el-radio>
          <el-radio class="m-l-40 m-r-8" v-model="bindFormData.shareStoreMode" :label="2" disabled>选择门店</el-radio>
          <store-auth-group-dis v-if="bindFormData.shareStoreMode == '1'" :company-id="selectEnterpriseId" :store-type="2" :select-group="bindFormData.shareStoreMode == 1 ? bindFormData.shareRange : []" ></store-auth-group-dis>
          <store-auth-store-dis v-if="bindFormData.shareStoreMode == '2'" :company-id="selectEnterpriseId" :store-type="2" :select-store="bindFormData.shareStoreMode == 2 ? bindFormData.shareRange : []"></store-auth-store-dis>
        </div>
      </div>
      <div class="el-form-item el-form-item--large">
        <label for="name" class="el-form-item__label" style="width: 143px;">
          管理员管辖范围
        </label>
        <div class="el-form-item__content" style="margin-left: 143px;">
          <el-radio v-model="formData.sendRange" label="0" @change="changeRange">所有门店</el-radio>
          <el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="1" @change="changeRange">选择分组</el-radio>
          <el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="2" @change="changeRange">选择门店</el-radio>
          <div v-if="(formData.sendRange == '1' || formData.sendRange == '2') && !formData.selectList.length || String(formData.sendRange) == 'null' || formData.sendRange === ''" class="el-form-item__error">请选择绑定门店</div>
          <store-auth-group v-if="formData.sendRange == '1'" :company-id="selectEnterpriseId" :store-type="2" :select-group="selectGroupData" @checkGroupIds="checkGroupIds"></store-auth-group>
          <store-auth-store v-if="formData.sendRange == '2'" :company-id="selectEnterpriseId" :store-type="2" :select-store="selectStoreData" @checkStoreIds="checkStoreIds"></store-auth-store>
        </div>
      </div>
      <div class="el-form-item el-form-item--large">
        <div class="el-form-item__content" style="margin-left: 143px;">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import storeAuthGroupDis from '@/components/set/store-auth-group.vue';
import storeAuthStoreDis from '@/components/set/store-auth-store.vue';
import storeAuthGroup from '@/components/company/store-auth-group.vue';
import storeAuthStore from '@/components/company/store-auth-store.vue';
import commonAlertTip from '@/components/common/common-alert-tip.vue';
// import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
import api from '@/api/merchant-auth.js';
const { getAuthDetail } = api;
export default {
  name: 'SelectAdminStore',
  components: {
    storeAuthGroup,
    storeAuthStore,
    storeAuthGroupDis,
    storeAuthStoreDis,
    commonAlertTip
  },
  props: {
    showAuthFlag: {
      type: Boolean,
      default: false
    },
    enterpriseId: {
      type: String,
      default: ''
    },
    bindType: {
      type: [ String, Number ],
      default: '2' // 1 门店绑定， 2 门店共享
    },
    selectMode: {
      type: [ String, Number ],
      default: '' // 0 全部 1部分分组 2 部分门店
    },
    rangeData: {
      type: [ Object, Array ],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      tipContent: '管理范围是根据门店绑定与门店共享选择范围的并集。即选择门店绑定的范围拥有管理权限，门店共享和门店绑定范围的并集拥有查看权限',
      visibleFlag: false,
      // 门店绑定.门店共享
      bindFormData: {},
      formData: {
        sendRange: this.selectMode || '',
        selectList: []
      },
      selectEnterpriseId: this.enterpriseId,
      selectGroupData: [], // 选择的分组数据
      selectStoreData: [] // 选择的门店数据
    };
  },
  mounted() {
    const that = this;
    that.selectEnterpriseId = that.enterpriseId;
    that.visibleFlag = that.showAuthFlag;
    that.formData.sendRange = String(that.selectMode) == 'null' ? '' : String(that.selectMode);;
    that.selectGroupData = that.selectMode == 1 ? JSON.parse(JSON.stringify(that.rangeData)) : [];
    that.selectStoreData = that.selectMode == 2 ? JSON.parse(JSON.stringify(that.rangeData)) : [];
    that.formData.selectList = JSON.parse(JSON.stringify(that.rangeData)) || [];
    if (!!that.enterpriseId) {
      that.getData();
    }
  },
  methods: {
    /**
     * @description: 获取编辑数据
     * @author: 无尘
     */
    getData() {
      const that = this;
      let para = {
        enterpriseId: that.enterpriseId,
        wxEnterpriseId: that.wxEnterpriseId,
      };
      getAuthDetail(para)
        .then(res => {
          if (!!res.result.bindRange) {
            res.result.bindRange = JSON.parse(res.result.bindRange);
          }else {
            res.result.bindRange = [];
          }
          if (!!res.result.shareRange) {
            res.result.shareRange = JSON.parse(res.result.shareRange);
          }else {
            res.result.shareRange = [];
          }
          that.bindFormData = res.result || {};
        })
        .catch(function(error) {

        });
    },
    /**
     * @description: 改变选择范围
     * @param {String} e
     * @author: 无尘
     */
    changeRange(e) {
      const that = this;
      that.formData.sendRange = e;
      that.formData.selectList = [];
    },
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    handleClose() {
      const that = this;
      that.$emit('closeSet', 'close');
      that.selectGroupData = [];
      that.selectStoreData = [];
    },
    cancel() {
      const that = this;
      that.$emit('closeSet', 'close');
      that.selectGroupData = [];
      that.selectStoreData = [];
    },
    /**
     * @description: 每次选择分组
     * @param {Array} nodes
     * @author: 无尘
     */
    checkGroupIds: function(nodes) {
      const that = this;
      // that.selectGroupData = JSON.parse(JSON.stringify(nodes));
      that.formData.selectList = JSON.parse(JSON.stringify(nodes));
    },
    /**
     * @description: 每次选择门店
     * @param {Array} nodes
     * @author: 无尘
     */
    checkStoreIds: function(nodes) {
      const that = this;
      // that.selectStoreData = JSON.parse(JSON.stringify(nodes));
      that.formData.selectList = JSON.parse(JSON.stringify(nodes));
    },
    /**
     * @description: 确定
     * @returns {Boolean}
     * @author: 无尘
     */
    submitForm() {
      const that = this;
      if (String(that.formData.sendRange) == 'null' || that.formData.sendRange === '') {
        return false;
      }
      if (that.formData.sendRange == '1' && !that.formData.selectList.length) {
        return false;
      }
      if (that.formData.sendRange == '2' && !that.formData.selectList.length) {
        return false;
      }
      that.$emit('closeSet', String(that.formData.sendRange), that.formData.selectList);
    }
  },
  watch: {
    showAuthFlag(val) {
      this.visibleFlag = val;
    },
    searchSelect(val) {
      this.$refs.groupTree.filter(val);
    },
    selectMode(val) {
      const that = this;
      that.formData.sendRange = String(val) == 'null' ? '' : String(val);
    },
    rangeData(val) {
      const that = this;
      that.selectGroupData = that.selectMode == 1 ? JSON.parse(JSON.stringify(val)) : [];
      that.selectStoreData = that.selectMode == 2 ? JSON.parse(JSON.stringify(val)) : [];
      that.formData.selectList = JSON.parse(JSON.stringify(val)) || [];
    },
    enterpriseId(val) {
      const that = this;
      that.selectEnterpriseId = val;
      if (!!val) {
        that.getData();
      }
    }
  }
};
</script>
<style lang="less" scoped>

.store-auth-range {
  display: block;
  transition: 0.3s all;
  &.show-range {
    display: block;
    // opacity: 1;
    .common-mask {
      display: block;
    }
    .bind-body {
      right: 0;
    }
  }
  &.hide-range {
    // display: none;
    //
    .common-mask {
      display: none;
      opacity: 0;
    }
    .bind-body {
      right: -620px;
    }
  }
}

.common-mask {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: .5;
  background: #000;
  z-index: 1000;
  transition: 0.3s all;
}
.bind-body {
  width: 604px;
  padding: 20px;
  position: fixed;
  z-index: 5000;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: auto;
  background: #fff;
  transition: 0.3s all;
}

</style>
