<!-- 霸王餐 -->
<template>
  <div class="gyq_container">
    <div class="gyq_content" v-if="shopInfo.isHeadShop == 1 || isUse">
      <HeaderCard name="霸王餐" intro="设置充值消费的N倍，当前订单立即免单" icon="xffx"
        :showSwitch="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'" v-model:isOpen="form.enable">
      </HeaderCard>
      <div class="row">
        <el-tabs v-model="tabsValue">
          <el-tab-pane label="基础设置" :name="1">
            <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="120px">
              <el-form-item label="充值设置" prop="rechargeTimes">
                <div class="center">
                  <span>用户消费结账时，成功充值</span>
                  <el-input v-model="form.rechargeTimes" placeholder="请输入内容" style="width: 100px;"
                    input-style="text-align: center;"></el-input>
                  <span>倍的金额，本单即可享受免单</span>
                </div>
              </el-form-item>
              <el-form-item label="充值门槛" prop="rechargeThreshold">
                <div class="center">
                  <span>订单支付金额需满</span>
                  <el-input v-model="form.rechargeThreshold" placeholder="请输入内容" style="width: 100px;"
                    input-style="text-align: center;"></el-input>
                  <span>元才能使用</span>
                </div>
              </el-form-item>
              <el-form-item label="可用门店">
                <el-radio-group v-model="form.useShopType">
                  <el-radio label="全部门店" value="all"></el-radio>
                  <el-radio label="指定门店可用" value="part"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选择门店" prop="shopIdList" v-if="form.useShopType == 'part'">
                <selectBranchs all v-model="form.shopIdList" />
              </el-form-item>
              <!-- 可使用类型 -->
              <el-form-item label="可使用类型" prop="useType">
                <el-checkbox-group v-model="form.useType">
                  <el-checkbox label="堂食" value="dine-in"></el-checkbox>
                  <el-checkbox label="外带" value="take-out"></el-checkbox>
                  <el-checkbox label="外卖" value="take-away"></el-checkbox>
                  <el-checkbox label="配送" value="post"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="可与优惠券同享">
                <el-switch v-model="form.withCoupon"></el-switch>
              </el-form-item>
              <el-form-item label="可与积分同享">
                <el-switch v-model="form.withPoints"></el-switch>
              </el-form-item>
              <div v-if="shopInfo.isHeadShop == 1 || shopInfo.shopType == 'only'">
                <el-form-item style="margin-top: 50px;">
                  <el-button type="primary" @click="submitHandle">保存</el-button>
                  <el-button @click="router.back()">取消</el-button>
                </el-form-item>
              </div>
            </el-form>
          </el-tab-pane>
          <!-- <el-tab-pane label="充值记录" :name="2">
            <record />
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
    <div class="gyq_content" v-else>
      门店未参与霸王餐活动或主店未开启活动，如需开启参与请联系主店
    </div>
  </div>
</template>

<script setup>
import HeaderCard from "../components/headerCard.vue";
import record from "./record.vue";
import { freeDingGet, freeDingPut } from "@/api/coupon";
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router";

const shopInfo = ref(JSON.parse(localStorage.getItem('userInfo')))
const router = useRouter();
const tabsValue = ref(1)

const form = ref({
  id: '',
  enable: false, //是否启用
  rechargeTimes: '', //充值倍数
  rechargeThreshold: '', //充值门槛
  useShopType: 'all', //门店类型 all全部 part部分 
  shopIdList: [], // 门店列表
  useType: ['dine-in'], // 可使用类型 dine-in店内 takeaway外卖 takeout自取 post快递
  withCoupon: false, //是否可与优惠券同享
  withPoints: true, //是否可与积分同享
})

const rules = ref({
  rechargeTimes: [
    { required: true, message: '请输入充值倍数', trigger: 'blur' },
    { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' }
  ],
  rechargeThreshold: [
    { required: true, message: '请输入充值门槛', trigger: 'blur' },
    { pattern: /^(0|[1-9]\d*)(\.\d{1,2})?$/, message: '请输入正确的金额', trigger: 'blur' }
  ],
  shopIdList: [
    { required: true, message: '请选择门店', trigger: 'change' },
  ],
  useType: [
    { required: true, message: '请选择可使用类型', trigger: 'change' }
  ]
})

// 提交保存
const formRef = ref(null)
function submitHandle() {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        const data = { ...form.value }
        data.enable = form.value.enable ? true : false
        await freeDingPut(form.value);
        ElNotification({
          title: "注意",
          message: "保存成功",
          type: "success",
        });
      }
    } catch (err) {
      console.log(err);
    }
  });
}

// 获取当前店铺霸王餐配置信息列表
const isUse = ref(false)
async function freeDingGetAjax() {
  try {
    const res = await freeDingGet();
    form.value = { ...res }
    form.value.enable = res.enable ? 1 : 0
    form.value.useShopType = res.useShopType || 'all'
    form.value.useType = res.useType || ['dine-in']
    form.value.shopIdList = res.shopIdList || []

    if (res.enable == true) {
      if (shopInfo.value.shopType == 'only') {
        isUse.value = true
      } else {
        if (res.useType == 'all') {
          isUse.value = true
        } else {
          let currentShopId = shopInfo.value.shopId;
          res.shopIdList.some((item) => {
            if (item == currentShopId) {
              isUse.value = true;
              return true;
            }
          });
        }
      }
    } else {
      isUse.value = false
    }
  } catch (err) {
    console.log(err);
  }
}

onMounted(() => {
  freeDingGetAjax()
})
</script>

<style lang="scss" scoped>
.gyq_container {
  padding: 14px;

  .gyq_content {
    padding: 14px;
    background-color: #fff;
    border-radius: 8px;
  }
}

.row {
  padding-top: 14px;
}

.center {
  display: flex;
  align-items: center;
  gap: 10px;

  span {
    color: #333;
  }
}
</style>