import ColCropper from '@/components/col-cropper'
import ColUpload from '@/components/col-upload'
import ColUploadVideo from '@/components/col-upload-video'
import ColVideo from '@/components/col-video'
import {
  ElButton,
  ElCol,
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElOptionGroup,
  ElRow,
  ElSelect
} from 'element-plus'
import { defineComponent } from 'vue'
import { teacherState } from '../../teacherState'
import styles from './index.module.less'

export default defineComponent({
  name: 'auth',
  render() {
    console.log(teacherState.subjectList)
    return (
      <ElForm
        class={[styles.form, 'mx-4 mt-7']}
        ref="form"
        size="large"
        model={teacherState.teacherCert}
        labelPosition="top"
      >
        <ElFormItem
          label="可教授声部（可多选）"
          labelWidth={'170px'}
          prop="subjectId"
          rules={[
            {
              required: true,
              message: '请选择可教授声部'
            }
          ]}
        >
          <ElSelect
            multiple
            filterable
            v-model={teacherState.teacherCert.subjectId}
            placeholder="请选择可教授声部"
            class="w-full"
            multipleLimit={5}
          >
            {teacherState.subjectList.map((group: any) => (
              <ElOptionGroup key={group.id} label={group.name}>
                {group.subjects &&
                  group.subjects.map((item: any) => (
                    <ElOption key={item.id} value={item.id} label={item.name} />
                  ))}
              </ElOptionGroup>
            ))}
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="个人简介" labelWidth={'170px'}>
          <ElInput
            placeholder="例：毕业于中国音乐学院长笛专业，曾获得中国青年管乐演奏大赛一等奖，具有8年教学经验，能够将专业知识通过简单易懂的方式教授给学员。"
            type="textarea"
            v-model={teacherState.teacherCert.introduction}
            // @ts-ignore
            maxlength="200"
            showWordLimit={true}
            rows={5}
          />
        </ElFormItem>
        {teacherState.teacherCert.styleVideo.map((item: any, index: number) => (
          <ElRow>
            <ElCol span={12}>
              <ElFormItem
                label="个人风采"
                prop={`styleVideo.${index}.videoUrl`}
                rules={[{ required: true, message: '请上传视频' }]}
              >
                <ColUploadVideo v-model:modelValue={item.videoUrl} />
              </ElFormItem>
            </ElCol>
            <ElCol span={10}>
              <ElFormItem
                style={{ paddingTop: '32px' }}
                prop={`styleVideo.${index}.cover`}
                rules={[{ required: true, message: '请上传视频封面' }]}
              >
                {/* <ColUpload v-model:modelValue={item.cover} /> */}
                <ColCropper
                  modelValue={item.cover}
                  bucket="video-course"
                  cropUploadSuccess={(data: any) => {
                    item.cover = data
                  }}
                  options={{
                    title: '视频封面',
                    fixedNumber: [3.34, 2],
                    autoCropWidth: 375,
                    autoCropHeight: 212
                  }}
                />
              </ElFormItem>
            </ElCol>
          </ElRow>
        ))}
        <ElFormItem>
          <div class="text-center w-full pt-8">
            <ElButton
              class="!w-44 !h-[48px]"
              round
              onClick={() => {
                teacherState.active = 0
              }}
            >
              上一步
            </ElButton>
            <ElButton
              type="primary"
              class="!w-44 !h-[48px]"
              round
              onClick={() => {
                ;(this as any).$refs['form'].validate(async (_: boolean) => {
                  if (_) {
                    teacherState.active = 2
                  }
                })
              }}
            >
              下一步
            </ElButton>
          </div>
        </ElFormItem>
      </ElForm>
    )
  }
})