<template>
  <div class="mall-section-container">
    <div class="mall-content-section">
      <div class="mall-content-title">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '' }"><a href="/report/#/memberSummary">首页</a></el-breadcrumb-item>
          <el-breadcrumb-item>积分商城</el-breadcrumb-item>
          <el-breadcrumb-item>设置</el-breadcrumb-item>
          <el-breadcrumb-item>常规设置</el-breadcrumb-item>
        </el-breadcrumb>
        <h3>
          <span>常规设置</span>
        </h3>
      </div>
      <div class="section">
        <el-form :model="form" ref="form" :rules="formRules" label-width="150px" class="demo-ruleForm" label-position="right">
          <!-- <el-form-item prop="cardType" label="积分消耗卡">
            <el-select v-model="form.cardType" placeholder="积分消耗卡">
              <el-option label="集团卡" :value="2"></el-option>
              <el-option label="品牌卡" :value="1"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item prop="openAutoShelf" label="礼品无库存自动下架">
            <el-switch v-model="form.openAutoShelf"></el-switch>
          </el-form-item>
          <el-form-item prop="showStoreType" label="礼品展示门店类型">
            <el-checkbox-group v-model="form.showStoreType">
              <el-checkbox label="1">服务门店</el-checkbox>
              <el-checkbox label="2">协管门店</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit('form')" :loading="btnLoading">确定</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import qs from 'qs';
import request from '../../service/request.js';
// import getInputVal from '../../utils/common.js';

export default {
  data() {
    return {
      form: {
        cardType: '',
        openAutoShelf: false,
        showStoreType: []
      },
      formRules: {
        cardType: [{ required: true, message: '请选择积分消耗卡', trigger: 'change' }],
        openAutoShelf: [{ required: true, message: '请设置无库存自动下架', trigger: 'change' }],
        showStoreType: [{ required: true, message: '请至少勾选一个门店类型', trigger: 'change' }]
      },
      btnLoading: false
    };
  },
  created() {
    this.getMess();
  },
  methods: {
    getMess() {
      request.get('/api-integral-mall/get-card-config').then(res => {
        if (res.data.errorCode === 0) {
          this.form.cardType = res.data.result.cardType || '';
          this.form.openAutoShelf = res.data.result.openAutoShelf === 1 ? true : false;
          this.form.showStoreType = res.data.result.showStoreType ? res.data.result.showStoreType.split(',') : [];
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          let params = {
            // cardType: this.form.cardType,
            openAutoShelf: this.form.openAutoShelf ? 1 : 0,
            showStoreType: this.form.showStoreType.join(',')
          };
          this.btnLoading = true;
          request.get('/api-integral-mall/save-card-config', { params }).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success('保存成功');
              this.btnLoading = false;
              this.getMess();
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          return false;
        }
      });
    }
  },
  components: {}
};
</script>
<style scoped>
.section {
  background: #fff;
  margin: 24px;
  padding: 24px;
}
</style>
