<template>
  <div>
    <el-form inline label-width="68px" @submit.prevent>
      <el-row :gutter="20">
        <el-form-item label="车型" @change="searchMj">
          <el-radio-group v-model="queryParams.carTypeId">
            <el-radio label="1001" value="1001">小车</el-radio>
            <el-radio label="1002" value="1002">摩托车</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="科目">
          <el-radio-group v-model="queryParams.subject" @change="searchMj">
            <el-radio label="1" value="1">科一</el-radio>
            <el-radio label="4" value="4">科四</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
    </el-form>
    <div style="display: flex; padding: 10px; border: 1px solid #eee; height: calc(100vh - 80px)">
      <div style="width: 300px; border-right: 1px solid #eee">
        <div style="display: flex; justify-content: space-between; padding-right: 20px">
          <div style="font-size: 18px; font-weight: bold">密卷</div>
          <el-button
            type="primary"
            link
            @click="addMjItem"
            v-hasPermi="['questiont:vip-data:mj:add']"
            >新增</el-button
          >
        </div>
        <el-radio-group
          v-model="mjIndex"
          style="width: 100%; display: block; margin-top: 20px"
          @change="getQuestionList"
        >
          <el-radio v-for="(item, index) in mjList" :key="index" :label="index" class="flex-radio">
            <div style="flex: 1; width: 100px">{{ getMjTitle(index) }}</div>
            <div style="padding-right: 15px">
              <el-button
                type="primary"
                link
                @click="removeMj(item)"
                v-hasPermi="['questiont:vip-data:mj:remove']"
                >删除</el-button
              >
              <el-button
                type="primary"
                link
                @click="clearMjDetail(item)"
                v-hasPermi="['questiont:vip-data:mj:clear']"
                >清空</el-button
              >
            </div>
          </el-radio>
        </el-radio-group>
      </div>
      <div style="flex: 1; padding-left: 20px; padding-right: 20px">
        <div
          v-if="mjList.length > 0"
          style="display: flex; justify-content: space-between; align-items: center"
        >
          <div style="font-size: 20px; font-weight: bold">
            当前密卷：{{ getMjTitle(mjIndex) }}
          </div>
          <div style="margin-left: 10px; margin-right: 10px"> 题目数：{{ tableList.length }} </div>
          <el-button
            type="primary"
            @click="addMjDetail"
            v-hasPermi="['questiont:vip-data:mj:add-question']"
            >新增密卷试题</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableList"
          style="margin-top: 10px"
          max-height="calc(100vh - 280px)"
        >
          <el-table-column type="index" width="55" align="center" />
          <el-table-column label="题目" align="left" prop="question" min-width="140" />
          <el-table-column label="选项" align="left" min-width="140">
            <template #default="{ row }">
              <p v-if="row.chooseA">A:{{ row.chooseA }}</p>
              <p v-if="row.chooseB">B:{{ row.chooseB }}</p>
              <p v-if="row.chooseC">C:{{ row.chooseC }}</p>
              <p v-if="row.chooseD">D:{{ row.chooseD }}</p>
            </template>
          </el-table-column>
          <el-table-column label="答案" align="center" prop="trueAnswer" width="100" />
          <el-table-column label="科目" align="center" prop="subject" width="100">
            <template #default="{ row }">
              <span v-if="row.subject == '1'">科一</span>
              <span v-if="row.subject == '4'">科四</span>
            </template>
          </el-table-column>
          <el-table-column label="章节" align="center" prop="chapterName" min-width="100" />
          <el-table-column label="图片" align="center" width="100">
            <template #default="{ row }">
              <el-image
                v-if="row.imageUrl"
                :src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`"
                :preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]"
                :lazy="true"
                style="width: 80px"
              />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="100px">
            <template #default="{ row }">
              <el-button
                type="primary"
                link
                @click="takeoutMj(row)"
                v-hasPermi="['questiont:vip-data:mj:remove-question']"
                >移出密卷</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog v-model="showDialog" title="新增试题" width="80%">
      <div style="display: flex; align-items: center; margin-bottom: 20px">
        <el-input v-model="quesName" placeholder="请输入题目" clearable @keyup.enter="searchQues" />
        <el-button style="margin-left: 20px" type="primary" @click="searchQues">搜索</el-button>
      </div>
      <el-table :data="quesLit" highlight-current-row height="calc(100vh - 260px)">
        <el-table-column label="题目" align="left" prop="question" min-width="140" />
        <el-table-column label="选项" align="left" min-width="140">
          <template #default="{ row }">
            <p v-if="row.chooseA">A:{{ row.chooseA }}</p>
            <p v-if="row.chooseB">B:{{ row.chooseB }}</p>
            <p v-if="row.chooseC">C:{{ row.chooseC }}</p>
            <p v-if="row.chooseD">D:{{ row.chooseD }}</p>
          </template>
        </el-table-column>
        <el-table-column label="答案" align="center" prop="trueAnswer" width="100" />
        <el-table-column label="章节" align="center" prop="chapterName" min-width="100" />
        <el-table-column label="图片" align="center" width="100">
          <template #default="{ row }">
            <el-image
              v-if="row.imageUrl"
              :src="`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`"
              :preview-src-list="[`https://ss-cloud.ahduima.com/xjxc/pic/${row.imageUrl}`]"
              :lazy="true"
              style="width: 80px"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template #default="{ row }">
            <el-button type="primary" link @click="sureAddQues(row)">加入密卷</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup name="SimpleData">
import {
  getMjList,
  addMj,
  delMj,
  clearMj,
  getMjQuestionList,
  addMjQuestion,
  delMjQuestion
} from '@/api/xjapplet/vipdatabase.js'
import { searchQuestion } from '@/api/xjapplet/xjdatabase.js'
const message = useMessage() // 消息弹窗

const props = defineProps({
  source: {
    type: String,
    default: '1'
  }
})

watch(
  () => props.source,
  (newValue) => {
    queryParams.value.source = newValue
    searchMj()
  }
)

const queryParams = ref({
  carTypeId: '1001',
  subject: '1'
})
const mjIndex = ref(0)
const mjList = ref([])
const loading = ref(false)
const tableList = ref([])
const showDialog = ref(false)
const quesName = ref('')
const quesLit = ref([])

onMounted(() => {
  searchMj()
})

function addMjItem() {
  addMj(queryParams.value).then((res) => {
    if (res) {
      searchMj()
      message.success('添加成功')
    } else {
      message.error('添加失败')
    }
  })
}
function getMjTitle(idx) {
  // const cjObj = {
  //   1001: '小车',
  //   1002: '摩托车'
  // }
  // const kmObj = {
  //   1: '科一',
  //   4: '科四'
  // }
  // return `${cjObj[queryParams.value.carTypeId]}${kmObj[queryParams.value.subject]}考前密卷 第${
  //   idx + 1
  // }套`
  return `考前密卷 第${idx + 1}套`
}
function removeMj(item) {
  message
    .confirm('是否确认删除密卷？')
    .then(function () {
      return delMj(item.secretId)
    })
    .then(() => {
      searchMj()
      message.success('删除成功')
    })
    .catch(() => {})
}
function clearMjDetail(item) {
  message
    .confirm('是否确认清空密卷题目？')
    .then(function () {
      return clearMj(item.secretId)
    })
    .then(() => {
      getQuestionList()
      message.success('清空题目成功')
    })
    .catch(() => {})
}
function searchMj() {
  getMjList(queryParams.value).then((resp) => {
    mjList.value = resp || []
    if (mjList.value.length > 0) {
      mjIndex.value = 0
      getQuestionList()
    }
  })
}
function addMjDetail() {
  showDialog.value = true
}
function searchQues() {
  searchQuestion({
    ...queryParams.value,
    pageNo: 1,
    pageSize: 1000,
    question: quesName.value
  }).then((response) => {
    quesLit.value = response.list
  })
}
function takeoutMj(row) {
  message
    .confirm('是否确认将该题移出密卷？')
    .then(function () {
      return delMjQuestion(row.id)
    })
    .then(() => {
      getQuestionList()
      message.success('清空题目成功')
    })
    .catch(() => {})
}
function getQuestionList() {
  getMjQuestionList({
    secretId: mjList.value[mjIndex.value].secretId
  }).then((resp) => {
    tableList.value = resp
  })
}
function sureAddQues(row) {
  addMjQuestion({
    secretId: mjList.value[mjIndex.value].secretId,
    subId: row.subId
  })
    .then((resp) => {
      if (resp) {
        message.success('添加成功')
        getQuestionList()
      }
    })
    .catch(() => {})
}
</script>

<style lang="scss" scoped></style>
