<template>
  <div>
    <div class="box">
      <el-button class="back-btn" @click="goback()">{{ languageLibrary[language].a }}</el-button>
      <el-row class="detail-title">
        <el-col :span="4" :xs="24">
          <span v-if="projectMainInfo.status == '1'" style="background: #3194FA;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].o }}</span>
          <span v-else-if="projectMainInfo.status == '2'" style="background: #21C9AB;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].p }}</span>
          <span v-else style="background: #929AA0;border-radius:6px 0 6px 0;padding: 0 4px">{{ languageLibrary[language].q }}</span>
        </el-col>
        <el-col :span="8" :xs="24">
          <div style="display: flex;flex-direction: column;">
            <span style="font-size: 20px;font-weight: bold;margin-bottom: 5px">{{projectMainInfo.name}}</span>
            <span>{{projectMainInfo.startTime + '~' + projectMainInfo.endTime}}</span>
          </div>
        </el-col>
        <el-col class="fee-border" :span="4" :xs="24">
          <div style="display: flex;flex-direction: column;text-align: center">
            <span style="font-size: 14px;color: #929AA0;margin-bottom: 5px">{{ languageLibrary[language].b }}</span>
            <span style="color: #EEEEEE;font-size: 16px">{{contestFee}}</span>
          </div>
        </el-col>
        <el-col :span="4" :xs="24">
          <div style="display: flex;flex-direction: column;text-align: center">
            <span style="font-size: 14px;color: #929AA0;margin-bottom: 5px">{{ languageLibrary[language].c }}</span>
            <span style="color: #EEEEEE;font-size: 16px">{{projectMainInfo.projectFormat}}</span>
          </div>
        </el-col>
      </el-row>
      <el-tabs v-model="activeName" class="detail-tabs" @tab-click="handleClick">
        <el-tab-pane :label="languageLibrary[language].d" name="first">
          <el-row class="detail-tabs-row-sin detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].h }}</span></el-col>
            <el-col :lg="16" :sm="12" :xs="12"><span>{{projectMainTabA[0].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-eve detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].i }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[1].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-sin detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].j }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[2].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-eve detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].k }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[3].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-sin detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].l }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[4].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-eve detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].m }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[5].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-sin detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].n }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[6].field2}}</span></el-col>
          </el-row>
          <el-row class="detail-tabs-row-eve detail-tabs-row">
            <el-col :lg="8" :sm="12" :xs="12"><span>{{ languageLibrary[language].v }}</span></el-col>
            <el-col :lg="8" :sm="12" :xs="12"><span>{{projectMainTabA[7].field2}}</span></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="languageLibrary[language].e" name="second">
          <el-table
              v-if="projectMainTabOther.length > 0"
              class="contest-table"
              :data="projectMainTabOther"
              :cell-style="{borderColor:'#3A405B',textAlign:'center',color:'#fff',padding: '15px 20px'}"
              :header-cell-style="{fontSize:'16px',background:'#3A405B !important',borderColor:'#3A405B',textAlign:'center',color:'#929AA0',padding: '15px 20px'}"
          >
            <el-table-column label="等级" align="left" prop="field1" />
            <el-table-column label="小盲" align="left" prop="field2" />
            <el-table-column label="大盲" align="left" prop="field3" />
            <el-table-column label="前置" align="left" prop="field4" />
<!--            <el-table-column label="规则标识" align="left" prop="field5" />-->
            <el-table-column label="类型" align="left" prop="field6" />
            <el-table-column label="级别时间" align="left" prop="field7" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="languageLibrary[language].f" name="third">
          <el-table
              v-if="projectMainTabOther.length > 0"
              class="contest-table"
              :data="projectMainTabOther"
              :cell-style="{borderColor:'#3A405B',textAlign:'center',color:'#fff',padding: '15px 20px'}"
              :header-cell-style="{fontSize:'16px',background:'#3A405B !important',borderColor:'#3A405B',textAlign:'center',color:'#929AA0',padding: '15px 20px'}"
          >
            <el-table-column label="排名" align="left" prop="field1" />
            <el-table-column label="选手" align="left" prop="field2" />
            <el-table-column label="奖金" align="left" prop="field3" />
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="languageLibrary[language].g" name="fourth">
          <el-table
              v-if="projectMainTabOther.length > 0"
              class="contest-table"
              :data="projectMainTabOther"
              :cell-style="{borderColor:'#3A405B',textAlign:'center',color:'#fff',padding: '15px 20px'}"
              :header-cell-style="{fontSize:'16px',background:'#3A405B !important',borderColor:'#3A405B',textAlign:'center',color:'#929AA0',padding: '15px 20px'}"
          >
            <el-table-column label="玩家姓名" align="left" prop="field1" />
            <el-table-column label="轮次" align="left" prop="field2" />
            <el-table-column label="筹码数量" align="left" prop="field3" />
            <el-table-column label="桌号" align="left" prop="field4" />
            <el-table-column label="座位号" align="left" prop="field5" />
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core";
import {getProjectMain,getProjectTab} from '@/apiPc/webSite'

const router = useRouter()
const route = useRoute()
const contestFee = ref(0)
const activeName = ref("first")
const language = useStorage('language', 1)
const languageLibrary = ref([{
  a:'返回',
  b:'总买入费用',
  c:'参赛席位',
  d:'细节',
  e:'盲注',
  f:'结果',
  g:'席位',
  h:'赛事名称',
  i:'总买入费用',
  j:'入场费用',
  k:'初始筹码数量',
  l:'剩余/总席位',
  m:'开始时间',
  n:'最晚参赛时间',
  o:'未开始',
  p:'进行中',
  q:'已结束',
  v:'最晚参赛等级',
},{
  a:'Return',
  b:'Total buy-in fee',
  c:'Entry seats',
  d:'Details',
  e:'Blind levels',
  f:'Results',
  g:'Seats',
  h:'Event name',
  i:'Total buy-in fee',
  j:'Entry fee',
  k:'Initial chip count',
  l:'Remaining/Total seats',
  m:'Start time',
  n:'Latest entry time',
  o:'Not started',
  p:'In progress',
  q:'Completed',
  v:'Latest entry level',
},{
  a:'돌아가기',
  b:'총 바이인 금액',
  c:'엔트리 수',
  d:'세부 정보',
  e:'블라인드 레벨',
  f:'결과',
  g:'좌석',
  h:'경기명',
  i:'총 바이인 금액',
  j:'참가비',
  k:'시작 칩 수량',
  l:'잔여/전체 좌석',
  m:'시작 시간',
  n:'마지막 등록 시간',
  o:'시작 전',
  p:'진행 중',
  q:'완료됨',
  v:'마지막 등록 레벨',
},{
  a:'戻る',
  b:'バイイン総額',
  c:'エントリー数',
  d:'詳細',
  e:'ブラインドレベル',
  f:'結果',
  g:'座席',
  h:'イベント名',
  i:'バイイン総額',
  j:'エントリー費',
  k:'初期スタック',
  l:'残り／総座席数',
  m:'開始時刻',
  n:'最終エントリー時刻',
  o:'未開始',
  p:'進行中',
  q:'完了',
  v:'最終エントリーレベル',
},{
  a:'Quay lại',
  b:'Tổng phí Buy-in',
  c:'Số ghế tham gia',
  d:'Chi tiết ',
  e:'Mức blind',
  f:'Kết quả',
  g:'Ghế',
  h:'Tên giải đấu',
  i:'Tổng phí Buy-in',
  j:'Phí vào cửa ',
  k:'Số chip khởi đầu',
  l:'Ghế còn lại/ Tổng số ghế',
  m:'Thời gian bắt đầu',
  n:'Thời gian đăng kí muộn nhất',
  o:'Chưa bắt đầu',
  p:'Đang diễn ra',
  q:'Đã hoàn thành',
  v:'Cấp blind cuối cùng để đăng kí',
}])

const tId = ref()
const projectMainInfo = ref({})
const projectMainTabA = ref([
  {
    field2:''
  },
  {
    field2:''
  },
  {
    field2:''
  },
  {
    field2:''
  },
  {
    field2:''
  },
  {
    field2:''
  },
  {
    field2:''
  },
  {
    field2:''
  },
])
const projectMainTabOther = ref([])
const query = ref({
  pageNum:1,
  pageSize:9999,
  cptId:'',
  type:'1',
  projectId:'',
})

onMounted(() => {
  tId.value = route.params.id
  getMainInfo()
})

const getMainInfo = () => {
  getProjectMain(tId.value).then(res => {
    if (res.code === 200) {
      projectMainInfo.value = res.data
      query.value.cptId = res.data.cptId
      query.value.projectId = res.data.id
      getProjectTabList(1)
    }
  })
}

const getProjectTabList = (n) => {
  query.value.type = n
  getProjectTab(query.value).then(res => {
    if (res.code === 200) {
      if (res.rows && res.rows.length > 0) {
        if (n == 1) {
          res.rows.forEach((item,index) => {
            if (index === 1) {
              contestFee.value = item.field2
            }
            projectMainTabA.value[index].field2 = item.field2
          })
        } else {
          projectMainTabOther.value = res.rows
        }

      }
    }
  })
}

const handleClick = (n) => {
  console.log("222222222222222222222222222")
  let type = +n.index + 1
  getProjectTabList(type)
}


const goback = function () {
  router.go(-1)
}

</script>
<style lang="scss" scoped>
.box {
  padding: 0 10%;
}

.back-btn {
  font-size: 16px;
  color: #fff;
  background: url("@/assets/v1/arrow_left.png") no-repeat left;
  background-size: auto 35px;
  padding-left: 35px;
  box-shadow: none;
  border: none;
}

.detail-title {
  color: #fff;
  background: #1F2644;
  padding: 40px 30px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  text-align: center;

  .not-start {
    display: inline-block;
    background: #3194FA;
    border-radius:6px 0 6px 0;
    padding: 0 4px
  }
}
.detail-tabs {
  margin: 50px 0;
  background: #1f2644;
  border-radius: 15px;
  padding: 20px 40px;

  :deep(.el-tabs__item) {
    color: #fff;
    font-size: 18px;
    margin:10px 20px 20px 20px;
    padding: 0 20px !important;

    &:hover {
      background: #000;
      border-radius: 15px;
    }
    &.is-active {
      color: #fff;
      border: none;
      border-radius: 15px;
      background: rgba(255,255,255,0.3);
    }
  }

  :deep(.el-tabs__content) {
    background: #1f2644;
    padding: 20px;
  }

  .detail-tabs-row {
    color: #fff;
    border: 1px solid #3a405b;
    padding: 10px 30px;
    font-size: 22px;

    .el-col:nth-child(odd) {
      color: #929AA0;
    }

    &.detail-tabs-row-eve {
      background: #1f2644;
    }
    &.detail-tabs-row-sin {
      background: #161d39;
    }
  }

  :deep(.el-tabs__nav-wrap::after) {
    background: #3A405B;
  }

  :deep(.el-tabs__active-bar) {
    background: #fff;
  }

  :deep(.el-tabs__active-bar::before) {
    border-bottom: 5px solid #fff;
  }
}

.contest-table {
  text-align: center;
  border: 1px solid #3A405B;

  :deep(.el-table--default .cell) {
    padding: 10px 20px;
  }

  :deep(.el-table__body tr:nth-child(odd)) {
    background-color: #1F2644; /* 设置奇数行的背景色 */
  }

  :deep(.el-table__body tr:nth-child(even)) {
    background-color: #101738; /* 设置奇数行的背景色 */
  }

  :deep(.el-table__inner-wrapper::before) {
    background: #3A405B;
  }

  :deep(tbody tr:hover>td) {
    background: transparent !important
  }
}

.fee-border {
  border-left: 1px solid #929AA0;
  border-right: 1px solid #929AA0
}

@media (max-width: 800px) {
  .detail-tabs-row {
    font-size: 18px !important;
  }

  .fee-border {
    border: none;
  }
}
</style>