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

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

const dialogVisible = ref(false)

const gradeRuleList = [
  { label: '商品品类管理', value: 1 },
  { label: '商品属性管理', value: 2 },
  { label: '商品管理', value: 3 },
  { label: '直播话术管理', value: 4 },
  { label: '直播演练', value: 5 },
  { label: '直播总结汇报', value: 6 },
]
const defaultConfig = {
  min_submit_time: '',
  rules: [] as any[],
}
const formRef = ref()
const form = reactive({
  name: '',
  start_time: '',
  end_time: '',
  questions: '1',
  competition: '1',
  config: { ...defaultConfig },
})

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' },
  { label: '互联网营销师（直播销售）', value: '3' },
  { label: '全媒体运营师（网络编辑）', value: '4' },
])

async function fetchInfo() {
  const res = await getCompetitionRule({ experiment_id: props.id })
  const detail = res.data.detail
  if (!detail) return
  let config = { ...defaultConfig }
  try {
    if (detail.config) {
      config = JSON.parse(detail.config)
      config = { ...defaultConfig, ...config }
    }
  } catch (error) {
    console.log(error)
  }
  Object.assign(form, detail, { config })
}

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

// 提交
async function handleSubmit() {
  // 验证成绩规则
  for (let i = 0; i < form.config.rules.length; i++) {
    const item = form.config.rules[i]
    if (!item.name || !item.type) {
      ElMessage.error(`实操成绩第${i + 1}行规则配置错误，请检查后重试`)
      return
    }
    if (!item.percent) {
      ElMessage.error(`${item.name}分数不能为0！`)
      return
    }
  }
  if (form.config.rules.length > 0 && total.value !== 100) {
    ElMessage.error('成绩规则项分数之和必须为100！')
    return
  }
  await formRef.value?.validate()
  const params = { ...form, experiment_id: props.id, config: JSON.stringify(form.config) }
  await saveCompetitionRule(params)
  ElMessage.success('保存成功')
  dialogVisible.value = false
}

// 合计
const total = computed(() => {
  return form.config.rules.reduce((result: number, item: any) => {
    return result + (item.percent || 0)
  }, 0)
})

// 添加
function handleAdd() {
  form.config.rules.push({ name: '', type: undefined, percent: undefined, rule_mode: 1 })
}
// 删除
function handleRemove(index: number) {
  form.config.rules.splice(index, 1)
}

// 当前评分方法
function currentRuleNames(value: number) {
  const typeList = form.config.rules.map((item: any) => item.type)
  const tempList = gradeRuleList.filter((item) => {
    return item.value === value || !typeList.includes(item.value)
  })
  return tempList
}

function handleTypeChange(row: any) {
  row.rule_mode = 1
  row.name = gradeRuleList.find((item: any) => item.value === row.type)?.label
}

// 占比改变
function handlePercentChange(row: any, index: number) {
  const otherTotal = form.config.rules.reduce((result: number, item: any, i: number) => {
    if (index !== i) {
      result += item.percent || 0
    }
    return result
  }, 0)
  // 最大可输入占比
  nextTick(() => {
    row.percent = Math.min(100 - otherTotal, row.percent)
  })
}

const currentRole = ref()
const currentRoleDialogVisible = ref(false)
function handleEdit(row: any) {
  currentRole.value = row
  currentRoleDialogVisible.value = true
}

// 最短交卷时间禁用日期：必须大于开始时间且小于结束时间
function disabledMinSubmitDate(time: Date) {
  const startTime = form.start_time ? new Date(form.start_time).getTime() : 0
  const endTime = form.end_time ? new Date(form.end_time).getTime() : Infinity
  return time.getTime() < startTime || time.getTime() > endTime
}
</script>

<template>
  <el-button type="primary" @click="dialogVisible = true">编辑大赛规则</el-button>
  <el-dialog title="编辑大赛规则" :close-on-click-modal="false" width="800px" v-model="dialogVisible" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="100px">
      <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="config.min_submit_time">
        <el-date-picker
          v-model="form.config.min_submit_time"
          type="datetime"
          placeholder="请选择最短交卷时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          :disabled-date="disabledMinSubmitDate"
          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-divider />
      <el-form-item label-width="0">
        <el-row justify="space-between" style="width: 100%">
          <p>成绩规则：</p>
          <el-button type="primary" :icon="Plus" @click="handleAdd"></el-button>
        </el-row>
        <el-table :data="form.config.rules">
          <el-table-column prop="name" width="170">
            <template #default="{ row }">
              <el-select v-model="row.type" style="width: 100%" @change="handleTypeChange(row)">
                <el-option v-for="item in currentRuleNames(row.type)" :key="item.value" v-bind="item"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="percent" align="center" width="200">
            <template #default="{ row, $index }">
              <el-input-number v-model="row.percent" :min="0" :max="100" @change="handlePercentChange(row, $index)" />
              分
            </template>
          </el-table-column>
          <el-table-column prop="rule_mode" width="200">
            <template #default="{ row }">
              <el-radio-group v-model="row.rule_mode" size="small">
                <el-radio :label="1">人工评分</el-radio>
                <el-radio :label="2" :disabled="[4, 5, 6].includes(row.type)">自动评分</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template #default="{ $index, row }">
              <div class="btn-box">
                <el-button
                  style="padding: 0"
                  text
                  type="primary"
                  @click="handleEdit(row)"
                  :disabled="[4, 5, 6].includes(row.type) || row.rule_mode === 1"
                  >编辑</el-button
                >
                <el-button style="padding: 0" text type="primary" @click="handleRemove($index)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="total" v-if="form.config.rules.length">
          <p>合计：{{ total }}分</p>
        </div>
      </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>
  <el-drawer
    :title="currentRole?.name + '评分规则提示词'"
    :close-on-click-modal="false"
    v-model="currentRoleDialogVisible"
    append-to-body>
    <el-input v-model="currentRole.content" type="textarea" placeholder="请输入提示词" :rows="20" />
    <template #footer>
      <el-row justify="center">
        <el-button type="primary" round auto-insert-space @click="currentRoleDialogVisible = false">确定</el-button>
      </el-row>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
.total {
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
  text-align: right;
  p {
    display: inline-block;
    min-width: 120px;
    text-align: center;
    color: #016fa0;
    background-color: #ededed;
    padding: 5px 10px;
  }
}
</style>
