<template>
  <!-- 扫码确认加入 -->
  <div class="team-frame">
    <main-page
      header-bg="bg-transparent"
      title-color="text-white"
      :loading="loading"
    >
      <!-- 顶部左侧插槽 -->
      <div v-if="isAppEnv()" slot="left">
        <app-icon
          class-name="w-6.5 w-6.5"
          icon-name="left-arrow-white"
          @click="close"
        />
      </div>
      <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 transform -translate-x-1/2 z-10 w-15 h-15 bg-white rounded overflow-hidden flex items-center justify-center">
          <img :src="entAvatar" 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">{{entName}}</div>
            <div class="font-medium text-sm text-text-secondary mt-0.5">服务器 {{info.oaServer}}</div>
            <div class="font-medium text-sm text-text-secondary mt-0.5">团队号 {{info.entId}}</div>
            <!-- <div class="h-20 overflow-auto 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-24 pb-28">
        <group-cell title="个人信息">
          <c-cell
            title="真实姓名"
            title-class="text-sm text-text-secondary"
          >
            <div slot="content" class="text-text-primary">{{info.name}}</div>
          </c-cell>
          <c-cell
            title="职位"
            title-class="text-sm text-text-secondary"
          >
            <div slot="content" class="text-text-primary">{{info.position}}</div>
          </c-cell>
          <c-cell
            title="部门"
            title-class="text-sm text-text-secondary"
          >
            <div slot="content" class="text-text-primary">{{departName}}</div>
          </c-cell>
          <c-cell
            title="入职时间"
            title-class="text-sm text-text-secondary"
          >
            <div slot="content" class="text-text-primary">{{formatDate(Number(info.joinTime)*1000, 'YYYY-MM-DD')}}</div>
          </c-cell>
          <c-cell
            title="手机号"
            title-class="text-sm text-text-secondary"
          >
            <div slot="content" class="text-text-primary">{{info.phone}}</div>
          </c-cell>
          <c-cell
            title="短号"
            title-class="text-sm text-text-secondary"
          >
            <div slot="content" class="text-text-primary">{{info.shortPhone}}</div>
          </c-cell>
        </group-cell>
        <!-- 底部操作 -->
        <div class="pt-1 pb-3 bg-common-bg">
          <c-button round @click="submit">同意加入团队</c-button>
          <div class="px-6 info text-xs text-text-secondary mt-2.5 text-center">同意加入团队将绑定您的个人账号,若信息有误需修改，请联系团队管理员</div>
        </div>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {formatDate} from '@/util/FormatDate'
import {AcceptJoinDTO} from '@/service/moudles/service.dto'
import { close, refreshCompanyState, isAppEnv } from '@/util/Bridge'
import { postMessage } from '@/util/PostMessage'
import { PostMsg } from '@/Interface'

interface QueryInfo extends AcceptJoinDTO {
  sig?: string,
  appEnv: string
}

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')
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue')
  },
  data() {
    const info: QueryInfo = {
      expiration: 0,
      inviterId: '',
      name: '',
      oaServer: '',
      depId: '',
      entId: '',
      hash: '',
      joinTime: 0,
      phone: '',
      position: '',
      appEnv: ''
    }
    return {
      formatDate,
      info,
      departName: '',
      entName: '',
      loading: false,
      entAvatar: require('@/assets/icons/team-icon.png')
    }
  },
  async mounted() {
    if (!isAppEnv()) {
      const pubKeyData = await postMessage(PostMsg.GET_PUB_KEY)
      console.log(pubKeyData, 'pubK')
      if (typeof pubKeyData.data === 'undefined' || !pubKeyData.data) {
        window.location.href = process.env.VUE_APP_DOWNLOADPAGE as string
      }
    } 
    this.info = this.$route.query as unknown as QueryInfo
    this.getDepInfo(this.info)
    this.getEntInfo(this.info)
  },
  methods: {
    close,
    isAppEnv,
    async submit() {
    this.loading = true
    const {depId,entId,expiration,hash,inviterId,joinTime,name,oaServer,phone,position,shortPhone} = this.info as AcceptJoinDTO
    let req = {
      depId,entId,expiration:  Number(expiration) ,hash,inviterId,joinTime: Number(joinTime),name,oaServer,phone,position,shortPhone
    }
    console.log(this.info);
     this.$service.enterprise.acceptJoin(req)
        .then(async (res: any) => {
          const {data} = res
          this.loading = false
          if (data.code === this.$global.success) {
            this.$toast('加入成功')
            if (!isAppEnv()) {
              window.parent.postMessage({
                appId: '3syxin',
                method: 'reload'
              }, '*')
              return
            }
            this.$store.commit('acceptJoin', {})
            // this.$router.replace('/team/team-frame')
            await refreshCompanyState({goHome: true})
          }else {
            this.$toast(data.msg)
          }
        })
    },
    getDepInfo(item:AcceptJoinDTO) {
      this.loading = true
      this.$service.department.getDep({
        entId: item.entId,
        id: item.depId
      }).then((res: any) => {
        this.loading = false
        const {data} = res
        if (data.code === this.$global.success) {
          this.departName = data.data.name
        }
      }).catch(() => this.loading=false)
    },
    getEntInfo(item:AcceptJoinDTO) {
      this.loading = true
      this.$service.enterprise.getEnterpriseInfo({
        id: item.entId
      }).then((res: any) => {
        this.loading = false
        const {data} = res
        if (data.code === this.$global.success) {
          this.entName = data.data.name
          this.entAvatar = data.data.avatar ? data.data.avatar : this.entAvatar
        }
      }).catch(() => this.loading=false)
    }
  }
})
</script>

<style lang="less">

</style>
