<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { setOpenRules } from '../../api'
const emit = defineEmits<Emits>()
const form = reactive({
  type: '0',
  progress: '',
  score: '',
  open: '0',
  start_time: '',
  end_time: ''
})
const props = defineProps({
  isShowOpenRules: {
    type: Boolean
  },
  chapterName: {
    type: String
  },
  sectionName: {
    type: String
  },
  chapterID: {
    type: String
  },
  course_id: {
    type: String
  },
  controlInfo: {
    type: Object
  }
})
interface Emits {
  (e: 'update:isShowOpenRules', isShowOpenRules: boolean): void
  (e: 'create'): void
}
const controlInfo = ref(Object.assign({}, props.controlInfo))

const handleCancel = () => {
  emit('update:isShowOpenRules', false)
}
const handleConfirm = () => {
  const params: any = Object.assign({ course_id: props.course_id, chapter_id: props.chapterID }, form)
  setOpenRules(params).then(() => {
    emit('update:isShowOpenRules', false)
    emit('create')
    ElMessage.success('章节开放规则设置成功')
  })
}

form.type = controlInfo.value.type.toString()
if (form.type === '1') {
  form.progress = controlInfo.value.rules.progress
} else if (form.type === '2') {
  form.score = controlInfo.value.rules.score
} else if (form.type === '3') {
  form.start_time = controlInfo.value.rules.start_time
  form.end_time = controlInfo.value.rules.end_time
} else if (form.type === '4') {
  form.open = controlInfo.value.rules.open.toString()
}
</script>
<template>
  <el-dialog :model-value="isShowOpenRules" :before-close="handleCancel" title="章节开放规则" width="60vw">
    <el-form :model="form" laebl-suffix="：" label-width="100px">
      <el-form-item label="章名称：" prop="chapter">{{ props.chapterName }}</el-form-item>
      <el-form-item label="小节名称：" prop="section">{{ props.sectionName || '无' }}</el-form-item>
      <el-form-item label="开放规则：" prop="rules">
        <el-radio-group
          v-model="form.type"
          style="display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start"
        >
          <el-radio label="0">无条件</el-radio>
          <el-radio label="1">
            前一章/前一节完成度达到之后开放 <el-input v-model="form.progress" style="width: 50px"></el-input>%
          </el-radio>
          <el-radio label="2">
            完成前一章/前一节考试，且考试成绩达到<el-input v-model="form.score" style="width: 50px"></el-input
            >分以上</el-radio
          >
          <el-radio label="3">
            时间范围：
            <el-date-picker
              v-model="form.start_time"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 200px"
            >
            </el-date-picker>
            ~
            <el-date-picker
              v-model="form.end_time"
              type="datetime"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 200px"
            >
            </el-date-picker>
          </el-radio>
          <el-radio label="4">
            手工开放：<el-switch
              v-model="form.open"
              size="large"
              active-value="1"
              inactive-value="0"
              inline-prompt
              style="--el-switch-on-color: #aa1941"
            ></el-switch
          ></el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
:deep(.el-radio) {
  margin-top: 20px;
}
</style>
