<template>
  <div class="program-edit">
    <Dialog v-model="dialogVisible" :title="dialogTitle" width="70%" top="10vh">
      <el-scrollbar height="600px">
        <div class="main">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="基本内容" name="common">
              <div class="line">
                <div class="title-text">试题题目</div>
                <div class="block">
                  <Editor v-model="content" height="150px" />
                </div>
              </div>
              <div class="line">
                <div class="title-text">答题程序模板</div>
                <ElTextarea v-model="textarea" :rows="4" />
              </div>
              <!-- <div class="line">
                <div class="title-text">基本信息</div>
                <el-form
                  label-width="80"
                  :inline="false"
                  :model="formData"
                  class="demo-form-inline"
                >
                  <el-form-item label="知识点">
                    <el-input disabled placeholder="请输入知识点" size="large" />
                  </el-form-item>
                  <el-form-item label="试题版本">
                    <p>测试测试</p>
                  </el-form-item>
                  <el-form-item label="来源">
                    <p>测试测试</p>
                  </el-form-item>
                  <el-form-item label="创建人">
                    <p>测试测试</p>
                  </el-form-item>
                  <el-form-item label="创建时间">
                    <p>测试测试</p>
                  </el-form-item>
                  <el-form-item label="修改人">
                    <p>测试测试</p>
                  </el-form-item>
                  <el-form-item label="修改时间">
                    <p>测试测试</p>
                  </el-form-item>
                </el-form>
              </div> -->
            </el-tab-pane>
            <el-tab-pane label="判分设置" name="score">
              <div class="line">
                <div class="title-text">测试程序（参考答案）</div>
                <div class="block">
                  <div class="tip">
                    <p
                      >此处的程序可以用来验证测试用例的有效性，非自动判分的试题在人工批阅时可作为批阅的参考答案。
                      <br />
                      注意: 为确保系统能正确捕获程序运行的输出结果，要求 scanf() 函数不能加参数,
                      不能采用类似 scanf("请输入: %s") 的形式</p
                    >
                  </div>
                  <ElTextarea v-model="textarea" :rows="4" />
                  <div class="btn-line">
                    <el-button type="primary" plain>添加为关键字</el-button>
                    <el-button type="primary" plain>上传程序文件</el-button>
                    <el-button type="primary" plain>运行并测试</el-button>
                  </div>
                  <el-checkbox
                    v-model="programData.checkAutoScore"
                    label="自动判分方式"
                    size="large"
                  />
                </div>
              </div>
              <div class="line">
                <div class="title-text">测试用例</div>
                <div class="block">
                  <div class="flex">
                    <el-checkbox
                      v-model="programData.checkKeyword"
                      label="检查代码关键字"
                      size="large"
                    />
                    <div class="flex" style="margin-left: 20px">
                      编译得分比例：
                      <el-input
                        v-model="programData.percent"
                        type="number"
                        placeholder="Please input"
                      >
                        <template #append>%</template>
                      </el-input>
                    </div>
                  </div>
                  <div>
                    <el-checkbox
                      v-model="programData.checkKeyword"
                      label="使用测试用例"
                      size="large"
                    />
                    <div>
                      <div class="flex">
                        <el-checkbox
                          v-model="programData.checkKeyword"
                          label="测试用例全对时直接得满分s"
                          size="large"
                        />
                      </div>
                      <div class="tip">
                        <p
                          >判分时，测试用例得分比例 = 100% - 关键字得分比例 - 编译得分比例；默认最小
                          10% 得分比例；<br />
                          设置“测试用例全对时直接得满分”，测试用例结果全对时，忽略关键字得分，直接获得试题满分；否则按上述条件计算得分。</p
                        >
                      </div>
                      <el-radio-group v-model="programData.radio1" class="ml-4">
                        <el-radio label="1" size="large">测试用例部分对时得分</el-radio>
                        <el-radio label="2" size="large">测试用例全对时得分</el-radio>
                      </el-radio-group>
                      <div class="btn-line" style="margin-bottom: 10px">
                        <el-button type="primary" plain>添加用例</el-button>
                        <el-button type="primary" plain>导入用例</el-button>
                        <el-button type="primary" plain>导出模板</el-button>
                        <el-button type="primary" plain>删除全部</el-button>
                        <el-button type="primary" plain>测试所有用例</el-button>
                        <el-button type="primary" plain>均分权重</el-button>
                      </div>
                      <el-table
                        :data="examList"
                        style="width: 100%"
                        @selection-change="handleExamSelectionChange"
                      >
                        <el-table-column type="index" width="50" />
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="type" label="输入" width="80" />
                        <el-table-column
                          prop="title"
                          label="输出"
                          width="180"
                          show-overflow-tooltip
                        />
                        <el-table-column prop="displayIndex" label="权重(%)" />
                        <el-table-column prop="size" label="隐藏用例" />
                        <el-table-column prop="size" label="仅隐藏输出" />
                        <el-table-column label="操作">
                          <template #default="scope">
                            <el-button type="primary" @click="delExam(scope)">删除</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="title-text">代码关键字</div>
                <div class="block">
                  <div class="flex">
                    <el-checkbox
                      v-model="programData.checkKeyword"
                      label="检查代码关键字"
                      size="large"
                    />
                    <div class="flex" style="margin-left: 20px">
                      关键字得分比例：
                      <el-input
                        v-model="programData.percent"
                        type="number"
                        placeholder="Please input"
                      >
                        <template #append>%</template>
                      </el-input>
                    </div>
                    <div class="flex">
                      关键字得分临界值：
                      <el-input
                        v-model="programData.percent"
                        type="number"
                        placeholder="Please input"
                      >
                        <template #append>%</template>
                      </el-input>
                    </div>
                  </div>
                  <div class="tip" style="margin-top: 10px">
                    <p
                      >提示：关键字支持正则表达式匹配方式，在新建或编辑中设置。<br />
                      判分时，关键字正确比例小于关键字得分临界值时，忽略验证编译及测试用例得分比例，仅获得关键字正确比例分数。<br />
                      判分时，关键字正确比例大于等于关键字得分临界值，编译通过且测试用例结果全对时，忽略关键字得分，直接获得试题满分。<br />
                      判分时，关键字正确比例大于等于关键字得分临界值，编译不一定通过且测试用例不一定全对时，获得分数
                      = 关键字得分 + 编译得分 + 测试用例结果得分。</p
                    >
                  </div>
                  <div class="btn-line" style="margin-bottom: 10px">
                    <el-button type="primary" plain>新建</el-button>
                    <el-button type="primary" plain>导入</el-button>
                    <el-button type="primary" plain>删除全部</el-button>
                    <el-button type="primary" plain>校验关键字</el-button>
                  </div>
                  <el-table
                    :data="scoreKeyList"
                    style="width: 100%"
                    @selection-change="handleScoreSelectionChange"
                  >
                    <el-table-column type="index" width="50" />
                    <el-table-column type="selection" width="55" />
                    <el-table-column
                      prop="title"
                      label="关键字"
                      width="180"
                      show-overflow-tooltip
                    />
                    <el-table-column prop="displayIndex" label="权重(%)" />
                    <el-table-column label="操作">
                      <template #default="scope">
                        <el-button type="primary" @click="delScore(scope)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="line">
                <div class="title-text">其它选项</div>
                <div>
                  <div class="flex">
                    时间限制：
                    <el-input
                      v-model="programData.percent"
                      type="number"
                      placeholder="Please input"
                    />
                    （ms，毫秒，1秒 等于 1000毫秒）
                  </div>
                  <div class="flex">
                    内存限制：
                    <el-input
                      v-model="programData.percent"
                      type="number"
                      placeholder="Please input"
                    />
                    （MB）
                  </div>
                  <div class="flex">
                    代码长度限制：
                    <el-input
                      v-model="programData.percent"
                      type="number"
                      placeholder="Please input"
                    />
                    （KB）
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="试题解析" name="analyse">
              <div class="block">
                <ElTextarea v-model="textarea" :rows="4" />
              </div>
            </el-tab-pane>
            <el-tab-pane name="keyword">
              <template #label>
                <div class="custom-tabs-label">
                  <p>关键字</p>
                  <el-dropdown>
                    <span class="el-dropdown-link" @click.stop="false">
                      <div class="setting_icon"></div>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item @click="editKeyword('create')">新建</el-dropdown-item>
                        <el-dropdown-item @click="editKeyword('create')">编辑</el-dropdown-item>
                        <el-dropdown-item @click="editKeyword('delete')">删除</el-dropdown-item>
                        <el-dropdown-item @click="editKeyword('deleteall')"
                          >删除全部</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
              <div class="block">
                <el-table
                  :data="keywordList"
                  style="width: 100%"
                  height="410"
                  @selection-change="handleKeywordSelectionChange"
                >
                  <el-table-column type="index" width="50" />
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="keyword" label="关键字" />
                </el-table>
                <el-dialog
                  v-model="keyVisible"
                  title="编辑关键字"
                  width="50%"
                  style="height: auto;"
                  :before-close="keyDialogClose"
                  :close-on-click-modal="false"
                  :close-on-press-escape="false"
                >
                  <div class="main" style="width: 100%; height: 100%">
                    <el-input v-model="keyWord" placeholder="请输入关键字" size="large" />
                    <div class="dialog-footer" style="margin-top: 20px">
                      <el-button @click="keyDialogClose">取消</el-button>
                      <el-button type="primary" @click="confirmKeyDialogVisible"> 确定 </el-button>
                    </div>
                  </div>
                </el-dialog>
              </div>
            </el-tab-pane>
            <el-tab-pane name="media">
              <template #label>
                <div class="custom-tabs-label">
                  <p>媒体文件</p>
                  <el-dropdown>
                    <span class="el-dropdown-link" @click.stop="false">
                      <div class="setting_icon"></div>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>
                          <el-upload
                            v-model:file-list="fileList"
                            class="upload-demo"
                            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                          >
                            <el-button>导入</el-button>
                          </el-upload>
                        </el-dropdown-item>
                        <el-dropdown-item>导出</el-dropdown-item>
                        <el-dropdown-item>播放</el-dropdown-item>
                        <el-dropdown-item>编辑</el-dropdown-item>
                        <el-dropdown-item>删除选中</el-dropdown-item>
                        <el-dropdown-item>删除全部</el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </template>
              <div class="block">
                <el-table
                  :data="mediumList"
                  style="width: 100%"
                  height="410"
                  @selection-change="handleMediumSelectionChange"
                >
                  <el-table-column type="index" width="50" />
                  <el-table-column type="selection" width="55" />
                  <el-table-column prop="type" label="媒体类型" width="80" />
                  <el-table-column prop="title" label="标题" />
                  <el-table-column prop="displayIndex" label="显示序号" />
                  <el-table-column prop="size" label="大小" />
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
      <template #footer>
        <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { CommonStatusEnum } from '@/utils/constants'
import ElTextarea from './components/el-textarea.vue'
import { defaultProps, handleTree } from '@/utils/tree'
import * as PostApi from '@/api/system/post'
import * as DeptApi from '@/api/system/dept'
import * as UserApi from '@/api/system/user'
import { FormRules } from 'element-plus'

defineOptions({ name: 'SystemUserForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  content: '',
  specialtyName: '',
  courseName: '',
  quBankName: '',
  required: '',
  chapteridDictText: '',
  analysis: ''
})
const formRules = reactive<FormRules>({
  specialtyName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const deptList = ref<Tree[]>([]) // 树形结构
const postList = ref([] as PostApi.PostVO[]) // 岗位列表
/** 页面内容开始 */
const activeName = ref('common')
const content = ref('')
const textarea = ref('')

const handleClick = (tab, e) => {
  activeName.value = tab.paneName.value
}
/** 页面内容结束 */

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await UserApi.getUser(id)
    } finally {
      formLoading.value = false
    }
  }
  // 加载部门树
  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
  // 加载岗位列表
  postList.value = await PostApi.getSimplePostList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const programData = ref({
  title: '',
  checkAutoScore: false,
  checkKeyword: false,
  percent: 0,
  radio1: ''
})

const examList = ref([] as any)
const multipleSelection = ref([] as any)
const handleExamSelectionChange = (val: any) => {
  multipleSelection.value = val
}
const delExam = (val: any) => {
  console.log(val)
}

const scoreKeyList = ref([] as any)
const multipleScoreSelection = ref([] as any)
const handleScoreSelectionChange = (val: any) => {
  multipleScoreSelection.value = val
}
const delScore = (val: any) => {
  console.log(val)
}

// 关键字

const keywordList = ref([] as any)
const multipleKeywordSelection = ref([] as any)
const handleKeywordSelectionChange = (val: any) => {
  multipleKeywordSelection.value = val
}
const keyVisible = ref(false)
const keyEditType = ref('')

const keyWord = ref([null])

const editKeyword = (key) => {
  keyEditType.value = key
  keyVisible.value = true
}
const keyDialogClose = () => {
  keyVisible.value = false
}
const confirmKeyDialogVisible = () => {
  if (keyEditType.value === 'create') {
    keywordList.value.push({
      keyword: keyWord.value
    })
  }

  keyVisible.value = false
}

// 媒体文件
const mediumList = ref([] as any)
const multipleMediumSelection = ref([] as any)
const handleMediumSelectionChange = (val: any) => {
  multipleMediumSelection.value = val
}
const fileList = []

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  console.log(textarea.value)
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as UserApi.UserVO
    if (formType.value === 'create') {
      await UserApi.createUser(data)
      message.success(t('common.createSuccess'))
    } else {
      await UserApi.updateUser(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    content: '',
    specialtyName: '',
    courseName: '',
    quBankName: '',
    required: '',
    chapteridDictText: '',
    analysis: ''
  }
  formRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
.program-edit {
  :deep(.el-dialog) {
    display: flex;
    flex-direction: column;
    height: 85vh;
    .el-dialog__header {
      border-bottom: 1px solid #ededed;
    }
    .el-dialog__footer {
      border-top: 1px solid #ededed;
    }
    .el-dialog__body {
      flex: 1;
      overflow: hidden;
      .main {
        height: 100%;
        .el-tabs {
          height: 100%;
          .el-tabs__content {
            flex: 1;
            overflow-y: auto;
            .line {
              margin-bottom: 10px;
              .title-text {
                font-size: 18px;
                font-weight: 600;
                margin-bottom: 8px;
              }
              .block {
                .tip {
                  color: #8a6d3b;
                  background-color: #fcf8e3;
                  border: 1px solid transparent;
                  border-color: #faebcc;
                  padding: 15px;
                  border-radius: 4px;
                  margin-bottom: 10px;
                  > p {
                    margin: 0;
                  }
                }
                .btn-line {
                  display: flex;
                  margin-top: 10px;
                }
                .flex {
                  display: flex;
                  align-items: center;
                }
              }
            }
            .el-input {
              width: 45%;
            }
          }

          .custom-tabs-label {
            display: flex;
            align-items: center;
            .setting_icon {
              width: 16px;
              height: 16px;
              background: url('@/assets/icon/setting_blue.png') no-repeat center;
              background-size: 100%;
              margin-left: 3px;
              display: none;
            }
          }
          .is-active {
            .custom-tabs-label {
              .setting_icon {
                display: block;
              }
            }
          }
          :deep(.ele-pro-table) {
            flex: 1;
            margin-top: 10px;
            .el-table--fit {
              height: 100%;
            }
          }
        }
      }
    }
  }
}
:deep(.tox-tinymce) {
  .tox-statusbar {
    display: none;
  }
}

:deep(.el-table) {
  .el-table__header-wrapper {
    .el-table__header {
      thead {
        tr {
          th {
            background: #ebebeb;
          }
        }
      }
    }
  }
}
</style>
