import ColSteps from '@/components/col-steps'
import request from '@/helpers/request'
import { defineComponent } from 'vue'
import { teacherState } from '../../teacherState'
import BaseInfo from '../base-info'
import CertInfo from '../cert-info'
import EduInformation from '../edu-information'

export default defineComponent({
  name: 'auth',
  data() {
    return {
      radio: '1'
    }
  },
  async mounted() {
    try {
      if (teacherState.subjectList.length <= 0) {
        const res = await request.get('/api-website/open/subject/subjectSelect')
        teacherState.subjectList = res.data || []
      }

      const teacherInfo = await request.get(
        '/api-website/teacherAuthEntryRecord/getLastRecordByUserId'
      )
      teacherState.teacherInfo = teacherInfo.data || {}
      const info = teacherInfo.data || {}
      teacherState.teacherCert.introduction = info.introduction

      const subjectIds = info.subjectId ? info.subjectId.split(',') : []

      teacherState.teacherCert.subjectId = subjectIds.map((item: any) => {
        return Number(item)
      })
      teacherState.teacherCert.graduateSchool = info.graduateSchool
      teacherState.teacherCert.subject = info.subject
      teacherState.teacherCert.styleVideo = info.styleVideoJson
        ? JSON.parse(info.styleVideoJson)
        : [{ videoUrl: '', cover: '' }]
      teacherState.teacherCert.gradCertificate = info.gradCertificate
      teacherState.teacherCert.degreeCertificate = info.degreeCertificate
      teacherState.teacherCert.teacherCertificate = info.teacherCertificate
    } catch {}
  },
  render() {
    return (
      <div class="bg-[#F8F8F8]">
        <div class="w-[1002px] m-auto bg-white pt-12 px-48 pb-24">
          <ColSteps type="medium" active={teacherState.active} />
          {teacherState.active === 0 && <CertInfo />}
          {teacherState.active === 1 && <BaseInfo />}
          {teacherState.active === 2 && <EduInformation />}
        </div>
      </div>
    )
  }
})
