import request from '@/helpers/request'
import { Close } from '@element-plus/icons-vue'
import { ElCol, ElIcon, ElImage, ElInput, ElMessage, ElRow } from 'element-plus'
import { defineComponent } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'img-code',
  props: {
    phone: {
      type: String,
      default: ''
    },
    loginType: {
      type: String,
      default: ''
    },
    onSendCode: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      code: '',
      identifyingCode:
        location.origin + '/api-website/code/getImageCode?phone=' + this.phone
    }
  },
  methods: {
    updateIdentifyingCode() {
      // 刷新token
      this.identifyingCode = `${this.identifyingCode}&token=${Math.random()}`
    },
    async checkVerifyLoginImage() {
      try {
        if ((this as any).code.length < 4) {
          return
        }
        this.loading = true
        // await request.post('/api-website/code/verifyImageCode', {
        //   requestType: 'form',
        //   data: {
        //     phone: this.phone,
        //     code: this.code
        //   }
        // })
        await request.post('/api-website/code/sendSmsCode', {
          requestType: 'form',
          data: {
            mobile: this.phone,
            type: 'LOGIN',
            code: this.code,
            client: this.loginType
          }
        })
        this.loading = false
        ElMessage.success('验证码已发送')
        this.onClose()
        this.onSendCode()
      } catch {
        this.loading = false
        this.updateIdentifyingCode()
      }
    }
  },
  watch: {
    code(val) {
      if (val.length >= 4) {
        this.checkVerifyLoginImage()
      }
    }
  },
  render() {
    return (
      <>
        <div class="absolute inset-y-0 inset-x-0"></div>
        <div
          class={[
            styles.loginImgCode,
            'absolute w-[90%] left-[5%] top-0 bg-white pt-5 pb-8 px-6 rounded-md'
          ]}
          // @ts-ignore
          loading={this.loading}
        >
          <div
            onClick={() => {
              this.onClose()
            }}
          >
            <ElIcon class={styles.loginClose}>
              <Close />
            </ElIcon>
          </div>

          <div class={'text-center text-[16px] text-[#333]'}>
            输入图形验证码
          </div>

          <ElRow gutter={8} class="mt-3">
            <ElCol span={16}>
              <ElInput
                placeholder="请输入验证码"
                v-model={this.code}
                maxlength={4}
                autocomplete="off"
              ></ElInput>
            </ElCol>
            <ElCol span={8}>
              <div onClick={this.updateIdentifyingCode}>
                <ElImage
                  class="w-full h-full"
                  src={this.identifyingCode}
                  fit="cover"
                />
              </div>
            </ElCol>
          </ElRow>
        </div>
      </>
    )
  }
})
