<template>
  <div>
    <div class="panel-box">
      <h3 class="train-h3">个人信息</h3>
      <el-descriptions :column="4" :style="{'--el-fill-color-blank':'#f9f9f9'}">
        <el-descriptions-item label="姓名：">{{ personal.name }}</el-descriptions-item>
        <el-descriptions-item label="会员编号：">{{ personal.perCode }}</el-descriptions-item>
        <el-descriptions-item label="有效期：">{{ parseTime(personal.validityDate,'{y}-{m}-{d}') }}</el-descriptions-item>
        <el-descriptions-item label="段位：">{{ (personal.levelDuan && personal.levelDuan!=0)? (szToHz(personal.levelDuan)+'段/品') :'--' }}</el-descriptions-item>
        <el-descriptions-item label="教练员等级：">{{ personal.coachLabel?.name||'--' }}</el-descriptions-item>
        <el-descriptions-item label="裁判员等级：">{{ personal.refereeLabel?.name||'--' }}</el-descriptions-item>
        <el-descriptions-item label="晋级官等级：">{{ personal.examinerJiLabel?.name||'--' }}</el-descriptions-item>
        <el-descriptions-item label="晋段官等级：">{{ personal.examinerDuanLabel?.name||'--' }}</el-descriptions-item>
      </el-descriptions>

      <h3 class="train-h3">培训科目</h3>
      <el-checkbox-group v-model="form.trainIds" @change="checkRelateTrain">
        <el-row :gutter="20">
          <el-col v-for="t in trainList" :key="t.id" :class="{delText:t.disabled}" :span="12">
            <div class="kmitem">
              <el-checkbox :label="t.id" :checked="t.required" :disabled="t.required || t.disabled">
                <div class="ffsp">
                  <span style="color: #000">{{ t.name }}</span>
                  <div>
                    <span style="color: #BF3031">￥{{ t.price }}</span>
                    <span style="color: #000">人/次</span>
                  </div>
                </div>
                <div class="mt10">
                  <span>报名限制条件：</span>
                  <span v-if="signRules[t.twoSubjectId]?.openFlag">
                    <span>等级</span><span>{{ signRules[t.twoSubjectId]?.name }}</span>
                    <span>段位</span><span>{{ signRules[t.twoSubjectId]?.duanStr }}</span>
                    <span>年限</span><span>{{ signRules[t.twoSubjectId]?.limitStr }}</span>
                  </span>
                  <span v-else>
                    --
                  </span>
                </div>
              </el-checkbox>
            </div>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <el-empty v-if="trainList.length==0" />

      <h3 class="train-h3">考试科目</h3>
      <el-checkbox-group v-model="form.examIds">
        <el-row :gutter="20">
          <el-col v-for="t in examList" :key="t.id" :span="12" :class="{delText:(t.disabled || !t.passRelate)}">
            <div class="kmitem">
              <el-checkbox :label="t.id" :checked="t.required" :disabled="t.required || t.disabled || !t.passRelate">
                <div>
                  <span style="color: #000">{{ t.name }}</span>
                  <span style="color: #BF3031">￥{{ t.price }}</span>
                  <span style="color: #000">人/次</span>
                </div>
                <div class="mt10 mb10">
                  <span>报名限制条件：</span>
                  <span v-if="signRules[t.twoSubjectId]?.openFlag">
                    <span>等级</span><span>{{ signRules[t.twoSubjectId]?.name }}</span>
                    <span>段位</span><span>{{ signRules[t.twoSubjectId]?.duanStr }}</span>
                    <span>年限</span><span>{{ signRules[t.twoSubjectId]?.limitStr }}</span>
                  </span>
                  <span v-else>
                    --
                  </span>
                </div>
                <div>
                  <span>关联培训:</span>
                  <span>{{ t.relateTrainNames||'--' }}</span>
                </div>
              </el-checkbox>
            </div>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <el-empty v-if="examList.length==0" />

    </div>
    <div class="panel-footer text-center">
      <el-button class="back" type="" round @click="prev">上一步</el-button>
      <el-button type="primary" round @click="submitForm()">提交审核</el-button>
    </div>

    <el-dialog v-model="bankShow" title="线下支付" width="400px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="单位名称" label-class-name="w100px">{{ bankInfo.name }}</el-descriptions-item>
        <el-descriptions-item label="开户行">{{ bankInfo.bank }}</el-descriptions-item>
        <el-descriptions-item label="账户">{{ bankInfo.account }}</el-descriptions-item>
        <el-descriptions-item label="打款金额">{{ totalAmount }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer text-center">
          <el-button type="primary" round @click="sure">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, reactive, watch } from 'vue'
import { getCurrentInstance, onMounted } from '@vue/runtime-core'
import * as train from '@/apiPc/train'
import { toRefs } from '@vueuse/shared'
import { useRoute } from 'vue-router'
import { szToHz } from '@/utils/ruoyi'
import _ from 'lodash'


const emit = defineEmits(['prev', 'publish'])
const { proxy } = getCurrentInstance()
const route = useRoute()

const props = defineProps({
  activity: {
    type: Object,
    default: () => {}
  },
  personal: {
    type: Object,
    default: () => {}
  },
  examList: {
    type: Array,
    default: () => []
  },
  trainList: {
    type: Array,
    default: () => []
  }
})

const bankInfo = computed(() => {
  if (props.activity.receivingInfo) {
    return JSON.parse(props.activity.receivingInfo)
  } else {
    return {}
  }
})

const data = reactive({
  form: {
    trainIds: [],
    examIds: []
  },
  signRules: {},
  bankShow: false,
  totalAmount: null
})
const { form, signRules, bankShow, totalAmount } = toRefs(data)

onMounted(() => {
  getRules()
})

function getRules() {
  Promise.all([
    train.getCoachRules(),
    train.getRefereeRules(),
    train.getExaminerJiRules(),
    train.getExaminerDuanRules()
  ]).then((res) => {
    _.each(res, (r) => _.each(r.data, (d) => {
      signRules.value[d.id] = d
    }))
  })
}

watch([() => Object.keys(signRules.value).length, () => props.trainList.length], (val) => {
  if (val[0] && val[1]) {
    checkCanSign(props.trainList, 1)
    checkCanSign(props.examList, 2)

    // 考试关联培训
    fillRelateTrain()
    checkRelateTrain()
  }
})

function checkCanSign(list, flag) {
  _.each(list, (l) => {
    if (l.requiredFlag == '1') {
      l.required = true
      switch (flag) {
        case 1:// 培训
          form.value.trainIds.push(l.id)
          break
        case 2:// 考试
          form.value.examIds.push(l.id)
          break
      }
    }
    if (l.twoSubjectId && signRules.value[l.twoSubjectId.toString()]) {
      const rule = signRules.value[l.twoSubjectId]
      // 有报名条件
      if (rule.openFlag) {
        let currLevel, currYear
        const currDuan = parseInt(props.personal.levelDuan || 0)
        switch (l.parentSubjectId) {
          case 100:// 教练
            currLevel = parseInt(props.personal.coachLabel?.type || 0)
            currYear = parseInt(props.personal.coachLabel?.yearLimit || 0)
            if (!(currLevel >= parseInt(rule.type) && currDuan >= parseInt(rule.duan) && currYear >= parseInt(rule.limit))) {
              l.disabled = true
            }
            break
          case 200:// 裁判
            currLevel = parseInt(props.personal.refereeLabel?.type || 0)
            currYear = parseInt(props.personal.refereeLabel?.yearLimit || 0)
            if (!(currLevel >= parseInt(rule.type) && currDuan >= parseInt(rule.duan) && currYear >= parseInt(rule.limit))) {
              l.disabled = true
            }
            break
          case 300:// 晋级
            if (!(currDuan >= parseInt(rule.duan))) {
              l.disabled = true
            }
            break
          case 400:// 晋段
            currLevel = parseInt(props.personal.examinerDuanLabel?.type || 0)
            if (!(currLevel >= parseInt(rule.type) && currDuan >= parseInt(rule.duan))) {
              l.disabled = true
            }
            break
        }
      }
    }
  })
}

function fillRelateTrain() {
  _.each(props.examList, (e) => {
    if (e.relateTrainIds) {
      const trainNames = []
      _.each(e.relateTrainIds.split(','), (id) => {
        const train = _.find(props.trainList, (t) => t.id == id)
        trainNames.push(train?.name || '关联错误的培训')
      })
      e.relateTrainNames = trainNames.join('，')
    }
  })
}

function checkRelateTrain() {
  _.each(props.examList, (e) => {
    e.passRelate = true
    if (e.relateTrainIds) {
      if (_.some(e.relateTrainIds.split(','), (id) => form.value.trainIds.indexOf(id) == -1)) {
        e.passRelate = false
      }
    }
  })
}

function submitForm() {
  if (form.value.trainIds.length == 0) {
    proxy.$modal.msgError('请选择培训科目')
    return
  }

  if (_.some(form.value.trainIds, (id) => {
    const train = _.find(props.trainList, (t) => t.id == id)
    return train.disabled
  })) {
    proxy.$modal.msgError('选中了不满足报名条件的培训科目，无法提交审核')
    return
  }

  if (_.some(form.value.examIds, (id) => {
    const exam = _.find(props.examList, (t) => t.id == id)
    return exam.disabled || !exam.passRelate
  })) {
    proxy.$modal.msgError('选中了不满足报名条件的考试科目，无法提交审核')
    return
  }

  let amount = _.chain(props.trainList)
    .filter((t) => form.value.trainIds.indexOf(t.id) > -1)
    .sumBy((t) => parseFloat(t.price))
    .valueOf()

  amount += _.chain(props.examList)
    .filter((e) => form.value.examIds.indexOf(e.id) > -1)
    .sumBy((e) => parseFloat(e.price))
    .valueOf()

  totalAmount.value = amount.toFixed(2)
  bankShow.value = true
}

function sure() {
  form.value.activityId = route.params.id
  train.commitSign(form.value).then(() => {
    proxy.$modal.alertSuccess('提交成功，待审核').finally(() => {
      emit('publish')
    })
  })
}

function prev() {
  emit('prev')
}

</script>

<style scope lang="scss" scoped>
.panel-box{
  border:1px solid #F5766A;
  padding:10px 20px;
}
.train-h3{
  font-size: 16px;
  font-weight: 600;
  color: var(--el-color-primary);
  padding-left: 20px;
  border-left: 3px solid var(--el-color-primary) ;
 }
.back{
  border:1px solid var(--el-color-primary) ;
  color:var(--el-color-primary)
}

.row-bg{
  background: #F9F9F9;
  border-radius: 2px;
  padding: 20px;
  div{
    font-size: 14px;
    font-weight: 400;
    color: #4C5359;
    padding: 5px;
  }
  span{
    font-size: 14px;
    font-weight: 400;
    color: #000000;
  }
}
.app-container {
  padding: 0;
  background: #f5f7f9;
}

.panel-footer .el-button--success {
  background: linear-gradient(270deg, #39dba7, #38ef7d);
  border: none;
  padding: 0 40px;
  font-size: 16px;
}

.signForm {
  .el-form-item__label {
    color: #4c5359;
  }
}

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

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

.threeFour {
  width: 100%;
}

:deep(.el-upload--picture-card) {
  width: 120px;
  height: 160px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px;
  height: 160px;
}

.red {
  color: #f56c6c;
}

//多选框
.checkbox{
  :deep(.el-form-item__content){
    margin-left: 20px!important;
    width: 100% !important;
  }
  :deep(.el-checkbox){
    width: 100%;
    border:1px solid #DCDFE6;
    padding:7px;
  }
  :deep(.el-checkbox__label){
    width: 100% !important;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
}
.kmitem{padding: 10px;margin-bottom: 10px;
  border: 1px solid #DCDFE6;
  :deep(.el-checkbox){height: auto;width: 100%}
  .ffsp{display: flex;justify-content:space-between;width: 100%;}
  :deep(.el-checkbox__label){  flex: 1 1 auto}
}
.delText{opacity: 0.6;
  .kmitem{background: #efefef;}
}
.required{opacity: 1!important;
  .kmitem{background: #fff;}
}
:deep(.el-descriptions__body .el-descriptions__table .el-descriptions__cell){
  padding: 8px 0 8px 15px;
}
:deep(.el-descriptions__label){
  color: #4C5359;}
:deep(.el-descriptions__content){
  color: #000000;}
</style>