import { defineComponent, nextTick, reactive, ref } from 'vue';
import styles from './index.module.less';
import bannerCenter from './images/banner-center.png';
import MHeader from '@/components/m-header';
import MFooter from '@/components/m-footer';
import img1 from './images/img1.png';
import img2 from './images/img2.png';
import { Button, CountDown, Field, Picker, Popup, showToast } from 'vant';
import request from '@/helpers/request';
import { checkPhone } from '@/helpers/utils';
import MImgCode from '@/components/m-img-code';

export default defineComponent({
  name: 'about-us',
  setup() {
    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 = () => {
      // 发送验证码
      console.log(state.phone, 'state.phone');
      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.aboutUs}>
        <MHeader />

        <div class={styles.banner}>
          <img
            class={styles.bannerImg}
            src="https://oss.dayaedu.com/klx/1699437230528banner.png"
          />

          <img class={styles.bannerCenter} src={bannerCenter} />
        </div>

        <div class={styles.section1}>
          <div class={[styles.title, styles.title1]}></div>
          <div class={styles.content}>
            <p>
              在科技飞速发展的当下，音乐教育也在不断地创新与变革。为了更好地推进音乐课堂的数字化转型，提高音乐教育质量。化繁为简、化难为易，提高学生的兴趣和参与度。将更加注重线上线下相结合，
              <span class={styles.green} style="font-weight: 600">
                提供多元化的教学模式，满足学生多样化的学习需求
              </span>
            </p>
            <p>
              同时器乐教学对学生具有重要的意义，不仅有助于提高音乐素养和协调能力，还可以培养个性、团队合作意识等。学习乐器丰富学生的情感体验，拓展就业和升学途径，传承民族文化。
            </p>
            <p class={styles.green} style="font-weight: 600">
              我们特此发起寻找数字化音乐课堂合作伙伴，诚邀您的加入！
            </p>
          </div>
        </div>

        <div class={styles.section2}>
          <div class={[styles.title, styles.title2]}></div>

          <img class={'w100'} src={img1} />
        </div>

        <div class={styles.section3}>
          <div class={[styles.title, styles.title3]}></div>

          <img class={'w100'} src={img2} />
        </div>

        <div class={styles.section4}>
          <div class={[styles.title, styles.title4]}></div>

          <div class={styles.fieldGroup}>
            <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 ? (
                    <Button size="small" onClick={onSendCode}>
                      发送短信
                    </Button>
                  ) : (
                    <CountDown
                      ref={el => (countDownRef.value = el)}
                      auto-start={false}
                      time={state.countDownTime}
                      onFinish={onFinished}
                      format="ss秒"
                    />
                  )
              }}
            </Field>

            <p class={styles.fieldTips}>我们将在提交后尽快与您联系</p>

            <Button block round class={styles.btnSubmit} onClick={onSubmit}>
              确认提交
            </Button>
          </div>
        </div>

        <MFooter />

        <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>

        {state.imgCodeStatus ? (
          <MImgCode
            v-model:value={state.imgCodeStatus}
            phone={state.phone}
            onClose={() => {
              state.imgCodeStatus = false;
            }}
            onSendCode={onCodeSend}
          />
        ) : null}
      </div>
    );
  }
});
