import { PropType, defineComponent, nextTick, reactive, ref } from 'vue';
import styles from './index.module.less';
import { Button, CountDown, Field, Picker, Popup, showToast } from 'vant';
import MImgCode from '../m-img-code';
import { checkPhone } from '@/helpers/utils';
import request from '@/helpers/request';

export default defineComponent({
  name: 'the-submit',
  props: {
    /** 类型 */
    type: {
      type: String as PropType<
        'tenant' | 'classroom' | 'technology' | 'person' | ''
      >,
      default: ''
    }
  },
  setup(props) {
    const countDownRef = ref();
    const state = reactive({
      typeStatus: false,
      countDownTime: 60 * 1000,
      countDownStatus: true,
      imgCodeStatus: false,
      cooperateTenantName: null,
      cooperateTenantNature: null,
      cooperateTenantNatureTxt: null as any,
      contacts: null,
      phone: null as any,
      code: null
    });

    const onCodeSend = () => {
      state.countDownStatus = false;
      nextTick(() => {
        countDownRef.value.start();
      });
    };

    const onSendCode = () => {
      // 发送验证码
      if (!checkPhone(state.phone)) {
        return showToast('请输入正确的手机号码');
      }
      state.imgCodeStatus = true;
    };
    //
    const onFinished = () => {
      state.countDownStatus = true;
      countDownRef.value.reset();
    };

    const onSubmit = async () => {
      try {
        if (!state.cooperateTenantNature) {
          return showToast('请选择机构性质');
        }
        if (!state.cooperateTenantName) {
          return showToast('请填写机构名称');
        }
        if (!state.contacts) {
          return showToast('请填写联系人');
        }
        if (!state.phone) {
          return showToast('请输入联系电话');
        }
        if (!checkPhone(state.phone)) {
          return showToast('请输入正确的手机号码');
        }
        if (!state.code) {
          return showToast('请输入验证码');
        }

        await request.post('/api-website/open/cooperateTenant/save', {
          data: {
            cooperateTenantName: state.cooperateTenantName,
            cooperateTenantNature: state.cooperateTenantNature,
            contacts: state.contacts,
            phone: state.phone,
            code: state.code
          }
        });

        setTimeout(() => {
          showToast('信息提交成功，我们会尽快与您联系');

          state.cooperateTenantName = null;
          state.cooperateTenantNature = null;
          state.cooperateTenantNatureTxt = null;
          state.contacts = null;
          state.phone = null;
          state.code = null;
        }, 100);
      } catch {
        //
      }
    };
    return () => (
      <>
        <div
          class={[
            styles.fieldGroup,
            props.type === 'tenant' && styles.fieldTenant,
            props.type === 'classroom' && styles.fieldClassroom,
            props.type === 'technology' && styles.fieldTechnology,
            props.type === 'person' && styles.fieldPerson
          ]}>
          <Field
            readonly
            isLink
            arrowDirection="down"
            placeholder="机构性质"
            border={false}
            autocomplete="off"
            modelValue={state.cooperateTenantNatureTxt}
            onClick={() => (state.typeStatus = true)}
          />
          <Field
            type="text"
            border={false}
            placeholder="机构名称"
            autocomplete="off"
            maxlength={20}
            v-model={state.cooperateTenantName}
          />
          <Field
            type="text"
            border={false}
            placeholder="联系人"
            autocomplete="off"
            maxlength={20}
            v-model={state.contacts}
          />
          <Field
            type="number"
            maxlength={11}
            border={false}
            placeholder="联系电话"
            autocomplete="off"
            v-model={state.phone}
          />
          <Field
            class={styles.smsField}
            type="number"
            maxlength={6}
            border={false}
            placeholder="短信验证码"
            autocomplete="off"
            v-model={state.code}>
            {{
              button: () =>
                state.countDownStatus ? (
                  <span class={styles.sendCms} onClick={onSendCode}>
                    发送验证码
                  </span>
                ) : (
                  <CountDown
                    ref={el => (countDownRef.value = el)}
                    auto-start={false}
                    time={state.countDownTime}
                    onFinish={onFinished}
                    format="ss秒"
                  />
                )
            }}
          </Field>
          <Button block round class={styles.btnSubmit} onClick={onSubmit}>
            确认提交
          </Button>
          <Popup v-model:show={state.typeStatus} position="bottom" round>
            <Picker
              columns={[
                { text: '中小学学校', value: 'PRIMARY_AND_SECONDARY_SCHOOLS' },
                { text: '教培机构', value: 'EDUCATIONAL_INSTITUTIONS' },
                { text: '音乐达人', value: 'PLAYERS' },
                { text: '代理商', value: 'AGENT' }
              ]}
              showToolbar
              onCancel={() => (state.typeStatus = false)}
              onConfirm={val => {
                const selectedOptions = val.selectedOptions[0];
                state.cooperateTenantNature = selectedOptions.value;
                state.cooperateTenantNatureTxt = selectedOptions.text;
                state.typeStatus = false;
              }}
            />
          </Popup>
        </div>
        {state.imgCodeStatus ? (
          <MImgCode
            v-model:value={state.imgCodeStatus}
            phone={state.phone}
            onClose={() => {
              state.imgCodeStatus = false;
            }}
            onSendCode={onCodeSend}
          />
        ) : null}
      </>
    );
  }
});
