<template>
  <div class="login">
    <div class="mask">
      <div class="login_box">
        <template v-if="info.logo">
          <img :src="info.logo" alt="" class="logo" />
          <span>{{ info.title }}</span>
        </template>
        <div class="phone_box">
          <div class="a_">+86</div>
          <div class="xian"></div>
          <input class="inp" placeholder="请输入手机号码" maxlength="11" v-model="obj.phone" />
        </div>

        <div class="msg_box">
          <input class="inp" placeholder="请输入验证码" :maxlength="6" v-model="obj.captcha" />
          <div class="xian"></div>

          <div class="msg_btn" v-if="!timeout" @click="getSms">{{ obj.codeText }}</div>
          <div class="msg_btn" v-else>{{ timeout }}s</div>
        </div>

        <div class="yingshi">
          <div class="ckh">√</div>
          <div :style="{ color: '#C4C4C4' }">已同意 《用户条款》 及 《隐私政策》</div>
        </div>

        <div class="btn" @click="login">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import axios from 'axios'
  import { onBeforeMount, reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  // import logo from '../assets/static/shuzilichang.png'

  import mainLogoImg from '../assets/static/shuzilichang.png'
  import jfLogoImg from '../assets/static/jf_logo.png'
  import juyunLogoImg from '../assets/static/Juyun.png'

  const { host } = window.location

  type Info = {
    title: string
    logo: string
  }

  const globalInfo = reactive<Record<'jf' | 'main' | 'fashionroom', Info>>({
    jf: {
      title: '精分数据',
      logo: jfLogoImg
    },

    fashionroom: {
      title: '聚云科技',
      logo: juyunLogoImg
    },

    main: {
      title: '',
      logo: mainLogoImg
    }
  })

  const info = ref<Info>({
    title: '',
    logo: mainLogoImg
  })

  // const logoImgRef = computed(() => (host.includes('jf') ? jfLogoImg : mainLogoImg))

  onBeforeMount(() => {
    const { referrer } = document
    if (host.includes('jf')) {
      info.value = globalInfo.jf
    }

    console.log('AT-[ referrer &&&&&********** ]', referrer)
    if (referrer.includes('fashionroom')) {
      info.value = globalInfo.fashionroom
    }

    document.title = info.value?.title || '数字力场官网'
  })

  const instance = axios.create({
    // base接口，表示请求URL的公共部分
    baseURL: '',
    // 超时 设置为5分钟
    timeout: 5 * 60 * 1000
  })

  instance.interceptors.response.use(
    (res) => res.data,
    (error) => {
      console.log(error)
    }
  )

  const obj = reactive<{
    phone: string | undefined
    codeText: string
    captcha: number | undefined
  }>({
    phone: undefined,
    codeText: '验证码',
    captcha: undefined
  })

  const timeout = ref(0)

  const sms = (data = {}) =>
    instance<any, any>({
      url: '/api/digital/sms',
      method: 'post',
      data
    })

  const phoneLogin = (data = {}) =>
    instance<any, any>({
      url: '/api/digital/phoneLogin',
      method: 'post',
      data
    })
  const reg = /^1[345789]\d{9}$/

  const login = async () => {
    console.log(obj)

    const { phone, captcha } = obj

    if (!phone || !reg.test(phone) || String(captcha).length !== 6) {
      ElMessage({
        message: '请输入正确的手机号和验证码',
        type: 'warning'
      })
      return
    }

    const res = await phoneLogin({ phone, captcha })
    if (res.code !== 200) {
      ElMessage({
        message: res.message,
        type: 'error'
      })
    } else {
      ElMessage({
        message: '登录成功',
        type: 'success'
      })

      document.cookie = `token=${res.data.token};domain=aidigitalfield.com`

      if (document.referrer.includes('fashionroom')) {
        console.log('命中')
        window.location.href = `${document.referrer}?key=${res.data.token}`
      } else {
        window.location.href = document.referrer
      }
    }
  }

  const run = (num: number) => {
    timeout.value = num
    if (timeout.value) {
      setTimeout(() => {
        run(timeout.value - 1)
      }, 1000)
    }
  }

  const getSms = async () => {
    const { phone } = obj

    if (!phone || !reg.test(phone)) {
      ElMessage({ message: '请输入11位手机号', type: 'warning' })
      return
    }

    const res = await sms({ phone })

    if (res.code === 200) {
      ElMessage({ message: '发送成功', type: 'success' })
      run(60)
    } else {
      ElMessage({ message: res.message, type: 'error' })
    }
  }
</script>

<style lang="scss">
  * {
    margin: 0;
    padding: 0;
  }
  .login {
    background: url('../assets/static/background.jpg') no-repeat center;
    background-size: 100% auto;
    width: 100vw;
    height: 100vh;

    .mask {
      background-color: rgba(0, 0, 0, 0.8);
      width: 100%;
      height: 100%;

      display: flex;
      align-items: center;
      justify-content: center;

      .login_box {
        width: 320px;
        height: 250px;
        margin-left: 27px;
        background-color: #fff;
        padding: 17px 20px;
        box-sizing: border-box;
        text-align: center;
        margin: 0 auto;

        input {
          border: none;
          outline: none;
        }

        .logo {
          margin: 0 auto;
          display: inline-block;
          height: 31px;
          vertical-align: middle;
        }

        .phone_box {
          width: 280px;
          height: 40px;
          padding: 10px 16px;
          box-sizing: border-box;
          border: 1px solid #000000;
          display: flex;
          align-items: center;
          margin-top: 10px;

          .a_ {
            font-size: 14px;
            color: #4d505d;
          }

          .xian {
            width: 1px;
            height: 19px;
            border-right: #c4c4c4 solid 1px;
            margin-left: 8px;
          }

          .inp {
            margin-left: 8px;
            font-family: PingFang SC;
            font-size: 14px;
            color: #4d505d;
          }
        }

        .msg_box {
          width: 280px;
          height: 40px;
          padding: 10px 16px;
          box-sizing: border-box;
          border: 1px solid #000000;
          display: flex;
          align-items: center;
          margin-top: 6px;

          .xian {
            width: 1px;
            height: 14px;
            border-right: #c4c4c4 solid 1px;
            margin-left: 8px;
          }

          .inp {
            font-family: PingFang SC;
            font-size: 14px;
            color: #4d505d;
            flex: 1;
          }

          .msg_btn {
            width: 59px;
            font-family: PingFang SC;
            font-size: 14px;
            text-align: center;
            color: #4d505d;
            font-weight: 700;
            cursor: pointer;
          }
        }

        .yingshi {
          margin: 0 auto;
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 700;
          color: #c4c4c4;
          margin-top: 10px;
          display: flex;

          .ckh {
            width: 15px;
            height: 15px;
            background: #d9d9d9;
            border: 1px solid #000000;
            margin-right: 8px;
            margin-left: 16px;
            text-align: center;
            color: #4d505d;
          }
        }

        .btn {
          width: 112px;
          height: 40px;
          border-radius: 4px;
          background: #000000;
          font-family: Epilogue;
          font-size: 14px;
          font-weight: 700;
          line-height: 40px;
          text-align: center;
          color: #fcfcfc;
          margin: 0 auto;
          margin-top: 16px;
          cursor: pointer;
        }
      }
    }
  }
</style>
