<!--
 * @Descripttion: 编辑可见范围
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-08-28 11:07:46
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-26 11:28:11
-->
<!--
  <edit-visiable :brand-id="brandId" :set-item-id="setItemId" :set-type="setType" :select-mode="selectMode" :range-data="rangeData" @refreshData="refreshData"></edit-visiable>
  import editVisiable from '@/components/app/my-customer/edit-visiable.vue';
-->
<template>
  <el-dialog width="554px" title="编辑可见范围" :visible.sync="setVisible" append-to-body :before-close="handleClose">
    <div class="bind-store-body">
      <div class="edit-visiable-tip m-b-20">
        <common-alert-tip :width="'100%'" :tip-content="tipContent"></common-alert-tip>
      </div>
      <div class="el-form-item el-form-item--large">
        <label for="name" class="el-form-item__label" style="width: 120px;">
          可见门店
        </label>
        <div class="el-form-item__content" style="margin-left: 110px;">
          <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>
          <customer-store-group v-if="formData.sendRange == '1'" :brand-id="brandId" :select-group="selectGroupData" @checkGroupIds="checkGroupIds"></customer-store-group>
          <customer-store v-if="formData.sendRange == '2'" :brand-id="brandId" :select-store="selectStoreData" @checkStoreIds="checkStoreIds"></customer-store>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.stop="cancel">取消</el-button>
      <el-button type="primary" :loading="loadingBtn"  @click.stop="submitForm">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
import customerStoreGroup from '@/components/app/my-customer/customer-store-group.vue';
import customerStore from '@/components/app/my-customer/customer-store.vue';
import commonAlertTip from '@/components/common/common-alert-tip.vue';
import fetch from '@/api/my-customer-app.js';
const { saveVisiable, saveTagVisiable } = fetch;
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
export default {
  name: 'EditVisiable',
  components: {
    customerStoreGroup,
    customerStore,
    commonAlertTip
  },
  props: {
    // crowd: 场景人群； tag: 导购标签
    setType: {
      type: String,
      default: ''
    },
    // 场景或标签id
    setItemId: {
      type: String,
      default: ''
    },
    brandId: {
      type: String,
      default: ''
    },
    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 : '',
      setVisible: true,
      tipContent: '修改后的内容将于次日生效',
      formData: {
        sendRange: '',
        selectList: []
      },
      selectGroupData: [], // 选择的分组数据
      selectStoreData: [], // 选择的门店数据
      loadingBtn: false
    };
  },
  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 = [];
      that.selectGroupData = [];
      that.selectStoreData = [];
    },
    /**
     * @description: 关闭弹窗
     * @param {Function} done
     * @author: 无尘
     */
    handleClose(done) {
      const that = this;
      done();
      that.$emit('refreshData', 'close');
      that.selectGroupData = [];
      that.selectStoreData = [];
    },
    cancel() {
      const that = this;
      that.$emit('refreshData', 'close');
      that.selectGroupData = [];
      that.selectStoreData = [];
    },

    /**
     * @description: 每次选择分组
     * @param {Array} nodes
     * @author: 无尘
     */
    checkGroupIds: function(nodes) {
      const that = this;
      that.formData.selectList = JSON.parse(JSON.stringify(nodes));
    },
    /**
     * @description: 每次选择门店
     * @param {Array} nodes
     * @author: 无尘
     */
    checkStoreIds: function(nodes) {
      const that = this;
      that.formData.selectList = JSON.parse(JSON.stringify(nodes));
    },
    /**
     * @description: 确定
     * @returns {Boolean}
     * @author: 无尘
     */
    submitForm: _debounce(function() {
      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.loadingBtn = true;
      that.postSave();
    }, 300),
    postSave() {
      const that = this;
      const params = {
        wxEnterpriseId: that.wxEnterpriseId,
        enterpriseId: that.brandId,
        storeMode: String(that.formData.sendRange),
        bindRange: that.formData.sendRange > 0 ? that.formData.sendRange == 1 ? that.formData.selectList.map(ele=>ele.storeGroupId).join(',') : that.formData.selectList.map(ele=>ele.storeInfoId).join(',') : '',
      };
      if (that.setType == 'crowd') {
        params.relationType = '0'; // 人群场景
        params.relationId = that.setItemId;
        that.saveCrowd(params);
      }else {
        params.relationType = '1'; // 会员标签
        params.relationId = that.setItemId;
        that.saveTag(params);
      }
    },
    /**
     * @description: 保存人群可见范围
     * @param {Object} params
     * @author: 无尘
     */
    saveCrowd(params) {
      const that = this;
      saveVisiable(params, { headers: { sign: that.brandId } })
        .then(res => {
          that.loadingBtn = false;
          if (res.code == '0000') {
            showMsg.showmsg('保存成功', 'success');
            that.$emit('refreshData', 'success');
          }else {
            showMsg.showmsg(res.message || '接口异常', 'warning');
          }
        })
        .catch(function(error) {
          that.loadingBtn = false;
        });
    },
    /**
     * @description: 保存标签可见范围
     * @param {Object} params
     * @author: 无尘
     */
    saveTag(params) {
      const that = this;
      saveTagVisiable(params, { headers: { sign: that.brandId } })
        .then(res => {
          that.loadingBtn = false;
          if (res.code == '0000') {
            showMsg.showmsg('保存成功', 'success');
            that.$emit('refreshData', 'success');
          }else {
            showMsg.showmsg(res.message || '接口异常', 'warning');
          }
        })
        .catch(function(error) {
          that.loadingBtn = false;
        });
    }
  },
  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>
