<template>
  <div class="main-container">
    <el-card class="box-card !border-none" shadow="never">
      <el-form
        class="page-form"
        :model="formData"
        label-width="150px"
        ref="ruleFormRef"
        :rules="formRules"
        v-loading="loading"
      >
        <el-form-item
          v-for="day in weekDays"
          :key="day.key"
          :label="day.label"
          :prop="`priceRules.${day.key}`"
        >
          <span style="margin: 0 8px">每个</span>
          <el-input
            v-model.number="formData.priceRules[day.key].basePrice"
            placeholder="请输入"
            class="input-width"
            clearable
          />
          <span style="margin: 0 8px">元 超过</span>
          <el-input
            v-model.number="formData.priceRules[day.key].limitCount"
            placeholder="请输入"
            class="input-width"
            clearable
          />
          <span style="margin: 0 8px">个</span>
          <el-input
            v-model.number="formData.priceRules[day.key].extraPrice"
            placeholder="请输入"
            class="input-width"
            clearable
          />
          <span style="margin-left: 4px">元</span>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="fixed-footer-wrap">
      <div class="fixed-footer">
        <el-button type="primary" @click="onSave()">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { t } from '@/lang'
import { FormInstance, FormRules } from 'element-plus'
import { yjpzConfig, getYjpzConfig } from '@/app/api/sys'

const loading = ref(true)
const formData = reactive({
  priceRules: {
    mon: { basePrice: 0, limitCount: 0, extraPrice: 0 },
    tue: { basePrice: 0, limitCount: 0, extraPrice: 0 },
    wed: { basePrice: 0, limitCount: 0, extraPrice: 0 },
    thu: { basePrice: 0, limitCount: 0, extraPrice: 0 },
    fri: { basePrice: 0, limitCount: 0, extraPrice: 0 },
    sat: { basePrice: 0, limitCount: 0, extraPrice: 0 },
    sun: { basePrice: 0, limitCount: 0, extraPrice: 0 },
  },
})

const weekDays = [
  { key: 'mon', label: '周一' },
  { key: 'tue', label: '周二' },
  { key: 'wed', label: '周三' },
  { key: 'thu', label: '周四' },
  { key: 'fri', label: '周五' },
  { key: 'sat', label: '周六' },
  { key: 'sun', label: '周日' },
]

const formRules = reactive<FormRules>({})

const setFormData = async () => {
  const data = await (await getYjpzConfig()).data
  formData['priceRules'] = data
  loading.value = false
}
setFormData()
const onSave = async () => {
  yjpzConfig(formData)
    .then(() => {
      loading.value = true
      setFormData()
    })
    .catch(() => {
      loading.value = false
    })
}
</script>

<style lang="scss" scoped></style>
