<template>
  <el-dialog
    v-model="show" destroy-on-close :title="title" width="800px" append-to-body
    draggable
    :close-on-click-modal="false" @close="mateClose"
  >
    <div class="mb20">
      <span v-if="mateConfig.minCount!=mateConfig.maxCount">请选择{{ mateConfig.minCount }}~{{
        mateConfig.maxCount
      }}个队友</span>
      <span v-else-if="mateConfig.minCount=='-1'&&mateConfig.maxCount=='-1'">请至少选择1个队友</span>
      <span v-else>请选择{{ mateConfig.minCount }}个队友</span>

      <span v-if="mateConfig.minMaleCount!=-1||mateConfig.maxMaleCount!=-1" style="margin:0 20px;">男子:
        <span v-show="mateConfig.minMaleCount!=mateConfig.maxMaleCount&&mateConfig.minMaleCount!=-1"> 最少{{ mateConfig.minMaleCount }}人 </span>
        <span v-show="mateConfig.minMaleCount!=mateConfig.maxMaleCount&&mateConfig.maxMaleCount!=-1"> 最多{{ mateConfig.maxMaleCount }}人</span>
        <span v-show="mateConfig.minMaleCount==mateConfig.maxMaleCount&&mateConfig.maxMaleCount!=-1">{{ mateConfig.maxMaleCount }}人</span>
      </span>
      <span v-if="mateConfig.minFemaleCount!=-1||mateConfig.maxFemaleCount!=-1" style="margin:0 20px;">女子:
        <span v-show="mateConfig.minFemaleCount!=mateConfig.maxFemaleCount&&mateConfig.minFemaleCount>0"> 最少{{ mateConfig.minFemaleCount }}人 </span>
        <span v-show="mateConfig.minFemaleCount!=mateConfig.maxFemaleCount&&mateConfig.maxFemaleCount>0"> 最多{{ mateConfig.maxFemaleCount }}人</span>
        <span v-show="mateConfig.minFemaleCount==mateConfig.maxFemaleCount&&mateConfig.minFemaleCount>0">{{ mateConfig.minFemaleCount }}人</span>
      </span>

    </div>
    <!--      <el-button v-if="teammateList.length<minCount" type="text" @click="addTeamMate">新增队友</el-button>-->
    <el-empty v-if="teammateList.length==0" description="暂无可选队友" />
    <div class="teammateList" style="max-height:60vh;overflow: auto;">
      <el-checkbox-group v-model="form.mates" class="ml-4" @change="changeTeammates">
        <el-checkbox disabled checked :label="personal.sex+'_'+personal.id" size="large">
          <div class="optionFlex" style="width: auto;">
            <el-avatar v-show="personal.picUrl" :size="40" :src="personal.picUrl" />
            <p class="name" style="width: 200px">{{ personal.realName }}
              <span v-show="personal.sex=='0'">(女)</span>
              <span v-show="personal.sex=='1'">(男)</span>
            </p>
            <el-select v-show="sonLevelList.length>0" v-model="personal.sonlevel" clearable>
              <el-option v-for="son in sonLevelList" :value="son.id" :label="son.name">{{ son.name }}</el-option>
            </el-select>
          </div>
        </el-checkbox>

        <div v-for="item in teammateList" :key="item.id" class="mb20">
          <el-checkbox :label="item.sex+'_'+item.id" size="large" :disabled="item.cantchosemate">
            <div class="optionFlex" style="width: auto;">
              <el-avatar v-show="item.picUrl" :size="40" :src="item.picUrl" />
              <p class="name" style="width: 200px">{{ item.realName }}
                <span v-if="item.sex=='0'">(女)</span>
                <span v-else>(男)</span>
              </p>
              <el-select v-show="sonLevelList.length>0" v-model="item.sonlevel" clearable>
                <el-option v-for="son in sonLevelList" :value="son.id" :label="son.name">{{ son.name }}</el-option>
              </el-select>
            </div>
          </el-checkbox>
          <el-button v-if="noPhotoCanSign=='0'&&(!item.picUrl)" class="ml20" type="text" @click="editPersonInfo(item.id,nowMan.groupId)">
            上传照片
          </el-button>
        </div>
      </el-checkbox-group>
    </div>
    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="chooseMateDone">确定</el-button>
      </div>
    </template>

  </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { getCurrentInstance, nextTick, onMounted } from '@vue/runtime-core'
import * as match from '@/apiPc/match'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['submitForm'])
import dialogPersonInfo from '../components/addCoach'
import _ from 'lodash'

const data = reactive({
  show: false,
  title: '选择队友',
  signType: '',
  form: {
    levelId: [],
    mates: []
  },
  athletesList: [],
  signProjectList: [],
  signGroupList: [],
  showMateList: false,
  showBtn: false,
  teammateList: [],
  rankId: '0',
  treeData: [],
  loading: false,
  mateConfig: {},
  noPhotoCanSign: null,
  coachOrLeaderFlag: null,
  personal: {},
  activeNames: [0]
})
const {
  signType,
  form,
  rules,
  loading,
  activeNames,
  athletesList,
  show,
  title,
  personal,
  rankId,
  showMateList,
  showBtn,
  teammateList,
  mateConfig,
  noPhotoCanSign,
  coachOrLeaderFlag
} = toRefs(data)
let matchId
let groupId
let levelId
let noLevelId

const open = (params) => {
  show.value = true
  matchId = params.matchId
  levelId = params.levelId
  groupId = params.groupId
  signType.value = params.signType
  title.value = params.title
  rankId.value = params.rankId || ''
  noPhotoCanSign.value = params.noPhotoCanSign
  coachOrLeaderFlag.value = params.coachOrLeaderFlag
  if (params.personal) {
    form.value.manId = params.personal.id
    personal.value = params.personal
  }
  if (groupId !== 0) {

  }
  getTeammate(levelId)
}
defineExpose({
  open
})

const nowMan = ref({})
const sonLevelList = ref([])
let sonLevelIds = []

function editPersonInfo(id, groupId) {
  const params = {
    id: id,
    groupId: groupId
  }
  proxy.$refs['editPersonInfoRef'].open(params)
}

function addTeamMate() {
  const params = {
    id: 0,
    groupId: groupId
  }
  proxy.$refs['editPersonInfoRef'].open(params)
}

const getTeammate = (levelId) => {
  const obj = {
    levelId: levelId,
    groupId: groupId,
    personId: form.value.manId
  }
  match.getCanSignLevelPerson(obj).then(res => {
    mateConfig.value = res.data
    teammateList.value = res.data.personList
    for (const p of teammateList.value) {
      p.cantchosemate = false
      if (mateConfig.value.maxMaleCount == 0 && p.sex == '1') {
        p.cantchosemate = true
      }
      if (mateConfig.value.maxFemaleCount == 0 && p.sex == '0') {
        p.cantchosemate = true
      }
    }
    getSonLevels(levelId)
    showMateList.value = true
    form.value.mates = []
    sonLevelIds = []
    personal.value.sonlevel = ''
  }).catch(error => {

  })
}

function getSonLevels(level) {
  sonLevelList.value = []
  match.querySonLevel(level).then(res => {
    sonLevelList.value = res.data
  })
}

let manNum = 0
let femaleNum = 0
let mates = []
const changeTeammates = (e) => {
  mates = []
  manNum = 0
  femaleNum = 0
  for (const m of e) {
    const arr = m.split('_')
    mates.push(arr[1])
    if (personal.value.id == arr[1]) {
      continue
    }
    if (arr[0] == '1') {
      manNum++
    } else {
      femaleNum++
    }
  }
  // console.log(mates, mateConfig.value)
  for (const p of teammateList.value) {
    if (mateConfig.value.maxMaleCount != -1 && manNum == mateConfig.value.maxMaleCount && p.sex == '1' && mates.indexOf(p.id) == -1) {
      p.cantchosemate = true
    } else if (mateConfig.value.maxFemaleCount != -1 && femaleNum == mateConfig.value.maxFemaleCount && p.sex == '0' && mates.indexOf(p.id) == -1) {
      p.cantchosemate = true
    } else if (mates.indexOf(p.id) == -1 && mateConfig.value.maxCount != -1 && (mates.length - 1) == mateConfig.value.maxCount) {
      p.cantchosemate = true
    } else {
      p.cantchosemate = false
    }
  }
}
const mateClose = () => {
  mates = []
  form.value.mates = []
  sonLevelIds = []
  teammateList.value = []
}

function chooseMateDone() {
  if (mateConfig.value.minMaleCount != '-1' && manNum < mateConfig.value.minMaleCount) {
    ElMessage.warning(`至少选择${mateConfig.value.minMaleCount}个男队友`)
    return
  }
  if (mateConfig.value.maxMaleCount != '-1' && manNum > mateConfig.value.maxMaleCount) {
    ElMessage.warning(`最多选择${mateConfig.value.maxMaleCount}个男队友`)
    return
  }
  if (mateConfig.value.minFemaleCount != '-1' && femaleNum < mateConfig.value.minFemaleCount) {
    ElMessage.warning(`至少选择${mateConfig.value.minFemaleCount}个女队友`)
    return
  }
  if (mateConfig.value.maxFemaleCount != '-1' && femaleNum > mateConfig.value.maxFemaleCount) {
    ElMessage.warning(`最多选择${mateConfig.value.maxFemaleCount}个女队友`)
    return
  }
  if ((mates.length < mateConfig.value.minCount) && mateConfig.value.minCount > 0) {
    ElMessage.warning(`至少选择${mateConfig.value.minCount}个队友`)
    return
  }
  const athleteIds = []
  console.log('mates', mates)
  for (const p of teammateList.value) {
    if (mates.indexOf(p.id) != -1) {
      if (sonLevelList.value.length > 0 && !p.sonlevel) {
        ElMessage.warning(`请分配级别`)
        return
      }
      sonLevelIds.push(p.sonlevel)
      athleteIds.push(p.id)
    }
  }
  if (sonLevelList.value.length > 0 && !personal.value.sonlevel) {
    ElMessage.warning(`请分配级别`)
    return
  }
  sonLevelIds.push(personal.value.sonlevel)
  athleteIds.push(personal.value.id)
  if (sonLevelList.value.length == 0) {
    sonLevelIds = []
  }
  const obj = {
    levelId: noLevelId,
    athleteIds: athleteIds.toString(),
    sonLevelIds: sonLevelIds.toString() || '',
    groupId: groupId,
    teamId: rankId.value || ''
  }
  // 半提交
  saveOne(obj)
}

const saveOne = (obj) => {
  loading.value = true
  match.sportsmanDone(obj).then(res => {
    if (res.msg.indexOf('Exception:') > -1) {
      const msg = res.msg.slice(10)
      ElMessage({
        type: 'warning',
        message: msg
      })
      // form.value.mates = []
      sonLevelIds = []
      return
    }
    sonLevelIds = []
    // form.value.mates = []
    showMateList.value = false
    sonLevelList.value = []
    emit('submitForm')
  }).catch(err => {
    // 取消这个勾
    sonLevelIds = []
  })
}

</script>

<style lang="scss" scoped>
.optiontitle {
  font-size: 14px;
  padding: 0 10px;
  line-height: 1;
  margin: 10px 0;
  border-left: 2px solid #1ab394;
}

.optionFlex {
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: 200px;

  .name {
    margin: 0 20px;
    font-size: 16px;
  }
}

.el-radio-group {
  width: 100%;
  display: block;
}

.athleteBox {
  height: 80px;
  display: flex;
  align-items: center;

  :deep(.el-radio__label) {
    display: flex;
    align-items: center;
    margin: 0 20px;
  }

  .el-radio__inner {
    scale: 1.5;
  }

  .name {
    margin: 0 20px;
    font-size: 16px;
  }
}

.athleteBox:hover {
  background: #efefef;
}

.tip {
  font-size: 13px;
  color: #999;
  margin: 10px 0;

  i {
    color: red;
    margin: 0 4px 0 0;
  }
}

p.title {
  font-size: 16px;
  margin: 0 0 15px;
}

:deep(.el-collapse-item) {
  background: #FBFCFD;
  margin: 0 0 16px;
  padding: 0 15px;
}

:deep(.el-collapse-item__wrap) {
  background: #FBFCFD;
  border: none;
  padding: 0 10px;
}

:deep(.el-collapse) {
  border: none;
}

:deep(.el-collapse-item__header) {
  border: none;
  background: #ececec;
  padding: 0 0 0 10px;    font-size: 15px;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0;
}

:deep(.el-checkbox__input.is-disabled+span.el-checkbox__label) {
  color: #4C5359;
}

.fake-collapse-item {
  background: #FBFCFD;
  margin: 0 0 16px;
  padding: 0 15px;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__label){
  font-size: 16px;
}
.teammateList :deep(.el-checkbox.el-checkbox--large) {
  height: auto;
}
</style>