<script setup lang="ts" name="ProposalList">
import { ref, computed, onBeforeMount, watch } from "vue";
import moment from "moment";
import { showToast } from 'vant';
import noData from "@/components/NoData.vue";

import ic_fire from "@/assets/images/ic_fire.png";
import ic_rebate from "@/assets/images/ic_rebate.png";
import ic_niubao from "@/assets/images/ic_niubao.png";

interface ProposalListProps {
  loading?: boolean;
  user_info: any;
  listTipTxt?: string;
  dataList: any[];
}

// $emits
const emit = defineEmits(["reload-list", "show-experts"]);
// $emits

// $props
const props = withDefaults(defineProps<ProposalListProps>(), {
  loading: false,
  user_info: {},
  listTipTxt: "没有更多数据了",
  dataList: () => [],
});
// $props

// $data
const dividendType = ref<string>("0");
const proposalType = ref<string>("all");

// $data

// $computed
const experts_list = computed(() => {
  let sourceList = props.dataList?.map((item: any) => ({ ...item })) || [];
  if (proposalType.value === "result") {
    sourceList = sourceList.filter((item: any) => {
      let type =
        item?.type1 == "方案"
          ? item?.prediction_type?.replace("让球胜平负", "让球")
          : item?.type1;
      return type === "胜平负";
    });
  } else if (proposalType.value === "other") {
    sourceList = sourceList.filter((item: any) => {
      let type =
        item?.type1 == "方案"
          ? item?.prediction_type?.replace("让球胜平负", "让球")
          : item?.type1;
      return type !== "胜平负";
    });
  }

  if (dividendType.value === "0") {
    const current_list = sourceList.filter(
      (item: any) => item.current_win_count > 2
    );
    current_list.sort((a, b) => b.current_win_count - a.current_win_count);
    const history_list = sourceList.filter(
      (item: any) => item.current_win_count <= 2
    );
    history_list.sort((a, b) => b.max_win_count - a.max_win_count);
    sourceList = [...current_list, ...history_list];
  } else if (dividendType.value === "1") {
    const current_list = sourceList.filter(
      (item: any) => item.top_20_win_rate >= 45
    );
    current_list.sort((a, b) => b.top_20_win_rate - a.top_20_win_rate);
    const history_list = sourceList.filter(
      (item: any) => item.top_20_win_rate < 45
    );
    history_list.sort((a, b) => b.max_win_count - a.max_win_count);
    sourceList = [...current_list, ...history_list];
  } else if (dividendType.value === "2") {
    const current_list = sourceList.filter(
      (item: any) => item.accuracy_rate > 50
    );
    current_list.sort((a, b) => b.accuracy_rate - a.accuracy_rate);
    const history_list = sourceList.filter(
      (item: any) => item.accuracy_rate <= 50
    );
    history_list.sort((a, b) => b.max_win_count - a.max_win_count);
    sourceList = [...current_list, ...history_list];
  }

  return sourceList;
});
// $computed

// $methods
const changeProposalType = (value: string) => {
  if (proposalType.value !== value) {
    proposalType.value = value;
  } else {
    proposalType.value = "";
  }
};

const goDetail = ({ type1, exporter_safe_code, type3 }: any) => {
  if (type1 == "胜平负") {
    location.href = `/jczq/scheme-${exporter_safe_code}-${type3}?zq&from_vue`;
  } else if (type1 == "2串1计划") {
    location.href = `/model/crosstalk_list/${exporter_safe_code}?zq&from_vue`;
  } else if (type1 == "方案") {
    location.href = `/jczq/scheme2-${exporter_safe_code}-${type3}?zq&from_vue`;
  } else {
    showToast(`未知标签 ${type1}`);
  }
};

const reload_list_debounce = () => {
  emit("reload-list");
};

const resetFilter = () => {
  dividendType.value = "0";
  proposalType.value = "all";
};
// $methods

// $lifecycle
onBeforeMount(() => {});
// $lifecycle

// $expose
defineExpose({ resetFilter });
// $expose
</script>

<template>
  <div class="proposal-list-component">
    <div class="tools-wrapper">
      <div class="button-group">
        <div
          :class="['same-btn', proposalType === 'all' && 'active']"
          @click="changeProposalType('all')"
        >
          全部
        </div>
        <div
          :class="['same-btn', proposalType === 'result' && 'active']"
          @click="changeProposalType('result')"
        >
          胜平负
        </div>
        <div
          :class="['same-btn', proposalType === 'other' && 'active']"
          @click="changeProposalType('other')"
        >
          其他
        </div>
      </div>

      <div class="switch-capsule">
        <div
          :class="['switch-item', dividendType === '0' && 'active']"
          @click="dividendType = '0'"
        >
          连红
        </div>
        <div
          :class="['switch-item', dividendType === '1' && 'active']"
          @click="dividendType = '1'"
        >
          红利
        </div>
        <div
          :class="['switch-item', dividendType === '2' && 'active']"
          @click="dividendType = '2'"
        >
          正确率
        </div>
      </div>
    </div>

    <div class="proposal-list-wrapper">
      <template v-if="experts_list.length">
        <div
          v-for="(item, index) in experts_list"
          :key="`${item.user_id}-${index}-${Math.random()}`"
          class="proposal-item acce-render"
          @click="
            goDetail({
              type1: item?.type1,
              exporter_safe_code: item?.exporter_safe_code,
              type3: item?.type3,
            })
          "
        >
          <div class="top-content">
            <div class="left">
              <div
                :style="`background-image: url(${item?.exporter_face_image});`"
                class="bg-icon icon"
              >
                <div v-if="item?.tj_num" class="point">
                  {{ item?.tj_num || 1 }}
                </div>
              </div>
              <div class="info">
                <div class="name">{{ item?.exporter_nick_name }}</div>
                <div class="tag-box">
                  <div v-if="item.tag_content" class="tag">
                    {{ item.tag_content }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right">
              <template v-if="dividendType === '2' && item?.accuracy_rate > 50">
                <div class="main-tag font-16">{{ item?.accuracy_rate }}%</div>
                <div class="font-12">正确率</div>
              </template>
              <template
                v-if="dividendType === '1' && item?.top_20_win_rate >= 45"
              >
                <div class="main-tag font-16">{{ item?.top_20_win_rate }}%</div>
                <div class="font-12">盈利率</div>
              </template>
              <template
                v-if="
                  (dividendType === '2' && item?.accuracy_rate <= 50) ||
                  (dividendType === '1' &&
                    item?.top_20_win_rate < 45 &&
                    item?.max_win_count > 2)
                "
              >
                <div v-if="item?.max_win_count" class="main-tag font-16">
                  {{ `最高${item?.max_win_count}连红` }}
                </div>
              </template>
              <template v-if="dividendType === '0'">
                <div v-if="item?.current_win_count || item?.max_win_count" class="main-tag font-16">
                  {{
                    item?.current_win_count > 2
                      ? `${item?.current_win_count}连红`
                      : item?.max_win_count > 2
                      ? `最高${item?.max_win_count}连红`
                      : ""
                  }}
                </div>
              </template>
            </div>
          </div>
          <div class="desc-content">
            {{ item.title }}
          </div>
          <div class="bottom-content">
            <span>{{
              item?.type1 == "方案"
                ? item?.prediction_type?.replace("让球胜平负", "让球")
                : item?.type1
            }}</span>
            <span style="color: #cccccc; margin: 0 12px"
              >{{ moment(item.issue_value).format("MM/DD HH:mm") }}截止</span
            >
            <div
              :style="`background-image: url(${ic_fire});`"
              class="bg-icon fire-icon"
            ></div>
            <span style="color: #cccccc">{{ item.hot_count }}</span>
            <div class="currency">
              <div
                v-if="user_info?.is_bzf"
                :style="`background-image: url(${ic_rebate});`"
                class="bg-icon rebate-tag"
              ></div>
              <template v-if="item?.price">
                <img class="currency-icon" :src="ic_niubao" />
                <span>{{ item?.price }}牛宝</span>
              </template>
              <span v-else>免费</span>
            </div>
          </div>
        </div>
      </template>
      <noData
        v-if="!loading && !experts_list.length"
        nodata_message="暂无数据！"
      ></noData>
    </div>
    <div
      v-if="experts_list?.length"
      class="list-loading-tip acce-render"
      @click="reload_list_debounce"
    >
      {{ props.listTipTxt }}
    </div>
  </div>
</template>

<style lang="scss">
.proposal-list-component {
  background-color: #fff;

  .tools-wrapper {
    padding: 10px;
    font-size: 12px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    color: #000;

    .button-group {
      display: flex;
      justify-content: space-evenly;

      .same-btn {
        margin: 0 4px;
        width: 64px;
        height: 32px;
        line-height: 32px;
        border-radius: 25px;
        cursor: pointer;
        border: 1px solid #f2f2f2;
      }

      .active {
        color: #f73336;
        background-color: #fee4e2;
      }
    }

    .switch-capsule {
      display: flex;
      height: 30px;
      border-radius: 25px;
      overflow: hidden;
      margin: 0 4px;
      padding: 3px;
      background-color: #f7f7f7;

      .switch-item {
        width: 50px;
        height: 100%;
        color: #b3b3b3;
        text-align: center;
        border-radius: 12px;
        line-height: 24px;
      }

      .active {
        color: #f73336 !important;
        background-color: #fff !important;
      }
    }
  }

  .proposal-list-wrapper {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .proposal-item {
      padding: 10px;
      border-bottom: 1px solid #f6f6f6;
      .top-content {
        display: flex;
        justify-content: space-between;

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

        .info {
          font-size: 16px;
          padding-left: 10px;
        }

        .name {
          font-size: 15px;
        }

        .right {
          color: #e52526;
          text-align: center;
        }

        .tag-box {
          margin-top: 4px;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }

        .tag {
          margin-right: 4px;
          font-size: 12px;
          padding: 0 8px;
          color: #e52526;
          border-radius: 10px;
          border: 1px solid #e52526;
        }

        .main-tag {
          color: #ffffff;
          padding: 1px 10px;
          margin-right: -10px;
          border-top-left-radius: 13px;
          border-bottom-left-radius: 13px;
          background-image: linear-gradient(
            to right,
            #e52526,
            #f24140,
            #f8595e,
            #fa5b5f
          );
        }

        .icon {
          width: 44px;
          height: 44px;
          background-color: #aaa;
          border-radius: 50%;

          color: #fff;

          .point {
            float: right;
            width: 14px;
            height: 14px;
            font-size: 12px;
            line-height: 14px;
            text-align: center;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
            background-color: #ff0000;
          }
        }
      }
      .desc-content {
        padding: 10px 0;
        font-size: 16px;
      }
      .bottom-content {
        position: relative;
        display: flex;
        font-size: 12px;
        align-items: center;

        .currency {
          color: #e52526;
          margin-left: auto;

          display: flex;
          align-items: center;
          justify-content: center;
        }

        .currency-icon {
          width: 12px;
          height: 12px;
          margin-right: 2px;
        }

        .rebate-tag {
          width: 75px;
          height: 16px;
          margin-right: 6px;
        }
      }
    }
  }

  .fire-icon {
    width: 12px;
    height: 12px;
    margin-right: 2px;
    border-radius: 50%;
  }

  .font-12 {
    font-size: 12px;
    text-align: right;
    font-family: PingFangSC, PingFang SC !important;
  }

  .font-16 {
    font-size: 16px;
    font-weight: 700 !important;
    font-family: DINAlternate, DINAlternate !important;
  }
}

.bg-icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50%;
}
</style>
