<!--
 * @Descripttion: 顾客资料
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-27 10:16:37
 * @LastEditors: 无尘
 * @LastEditTime: 2020-12-01 18:09:33
 -->
<template>
  <div class="common-app-right">
    <div class="customer-data-body">
      <div class="m-b-10">
        <el-checkbox class="w-195" v-model="customerShowData.showAllOrderFlag">展示所有门店的订单</el-checkbox>
        <div class="font-12 color-909399 set-tip-item">注：保存勾选项后，门店导购和店长可查看顾客在本店以外的消费订单</div>
      </div>
      <div class="m-b-20">
        <el-checkbox class="w-195" v-model="customerShowData.showMallOrderFlag">展示微商城的订单</el-checkbox>
        <div class="font-12 color-909399 set-tip-item">注：保存勾选项后，门店导购和店长可查看顾客在微商城的消费订单</div>
      </div>
      <div class="m-b-20">
        <el-checkbox class="w-195" v-model="customerShowData.showWmOrderFlag">展示微盟商城的订单</el-checkbox>
        <div class="font-12 color-909399 set-tip-item">注：保存勾选项后，门店导购和店长可查看顾客在微盟商城的消费订单</div>
      </div>
      <div class="m-b-20">
        <el-tooltip class="item" effect="dark" content="勾选后将会在“顾客详情页”进行显示" placement="top-start"> <span class="font-14 color-606266 m-r-20 common-bottom-border">导购联系顾客方式：</span></el-tooltip>
        <el-checkbox v-model="customerShowData.clerkAddMemberFlag">添加会员/发消息</el-checkbox>
        <el-checkbox v-model="customerShowData.clerkContactPhoneFlag">电话</el-checkbox>
        <el-checkbox v-model="customerShowData.clerkContactSmsFlag">短信</el-checkbox>
      </div>
      <div class="m-t-46 p-l-20">
        <el-button type="primary" :loading="loading" @click="submit">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import fetch from '@/api/my-customer-app.js';
const { getCustomerSet, saveCustomerSet } = fetch;
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'CustomerDataSet',
  components: {},
  props: {
    brandId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',
      customerShowData: {
        showAllOrderFlag: false,
        showMallOrderFlag: false,
        showWmOrderFlag: false,
        clerkContactPhoneFlag: false,
        clerkContactSmsFlag: false,
        clerkAddMemberFlag: false
      },
      loading: false
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    that.$emit('showTab', '/customer-data-set');
    if (!!that.brandId) {
      that.getCustomerData();
    }
  },
  // 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: 1
      };
      saveCustomerSet(para, { headers: { sign: that.brandId } })
        .then(res => {
          that.loading = false;
          that.getCustomerData();
          if (res.code == '0000') {
            showMsg.showmsg('操作成功', 'success');
          }else {
            showMsg.showmsg(res.message || '接口异常', 'warning');
          }
        })
        .catch(function(error) {
          that.loading = false;
        });
    },
    /**
     * @description: 获取展示数据
     * @author: 无尘
     */
    getCustomerData() {
      const that = this;
      const para = {
        wxEnterpriseId: that.wxEnterpriseId,
        enterpriseId: that.brandId,
        switchType: '1',
      };
      getCustomerSet(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 = {
              showAllOrderFlag: false,
              showMallOrderFlag: false,
              showWmOrderFlag: false,
              clerkContactPhoneFlag: false,
              clerkContactSmsFlag: false,
              clerkAddMemberFlag: false
            };
          }
        })
        .catch(function(error) {

        });
    }
  },
  watch: {
    brandId(val) {
      const that = this;
      that.wxEnterpriseId = localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '';
      if (val) {
        that.getCustomerData();
      }
    }
  }
};
</script>
<style lang='less' scoped>
  .m-t-46 {
    margin-top: 46px;
  }
  .common-bottom-border {
    cursor: pointer;
    padding-bottom: 2px;
    border-bottom: 1px dashed #2f54eb;
  }
  .set-tip-item {
    line-height: 22px;
    padding-left: 25px;
  }
  .customer-data-body {
    padding: 10px;
  }
</style>
