<template>
  <div class="full p-base">
    <div class="full p-base radius-base fill-blank">
      <base-form class="p-t-base" size="small" :model="formModel" :items="formItems" :label-width="'78px'">
        <template #form-item-search>
          <el-button :loading="loading" type="primary" @click="onSearch">查询</el-button>
        </template>
      </base-form>
      <iframe style="width: 100%; height: calc(100% - 60px)" class="full view-frame" :src="result?.url" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts" name="MarkingStandardNav">
import { reactive, watch, computed } from 'vue'
/** 评分标准 */
import useFetch from '@/hooks/useFetch'
import useMainStore from '@/store/main'
import BaseForm from '@/components/element/BaseForm.vue'
import useOptions from '@/hooks/useOptions'
import useForm from '@/hooks/useForm'
import { ElButton } from 'element-plus'
const mainStore = useMainStore()
const { fetch, result, loading } = useFetch('getMarkingStandard')

const { subjectList, mainQuestionList, dataModel, changeModelValue, onOptionInit, isExpert, isLeader } = useOptions([
  'subject',
  'question',
])
const formModel = reactive<any>({
  mainNumber: dataModel.question,
  subjectCode: dataModel.subject,
})
watch(dataModel, () => {
  formModel.mainNumber = dataModel.question
  formModel.subjectCode = dataModel.subject
})
const { defineColumn, _ } = useForm()

const span10 = defineColumn(_, '', { span: 6 })

const formItems = computed<any[]>(() => [
  span10({
    rowKey: 'row-1',
    label: '科目',
    prop: 'subjectCode',
    slotType: 'select',
    labelWidth: '46px',
    slot: { options: subjectList.value, onChange: changeModelValue('subject'), disabled: !isExpert.value },
  }),
  span10({
    rowKey: 'row-1',
    label: '大题',
    prop: 'mainNumber',
    labelWidth: '46px',
    slotType: 'select',
    slot: {
      options: mainQuestionList.value,
      onChange: changeModelValue('question'),
      disabled: !isExpert.value && !isLeader.value,
    },
  }),
  { rowKey: 'row-1', slotName: 'search', labelWidth: '10px', colProp: { span: 4 } },
])

const onSearch = () => {
  // fetch({ subjectCode: mainStore?.myUserInfo?.subjectCode, mainNumber: mainStore?.myUserInfo?.mainNumber })
  fetch({ subjectCode: formModel.subjectCode, mainNumber: formModel.mainNumber })
}

onOptionInit(onSearch)
</script>

<style scoped lang="scss">
.view-frame {
  border: none;
}
</style>
