<template>
  <!-- 加入团队 -->
  <div class="team-frame">
    <main-page
      header-bg="bg-transparent"
      title-color="text-white"
      :loading="loading"
    >
      <!-- 顶部左侧插槽 -->
      <template slot="left">
        <app-icon
          type="png"
          class-name="w-6.5 w-6.5"
          :path="require('@/assets/icons/left-arrow-white.png')"
          @click="back"
        />
      </template>
      <div class="relative w-full h-40 bg-color-primary">
        <!-- 背景图 -->
        <!-- <img class="w-82 absolute top-0 right-0" src="@/assets/images/header-bg.png" alt=""> -->
        <!-- logo -->
        <div class="absolute top-20 left-1/2 border transform -translate-x-1/2 z-10 w-15 h-15 bg-white rounded-full overflow-hidden flex items-center justify-center">
          <img v-if="entInfo.avatar" :src="entInfo.avatar" alt="">
          <img v-else src="@/assets/icons/team-icon.png" alt="" class="max-w-full">
        </div>
        <div class="top-28 px-4 w-full absolute top-10">
          <div class="bg-white w-full rounded pt-8 pb-4 flex flex-col items-center shadow-bg">
            <div class="font-medium">{{ entInfo.name }}</div>
            <div class="font-medium text-sm text-text-secondary mt-0.5">团队号 {{ entInfo.id }}</div>
            <!-- <div class="h-20 overflow-y-scroll text-xs text-text-secondary px-4 mt-3.5">
              公司成立于2008年，2013 年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已申请区块链相关专利500余项，其中已获得授权超80项，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。 公司总部位于杭州，并在南京、广州、海南设有分部。目前，公司员工100余人，其中80%左右为技术人员，吸引了一批甲骨文、阿里、华为程序员。公司与多家世界500强开展区块链项目合作，在票据、供应链金融、积分、仓单有区块链应用落地。 2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证、去中心化借贷等一系列应用。
            </div> -->
          </div>
        </div>
      </div>
      <div class="px-4 pt-16 pb-20">
        <input-cell
          v-model="userName"
          required
          :limit="20"
          label="真实姓名"
          placeholder="请输入真实姓名"
          error-msg="请输入真实姓名"
          class="mt-2"
        />
        <c-cell
          title="手机号"
          :content="phone"
          class="mt-4"
        />
        <c-cell
          v-model="shortPhone"
          title="短号"
          placeholder="请输入短号"
          type="input"
          input-type="number"
        />
        <c-cell
          v-model="email"
          title="邮箱"
          placeholder="请输入邮箱"
          type="input"
          :validator="checkMail"
        />
        <input-cell
          v-model="reason"
          label="申请理由(选填)"
          placeholder="请填写申请理由"
          class="mt-4"
        />
        <!-- 底部操作 -->
        <div class="py-2 px-4 bg-common-bg w-screen fixed bottom-0 left-0 z-30">
          <c-button round @click="submit">提交申请</c-button>
        </div>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { validateMail } from '@/util/Validator'
import { getPhone, isAppEnv, close } from '@/util/Bridge'
import { LocalStoreEnt, PostMsg } from '@/Interface'
import { postMessage } from '@/util/PostMessage'

export default Vue.extend({
  name: 'JoinTeam',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue')
  },
  data() {
    return {
      avatar: '',
      userName: '',
      email: '',
      phone: '',
      shortPhone: '',
      validateNum: '',
      reason: '',
      entName: '杭州复杂美科技有限公司',
      entId: '121212',
      loading: false,
      entInfo: {} as LocalStoreEnt
    }
  },
  async created() {
    this.entId = this.$route.query.entId as string || '168398222891421696'
    if (process.env.NODE_ENV === 'production') {
      if (isAppEnv()) {
        this.phone = getPhone()
        console.log(getPhone(), 'getPhone')
      } else {
        const result = await postMessage(PostMsg.GET_PHONE)
        if (result.data) {
          this.phone = result.data
        } else {
          window.location.href = process.env.VUE_APP_DOWNLOADPAGE as string
        }
      }
    } else {
      this.phone = '15112345678'
    }
    if (typeof this.phone === 'undefined' || this.phone === '') {
      this.$dialog.alert({
        title: '提示',
        message: '加入团队前请先绑定手机号',
        confirmButtonText: '绑定手机号'
      }).then(() => {
        close()
      })
    }
    this.getEntInfo()
  },
  methods: {
    back() {
      if (!isAppEnv()) {
        postMessage(PostMsg.RELOAD)
      } else {
        close()
      }
    },
    getEntInfo() {
      this.$service.enterprise.getEnterpriseInfo({
        id: this.entId
      }).then((res: any) => {
        const {data} = res
        if (data.code === this.$global.success) {
          this.entInfo = data.data
        } else {
          this.$dialog.alert({
            title: '提示',
            message: data.msg,
            confirmButtonText: '返回'
          }).then(() => {
            close()
          })
        }
      })
    },
    submit() {
      const {entId, phone, userName, shortPhone, email, reason} = this
      if (!userName) {
        this.$toast('请检查输入内容')
        return
      }
      const data = {
        entId, phone, reason, userName, shortPhone, email, types: 1
      }
      this.loading=true
      this.$service.apply.submitJoin(data).then((res: any) => {
        const {data} = res
        this.loading=false
        if (data.code === this.$global.success) {
          close()
        } else {
          this.$toast(data.msg)
        }
      }).catch(() => this.loading=false)
    },
    checkMail(val: string, callback: Function) {
      if (!validateMail(val)) {
        callback(new Error('邮箱格式有误，请重新输入'))
      } else {
        callback()
      }
    }
  }
})
</script>

<style lang="less">

</style>
