<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-07-03 15:25:45
 -->
<!--
  <set-visiable :brandId="brandId"  @closeStore="closeStore" @submitStore="submitStore"></set-visiable>
  import setVisiable from '@/components/app/customer/set-visiable.vue';
 -->
<template>
  <el-dialog :title="!!editRow.templateId ? '可见范围' : '可见范围'" :visible.sync="dialogVisible" width="873px" :before-close="handleClose">
    <div class="">
      <div class="el-form-item el-form-item--large">
        <label for="name" class="el-form-item__label" style="width: 100px; cursor: pointer;">
          选择范围
        </label>
        <div class="el-form-item__content" style="margin-left: 100px;">
          <el-radio 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 == 2" class="w-240 inline-block item-cell-select">
            <gic-select-group-mult :brandId="brandId" class="m-l-10" :width="213" :selectData="formData.selectList" @checkGroupIds="checkGroupIds"> </gic-select-group-mult>
          </div>
          <el-radio class="m-l-40 m-r-8" v-model="formData.sendRange" label="3" @change="changeRange">部分门店</el-radio>
          <div v-if="formData.sendRange == 3" class="w-240 inline-block  item-cell-select">
            <gic-select-store :brandId="brandId" :selectData="formData.selectList" @returnStores="returnStores"> </gic-select-store>
          </div>
          <div v-if="(formData.sendRange == '2' || formData.sendRange == '3') && !formData.selectList.length" class="el-form-item__error">请选择可见范围</div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toCancel">取消</el-button>
      <el-button type="primary" :loading="loadingBtn" @click="submitForm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import gicSelectStore from '@/components/common/gic-select-store.vue';
import gicSelectGroupMult from '@/components/common/gic-select-group-mult.vue';
import { _debounce } from '@/common/js/public';
import { postRequest } from '@/api/api';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
export default {
  props: {
    brandId: {
      type: String,
      default() {
        return '';
      }
    },
    setStoreShow: {
      type: Boolean,
      default() {
        return false;
      }
    },
    editRow: {
      type: Object,
      default() {
        return {};
      }
    },
    categoryId: {
      type: Object,
      default() {
        return '';
      }
    }
  },
  components: {
    gicSelectGroupMult,
    gicSelectStore
  },
  data() {
    return {
      wxEnterpriseRelatedId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
      loading: false,
      dialogVisible: this.setStoreShow,
      formData: {
        sendRange: '1',
        selectList: []
      },
      loadingBtn: false
    };
  },
  methods: {
    /**
     * 改变选择范围
     */
    changeRange(e) {
      const that = this;
      that.formData.selectList = [];
    },
    /**
     * 选择门店
     */
    returnStores: function(nodes) {
      const that = this;
      that.formData.selectList = JSON.parse(JSON.stringify(nodes));
    },
    /**
     * 选择门店分组
     */
    checkGroupIds: function(nodes) {
      const that = this;
      that.formData.selectList = JSON.parse(JSON.stringify(nodes));
    },
    toCancel() {
      const that = this;
      that.$emit('closeStore');
    },
    handleClose(done) {
      const that = this;
      that.$emit('closeStore');
    },
    submitForm: _debounce(function(formName) {
      const that = this;
      if ((that.formData.sendRange == '2' || that.formData.sendRange == '3') && !that.formData.selectList.length) {
        return false;
      }
      that.loadingBtn = true;
      that.postSave();
    }, 300),
    postSave() {
      const that = this;
      const data = {
        enterpriseId: that.brandId,
        templateId: that.$route.query.templateId,
        selectType: that.formData.sendRange,
        groupIds: that.formData.sendRange == 2 ? that.formData.selectList.map(ele => ele.storeGroupId).join(',') : '',
        storeIds: that.formData.sendRange == 3 ? that.formData.selectList.join(',') : ''
      };
      postRequest('/haoban-app-customer-web/save-template-store', data)
        .then(res => {
          let resData = res.data;
          that.loadingBtn = false;
          if (resData.errorCode == 1) {
            showMsg.showmsg('操作成功', 'success');
            that.$emit('submitStore');
          } else {
            errMsg.errorMsg(resData);
          }
        })
        .catch(error => {
          that.loadingBtn = false;
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    setStoreShow(newData) {
      const that = this;
      that.dialogVisible = newData;
    }
  },
  mounted() {
    const that = this;
    that.dialogVisible = that.setStoreShow;
  }
};
</script>
<style lang="scss" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.p-l-18 {
  padding-left: 18px;
}
.material-content {
  position: relative;
  .material-body {
    /*  resize: none;
    width: 440px;
    height: 273px;
    border-radius: 2px;
    border: 1px solid rgba(196, 198, 207, 1); */
    .el-textarea {
      >>> .el-textarea__inner {
        height: 273px;
      }
    }
  }
  .emoji-img {
    position: absolute;
    left: 10px;
    bottom: 10px;
  }
}
.el-textarea {
  >>> .el-textarea__inner {
    height: 273px;
  }
}
</style>
