<template>
  <up-modal
    :show="showGuessModalVisible"
    :width="335"
    :closeOnClickOverlay="true"
    :showConfirmButton="false"
    :showCancelButton="false"
    @close="hideGuessModal"
  >
    <view class="guess-model w-full" v-if="gameInfo">
      <view class="slot-content">
        <view class="guess-title">
          <view class="flex-1 flex-center">{{ gameInfo.home_field }}</view>
          <view class="w-170rpx text-center">VS</view>
          <view class="flex-1 flex-center">{{ gameInfo.away }}</view>
        </view>
        <view
          :class="[successGuessClass, readonly ? 'pointer-events-none' : '']"
        >
          <template v-if="gameInfo.score_type == 1">
            <view class="guess-table">
              <view class="row herder-title">
                <view class="table-td col-12">单</view>
              </view>
              <view class="table-tr row row-3">
                <view class="row-title table-td row-3 col-10">胜</view>
                <view class="row-content">
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '1:0',
                        active: userGuess === '1:0',
                      }"
                      @click="userGuessChange('1:0')"
                      >1:0</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '2:0',
                        active: userGuess === '2:0',
                      }"
                      @click="userGuessChange('2:0')"
                      >2:0</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '2:1',
                        active: userGuess === '2:1',
                      }"
                      @click="userGuessChange('2:1')"
                      >2:1</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '3:0',
                        active: userGuess === '3:0',
                      }"
                      @click="userGuessChange('3:0')"
                      >3:0</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '3:1',
                        active: userGuess === '3:1',
                      }"
                      @click="userGuessChange('3:1')"
                      >3:1</view
                    >
                  </view>
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '3:2',
                        active: userGuess === '3:2',
                      }"
                      @click="userGuessChange('3:2')"
                      >3:2</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '4:0',
                        active: userGuess === '4:0',
                      }"
                      @click="userGuessChange('4:0')"
                      >4:0</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '4:1',
                        active: userGuess === '4:1',
                      }"
                      @click="userGuessChange('4:1')"
                      >4:1</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '4:2',
                        active: userGuess === '4:2',
                      }"
                      @click="userGuessChange('4:2')"
                      >4:2</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '5:0',
                        active: userGuess === '5:0',
                      }"
                      @click="userGuessChange('5:0')"
                      >5:0</view
                    >
                  </view>
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '5:1',
                        active: userGuess === '5:1',
                      }"
                      @click="userGuessChange('5:1')"
                      >5:1</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '5:2',
                        active: userGuess === '5:2',
                      }"
                      @click="userGuessChange('5:2')"
                      >5:2</view
                    >
                    <view
                      class="table-td col-6"
                      :class="{
                        'result-active': gameScore === '胜其他',
                        active: userGuess === '胜其他',
                      }"
                      @click="userGuessChange('胜其他')"
                      >胜其他</view
                    >
                  </view>
                </view>
              </view>
              <view class="table-tr row row-1">
                <view class="row-title table-td row-1 col-10">平</view>
                <view class="row-content">
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '0:0',
                        active: userGuess === '0:0',
                      }"
                      @click="userGuessChange('0:0')"
                      >0:0</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '1:1',
                        active: userGuess === '1:1',
                      }"
                      @click="userGuessChange('1:1')"
                      >1:1</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '2:2',
                        active: userGuess === '2:2',
                      }"
                      @click="userGuessChange('2:2')"
                      >2:2</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '3:3',
                        active: userGuess === '3:3',
                      }"
                      @click="userGuessChange('3:3')"
                      >3:3</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '平其他',
                        active: userGuess === '平其他',
                      }"
                      @click="userGuessChange('平其他')"
                      >平其他</view
                    >
                  </view>
                </view>
              </view>
              <view class="table-tr row row-3">
                <view class="row-title table-td row-3 col-10">负</view>
                <view class="row-content">
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '0:1',
                        active: userGuess === '0:1',
                      }"
                      @click="userGuessChange('0:1')"
                      >0:1</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '0:2',
                        active: userGuess === '0:2',
                      }"
                      @click="userGuessChange('0:2')"
                      >0:2</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '0:3',
                        active: userGuess === '0:3',
                      }"
                      @click="userGuessChange('0:3')"
                      >0:3</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '0:4',
                        active: userGuess === '0:4',
                      }"
                      @click="userGuessChange('0:4')"
                      >0:4</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '0:5',
                        active: userGuess === '0:5',
                      }"
                      @click="userGuessChange('0:5')"
                      >0:5</view
                    >
                  </view>
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '1:2',
                        active: userGuess === '1:2',
                      }"
                      @click="userGuessChange('1:2')"
                      >1:2</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '1:3',
                        active: userGuess === '1:3',
                      }"
                      @click="userGuessChange('1:3')"
                      >1:3</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '1:4',
                        active: userGuess === '1:4',
                      }"
                      @click="userGuessChange('1:4')"
                      >1:4</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '1:5',
                        active: userGuess === '1:5',
                      }"
                      @click="userGuessChange('1:5')"
                      >1:5</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '2:3',
                        active: userGuess === '2:3',
                      }"
                      @click="userGuessChange('2:3')"
                      >2:3</view
                    >
                  </view>
                  <view class="row-1 col-10">
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '2:4',
                        active: userGuess === '2:4',
                      }"
                      @click="userGuessChange('2:4')"
                      >2:4</view
                    >
                    <view
                      class="table-td col-2"
                      :class="{
                        'result-active': gameScore === '2:5',
                        active: userGuess === '2:5',
                      }"
                      @click="userGuessChange('2:5')"
                      >2:5</view
                    >
                    <view
                      class="table-td col-6"
                      :class="{
                        'result-active': gameScore === '负其他',
                        active: userGuess === '负其他',
                      }"
                      @click="userGuessChange('负其他')"
                      >负其他</view
                    >
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-if="gameInfo.score_type == 2">
            <view class="flex">
              <view class="flex-1 flex-center">
                <up-avatar
                  size="48"
                  mode="aspectFit"
                  :src="gameInfo.home_logo"
                ></up-avatar>
              </view>
              <view class="text-center w-170rpx text-12px text-hex-999">
                <view>{{ gameInfo.game_day }}</view>
                <view>{{ gameInfo.little_game_at }}</view>
              </view>
              <view class="flex-1 flex-center">
                <up-avatar
                  size="48"
                  mode="aspectFit"
                  :src="gameInfo.home_logo"
                ></up-avatar>
              </view>
            </view>
            <view class="type2 my-30px flex-center">
              <view
                class="h-44px flex bg-hex-eeeeef rounded-8px text-hex-303133"
              >
                <view
                  class="text-12px rounded-4px h-full flex"
                  :class="{
                    'active-a': gameScore === item,
                    active: userGuess === item,
                  }"
                  @click="userGuessChange(item)"
                  v-for="(item,index) in subsectionList"
                  :key="item"
                >
                  <view class="w-80px flex-center h-full">
                    {{ item }}
                  </view>
                  <up-line v-if="index!=subsectionList.length-1" direction="col"></up-line>
                </view>
                
              </view>
            </view>
          </template>
        </view>

        <view class="guess-btns" v-if="!readonly">
          <up-button
            class="more-btn"
            :customStyle="{
              margin: 0,
              width: '120px',
              backgroundColor: '#D9D9D9',
              color: '#000',
            }"
            shape="circle"
            text="取消"
            @click="hideGuessModal"
          ></up-button>

          <up-button
            class="more-btn"
            :customStyle="{
              margin: 0,
              width: '120px',
              backgroundColor: '#5fb358',
              color: '#fff',
            }"
            shape="circle"
            text="确定"
            @click="submitGuessResult"
          ></up-button>
        </view>
      </view>
    </view>
  </up-modal>
</template>
<script setup>
import { computed } from 'vue'
import { ref, watch, watchEffect } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  gameInfo: {
    type: Object,
    default: () => ({}),
  },
  showResult: {
    type: Boolean,
    default: false,
  },
})

const showGuessModalVisible = ref(props.show)
const subsectionList = ref(['胜', '平', '负'])
const userGuess = ref('')
const readonly = computed(() => {
  if (props.gameInfo?.has_guess || props.gameInfo?.game_at_comparison_now) {
    return true
  }
  return false
})
const gameScore = computed(() => props.gameInfo?.game_score)
// const gameScore = computed(() => '负')
const isGuess = computed(() => !!props.gameInfo?.has_guess)
const isResult = computed(() => !!props.gameInfo?.game_score)
const successGuess = computed(
  () => gameScore.value === props.gameInfo?.has_guess
)
const successGuessClass = computed(() => {
  if (!isGuess.value) {
    return ''
  }
  if (!isResult.value) {
    return ''
  }
  return successGuess.value ? 'success' : 'fail'
})

watchEffect(
  () => {
    userGuess.value = props.gameInfo?.has_guess || ''
  },
  {
    deep: true,
  }
)

watchEffect(() => {
  showGuessModalVisible.value = props.show
})

const emit = defineEmits([
  'update:show',
  'hideGuessModal',
  'submitGuessResult',
  'userGuessChange',
])
const hideGuessModal = () => {
  emit('hideGuessModal')
}
const submitGuessResult = () => {
  if (userGuess.value === '' || !userGuess.value) {
    return uni.showToast({
      title: '请选择竞猜结果',
      icon: 'none',
    })
  }

  emit('submitGuessResult', userGuess.value)
}
const userGuessChange = (score) => {
  userGuess.value = score
}

watch(
  () => showGuessModalVisible.value,
  (val) => {
    emit('update:show', val)
  }
)
</script>
<style lang="scss" scoped>
.type2 {
  .active {
    background-color: #1d2b5c;
    color: white;
  }
}
.success {
  .active {
    background-color: red !important;
    color: white;
  }
}

.fail {
  .active {
    background-color: #1d2b5c !important;
    color: white;
  }
}
.active-a {
  background-color: red !important;
  color: white;
}

.guess-model {
  .slot-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .guess-title {
    width: 100%;
    display: flex;
    // justify-content: center;
    // align-items: center;
    // gap: 58px;
  }

  .guess-table {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 12px;

    .table-td {
      border: 1px solid #bbb;
      width: 48px !important;
    }

    .table-td.result-active {
      background-color: red;
      color: #fff;
    }

    .table-td.active {
      background-color: #1d2b5c;
      color: #fff;
    }

    .row-1 {
      height: calc(30px * 1 - 2px) !important;
      line-height: calc(30px * 1 - 2px) !important;
    }

    .row-2 {
      height: calc(30px * 2 - 2px) !important;
      line-height: calc(30px * 2 - 2px) !important;
    }

    .row-3 {
      height: calc(30px * 3 - 8px) !important;
      line-height: calc(30px * 3 - 8px) !important;
    }

    .row {
      width: 300px;
      height: 30px;
      line-height: 30px;
      flex-shrink: 0;
      display: flex;
      text-align: center;

      .col-1 {
        width: calc(292px / 12 * 1);
      }

      .col-2 {
        width: calc(292px / 12 * 2);
      }

      .col-10 {
        display: flex;
        justify-content: flex-start;
        align-self: flex-start;
        flex-grow: 1;

        .table-td {
          width: 47.7px !important;
          border: 1px solid #bbb;
        }

        .col-6 {
          width: calc(47.7px * 3 + 4px) !important;
        }
      }

      .col-12 {
        width: 292px;
      }
    }

    .herder-title {
      background-color: #1d2b5c;
      color: #fff;

      .table-td {
        width: 100% !important;
      }
    }

    .row-title {
      background-color: #d9d9d9;
      width: 48px !important;
      justify-content: center !important;
    }

    .row-content {
      display: flex;
      flex-wrap: wrap;
      width: calc(300px - 48px - 3px) !important;
    }
  }

  .guess-btns {
    display: flex;
    justify-content: space-around;
    width: 300px;
    flex-shrink: 0;
  }
}
</style>
