<template>
  <div class="right-wrap">
    <topNavNew :navpath="navpath"></topNavNew>
    <div class="right-content">
      <div class="right-box">
        <div class="attention-wrap">
          <!-- 开卡门店配置 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">开卡门店配置</h3>
              <p class="open-card-descript">设置会员的开卡门店规则</p>
            </div>
            <div class="cell-body">
              <el-form :model="openCardForm" ref="openCardForm" label-width="130px" class="demo-ruleForm">
                <el-form-item label="微信会员" prop="">
                  <el-radio v-model="openCardForm.wxOpenCardStoreSet" label="0" @change="changeRadio($event, 6)">首次关注门店</el-radio>
                  <el-radio v-model="openCardForm.wxOpenCardStoreSet" label="1" @change="changeRadio($event, 6)">开卡前最后关联门店</el-radio>
                </el-form-item>
                <el-form-item label="POS转微信会员" prop="">
                  <el-radio v-model="openCardForm.posOpenCardStoreSet" label="0" @change="changeRadio($event, 7)">ERP中的开卡门店</el-radio>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 主门店配置 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">服务门店配置</h3>
              <p class="open-card-descript">设置会员的服务门店规则</p>
            </div>
            <div class="cell-body">
              <el-form :model="mainStoreForm" ref="mainStoreForm" label-width="130px" class="demo-ruleForm">
                <el-form-item label="微信会员" prop="">
                  <el-radio v-model="mainStoreForm.wxMainStoreSet" label="0" @change="changeRadio($event, 8)">首次关注门店</el-radio>
                  <el-radio v-model="mainStoreForm.wxMainStoreSet" label="1" @change="changeRadio($event, 8)">开卡前最后关联门店</el-radio>
                </el-form-item>
                <el-form-item label="POS转微信会员" prop="">
                  <el-radio v-model="mainStoreForm.posMainStoreSet" label="0" @change="changeRadio($event, 9)">ERP中的开卡门店</el-radio>
                </el-form-item>
                <el-form-item label="开卡选择服务门店" prop="">
                  <el-switch v-model="mainStoreForm.openCardStoreEdit" @change="changeSwitch($event, 2)"> </el-switch>
                </el-form-item>
                <el-form-item label="开卡选择专属导购" prop="">
                  <el-switch v-model="mainStoreForm.openCardClerkEdit" @change="changeSwitch($event, 3)"> </el-switch>
                </el-form-item>
                <el-form-item label="服务门店变更逻辑" prop="">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="对象" width="150"> </el-table-column>
                    <el-table-column prop="rules" label="变更服务门店规则"> </el-table-column>
                    <el-table-column prop="address" label="优先级" width="150">
                      <template>
                        <i class="el-icon-back" style="transform:rotate(-90deg)"></i>
                      </template>
                    </el-table-column>
                    <el-table-column prop="typeValue" label="是否开启" width="150">
                      <template slot-scope="scope">
                        <el-switch v-model="scope.row.typeValue" @change="changeServiceSwitch(scope.row.typeValue)"></el-switch>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <!-- 归属修改权限 -->
          <div class="member-cell">
            <div class="title-group">
              <h3 class="open-card-title">归属修改权限</h3>
              <p class="open-card-descript">设置会员是否有权限对服务门店和专属导购进行修改</p>
            </div>
            <div class="cell-body">
              <el-form :model="belongAuthForm" ref="belongAuthForm" label-width="130px" class="demo-ruleForm">
                <el-form-item label="修改服务门店" prop="">
                  <el-switch v-model="belongAuthForm.storeEdit" @change="changeSwitch($event, 4)"> </el-switch>
                </el-form-item>
                <el-form-item label="修改次数限制" prop="" v-if="belongAuthForm.storeEdit == true">
                  <el-radio
                    v-model="belongAuthForm.storeEditTimesType"
                    label="1"
                    @change="changeRadio($event,11,'store')">最多修改
                    <el-input
                      :disabled="belongAuthForm.storeEditTimesType!='1'"
                      maxLength="6"
                      v-model="belongAuthForm.storeEditTimes"
                      @change="changeInput($event,13,'storeEditTimes')">
                    </el-input><label>次</label>
                  </el-radio>

                  <el-radio
                    v-model="belongAuthForm.storeEditTimesType"
                    label="2"
                    @change="changeRadio($event,11,'store')">每月最多修改
                    <el-input
                      :disabled="belongAuthForm.storeEditTimesType!='2'"
                      maxLength="6"
                      v-model="belongAuthForm.storeEditMonthTimes"
                      @change="changeInput($event,18,'storeEditTimes')"></el-input><label>次</label>
                  </el-radio>

                  <el-radio
                    v-model="belongAuthForm.storeEditTimesType"
                    label="3"
                    @change="changeRadio($event,11,'store')">每年最多修改
                    <el-input
                      :disabled="belongAuthForm.storeEditTimesType!='3'"
                      maxLength="6"
                      v-model="belongAuthForm.storeEditYearTimes"
                      @change="changeInput($event,19,'storeEditTimes')"></el-input><label>次</label>
                  </el-radio>
                </el-form-item>

                <el-form-item label="修改专属导购" prop="">
                  <el-switch v-model="belongAuthForm.clerkEdit" @change="changeSwitch($event, 5)"></el-switch>
                </el-form-item>

                <el-form-item label="修改次数限制" prop="" v-if="belongAuthForm.clerkEdit == true">
                  <el-radio v-model="belongAuthForm.clerkEditTimesType"  label="1" @change="changeRadio($event,12, 'clerk')">最多修改
                    <el-input
                      :disabled="belongAuthForm.clerkEditTimesType!='1'"
                      maxLength="6"
                      v-model="belongAuthForm.clerkEditTimes"
                      @change="changeInput($event,14,'clerkEditTimes')">
                    </el-input><label>次</label>
                  </el-radio>

                  <el-radio v-model="belongAuthForm.clerkEditTimesType" label="2" @change="changeRadio($event,12, 'clerk')">每月最多修改
                    <el-input
                      :disabled="belongAuthForm.clerkEditTimesType!='2'"
                      maxLength="6"
                      v-model="belongAuthForm.clerkEditMonthTimes"
                      @change="changeInput($event,20,'clerkEditTimes')"></el-input><label>次</label>
                  </el-radio>

                  <el-radio v-model="belongAuthForm.clerkEditTimesType" label="3" @change="changeRadio($event,12, 'clerk')">每年最多修改
                    <el-input
                      :disabled="belongAuthForm.clerkEditTimesType!='3'"
                      maxLength="6"
                      v-model="belongAuthForm.clerkEditYearTimes"
                      @change="changeInput($event,21,'clerkEditTimes')"></el-input><label>次</label>
                  </el-radio>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import topNavNew from 'components/nav/navNew';
// eslint-disable-next-line
import { getRequest, postRequest } from '@/api/api';
import { log } from '@/utils/index.js';
export default {
  name: 'memberCardSetEnterprise',
  data() {
    return {
      navpath: [
        {
          name: '集团管理',
          path: ''
        },
        {
          name: '会员制度',
          path: ''
        },
        {
          name: '会员卡设置',
          path: ''
        },
        {
          name: '',
          path: ''
        }
      ],
      // 开卡门店配置
      openCardForm: {
        wxOpenCardStoreSet: '0',
        posOpenCardStoreSet: '0'
      },
      // 主门店
      mainStoreForm: {
        wxMainStoreSet: '0',
        posMainStoreSet: '0',
        openCardStoreEdit: true,
        openCardClerkEdit: true
      },
      // 归属修改权限
      belongAuthForm: {
        storeEdit: true,
        storeEditTimesType: '1',
        storeEditTimes: '',
        storeEditMonthTimes: '',
        storeEditYearTimes: '',
        clerkEdit: true,
        clerkEditTimesType: '1',
        clerkEditTimes: '',
        clerkEditMonthTimes: '',
        clerkEditYearTimes: ''
      },
      // 服务门店变更
      tableData: [
        {
          name: '所有认证会员',
          rules: '会员历史消费次数为0时，取在GIC系统上线后的首次消费门店为服务门店',
          typeValue: false
        }
      ],
      enterpriseId: undefined,
    }
  },
  created() {
    const { enterpriseId, enterpriseName } = this.$route.query;
    this.enterpriseId = enterpriseId;
    this.navpath[3].name = `编辑【${enterpriseName}】归属策略配置`;
    this.getMemberSetInfo();
  },
  methods: {
    // 开卡门店配置 等 radio change
    changeRadio(e, tag, flag) {
      let that = this;
      that.saveSet(tag, e);
      // 判断归属门店修改次数
      if (!!flag && ['clerk', 'store'].includes(flag)) {
        let marking = {
          clerk: 'store',
          store: 'clerk',
          11: '12',
          12: '11'
        };
        that.belongAuthForm[`${marking[flag]}EditTimesType`] = String(e);
        that.saveSet(marking[tag], e);
      }
    },
    saveSet(type, value) {
      let that = this;
      let para = {
        type: type,
        typeValue: value,
        enterpriseId: this.enterpriseId
      };
      postRequest('/api-admin/modify-member-card-setting-flag', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 0) {
            showMsg.showmsg('设置成功', 'success');
            if (type == 2 && value == '0') {
              that.mainStoreForm.openCardClerkEdit = false;
            }
            that.getMemberSetInfo();
            return;
          }

          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          log(error);
        });
    },
    // 第三方等 switch change
    changeSwitch(e, num) {
      let that = this;

      // 开卡
      if (num == 2 && !e) {
        that.saveSet(2, 0);
        that.saveSet(3, 0);
        return;
      }
      if (num == 3 && e && !that.mainStoreForm.openCardStoreEdit) {
        showMsg.showmsg('开卡选择服务门店停用时不允许修改', 'warning');
        that.mainStoreForm.openCardClerkEdit = false;
        return;
      }

      // 修改服务门店
      if (num == 4 && e && !that.belongAuthForm.clerkEdit) {
        showMsg.showmsg('修改专属导购停用时不允许修改', 'warning');
        that.belongAuthForm.storeEdit = false;
        return;
      }
      if (num == 4 && !e) {
        that.belongAuthForm.storeEditTimesType = '1';
        that.changeRadio(1, 11);
      }

      // 修改专属导购
      if (num == 5 && !e) {
        that.saveSet(num, 0);
        that.belongAuthForm.storeEdit = false;
        that.saveSet(4, 0);
        return;
      }
      let v = e == true ? 1 : 0;
      that.saveSet(num, v);
    },
    // 服务门店变更逻辑
    changeServiceSwitch(val) {
      let typeValue = val ? 1 : 0;
      let para = {
        type: 16,
        typeValue: typeValue,
        enterpriseId: this.enterpriseId
      };
      postRequest('/api-admin/modify-member-card-setting-flag', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 0) {
            showMsg.showmsg('设置成功', 'success');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          log(error);
        });
    },
    // input
    changeInput(e, num, tag) {
      let that = this;
      e = !!parseInt(String(e).replace(/[^\d]/g, '')) ? parseInt(String(e).replace(/[^\d]/g, '')) : '0';
      that.belongAuthForm.storeEditTimes = !!parseInt(String(that.belongAuthForm.storeEditTimes).replace(/[^\d]/g, '')) ? parseInt(String(that.belongAuthForm.storeEditTimes).replace(/[^\d]/g, '')) : 0;
      that.belongAuthForm.clerkEditTimes = !!parseInt(String(that.belongAuthForm.clerkEditTimes).replace(/[^\d]/g, '')) ? parseInt(String(that.belongAuthForm.clerkEditTimes).replace(/[^\d]/g, '')) : 0;
      that.belongAuthForm.storeEditMonthTimes = !!parseInt(String(that.belongAuthForm.storeEditMonthTimes).replace(/[^\d]/g,'')) ? parseInt(String(that.belongAuthForm.storeEditMonthTimes).replace(/[^\d]/g,'')) : 0;
      that.belongAuthForm.storeEditYearTimes = !!parseInt(String(that.belongAuthForm.storeEditYearTimes).replace(/[^\d]/g,'')) ? parseInt(String(that.belongAuthForm.storeEditYearTimes).replace(/[^\d]/g,'')) : 0;
      that.belongAuthForm.clerkEditYearTimes = !!parseInt(String(that.belongAuthForm.clerkEditYearTimes).replace(/[^\d]/g,'')) ? parseInt(String(that.belongAuthForm.clerkEditYearTimes).replace(/[^\d]/g,'')) : 0;
      that.belongAuthForm.clerkEditMonthTimes = !!parseInt(String(that.belongAuthForm.clerkEditMonthTimes).replace(/[^\d]/g,'')) ? parseInt(String(that.belongAuthForm.clerkEditMonthTimes).replace(/[^\d]/g,'')) : 0;
      if (
        that.belongAuthForm.storeEditTimes > that.belongAuthForm.clerkEditTimes
        || that.belongAuthForm.storeEditMonthTimes > that.belongAuthForm.clerkEditMonthTimes
        || that.belongAuthForm.storeEditYearTimes > that.belongAuthForm.clerkEditYearTimes
      ) {
        that.$message.error({
          duration: 1000,
          message: '修改服务门店次数必须小于修改专属导购次数'
        });
        return;
      }
      that.saveSet(num, e);
    },
    getMemberSetInfo() {
      let that = this;
      getRequest('/api-admin/get-enterprise-grade-info', { enterpriseId: this.enterpriseId })
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 0) {
            // 设置开卡策略信息
            let member = resData.result.memberSystem;
            this.allowPhoneTable = member.memberPhoneSystemList || [];
            if (!!member && !!Object.keys(member).length) {
              that.setCateInfo(member);
              that.cardCateInfo = that.setCateInfo(member);
              // 开卡门店配置
              that.openCardForm.wxOpenCardStoreSet = String(member.wxOpenCardStoreSet);
              that.openCardForm.posOpenCardStoreSet = String(member.posOpenCardStoreSet);
              // 主门店
              that.mainStoreForm.wxMainStoreSet = String(member.wxMainStoreSet);
              that.mainStoreForm.posMainStoreSet = String(member.posMainStoreSet);
              that.mainStoreForm.openCardStoreEdit = member.openCardStoreEdit == 1 ? true : false;
              that.mainStoreForm.openCardClerkEdit = member.openCardClerkEdit == 1 ? true : false;
              // 服务门店变更逻辑
              that.tableData[0].typeValue = member.storeChangeLogic == 1 ? true : false;
              //归属修改权限
              that.belongAuthForm.storeEdit = member.storeEdit == 1 ? true : false;
              that.belongAuthForm.clerkEdit = member.clerkEdit == 1 ? true : false;
              that.belongAuthForm.storeEditTimesType = String(member.storeEditTimesType); //1自定义次数 2 每月修改1次 3每年修改1次
              that.belongAuthForm.storeEditTimes = member.storeEditTimes; //自定义次数
              that.belongAuthForm.storeEditMonthTimes = member.storeEditMonthTimes;
              that.belongAuthForm.storeEditYearTimes = member.storeEditYearTimes;
              that.belongAuthForm.clerkEditTimesType = String(member.clerkEditTimesType); //1自定义次数 2 每月修改1次 3每年修改1次
              that.belongAuthForm.clerkEditTimes = member.clerkEditTimes; //自定义次数
              that.belongAuthForm.clerkEditMonthTimes = member.clerkEditMonthTimes;
              that.belongAuthForm.clerkEditYearTimes = member.clerkEditYearTimes;
            }

            return;
          }
          that.$message.error({
            duration: 1000,
            message: resData.message
          });
        })
        .catch(function(error) {
          log(error);
        });
    },
    // 设置开卡策略
    setCateInfo(item) {
      item.cardCreateType = String(item.cardCreateType);
      item.cardNoStatus = String(item.cardNoStatus);
      item.cardNoTimeType = !!item.cardNoTimeType ? String(item.cardNoTimeType) : '0';
      item.cardBegin = !!item.cardBegin && item.cardBegin != 'null' ? String(item.cardBegin) : '';
      item.prefixKey = String(item.prefixKey);
      item.suffixKey = String(item.suffixKey);
      item.sex = !!item.sex ? item.sex : 0;
      item.usePrefix = item.usePrefix == 1 ? true : false;
      item.useSuffix = item.useSuffix == 1 ? true : false;
      // item.gradeDescribe = item.gradeDescribe;
      // item.memberSystemId = item.memberSystemId;
      return item;
    },
  },
  components: {
    topNavNew
  },
}
</script>
<style lang="scss" scoped>
  .cell-body {
    padding: 24px 32px;
    margin-bottom: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    /deep/ .el-form {
      .el-form-item:nth-child(1) {
        /*margin-top: 30px;*/
      }

      .el-form-item:last-child {
        /*margin-bottom: 0;*/
      }
    }
  }
  .el-input {
    width: 60px;
    margin: 0 10px;
  }

  .el-form-item {
    /deep/.el-form-item__label {
      line-height: 1;
      padding-top: 9px;
    }
  }
  .member-cell {
    background: #fff;
    padding: 0;
  }

  .title-group {
    position: relative;
    border-bottom: 1px solid #e7e7eb;
    padding: 20px 0 15px 32px;
  }
  .open-card-title {
    font-size: 16px;
    font-weight: 500;
    /*padding:5px 0;*/
  }
  .open-card-descript {
    font-size: 13px;
    color: #828282;
    padding: 5px 0;
  }
</style>