<template>
  <main-page
    left-arrow
    @click-left="handleClickLeft"
  >
    <div class="mx-4 pt-14 pb-2">
      <div class="text-sm text-color-primary bg-color-primary-light px-4 py-3 rounded">
        创建团队需选择或添加一台服务器为默认服务器，用于保存企业模块信息，聊天服务器和区块链节点自动配置。
      </div>
      <div class="mt-4">
        <input-cell
          v-model="name"
          required
          :limit="20"
          label="企业/组织/团队名称"
          placeholder="请输入团队名称"
          error-msg="团队名称不能为空"
        />
        <input-cell
          v-model="leaderName"
          required
          :limit="20"
          label="负责人真实姓名"
          placeholder="请输入真实姓名"
          error-msg="姓名不能为空"
          class="mt-4"
        />
        <group-cell
          title="选择服务器"
          class="mt-4"
        >
          <c-cell dot>
            <div slot="content" class="">
              <div class="">企业服务器</div>
              <div class="text-text-secondary">{{ oaServer }}</div>
            </div>
          </c-cell>
          <div v-if="showServerList">
            <c-cell dot>
              <div slot="content" class="">
                <div class="">聊天服务器</div>
                <div class="text-text-secondary">{{ IMServer }}</div>
              </div>
            </c-cell>
            <c-cell dot>
              <div slot="content" class="">
                <div class="">区块链节点</div>
                <div class="text-text-secondary">{{ nodeServer }}</div>
              </div>
            </c-cell>
          </div>
          <div class="bg-white flex items-center justify-center py-3" @click="showServer">
            <app-icon
              icon-name="right-arrow"
              :class-name="getClass"
            />
          </div>
        </group-cell>
      </div>
      <div class="mt-6">
        <div class="text-center mb-3 text-text-secondary text-sm">确定创建团队将创建您的团队账号并绑定您的个人账号</div>
        <c-button @click="toConfirm">确定</c-button>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
// import { Dialog } from 'vant'
import { getOAServer, close, isAppEnv, refreshCompanyState } from '@/util/Bridge'
import { postMessage } from '@/util/PostMessage'
import { PostMsg } from '@/Interface'

export default Vue.extend({
  name: 'Createteam',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'input-cell': () => import('@/components/common/input-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'group-cell': () => import('@/components/common/group-cell.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    isValid: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      leaderName: '',
      name: '',
      IMServer: '',
      nodeServer: '',
      oaServer: '',
      // oaServer: '',
      showServerList: false,
      entId: ''
    }
  },
  computed: {
    getClass() {
      if (this.showServerList) {
        return 'w-1.5 h-2 transform -rotate-90'
      } else {
        return 'w-1.5 h-2 transform rotate-90'
      }
    }
  },
  async created() {
    if (process.env.NODE_ENV === 'production') {
      if (!isAppEnv()) {
        const oa = await postMessage(PostMsg.GET_OA_SERVER)
        console.log(oa, 'oa postmessage')
        this.oaServer = oa.data
      } else {
        this.oaServer = getOAServer()
      }
    } else {
      this.oaServer = 'http://172.16.101.107:20000'
    }
    this.$service.common.getServer().then((res: any) => {
      const { data } = res
      if (data.code === 0) {
        this.IMServer = data.data.IMServer
        this.nodeServer = data.data.nodeServer
      } else {
        this.$toast(data.msg)
      }
    })
  },
  methods: {
    handleClickLeft() {
      close()
    },
    showServer() {
      this.showServerList = !this.showServerList
    },
    toConfirm() {
      if (this.name === '' || this.leaderName === '') {
        this.$toast('请检查输入内容')
        return
      }
      const { name, leaderName, IMServer, nodeServer, oaServer } = this
      const data = {
        name,
        leaderName,
        imServer: IMServer,
        nodeServer,
        oaServer
      }
      this.$service.enterprise.create(data).then(async(res: any) => {
        const { data } = res
        if (data.code === this.$global.success) {
          this.$toast('创建成功')
          this.name = ''
          this.leaderName = ''
          // this.$router.push('/team/team-frame')
          if (!isAppEnv()) {
            postMessage(PostMsg.RELOAD)
            return
          }
          await refreshCompanyState({goHome: false})
          this.$router.replace({
            path: '/team/team-qrcode',
            query: {
              entId: data.data.id
            }
          })
        } else {
          this.$toast(data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
})
</script>

<style>

</style>

function getOAServer(): string {
  throw new Error('Function not implemented.')
}
