<template>
  <div class="read_pk_box">
    <van-nav-bar :title="title" left-text="返回" @click-left="$route_back" left-arrow></van-nav-bar>
    <div class="body_com has_header">
      <van-tabs class="tabbar_list" v-model="active" @change="onChange">
        <van-tab class="list" title="排名" name="ranking"></van-tab>
        <van-tab class="list" title="规则" name="rules"></van-tab>
        <van-tab class="list" title="积分明细" name="log"></van-tab>
        <van-tab class="list" title="参与团队" name="teams"></van-tab>
      </van-tabs>
      <div class="margin_top">
        <!-- 排名 -->
        <PkRanking :pkStatus="pkStatus" v-if="show_ranking"></PkRanking>

        <!-- 规则 -->
        <PkRules v-if="show_rules" :pkStatus="pkStatus" :createInfo="createInfo" :get_id="get_id" :get_page="get_page"></PkRules>

        <!-- 积分明细 -->
        <PkLog v-if="show_log" :pkStatus="pkStatus" :createInfo="createInfo"></PkLog>

        <!-- 参与团队 -->
        <PkTeams v-if="show_teams" :pkStatus="pkStatus" :createInfo="createInfo"></PkTeams>
      </div>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import Vue from 'vue'
import moment from 'moment';
import EmployeeSelector from '@/components/common/EmployeeSelector'
import PkRules from '@/components/pk/pk_rules'
import PkLog from '@/components/pk/pk_log'
import PkTeams from '@/components/pk/pk_teams_copy'
import PkRanking from '@/components/pk/pk_ranking'
import { Tab, Tabs, panel, Notify, Dialog, Picker } from 'vant'
Vue.use(Tab).use(Tabs).use(panel).use(Notify).use(Dialog).use(Picker)
export default {
  // 数据
  data() {
    return {
      title: '查看PK',
      active: '',
      employee_list: [],
      teams_list: [],
      pkStatus: this.$route.query.pk_status,
      get_id: this.$route.query.id.toString(),
      get_page: 1,
      show_team_popup: false,
      edit_teams: {},
      show_employee_selector: false,
      showCaptain: false,
      // 切换tab
      show_ranking: true,
      show_rules: false,
      show_log: false,
      show_teams: false,
      popup_captain: [],
      captain: {
        name: '',
        id: ''
      },
      employee_select: {
        member: [],
        employee_name: '',
      },
    }
  },
  // 组件
  components: {
    EmployeeSelector, PkRules, PkLog, PkTeams, PkRanking
  },
  computed: {
    createInfo() {
      const { creator_id, managers } = this.$route.query

      return {
        creatorId: creator_id,
        manages: new Set(managers ? managers.split(',') : undefined)
      }
    }
  },
  // 方法
  methods: {
    // 加载
    showLoading() {
      this.$toast.loading({
        loadingType: "spinner",
        message: '正在处理',

      })
    },
    // 点击监听
    onChange(name, title) {
      switch (name) {
        case 'rules':
          // 规则列表
          this.show_ranking = false
          this.show_teams = false
          this.show_log = false
          this.show_rules = true
          break;
        case 'log':
          // 积分列表
          this.show_ranking = false
          this.show_teams = false
          this.show_rules = false
          this.show_log = true
          break;
        case 'teams':
          // 团队列表
          this.show_ranking = false
          this.show_log = false
          this.show_rules = false
          this.show_teams = true
          break;
        default:
          // 人员列表
          this.show_teams = false
          this.show_log = false
          this.show_rules = false
          this.show_ranking = true

      }
    },
  }
};
</script>
<style scoped>
.body_com {
  height: calc(100% - 0.92rem);
  position: relative;
}
.teams_btn,
.rule_btn {
  padding: 0.2rem;
  text-align: right;
}
.teams_employee {
  font-size: 0.24rem;
  color: #303133;
  padding: 0 0.32rem;
  padding-top: 0.2rem;
}
.teams_employee span {
  margin-right: 0.2rem;
}
.list_detail {
  font-size: 0.24rem;
  color: #303133;
}
/* 顶部分类列表 */
.read_pk_box .tabbar_list /deep/ .van-tabs__wrap {
  height: 1rem;
  background: #fff;
}
.read_pk_box .tabbar_list /deep/ .van-tab {
  font-size: 0.32rem;
  line-height: 0.96rem;
  padding-bottom: 0.1rem;
}
.read_pk_box /deep/ .van-tabs__line {
  background: #1989fa;
}
.read_pk_box .read_pk_rules /deep/ .van-cell-group {
  background: transparent;
}
.read_pk_box .read_pk_rules /deep/ .van-cell-group button {
  position: relative;
  margin-top: 0.4rem;
  width: calc(100vw - 0.64rem);
}
/* .read_pk_box /deep/ .record_list{
  margin-top:0.4rem;
} */
.read_pk_box #inner-rlcsf button {
  position: relative;
  left: 0.32rem;
  margin-top: 0.4rem;
  width: calc(100vw - 0.64rem);
}
.read_pk_box /deep/ .pk_list {
  position: relative;
  left: 0.32rem;
  width: calc(100vw - 0.64rem);
  margin-top: 0.4rem;
  padding: 0rem 0rem 0.3rem;
}
.read_pk_box /deep/ .pk_list .van-cell .van-cell__title span {
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.72rem;
}
.read_pk_box /deep/ .pk_list .teams_employee {
  font-size: 0.28rem;
  padding: 0.2rem 0.32rem;
}
.read_pk_box /deep/ .pk_list .teams_btn {
  text-align: right;
  padding-right: 0.32rem;
}
/* .read_pk_box /deep/ .create_pk{
  position: relative;
  left:0.32rem;
  margin-top:0.4rem;
  width:calc(100vw - 0.64rem);
} */
.read_pk_box /deep/ .van-hairline--top-bottom:after,
.van-hairline-unset--top-bottom:after {
}
.read_pk_box /deep/ .read_pk_rules .van-cell-group {
  position: relative;
  left: 0.32rem;
  width: calc(100vw - 0.64rem);
}
.read_pk_box /deep/ .read_pk_rules .pk_rule .van-cell-group {
  left: 0;
}
.read_pk_box /deep/ .read_pk_rules .pk_rule_title {
  text-align: center;
  font-size: 0.32rem;
  line-height: 1rem;
  background: #f8f8f8;
}
.read_pk_box /deep/ .rule_btn {
  position: relative;
  display: block;
  text-align: right;
  padding: 0.1rem 0.32rem 0.2rem 0;
  background: #fff;
}
.read_pk_box /deep/ .rule_btn .van-button--mini {
  display: inline-block;
  left: 0 !important;
  width: auto !important;
  margin-top: 0 !important;
}
.read_pk_box /deep/ .list_detail {
  padding: 0.2rem 0.32rem;
  font-size: 0.28rem;
  color: #969799;
}
.read_pk_box /deep/ .list_detail span {
  display: inline-block;
  line-height: 0.5rem;
  width: calc(98% / 2);
}
.read_pk_box /deep/ .list_detail span:nth-child(2) {
  text-align: right;
}
.read_pk_box /deep/ .list_detail span:nth-child(3) {
  display: block;
  width: 100%;
}
.margin_top {
  background-color: #f5f7fa;
  padding: 0;
  position: relative;
  height: calc(100% - 1rem);
}
.van-cell-group {
  margin-top: 0;
  padding-top: 0.2rem;
}
</style>
