<script setup lang='ts'>
import { showFailToast, showSuccessToast } from 'vant';
import user from '~/store/user'

const router = useRouter()
import { Status } from '~/store/info'

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

const detail = ref()
await request({
  url: '/dyaw/ctfx/detail',
  data: {
    dc_id: props.id
  }
}).then(
  res => {
    if (res.code === "1") {
      detail.value = res.data.one_info
    }
  }
)

function onClickLeft() {
  router.back()
}

const dialogFormVisible = ref(false)
function onClickRight() {
  if (detail.value?.dc_check === '0') {
    dialogForm.dc_check = '1'
    dialogForm.dc_check_desc = ''
    dialogFormVisible.value = true
  } else {
    showFailToast('当前错题已被审核')
  }
}

const dialogForm = reactive({
  dc_check: '1',
  dc_check_desc: ''
})

const rules = reactive({
  dc_check: [{ required: true, message: '审核结果不能为空', }],
  dc_check_desc: [{ required: true, message: '处理意见不能为空', }],
})

const submit_loading = ref(false)

function submitForm() {
  submit_loading.value = true
  request({
    url: '/dyaw/ctfx/edit',
    data: {
      dc_id: props.id,
      dyaw_ctfx: {
        dc_check: dialogForm.dc_check,
        dc_check_desc: dialogForm.dc_check_desc,
        dc_check_user_id: user.user_id
      }
    }
  }).then(
    res => {
      if (res.code === "1") {
        detail.value = Object.assign(detail.value, dialogForm)
        submit_loading.value = false
        dialogFormVisible.value = false
        showSuccessToast('审核成功')
      }
    }
  )
}
</script>

<template>
  <div class="w-full h-full flex flex-col">
    <van-nav-bar title="错题详情" left-text="返回" right-text="审核" left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" />
    <div class="px-2">
      <cuoti-detail v-if="detail" :d="detail" />

      <van-divider />
      <div>
        <span>审核结果：</span><span class="text-gray-600">{{ Status[detail.dc_check] }}</span>
      </div>
      <div v-show="detail.dc_check === '2'">
        <span>处理意见：</span><span class="text-gray-600">{{ detail.dc_check_desc }}</span>
      </div>
    </div>

    <van-dialog v-model:show="dialogFormVisible" title="审核" :show-confirm-button="false" closeOnClickOverlay>
      <van-form @submit="submitForm" class="p-2">
        <van-cell-group>
          <van-field label="审核结果" prop="dc_title" :rules="rules.dc_check" required>
            <template #input>
              <van-radio-group v-model="dialogForm.dc_check" direction="horizontal">
                <van-radio name="1" icon-size="16px">通过</van-radio>
                <van-radio name="2" icon-size="16px">不通过</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label="处理意见" v-show="dialogForm.dc_check === '2'" prop="dc_check_desc" required
            v-model="dialogForm.dc_check_desc" rows="3" autosize type="textarea">
          </van-field>
        </van-cell-group>
        <div class="mt-8">
          <van-button round block type="primary" native-type="submit" :loading="submit_loading">
            提交
          </van-button>
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>
