import {
  ElButton,
  ElCol,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRow
} from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { teacherState } from '../../teacherState'
import ColUpload from '@/components/col-upload'
import request from '@/helpers/request'
import deepClone from '@/helpers/deep-clone'
import iconTeacherAuth from '../../../images/music-popup.png'
import iconSuccess from '../../../images/icon_success.png'
import { getUserInfo } from '@/state'

export default defineComponent({
  name: 'auth',
  data() {
    return {
      labelWidth: '140px',
      loading: false,
      popupStatus: false
    }
  },
  methods: {
    onSubmit() {
      try {
        ;(this as any).$refs['form'].validate(async (_: boolean) => {
          if (_) {
            this.loading = true
            const params = deepClone(teacherState.teacherCert)
            params.subjectId = params.subjectId.join(',')
            params.styleVideoJson = JSON.stringify(params.styleVideo)
            await request.post('/api-website/teacherAuthEntryRecord/doApply', {
              data: params
            })
            ElMessage.success('提交成功')
            this.loading = false
            teacherState.active = 0
            teacherState.authStatus = false
            // 重新获取用户信息
            await getUserInfo()
          }
        })
      } catch {
        this.loading = false
      }
    }
  },
  render() {
    return (
      <ElForm
        class={[styles.form, 'mx-4 mt-7']}
        ref="form"
        size="large"
        model={teacherState.teacherCert}
        labelPosition="top"
      >
        <ElFormItem
          labelWidth={this.labelWidth}
          label="毕业院校（必填）"
          prop="graduateSchool"
          rules={[
            {
              required: true,
              message: '请输入您的毕业院校'
            }
          ]}
        >
          <ElInput
            v-model={teacherState.teacherCert.graduateSchool}
            placeholder="请输入您的毕业院校"
          />
        </ElFormItem>
        <ElFormItem
          labelWidth={this.labelWidth}
          label="专业（必填）"
          prop="subject"
          rules={[
            {
              required: true,
              message: '请输入您的专业名称'
            }
          ]}
        >
          <ElInput
            v-model={teacherState.teacherCert.subject}
            placeholder="请输入您的专业名称"
          />
        </ElFormItem>
        <ElRow>
          <ElCol span={8}>
            <ElFormItem labelWidth={this.labelWidth} label="毕业证书（选填）">
              <ColUpload
                v-model:modelValue={teacherState.teacherCert.gradCertificate}
                accept=".png, .jpg"
              />
            </ElFormItem>
          </ElCol>
          <ElCol span={8}>
            <ElFormItem labelWidth={this.labelWidth} label="学位证书（选填）">
              <ColUpload
                v-model:modelValue={teacherState.teacherCert.degreeCertificate}
                accept=".png, .jpg"
              />
            </ElFormItem>
          </ElCol>
          <ElCol span={8}>
            <ElFormItem labelWidth={this.labelWidth} label="教师资格证（选填）">
              <ColUpload
                v-model:modelValue={teacherState.teacherCert.teacherCertificate}
                accept=".png, .jpg"
              />
              {/* <ElInput
            v-model={teacherState.teacherCert.teacherCertificate}
            placeholder="请输入您的毕业院校"
          /> */}
            </ElFormItem>
          </ElCol>
        </ElRow>

        <ElFormItem>
          <div class="text-center w-full pt-8">
            <ElButton
              class="!w-44 !h-[48px]"
              round
              onClick={() => {
                teacherState.active = 1
              }}
            >
              上一步
            </ElButton>
            <ElButton
              type="primary"
              class="!w-44 !h-[48px]"
              round
              onClick={this.onSubmit}
              loading={this.loading}
            >
              提交审核
            </ElButton>
          </div>
        </ElFormItem>

        <ElDialog
          modelValue={this.popupStatus}
          onUpdate:modelValue={val => (this.popupStatus = val)}
          closeOnClickModal={false}
          closeOnPressEscape={false}
          showClose
        >
          <div class="p-8">
            <img src={iconTeacherAuth} class="px-6" />

            <img src={iconSuccess} class="w-14 h-14 m-auto mb-4" />
            <p class="text-center text-[#666] text-base -m-1 pb-6">
              感谢您的教学热情，小酷将在24小时内完成审核
              <br />
              请留意APP消息及短信获取审核结果
            </p>

            <ElButton
              type="primary"
              class="w-full rounded-sm"
              style={{ height: '48px' }}
              round
              onClick={() => {
                this.popupStatus = false
                teacherState.active = 0
                teacherState.authStatus = false
              }}
            >
              我知道了
            </ElButton>
          </div>
        </ElDialog>
      </ElForm>
    )
  }
})
