<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { getCompetitionRule, saveCompetitionRule } from '../api'

interface Props {
  id: string
}
const props = defineProps<Props>()

const dialogVisible = ref(false)

const formRef = ref()
const form = reactive({
  name: '',
  start_time: '',
  end_time: '',
  questions: '1',
  competition: '1',
})

const rules = ref({
  name: [{ required: true, message: '请输入' }],
  start_time: [{ required: true, message: '请选择' }],
  end_time: [{ required: true, message: '请选择' }],
  questions: [{ required: true, message: '请选择' }],
  competition: [{ required: true, message: '请选择' }],
})

const options = ref([
  { label: '“悦颜坊”美妆护肤案例', value: '1' },
  { label: '襄阳牛肉面2桶装（有牛肉）', value: '2' },
])
const competitionOptions = ref([
  { label: '网络主播赛项', value: '1' },
  { label: '全媒体运营赛项', value: '2' },
])

async function fetchInfo() {
  const res = await getCompetitionRule({ experiment_id: props.id })
  Object.assign(form, res.data.detail)
}

watch(
  dialogVisible,
  (value) => {
    if (value) fetchInfo()
  },
  { immediate: true }
)

// 提交
async function handleSubmit() {
  await formRef.value?.validate()
  await saveCompetitionRule({ ...form, experiment_id: props.id })
  ElMessage.success('保存成功')
  dialogVisible.value = false
}
</script>

<template>
  <el-button type="primary" @click="dialogVisible = true">编辑大赛规则</el-button>
  <el-dialog title="编辑大赛规则" :close-on-click-modal="false" width="500px" v-model="dialogVisible" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="80px">
      <el-form-item label="大赛名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入大赛名称" />
      </el-form-item>
      <el-form-item label="大赛赛项" prop="competition">
        <el-select v-model="form.competition" style="width: 100%" placeholder="请选择" filterable>
          <el-option
            v-for="item in competitionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="start_time">
        <el-date-picker
          v-model="form.start_time"
          type="datetime"
          placeholder="请选择大赛开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%" />
      </el-form-item>
      <el-form-item label="结束时间" prop="end_time">
        <el-date-picker
          v-model="form.end_time"
          type="datetime"
          placeholder="请选择大赛结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          style="width: 100%" />
      </el-form-item>
      <el-form-item label="试题" prop="questions">
        <el-select v-model="form.questions" style="width: 100%" placeholder="请选择" filterable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" round auto-insert-space @click="handleSubmit">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
