<!--
 * @Descripttion: 可见范围-门店选择
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-28 15:24:42
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-21 10:29:00
-->
<!--
  <customer-store :brand-id="brandId" :select-store="selectStore" @checkStoreIds="checkStoreIds"></customer-store>
  import customerStore from '@/components/app/my-customer/customer-store.vue';
  -->
<template>
  <div class="daily-store-select">
    <div class="select-search">
      <el-input placeholder="请输入门店名称/代码" v-model="searchSelect" prefix-icon="el-icon-search" style="width: 100%;" clearable @keyup.native="value => toInput(value, searchSelect)" @clear="clearSearch"></el-input>
    </div>
    <!-- <div class="checkbox border-box" style="padding: 15px 20px;">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    </div> -->
    <div class="el-scrollbar define-search-select">
      <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="overflow: auto;">
        <el-checkbox-group v-model="dailyRuleForm.stores" @change="handleStoresChange">
          <ul class="el-scrollbar__view el-select-dropdown__list">
            <li :class="['el-select-dropdown__item', item.select ? 'selected hover' : '']" v-for="item in stores" :key="item.storeInfoId">
              <el-checkbox :label="item.storeInfoId" >{{ item.storeInfoName }}</el-checkbox>
            </li>
            <li v-if="!stores.length" class="text-center"><span>暂无数据</span></li>
          </ul>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>
<script>
import { _debounce } from '@/common/js/public';
import fetch from '@/api/merchant-auth.js';
const { getStoreList } = fetch;
export default {
  name: 'CustomerStore',
  props: {
    brandId: {
      type: String,
      default: ''
    },
    storeType: {
      type: String,
      default: '2' // 1 门店绑定， 2 门店共享
    },
    selectStore: {
      type: [ Object, Array ],
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      checkAll: false, // 全选
      isIndeterminate: false,
      searchSelect: '', // 搜索字段
      stores: [], // 门店列表集合
      storesCopy: [], // 最后保存值用
      dailyRuleForm: {
        stores: [], // 已选门店id结果集
      },
      pageNum: 1,
      pageSize: 300
    };
  },
  mounted() {
    const that = this;
    that.stores = [];
    that.storesCopy = [];
    if (!!that.brandId) {
      that.pageNum = 1;
      that.getStoreData();
    }
    if (!!that.selectStore.length) {
      that.dailyRuleForm.stores = that.selectStore.map(el=>el.storeInfoId) || [];
    }else {
      that.dailyRuleForm.stores = [];
    }
  },
  methods: {

    /**
     * @description: 选择改变
     * @param {Array} value
     * @author: 无尘
     */
    handleStoresChange(value) {
      const that = this;
      let arr = [];
      that.storesCopy.forEach(ele => {
        if (value.includes(ele.storeInfoId)) {
          arr.push(ele);
        }
      });
      that.$emit('checkStoreIds', JSON.parse(JSON.stringify(arr)));
    },
    /**
     * @description: 输入
     * @param {Object} e
     * @param {String} value
     * @author: 无尘
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      if (that.searchSelect != '') {
        that.stores = [];
        that.pageNum = 1;
        that.getStoreData();
      }
    }, 500),

    /**
     * @description: 清空
     * @author: 无尘
     */
    clearSearch() {
      const that = this;
      that.stores = [];
      that.pageNum = 1;
      that.getStoreData();
    },

    /**
     * @description: 获取门店
     * @author: 无尘
     */
    getStoreData() {
      const that = this;
      const para = {
        search: that.searchSelect,
        enterpriseId: that.brandId,
        type: that.storeType,
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        wxEnterpriseId: that.wxEnterpriseId
      };
      getStoreList(para, { headers: { sign: that.brandId } })
        .then(res => {
          if (that.pageNum == 1) {
            that.stores = JSON.parse(JSON.stringify(res.result.result)) || [];
            that.searchSelect === '' ? that.storesCopy = JSON.parse(JSON.stringify(res.result.result)) || [] : '';
          }else {
            res.result.result.forEach(ele => {
              that.stores.push(ele);
              that.searchSelect === '' ? that.storesCopy.push(ele) : '';
            });
          }
          if (that.pageNum * that.pageSize < res.result.totalCount) {
            that.pageNum ++;
            that.$nextTick(()=>{
              that.getStoreData();
            });
          }
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    selectStore: function(newData, oldData) {
      const that = this;
      if (!!newData.length) {
        that.dailyRuleForm.stores = newData.map(el=>el.storeInfoId) || [];
      }else {
        that.dailyRuleForm.stores = [];
      }
    },
    brandId(val) {
      const that = this;
      if (!!val) {
        that.pageNum = 1;
        that.getStoreData();
      }
    }
  }
};
</script>
<style lang="less" scoped>
  .daily-store-select {
    position: relative;
    width: 331px;
    min-height: 398px;
    margin: 20px 0 0 0;
    padding: 10px;
    border: 1px solid #e4e7ed;
    .define-search-select {
      .el-select-dropdown__wrap {
        max-height: 343px;
      }
      .el-checkbox-group {
        overflow-x: auto;
        height: 338px;
        ul {
          height: 100%;
          li {
            overflow: unset;
            text-overflow: unset;
          }
        }
      }
    }
  }
</style>
