<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-21 10:10:57
 * @LastEditors: 无尘
 * @LastEditTime: 2020-10-20 11:29:21
 -->
<!--
  授权选择门店绑定弹窗
  <store-auth-dialog v-if="setVisible" :enterprise-id="enterpriseId" :select-mode="selectMode" :bind-range="authForm.bindRange" :share-range="authForm.shareRange"  :bind-type="bindType" @closeSet="closeSet"></store-auth-dialog>
  import storeAuthDialog from '@/components/company/store-auth-dialog.vue';
  -->
<template>
  <el-dialog width="554px" :title="bindType == 1 ? '门店绑定':'门店共享'" :visible.sync="setVisible" append-to-body :before-close="handleClose">
    <div class="bind-store-body">
      <div class="el-form-item el-form-item--large">
        <label for="name" class="el-form-item__label" style="width: 120px;">
          选择{{ bindType == 1 ? '绑定': '共享'}}门店
        </label>
        <div class="el-form-item__content" style="margin-left: 110px;">
          <el-radio :disabled="isSelectAll == 1 && bindType == 1? true : false" 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="enterpriseId" :store-type="bindType" :select-group="selectGroupData" @checkGroupIds="checkGroupIds"></store-auth-group>
          <store-auth-store v-if="formData.sendRange == '2'" :company-id="enterpriseId" :store-type="bindType" :select-store="selectStoreData" @checkStoreIds="checkStoreIds"></store-auth-store>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.stop="cancel">取消</el-button>
      <el-button type="primary" @click.stop="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import storeAuthGroup from '@/components/company/store-auth-group.vue';
import storeAuthStore from '@/components/company/store-auth-store.vue';
// import { _debounce } from '@/common/js/public';
// import showMsg from '@/common/js/showmsg';
export default {
  name: 'StoreAuthDialog',
  components: {
    storeAuthGroup,
    storeAuthStore
  },
  props: {
    isSelectAll: {
      type: [ String, Number ],
      default: '0' // 0 没有绑定， 1 被绑定，禁用选择所有门店
    },
    enterpriseId: {
      type: String,
      default: ''
    },
    bindType: {
      type: [ String, Number ],
      default: '1' // 1 门店绑定， 2 门店共享
    },
    selectMode: {
      type: [ String, Number ],
      default: '0' // 0 全部 1部分分组 2 部分门店
    },
    rangeData: {
      type: [ Object, Array ],
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      setVisible: true,
      formData: {
        sendRange: '0',
        selectList: []
      },
      selectGroupData: [], // 选择的分组数据
      selectStoreData: [] // 选择的门店数据
    };
  },
  mounted() {
    const that = this;
    that.formData.sendRange = 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)) || [];
  },
  methods: {
    /**
     * @description: 改变选择范围
     * @param {String} e
     * @author: 无尘
     */
    changeRange(e) {
      const that = this;
      that.formData.sendRange = e;
      that.formData.selectList = [];
    },
    /**
     * @description: 关闭弹窗
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      done();
      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: {
    selectMode(val) {
      const that = this;
      that.formData.sendRange = 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)) || [];
    }
  }
};
</script>
<style lang="less" scoped>
  .select-tree-wrap {
    height: 445px;
    overflow-y: auto;
    border: 1px solid #e4e7ed;
  }
</style>
