<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> -->
          <h2 class="icon-type-title">
            <div class="mark" />
            商品设置
          </h2>
          <el-form-item prop="openAutoShelf" label="无库存自动下架">
            <el-switch v-model="form.openAutoShelf" />
          </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 prop="openAutoShelf" label="库存提示文案">
            <!-- <el-radio-group v-model="form.stockShow">
              <el-radio :label="0">不展示</el-radio>
              <el-radio :label="1">展示</el-radio>
            </el-radio-group> -->
            <el-checkbox
              style="vertical-align: top;margin-right: 10px"
              v-model="form.stockShow"
              :true-label="1"
              :false-label="0"
            >
              展示
            </el-checkbox>
            <div v-show="form.stockShow" class="stock_tip">
              库存少于 <el-input-number
                v-model="form.stockShowAmount"
                class="stock_tip_ipt"
                controls-position="right"
                :min="1"
              />件，展示为【即将兑光】
            </div>
            <div class="layout--tips">
              开启后，库存提示文案将在积分商城商品列表页展示。
              <el-popover placement="right" width="400" trigger="hover">
                <img src="../../../static/img/tip.png">
                <el-button slot="reference" type="text">
                  查看示例
                </el-button>
              </el-popover>
            </div>
          </el-form-item>
          <h2 class="icon-type-title" style="margin-top:40px">
            <div class="mark" />
            订单设置
          </h2>
          <el-form-item prop="autoConfirmReceipt" label="发货后自动确认收货">
            <el-switch
              v-model="form.autoConfirmReceipt"
              :active-value="1"
              :inactive-value="0"
              @change="form.autoConfirmReceiptDay = null"
            />
          </el-form-item>
          <el-form-item
            prop="autoConfirmReceiptDay"
            v-if="form.autoConfirmReceipt === 1"
            :rules="[{ required: true, message: '请选择自动收货天数' }]"
            label="自动确认收货时间"
          >
            <div class="stock_tip">
              发货后
              <el-select v-model="form.autoConfirmReceiptDay" placeholder="请选择" style="width: 115px;margin: 0 10px">
                <el-option label="7" :value="7" />
                <el-option label="15" :value="15" />
                <el-option label="30" :value="30" />
              </el-select>
              天，自动确认收货
            </div>
          </el-form-item>
          <div class="confim-btn" :style="{ width: fixedWidth + 'px' }">
            <el-form-item class="fix-btn">
              <el-button
                type="primary"
                @click="handleSubmit('form')"
                :loading="btnLoading"
                v-if="$getButtonLimit($buttonCode.convenSetSave)"
                :limit-code="$buttonCode.convenSetSave"
              >
                保存
              </el-button>
            </el-form-item>
          </div>
        </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 {
  components: {},
  data () {
    return {
      form: {
        cardType: '',
        openAutoShelf: false,
        showStoreType: [],
        autoConfirmReceipt: 0,
        autoConfirmReceiptDay: null,
        stockShow: 0,
        stockShowAmount: undefined,
      },
      formRules: {
        cardType: [{ required: true, message: '请选择积分消耗卡', trigger: 'change' }],
        openAutoShelf: [{ required: true, message: '请设置无库存自动下架', trigger: 'change' }],
        showStoreType: [{ required: true, message: '请至少勾选一个门店类型', trigger: 'change' }],
      },
      btnLoading: false,
      fixedWidth: document.documentElement.clientWidth - 200,
    };
  },
  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.autoConfirmReceipt = res.data.result.autoConfirmReceipt || 0;
          this.form.autoConfirmReceiptDay = res.data.result.autoConfirmReceiptDay || null;
          this.form.openAutoShelf = res.data.result.openAutoShelf === 1;
          this.form.showStoreType = res.data.result.showStoreType ? res.data.result.showStoreType.split(',') : [];
          this.form.stockShow = res.data.result.stockShow || 0;
          this.form.stockShowAmount = res.data.result.stockShowAmount || undefined;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSubmit (form) {
      if (!this.form.stockShowAmount) return this.$message.warning('请输入库存提示文案数量限制');
      this.$refs[form].validate(valid => {
        console.log(valid);
        if (valid) {
          const params = {
            // cardType: this.form.cardType,
            autoConfirmReceipt: this.form.autoConfirmReceipt,
            openAutoShelf: this.form.openAutoShelf ? 1 : 0,
            showStoreType: this.form.showStoreType.join(','),
            stockShow: this.form.stockShow,
            stockShowAmount: this.form.stockShowAmount,
          };
          if (params.autoConfirmReceipt === 1) params.autoConfirmReceiptDay = this.form.autoConfirmReceiptDay;
          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;
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.mall-section-container {
  padding-bottom: 58px;
}
.section {
  background: #fff;
  margin: 24px;
  padding: 24px;
}
.icon-type-title {
  display: flex;
  align-items: center;
  height: 20px;
  color: #303133;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 10px;
  background: #f7f8fa;
}
.icon-type-title .mark {
  width: 3px;
  height: 14px;
  margin-right: 8px;
  background-color: #1890ff;
}
.confim-btn {
  height: 32px;
  padding: 12px 0;
  position: fixed;
  bottom: 0px;
  left: 200px;
  background: #fff;
  z-index: 2;
  text-align: center;
  border-top: 1px solid #dcdfe6;
}
.fix-btn {
  margin-left: -100px;
}
.stock_tip {
  color: #303133;
  .stock_tip_ipt {
    margin: 0 10px;
    width: 115px;
  }
}
.layout--tips {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
}
</style>
