<template>
  <div>
    <div class="box ph-30">
      <el-card class="mb20">
        <team-sign-step :activeStep="activeStep" :language="language"/>
      </el-card>

      <el-card :body-style="{'padding-top': '0'}">
        <el-row class="mt20" :gutter="20">
          <el-col :lg="10">
            <div class="panel border">
              <div class="panel-header ">
                <h3 class="panel-title" v-if="language==0">选择参赛运动员清单</h3>
                <h3 class="panel-title" v-else>Select list of participating athletes</h3>
                <!--                <a class="fr" @click="emptyChoosed">{{ language == 0 ? '清空' : 'Empty' }}</a>-->
                <el-button type="primary" plain class="fr" @click="chooseSportman">
                  {{ language == 0 ? '选手管理' : 'Player Management' }}
                </el-button>
              </div>
              <div class="panel-body" style="padding: 10px">
                <div style="margin: 0 4px 10px;display: flex">
                  <el-select multiple v-model="choosedchoosed" collapse-tags-tooltip filterable
                             @change="changechoosed">
                    <el-option v-for="c in athletesList" :key="c.id" :label="c.xing + c.ming" :value="c.id">
                      <div class="flexOption">
                        {{ c.xing }}{{ c.ming }}
                        <img v-if="c.sex=='0'" src="@/assets/img/female.png"/>
                        <img v-if="c.sex=='1'" src="@/assets/img/male.png"/>
                        <!--                        -{{ c.age }}-->
                      </div>
                    </el-option>
                    <!--                    <template #tag>-->
                    <!--                      <el-tag v-for="v in choosed2List" :key="v.value" type="primary">-->
                    <!--                        {{ v.xing + v.ming }}-->
                    <!--                      </el-tag>-->
                    <!--                    </template>-->
                  </el-select>
                  <el-button type="primary" @click="emptychoosedchoosed">
                    {{ language == 0 ? '重选' : 'Re-select' }}
                  </el-button>
                </div>
                <!--                <div class="noPicChooseForm" id="chooseArr">-->
                <!--                  <el-checkbox-group v-model="choosedchoosed" @change="changechoosed">-->
                <!--                    <el-checkbox v-for="c in choosedListBak" :value="c.id" border>-->
                <!--                      <p class="name">{{ c.xing }}{{c.ming}}-->
                <!--                        &lt;!&ndash;                        ({{ c.sexStr }})&ndash;&gt;-->
                <!--                        <img v-if="c.sex=='0'" src="@/assets/img/female.png"/>-->
                <!--                        <img v-if="c.sex=='1'" src="@/assets/img/male.png"/>-->
                <!--                      </p>-->
                <!--                    </el-checkbox>-->
                <!--                  </el-checkbox-group>-->
                <!--                </div>-->
              </div>
            </div>
          </el-col>
          <el-col :lg="14">
            <div class="panel border">
              <div class="panel-header ">
                <h3 class="panel-title" v-if="language==0">可参与报名的项目</h3>
                <h3 class="panel-title" v-else>Search Events</h3>
                <div class="fr">
                  <el-input size="small" v-model="projectQuery.name" :prefix-icon="Search"
                            @change="getProjectList"
                            clearable/>
                </div>
              </div>
              <div v-loading="loadingProject" id="projectbox" style="height: 50vh;overflow: auto;">
                <el-checkbox-group v-model="projectIds" @change="changeProject">
                  <el-checkbox class="flexBetweenBox" v-for="c in projectList" :value="c.id" :key="c.id">
                    <div class="flexBetween w100">
                      <div class="l">
                        {{ c.code }}:{{ c.name }}
                        <div>{{ c.danceTypeDetailStr }}</div>
                      </div>
                      <div class="text-primary">{{ language == 0 ? '¥' : '€' }}{{ c.serviceFee }}</div>
                    </div>
                  </el-checkbox>
                </el-checkbox-group>
                <el-empty v-if="projectList.length==0" :image="`/img/order_no.png`" :image-size="228"
                          :description="language==0?'无可选项目':''"/>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="mt20">
          <el-col :span="24">
            <div class="text-center">
              <el-button type="primary" class="btn-lineG w200px" id="signUpBtn"
                         :disabled="projectIds.length==0||choosedchoosed.length==0" round @click="signUp">
                {{ language == 0 ? '确定' : 'Confirm' }}
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!--            <el-button type="success" @click="importSportman">批量导入人员</el-button>-->
      <!--            <el-button type="success" @click="addCoach">新增运动员</el-button>-->

      <el-card class="mt20" :body-style="{'padding': '0'}">
        <coach-info-row :match-id="matchId" :group-id="groupId" :language="language"/>
        <div class="m20">
          <div class="ttbb">
            <div :class="tableType==1 ? 'active' : ''" @click="switchTabletype">
              {{ language == 0 ? '按组别查看报项' : 'View Entries by Group' }}
            </div>
            <div :class="tableType==0 ? 'active' : ''" @click="switchTabletype">
              {{ language == 0 ? '按人员查看报项' : 'View Entries by Participant' }}
            </div>
          </div>
          <!--          <div class="fr mb20" @click="switchTabletype">-->
          <!--            <el-button plain type="primary" :icon="Switch" v-if="tableType==1">-->
          <!--              {{ language == 0 ? '按人员查看报项' : 'View Entries by Participant' }}-->
          <!--            </el-button>-->
          <!--            <el-button plain type="primary" :icon="Switch" v-else>-->
          <!--              {{ language == 0 ? '按组别查看报项' : 'View Entries by Group' }}-->
          <!--            </el-button>-->
          <!--          </div>-->
          <sign-info-table v-if="tableType==0" :match-id="matchId"
                           :extraform="extraform" :list="signInfoList"
                           @editExtra="goPersonInfo"/>
          <zu-table v-else :list="zuTableList" @delete="removeThis"/>
          <div class="text-center mt20">
            <el-button type="primary" class="w200px" plain round @click="goPrev()">
              {{ language == 0 ? "上一步" : 'Go back' }}
            </el-button>
            <el-button type="primary" class="btn-lineG w200px" round @click="submitForm()">
              {{ language == 0 ? '预览报名信息' : 'Preview registration information' }}
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <dialogAddCoach ref="dialogAddCoachRef"/>
    <!--    <dialogAllSportsmanList ref="dialogAllSportsmanListRef" @transfer="getChoosed" @submitForm="getSignInfoList"/>-->
    <dialogAllSportsmanList ref="dialogAllSportsmanListRef" @submitForm="getAthletesList"/>
    <dialogImport ref="dialogImportProps" @submitForm="getMySignInfo"/>
    <el-dialog v-model="showResult" :close-on-click-modal="false" :show-close="false">
      <el-result icon="success" :title="language==0?'报名成功':'Sign up successful'">
        <template #extra>
          <el-button type="primary" @click="downloadVoucher">下载凭证</el-button>
          <el-button type="primary" @click="goMySign">{{ language == 0 ? '查看报项' : 'View Entries' }}</el-button>
        </template>
      </el-result>

    </el-dialog>
    <dialogExtraForm ref="popExtraForm" @submitForm="getSignInfoList"/>
    <dialogWdsf ref="popWdsf" @submitForm="getAthletesList" @cancel="removeCurproject"/>
    <el-tour v-model="openTour" :current="tourCurrent">
      <el-tour-step target="#addRef" title="第一步" description="点击选择运动员" :next-button-props="nextButtonProps"/>
      <el-tour-step v-if="choosedList.length>0" target="#chooseArr" title="第二步" description="勾选报项运动员"/>
      <el-tour-step v-if="projectList.length>0" target="#projectbox" title="第三步" description="选择报名项目"/>
      <el-tour-step v-if="projectIds.length>0" target="#signUpBtn" title="第四步" description="点击报项"/>
    </el-tour>
  </div>
</template>

<script setup>
import {ref, reactive, toRefs, watch} from 'vue'
import * as match from '@/apiPc/match'
import {getCurrentInstance, onMounted} from '@vue/runtime-core'
import DialogAddCoach from './components/addCoach'
import DialogAllSportsmanList from './components/allSportsmanList'
import DialogImport from './components/import'
import DialogExtraForm from './components/extraForm'
import DialogWdsf from './components/wdsfForm'
import {Search, Switch} from "@element-plus/icons-vue";

const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
import _ from 'lodash'
import {ElMessage, ElMessageBox} from 'element-plus'
import cache from "@/plugins/cache"
import TeamSignStep from "@/viewsPc/match/components/teamSignStep"
import CoachInfoRow from "@/viewsPc/match/components/coachInfo-row"
import SignInfoTable from "@/viewsPc/match/components/signInfo-table"
import ZuTable from '@/viewsPc/match/components/zu-table'
import {signgetSignInfoConflict} from "@/apiPc/match";
import {useStorage} from "@vueuse/core/index";

const language = useStorage('language', 0)
const data = reactive({
  coachForm: {}, activeStep: 2,
  tourCurrent: 0,
  tableData: [],
  signInfoList: [],
  zuTableList: [],
  choosedList: [],
  athletesList: [],
  choosedListBak: [],
  athletesQuery: {
    name: ''
  },
  zuQuery: {
    name: ''
  },
  extraPersonInfoMapList: [],
  teamList: [],
  extraform: [],
  groupId: route.query.groupId || 0,
  signType: '',
  coachOrLeaderFlag: null,
  noPhotoCanSign: null,
  showResult: false,
  showExtraForm: false,
  loadingProject: false,
  activeTeam: '',
  names: {},
  choosedchoosed: [],
  projectIds: [],
  projectList: [],
  choosed2List: [],
  choosed2Listbak: [],
  projectQuery: {}, tableType: 1,
  currProjectId: '',
  openTour: false,
  isNational: false
})
const {
  activeTeam,
  names,
  tableData,
  signInfoList,
  zuTableList,
  choosedList,
  choosedListBak,
  athletesList,
  extraform,
  groupId,
  signType,
  coachOrLeaderFlag,
  showResult,
  noPhotoCanSign,
  projectIds,
  choosedchoosed,
  activeStep,
  projectList,
  choosed2List,
  choosed2Listbak,
  loadingProject,
  projectQuery,
  tableType,
  zuQuery,
  openTour, currProjectId,
  tourCurrent, isNational
} = toRefs(data)
const nextButtonProps = ref({})
const matchId = ref(route.query.matchId)
let signInfoType = null
onMounted(() => {
  signType.value = route.query.signType || 1
  getSignInfoList()
  getMatch(matchId.value)
  getMySignInfo()
  getAthletesList()
  // openTour.value = true
})

let chargeFlag

function getAthletesList() {
  // athletesList.value
  match.getGroupPersonList({label: '0'}, groupId.value).then(res => {
    athletesList.value = res.rows
  })
}

function getMatch(id) {
  match.getMatchById({
    id: id
  }).then(res => {
    chargeFlag = res.data.chargeFlag
    noPhotoCanSign.value = res.data.noPhotoCanSign
    coachOrLeaderFlag.value = res.data.coachOrLeaderFlag
    extraform.value = JSON.parse(res.data.participantsInfo)
    if (res.data.languageSource == '100') {
      isNational.value = false
    } else {
      isNational.value = true
    }
  })
}

function getMySignInfo() {
  // 获取已报
  match.getMySignInfo({
    cptId: matchId.value,
    groupId: groupId.value
  }).then(res => {
    tableData.value = res.data.signInfo
    signInfoType = res.data.type
  })
}

function getSignInfoList() {
  match.getMySignInfoList({
    cptId: matchId.value,
    groupId: groupId.value
  }).then(res => {
    signInfoList.value = res.data.singleData || []
    zuTableList.value = res.data.zuData || []
  })
}

function submitForm() {
  if (signInfoType == '1') {
    ElMessageBox.confirm(language.value == 0 ? '已报项，前往我的报项' : 'Reported items, go to my submission',
        language.value == 0 ? '提示' : 'Tips', {
          confirmButtonText: language.value == 0 ? '确定' : 'OK',
          cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
          type: 'warning'
        }).then(() => {
      router.push({name: 'myMatch'})
    })
    return
  }
  if (extraform.value && extraform.value.length > 0) {
    let needBuchong = false
    for (const e of extraform.value) {
      if (e.status == '0') {
        needBuchong = true
      }
    }
    for (const s of signInfoList.value) {
      if (s.extraPersonInfo == null && needBuchong) {
        ElMessage.warning(language.value == 0 ? '请完善补充信息' : 'Please fill in the supplementary information')
        tableType.value = 0
        return
      }
    }
  }
  if (signInfoList.value.length == 0) {
    if (language.value == 0) {
      ElMessage.warning('请至少选择一个项目')
    } else {
      ElMessage.warning('select at least one project')
    }
    return
  }
  router.push({
    name: 'signPreview',
    query: {
      matchId: matchId.value,
      groupId: groupId.value
    }
  })
}

function goPrev() {
  router.push({
    name: `chooseCoach`,
    query: {
      matchId: matchId.value
    }
  })
}

function emptychoosedchoosed() {
  choosedchoosed.value = []
  choosed2List.value = []
}

function chooseSportman() {
  const params = {
    title: language.value == 0 ? '选择运动员' : 'Participating athletes',
    matchId: matchId.value,
    groupId: groupId.value,
    rankId: activeTeam.value,
    signType: signType.value,
    noPhotoCanSign: noPhotoCanSign.value,
    coachOrLeaderFlag: coachOrLeaderFlag.value,
    choosedList: choosedList.value,
    isNational: isNational.value
  }
  proxy.$refs['dialogAllSportsmanListRef'].open(params)
}

function changechoosed(e) {
  // console.log(e)
  choosed2List.value = []
  for (var c of athletesList.value) {
    if (choosedchoosed.value.indexOf(c.id) > -1) {
      choosed2List.value.push(c)
    }
  }
  getProjectList()
}

function getProjectList() {
  console.log(choosedchoosed.value)
  projectIds.value = []
  if (choosedchoosed.value.length == 0) {
    projectList.value = []
    return
  }
  loadingProject.value = true
  //根据已选人员id 获取项目列表
  var obj = {
    cptId: matchId.value,
    perIds: choosedchoosed.value.toString()
  }
  match.getProjectPageByPerIds(obj).then(res => {
    projectList.value = res.rows
    loadingProject.value = false
  }).catch(err => {
    loadingProject.value = false
    ElMessage.warning(err.msg)
  })
}


function getChoosed(list) {
  console.log(list)
  choosedList.value = list
  choosedListBak.value = list
  if (list.length > 0) {
    // openTour.value = false
    tourCurrent.value = 1
  }
  // console.log('选好了', choosedchoosed.value)
}

function addCoach() {
  if (signInfoType == '2') {
    match.recoverMySign({
      cptId: matchId.value,
      groupId: groupId.value
    }).then(res => {
      if (res.msg.indexOf('Exception:') > -1) {
        const msg = res.msg.slice(10)
        ElMessageBox.confirm(msg, language.value == 0 ? '提示' : 'Tips', {
          confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
          cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
          type: 'warning'
        }).then(() => {
          console.log('Confirm')
        })
        return
      }
      getMySignInfo()
    })
  }
  const params = {
    title: language.value == 0 ? '新增运动员' : 'Add',
    id: 0,
    groupId: groupId.value
  }
  proxy.$refs['dialogAddCoachRef'].open(params)
}

function signUp() {
  if (projectIds.value.length == 0) {
    return
  }
  if (choosedchoosed.value.length == 0) {
    return
  }
  const obj = {
    athleteIds: choosedchoosed.value.toString(),
    projectIds: projectIds.value.toString(),
    groupId: groupId.value
  }
  match.sportsmanDone(obj).then(res => {
    choosedchoosed.value = []
    choosed2List.value = []
    projectList.value = []
    projectIds.value = []
    getSignInfoList()
  })
}

function removeThis(id) {
  ElMessageBox.confirm(language.value == 0 ? '确定移除这条报项吗？' : 'Are you sure to remove this report item',
      language.value == 0 ? '提示' : 'Tips', {
        confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
        cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
        type: 'warning'
      }).then(() => {
    match.deleteSign(id).then(res => {
      // 重新获取已报名信息
      ElMessage.success(language.value == 0 ? '已移除该报项' : 'success')
      getSignInfoList()
      getProjectList()
    })
  })
}

function changeCoach(cptId, groupId) {
  // 更换教练
  const params = {
    title: '修改教练',
    groupId: groupId,
    cptId: cptId
  }
  proxy.$refs['popChangeCoach'].open(params)
}

function importSportman() {
  const params = {
    title: '批量导入人员',
    groupId: groupId.value
  }
  proxy.$refs['dialogImportProps'].open(params)
}

function goMySign() {
  router.push({
    name: 'myMatch'
  })
}

const goPersonInfo = (row) => {
  // 完善补充信息
  console.log(row)
  // debugger
  const params = {
    matchId: matchId.value,
    title: language.value == 0 ? '完善补充信息' : 'Complete the supplementary information',
    participantsInfoArr: extraform.value,
    personId: row.personInfo.id,
    extraId: row.extraPersonInfo?.id || 0
  }
  proxy.$refs['popExtraForm'].open(_.cloneDeep(params))
}

function downloadVoucher() {
  // 下载凭证
  proxy.download(
      `/pdf/getPayedOrderPdf/${matchId.value}/${groupId.value || 0}`, {}, '报项凭证.pdf'
  )
}

function editPerson(id) {
  proxy.$refs['dialogAddCoachRef'].open({
    title: '编辑人员',
    id: id,
    groupId: groupId.value
  })
}

function switchTabletype() {
  if (tableType.value == 0) {
    tableType.value = 1
  } else {
    tableType.value = 0
  }
}

watch(projectIds, (newVal, oldVal) => {
  console.log(projectIds.value)
  if (newVal.length > oldVal.length) {
    currProjectId.value = _.last(newVal)
  } else {
    currProjectId.value = ''
  }
})

function changeProject(e) {
  console.log(projectIds.value, e)
  var obj = {}
  obj = _.find(projectList.value, (c) => {
    return e.indexOf(c.id) > -1
  })
  //循环choosed2List 检查是否存在WDSF号
  let n = 0
  for (var cc of choosed2List.value) {
    if (!cc.wdsfMin) {
      n++
    }
  }
  //obj需要wdsf 且 currProjectId非空
  if (obj.checkMemberFlag == '1' && currProjectId.value != '' && n > 0) {
    const params = {
      title: language.value == 0 ? '验证WDSF' : 'Verify WDSF',
      groupId: groupId.value,
      matchId: matchId.value,
      list: choosed2List.value
    }
    proxy.$refs['popWdsf'].open(_.cloneDeep(params))
  }
}

function removeCurproject() {
  // projectIds.value
  projectIds.value = _.without(projectIds.value, currProjectId.value)
}

watch(choosedchoosed, (newVal, oldVal) => {
  // console.log(choosedchoosed.value)
  if (newVal.length > oldVal.length) {
    match.signgetSignInfoConflict({
      cptId: matchId.value,
      perId: _.last(newVal),
      groupId: groupId.value
    }).then(res => {
      if (!res.data) {
        ElMessage.warning(language.value == 0 ? '该人员已在其他团队中报名，请重新选择' : 'This person has already registered in another team, please select again')
        choosedchoosed.value = _.without(choosedchoosed.value, _.last(newVal))

        for (var c of choosed2List.value) {
          if (c.id == _.last(newVal)) {
            choosed2List.value = _.without(choosed2List.value, c)
          }
        }
        for (var c of choosed2Listbak.value) {
          if (c.id == _.last(newVal)) {
            choosed2Listbak.value = _.without(choosed2Listbak.value, c)
          }
        }
        projectList.value = []
        console.log(choosedchoosed.value, choosed2List.value, choosed2Listbak.value)
        return
      } else {
        getProjectList()
      }
    })
  } else {
    getProjectList()
  }
})
</script>

<style scoped lang="scss">
:deep(.el-checkbox__label) {
  flex: 1 1 auto;
}

.flexBetweenBox {
  width: 100%;
  height: auto;
  margin: 0;
  border-bottom: 1px solid #eee;
  padding: 0 10px;
}

.flexBetweenBox:nth-child(odd) {
  background: #FAFBFD;
}

.flexBetween {
  padding: 10px;
  border-left: 1px solid #eee;

  .l {
    div {
      margin: 4px 0 0;
      color: #999;
    }
  }
}

.app-container {
  padding: 0;
  background: #F5F7F9;
}

.panel-footer .el-button--success {
  background: #254385;
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.panel-footer .el-button--success.is-plain {
  background: #fff;
  border: 1px solid #2ED981;
  color: #2ED981;
}

.hasChoose {
  margin: 0 0 20px;
  display: flex;
  justify-content: space-between;

  button {
    position: relative;
    margin: 10px;
  }

  .choseItem {
    margin: 10px;
    position: relative;

    .poClose {
      position: absolute;
      right: -6px;
      top: -12px;
      z-index: 1;
    }
  }
}

.chooseForm {
  :deep(.el-form-item__content) {
    background: rgba(245, 247, 249, 0.38);
    padding: 20px 40px 10px;
  }

  .el-checkbox {
    height: auto;
    margin-right: 20px;
  }

  :deep(.el-checkbox__input) {
    position: absolute;
    right: 0;
    top: 0;
  }

  .name {
    text-align: center;
  }
}

:deep(.el-avatar) > img {
  width: 100%;
}

.panel {
  height: 100%;
}

.border-info {
  .item {
    margin: 5px 0;
    color: #4C5359;
    font-size: 14px;

    label {
      font-size: 14px;
      margin-right: 14px
    }
  }
}

.ttbb {
  font-size: 14px;
  color: #4C5359;
  display: flex;
  justify-content: center;

  div {
    padding: 20px;
    position: relative;
    cursor: pointer;
  }

  div:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    background: #ccc;
    width: 1px;
    height: 14px;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .active {
    color: var(--el-color-primary);

    &::before {
      width: 33px;
      content: '';
      position: absolute;
      height: 2px;
      bottom: 14px;
      left: 0;
      right: 0;
      margin: auto;
      background: #453DEA;
      border-radius: 1px;
    }
  }
}

.noPicChooseForm {
  overflow: auto;
  //height: 70vh;

  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    text-align: justify;

    .el-button {
      width: 31%;
      margin: 1%;
    }

    .el-checkbox {
      margin: 1%;
      width: 31%;
      overflow: hidden;
    }

    .name {
      justify-content: left;
    }
  }
}

.name {
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    height: 20px;
    margin-left: 4px;
  }
}

.flexOption {
  display: flex;
  align-items: center;

  img {
    height: 18px;
  }
}
</style>