<template>
  <div style="padding:0 20px;">
    <el-tabs v-model="type" @tab-click="handleToggle">
      <el-tab-pane label="基本信息" name="1">
        <p>代理信息:</p>
        <el-form label-width="120px">
          <el-form-item label="代理昵称:">{{ info.nickname }}</el-form-item>
          <el-form-item label="真实姓名:">{{ info.realname }}</el-form-item>
          <el-form-item label="身份证号:">{{ info.cre_num ? info.cre_num : '暂无' }}</el-form-item>
          <el-form-item label="联系电话:">{{ info.mobile }}</el-form-item>
          <el-form-item label="代理级别:">
            <el-tag
              :color="levelStatus(info.level).color"
              style="color:#ffffff;"
            >
              {{ levelStatus(info.level).name }}
            </el-tag>
          </el-form-item>
          <el-form-item label="邀请码:">{{ info.recom_code ? info.recom_code : '暂无' }}</el-form-item>
          <el-form-item label="授权码:">{{ info.auth_code ? info.auth_code : '暂无' }}</el-form-item>
          <el-form-item label="授权开始时间:">{{ info.auth_startime ? info.auth_startime : '暂无' }}</el-form-item>
          <el-form-item label="授权结束时间:">{{ info.auth_endtime ? info.auth_endtime : '暂无' }}</el-form-item>
          <el-form-item label="认证状态:">{{ certStatus(info.cert_status) }}</el-form-item>
          <el-form-item label="账户状态:">
            <el-tag
              :type="info.delete === 1 ? 'danger' : (info.status === 0 ? 'success' : 'warning')"
              size="mini"
            >
              {{ info.delete === 1 ? '已删除' : (info.status === 0 ? '正常' : '已禁用') }}
            </el-tag>
          </el-form-item>
          <el-form-item label="注册时间:">{{ info.created_at }}</el-form-item>
          <el-form-item v-if="info.deleted_at" label="删除时间:">{{ info.deleted_at }}</el-form-item>
        </el-form>
        <div v-if="info.recom">
          <p>邀请人信息:</p>
          <el-form label-width="120px">
            <el-form-item label="昵称:">
              <el-button v-if="info.recom" type="text" @click="showLink(info.recom.id)">{{ info.recom.nickname }}</el-button>
            </el-form-item>
            <el-form-item label="联系方式:">
              {{ info.recom.mobile ? info.recom.mobile : '暂无邀请人联系方式' }}
            </el-form-item>
          </el-form>
        </div>
        <div v-if="info.agent">
          <p>上级信息:</p>
          <el-form label-width="100px">
            <el-form-item label="昵称:">
              <el-button v-if="info.agent" type="text" @click="showLink(info.agent.id)">{{ info.agent.nickname }}</el-button>
            </el-form-item>
            <el-form-item label="联系方式:">
              {{ info.agent.mobile ? info.agent.mobile : '暂无上级联系方式' }}
            </el-form-item>
          </el-form>
        </div>
        <div v-if="info.warea">
          <p>战区信息:</p>
          <el-form label-width="100px">
            <el-form-item label="战区名称:">
              <!-- <el-button v-if="info.warea" type="text">{{ info.warea.name }}</el-button> -->
              <span v-if="info.warea">{{ info.warea.name }}</span>
            </el-form-item>
            <el-form-item label="政委名称:">
              {{ info.warea.commissar ? info.warea.commissar : '暂无政委信息' }}
            </el-form-item>
          </el-form>
        </div>
        <div v-if="info.crown">
          <p>代理公司信息:</p>
          <el-form label-width="100px">
            <el-form-item label="代理公司名称:">
              <!-- <el-button v-if="info.warea" type="text">{{ info.warea.name }}</el-button> -->
              {{ info.crown.nickname }}
            </el-form-item>
            <el-form-item label="代理公司手机号:">
              {{ info.crown.mobile }}
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="teamType" :label="`团队信息-(${(info.childAgentCount && info.childAgentCount) || 0})人`" name="2">
        <el-table
          v-if="info.child_agent && info.child_agent.length > 0"
          :data="info.child_agent"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
        >
          <el-table-column
            prop="nickname"
            label="昵称"
            align="center"
          >
            <template slot-scope="{ row }">
              <!-- 1.0 版本在中间显示团队信息 -->
              <!-- <el-button type="text" @click="getOtherInfo(row.id)">{{ row.nickname }}</el-button> -->
              <!-- 2.0版本修改为直接替换 -->
              <el-button type="text" @click="showLink(row.id)">{{ row.nickname }}</el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号"
            align="center"
          />
          <el-table-column
            prop="level"
            label="代理级别"
            align="center"
          >
            <template
              slot-scope="{ row }"
            >
              <el-tag
                :color="levelStatus(row.level).color"
                style="color:#ffffff;"
              >
                {{ levelStatus(row.level).name }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <p v-else>销售暂无团队</p>
      </el-tab-pane>
      <template v-if="showNum">
        <el-tab-pane v-if="+info.level !== 3" :label="`升级后团队人数-(${(info.up_team && info.up_team.num) || 0})人`" name="3">
          {{ (info.up_team && info.up_team.num) || 0 }} 人
        </el-tab-pane>
      </template>
    </el-tabs>
    <!-- 查看团队人员详情 -->
    <el-dialog
      title="团队销售信息"
      :visible.sync="visible.team"
      :modal="false"
    >
      <el-form label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="销售昵称:">{{ teamInfo.nickname }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="真实姓名:">{{ teamInfo.realname }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号:">{{ teamInfo.cre_num ? teamInfo.cre_num : '暂无' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话:">{{ teamInfo.mobile }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销售级别:">
              <el-tag
                :color="levelStatus(teamInfo.level).color"
                style="color:#ffffff;"
              >
                {{ levelStatus(teamInfo.level).name }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="注册时间:">{{ teamInfo.created_at }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邀请码:">{{ teamInfo.recom_code ? teamInfo.recom_code : '暂无' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="账户状态:">
              <el-tag
                :type="teamInfo.delete === 1 ? 'danger' : (teamInfo.status === 0 ? 'success' : 'warning')"
                size="mini"
              >
                {{ teamInfo.delete === 1 ? '已删除' : (teamInfo.status === 0 ? '正常' : '已禁用') }}
              </el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="认证状态:">{{ certStatus(teamInfo.cert_status) }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授权码:">{{ teamInfo.auth_code ? teamInfo.auth_code : '暂无' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="授权开始时间:">{{ teamInfo.auth_startime ? teamInfo.auth_startime : '暂无' }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="授权结束时间:">{{ teamInfo.auth_endtime ? teamInfo.auth_endtime : '暂无' }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
// 公共方法
import {
  certStatus,
  levelStatus
} from '@/filters/common'
// 获取上级销售或邀请人信息
import {
  getOtherInfo
} from '@/api/team/common'
export default {
  props: {
    info: {
      type: Object,
      default: () => {
        return {
          nickname: '',
          realname: '',
          cre_num: '',
          mobile: '',
          level: '',
          status: '',
          cert_status: '',
          created_at: '',
          recom: {
            nickname: ''
          },
          agent: {
            nickname: '',
            mobile: ''
          },
          recom_code: '',
          child_agent: []
        }
      }
    },
    showNum: {
      type: Boolean,
      default: false
    },
    teamType: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      type: '1',
      visible: {
        team: false
      },
      teamInfo: {}
    }
  },
  watch: {
    'info'(newV, oldV) {
      this.type = '1'
    }
  },
  methods: {
    levelStatus(level) {
      return levelStatus(level)
    },
    certStatus(status) {
      return certStatus(status)
    },
    showLink(id) {
      this.$emit('getOtherInfo', id)
    },
    handleToggle(tab) {
      this.type = tab.name
    },
    // 获取上级销售或邀请人信息
    async getOtherInfo(id) {
      if (!id) {
        this.$message.error('获取用户id失败')
        return false
      }
      try {
        const res = await getOtherInfo({ id })
        const { code, message } = res
        if (code === 200) {
          const { data } = res
          this.teamInfo = data
          this.visible.team = true
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`获取邀请人或上级代理信息失败:${e}`)
      }
    }
  }
}
</script>
