<template>
  <div class="demand">
    <el-col :span="24" class="one" v-if="type == '0'">
      <el-col :span="24" class="one_1">
        <el-button type="primary" @click="toCommon('1')">发布赛事</el-button>
      </el-col>
      <el-col :span="24" class="one_2">
        <List></List>
      </el-col>
    </el-col>
    <el-col :span="24" class="two" v-else>
      <el-col :span="24" class="two_1">
        <el-button type="primary" @click="toCommon('0')">返回</el-button>
      </el-col>
      <el-col :span="24" class="two_2">
        <el-form
          label-position="top"
          ref="MatchRules"
          :model="form"
          :rules="rules"
          label-width="80px"
          class="form"
        >
          <el-form-item label="封面" prop="file">
            <custom-upload
              model="file"
              :list="form.file"
              :limit="1"
              url="/files/web/template_match/upload"
              @change="onUpload"
              listType="picture-card"
            ></custom-upload>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="赛事名称" prop="name">
                <el-input clearable v-model="form.name" placeholder="请输入赛事名称"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赛事类型" prop="type">
                <el-select v-model="form.type" clearable placeholder="请选择赛事类型">
                  <el-option
                    v-for="(item, index) in typeList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="赛事行业" prop="industry">
                <el-select v-model="form.industry" clearable placeholder="请选择赛事行业">
                  <el-option
                    v-for="(item, index) in industryList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织单位" prop="work">
                <el-input clearable v-model="form.work" placeholder="请输入组织单位"> </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="奖金(万元)" prop="money">
                <el-input clearable v-model="form.money" placeholder="请输入奖金(万元)"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类别" prop="form">
                <el-select v-model="form.form" clearable placeholder="请选择类别">
                  <el-option
                    v-for="(item, index) in formList"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="有效期" prop="time">
                <el-date-picker
                  v-model="form.time"
                  type="daterange"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否启用" prop="is_use">
                <el-radio-group v-model="form.is_use">
                  <el-radio v-for="(item, index) in isUseList" :key="index" :value="item.value">{{
                    item.label
                  }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item class="editor" label="大赛背景" prop="rules.rules1">
            <WangEditor v-model="form.rules.rules1" />
          </el-form-item>
          <el-form-item class="editor" label="大赛主题和目标" prop="rules.rules2">
            <WangEditor v-model="form.rules.rules2" />
          </el-form-item>
          <el-form-item class="editor" label="大赛基本情况介绍" prop="rules.rules3">
            <WangEditor v-model="form.rules.rules3" />
          </el-form-item>
          <el-form-item class="editor" label="赛题任务" prop="rules.rules4">
            <WangEditor v-model="form.rules.rules4" />
          </el-form-item>
          <el-form-item class="editor" label="赛程安排" prop="rules.rules5">
            <WangEditor v-model="form.rules.rules5" />
          </el-form-item>
          <el-form-item class="editor" label="赛制阶段" prop="rules.rules6">
            <WangEditor v-model="form.rules.rules6" />
          </el-form-item>
          <el-form-item class="editor" label="参赛资格" prop="rules.rules7">
            <WangEditor v-model="form.rules.rules7" />
          </el-form-item>
          <el-form-item class="editor" label="参赛报名" prop="rules.rules8">
            <WangEditor v-model="form.rules.rules8" />
          </el-form-item>
          <el-form-item class="editor" label="奖项设置与奖励办法" prop="rules.rules9">
            <WangEditor v-model="form.rules.rules9" />
          </el-form-item>
          <el-form-item class="editor" label="组织单位" prop="rules.rules10">
            <WangEditor v-model="form.rules.rules10" />
          </el-form-item>
          <el-form-item class="editor" label="赛事联络" prop="rules.rules11">
            <WangEditor v-model="form.rules.rules11" />
          </el-form-item>
          <el-form-item class="editor" label="赛事交流" prop="rules.rules12">
            <WangEditor v-model="form.rules.rules12" />
          </el-form-item>
          <el-form-item class="editor" label="常见问题" prop="brief">
            <WangEditor v-model="form.brief" />
          </el-form-item>
          <el-form-item label="赛事状态" prop="match_status">
            <el-select v-model="form.match_status" clearable placeholder="请选择赛事状态">
              <el-option
                v-for="(item, index) in matchList"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-col :span="24" class="button">
              <el-button type="primary" @click="submitForm(MatchRules)">保存</el-button>
            </el-col>
          </el-form-item>
        </el-form>
      </el-col>
    </el-col>
  </div>
</template>
<script setup>
const $checkRes = inject('$checkRes')
import { DictDataStore } from '@/store/api/system/dictData'
const dictDataStore = DictDataStore()
// 组件
import List from './parts/list.vue'
const form = inject('form')
const type = inject('type')
const toCommon = inject('toCommon')
const MatchRules = ref()
const submitForm = inject('submitForm')
// 字典表
const isUseList = ref([])
const statusList = ref([])
const typeList = ref([])
const matchList = ref([])
const formList = ref([])
const industryList = ref([])
const rules = reactive({
  name: [{ required: true, message: '请输入赛事名称', trigger: 'blur' }],
  work: [{ required: true, message: '请输入组织单位', trigger: 'blur' }],
  type: [{ required: true, message: '请选择赛事类型', trigger: 'change' }],
  industry: [{ required: true, message: '请选择赛事行业', trigger: 'change' }],
  form: [{ required: true, message: '请选择类别', trigger: 'change' }],
  money: [{ required: true, message: '请输入奖金', trigger: 'blur' }],
  time: [{ required: true, message: '请选择有效期', trigger: 'change' }],
  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
  match_status: [{ required: true, message: '请选择赛事状态', trigger: 'change' }],
  brief: [{ required: true, message: '请输入常见问题', trigger: 'blur' }]
})
// 请求
onMounted(async () => {
  await searchOther()
})
const searchOther = async () => {
  let result
  // 是否使用
  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
  if ($checkRes(result)) isUseList.value = result.data
  // 类型
  result = await dictDataStore.query({ code: 'matchType', is_use: '0' })
  if ($checkRes(result)) typeList.value = result.data
  // 类别
  result = await dictDataStore.query({ code: 'matchForm', is_use: '0' })
  if ($checkRes(result)) formList.value = result.data
  // 状态
  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) matchList.value = result.data
  // 赛事行业
  result = await dictDataStore.query({ code: 'matchIndustry', is_use: '0' })
  if ($checkRes(result)) industryList.value = result.data
}
// 上传图片
const onUpload = (e) => {
  const { model, value } = e
  form.value[model] = value
}
</script>
<style scoped lang="scss">
.one {
  .one_1 {
    margin: 0 10px 10px 10px;
    text-align: right;
  }
}
.two {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  .two_1 {
    text-align: right;
  }
  .two_2 {
    .editor {
      padding: 5px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .button {
      text-align: center;
    }
  }
}
</style>
