<!--
 * @Descripttion: 顾客展示
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-27 10:16:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-21 10:41:45
 -->

<template>
  <div class="common-app-right">
    <div class="m-b-20">
        <el-checkbox class="w-195" v-model="customerShowData.mainStoreFlag">展示服务门店顾客</el-checkbox>
        <div class="font-14 color-909399 set-tip-item">注：保存勾选项后，门店导购和店长可查看本门店作为服务门店名下顾客</div>
      </div>
      <div class="m-b-20">
        <el-checkbox class="w-195" v-model="customerShowData.minorStoreFlag">展示协管门店顾客</el-checkbox>
        <div class="font-14 color-909399 set-tip-item">注：保存勾选项后，门店导购和店长可查看本门店作为协管门店名下顾客</div>
      </div>
      <div class="m-b-20">
        <el-checkbox class="w-195" v-model="customerShowData.openCardStoreFlag">展示开卡门店顾客</el-checkbox>
        <div class="font-14 color-909399 set-tip-item">注：保存勾选项后，门店导购和店长可查看本门店作为开卡门店名下顾客</div>
      </div>
      <div class="m-t-46">
        <el-button type="primary" :loading="loading" @click="submit()">保存</el-button>
      </div>
  </div>
</template>

<script>
import fetch from '@/api/my-customer-app.js';
const { getShowSet, saveShowSet } = fetch;
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'CustomerShowSet',
  components: {},
  props: {
    brandId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      customerShowData: {
        mainStoreFlag: false,
        minorStoreFlag: false,
        openCardStoreFlag: false
      },
      loading: false
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    that.$emit('showTab', '/customer-show-set');
    if (!!that.brandId) {
      that.getShowData();
    }
  },
  // methods
  methods: {
    /**
     * @description: 保存
     * @author: 无尘
     */
    submit: _debounce(function() {
      const that = this;
      that.loading = true;
      that.setData();
    }, 500),
    /**
     * @description: 保存-API
     * @author: 无尘
     */
    setData() {
      const that = this;
      let openCodes = [];
      for(let i in that.customerShowData) {
        if(that.customerShowData[i]){
          openCodes.push(i);
        }
      }
      const para = {
        wxEnterpriseId: that.wxEnterpriseId,
        enterpriseId: that.brandId,
        openCodes: openCodes.join(','),
        switchType: '0'
      };
      saveShowSet(para, { headers: { sign: that.brandId } })
        .then(res => {
          that.loading = false;
          that.getShowData();
          if (res.code == '0000') {
            showMsg.showmsg('操作成功', 'success');
          }else {
            showMsg.showmsg(res.message || '接口异常', 'warning');
          }
        })
        .catch(function(error) {
          that.loading = false;
        });
    },
    /**
     * @description: 获取展示数据
     * @author: 无尘
     */
    getShowData() {
      const that = this;
      const para = {
        wxEnterpriseId: that.wxEnterpriseId,
        enterpriseId: that.brandId,
        switchType: '0',
      };
      getShowSet(para, { headers: { sign: that.brandId } })
        .then(res => {
          if (res.result && !!res.result.length) {
            res.result.forEach(ele => {
              that.customerShowData[ele.switchCode] = ele.switchFlag == 1 ? true : false;
            });
          }else {
            that.customerShowData = {
              mainStoreFlag: false,
              minorStoreFlag: false,
              openCardStoreFlag: false
            };
          }
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    brandId(val) {
      const that = this;
      if (val) {
        that.getShowData();
      }
    }
  }
};
</script>
<style lang='less' scoped>
  .m-t-46 {
    margin-top: 46px;
  }
</style>
