<template>
  <!-- 红包弹窗 -->
  <div class="hb_dialog">
    <!-- 提现失败 时间 -->
    <div class="dialog_box" v-if="dialog === 'cashFailedTime'">
      <div class="title">提现失败</div>
      <div class="content">活动结束后24小时内领取</div>
      <div class="btn" @click="onCloseDialog">确定</div>
    </div>

    <!-- 提现失败 活动结束 金额不足 -->
    <div class="dialog_box" v-if="dialog === 'cashFailedAmount'">
      <div class="title">提现失败</div>
      <div class="content">红包提现需满1000元才可领取</div>
      <div class="btn" @click="onShowDraw">获取更多</div>
    </div>

    <!-- 提现成功 联系客服 -->
    <div class="dialog_box" v-if="dialog === 'cashSuccess'">
      <div class="title">提现成功</div>
      <div class="content">请联系客服进行提现</div>
      <div class="btn" @click="onService">确定</div>
    </div>

    <!-- 提现成功 测试 -->
    <!-- <div class="dialog_box dialog_title_none" v-if="dialog === 'cashSuccess'">
      <div class="title"></div>
      <div class="content">提现成功</div>
      <div class="btn" @click="onCloseDialog">确定</div>
    </div> -->

    <!-- 领取红包 领取成功 -->
    <div
      v-if="dialog === 'receiveSuccess'"
      class="dialog_box dialog_title_none receive_success"
    >
      <div class="title"></div>
      <div class="content">领取成功</div>
      <div class="btn" @click="onCloseDialog">确定</div>
    </div>

    <!-- 提现失败 获取更多-> 十二宫格转盘 -->
    <div class="luck_dialog" v-if="dialog === 'luckDraw'">
      <LuckDraw :awardList="awardList" v-on="$listeners" />
      <div class="close" @click="onCloseDialog"></div>
    </div>

    <!-- 提现失败 活动过期 -->
    <div class="dialog_box" v-if="dialog === 'cashFailedTimeOut'">
      <div class="title">提现失败</div>
      <div class="content">活动已结束</div>
      <div class="btn" @click="onCloseDialog">确定</div>
    </div>

    <!-- 抽奖成功弹窗 -->
    <div class="award_small_box" v-if="dialog === 'luckDrawAward'">
      <div class="award_small">
        <div class="title">恭喜你</div>
        <div class="award_name">获得</div>
        <div class="award_img">
          <img :src="myAwardList[0].img" alt="" />
        </div>
        <!-- 单抽 -->
        <div class="to_bag" @click="toUse">去领取</div>

        <!-- 单抽才有关闭 -->
        <div class="close" @click="onCloseDialog"></div>
      </div>
    </div>

    <!-- 绑定角色 -->
    <div class="bind_role" v-if="dialog === 'bindRole'">
      <div class="bind_role_content">
        <ActiveTitle active="hb" acitveTitle="绑定角色" />
        <!-- 选择角色 -->
        <div class="select_role_box clear">
          <!-- <div class="left">请选择角色</div> -->
          <div class="right">
            <DropdownList
              :listData="gameRoleList"
              :currentItem="currentRoleInfo"
              @onSelectChange="onSelectChange"
            />
          </div>

          <div>当前选择</div>
          <div class="server_name">
            服务器：{{
              (currentRoleInfo && currentRoleInfo.server_name) || "暂无"
            }}
          </div>
          <div class="role_name">
            角色：{{ (currentRoleInfo && currentRoleInfo.role_name) || "暂无" }}
          </div>
        </div>
        <!-- 确认 取消 -->
        <div class="btn_box clear">
          <div class="confirm" @click="onSelectRole">确定</div>
          <div class="cancel" @click="onCloseDialog">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LuckDraw from "@/components/Active/LuckDraw/LuckDraw"; // 大转盘
import ActiveTitle from "@/components/Active/ActiveTitle/ActiveTitle"; // 标题
import DropdownList from "@/components/DropdownList/DropdownList"; // 下拉列表
import { mapState } from "vuex";
export default {
  name: "HbDialog",
  components: {
    LuckDraw,
    ActiveTitle,
    DropdownList,
  },
  data() {
    return {
      currentRoleInfo: {
        name: "请选择角色",
      },
    };
  },
  props: {
    // 弹窗组件
    dialog: {
      type: String,
      default: "",
    },
    // 奖品列表
    awardList: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["gameRoleList"]),
    // 抽中的奖品
    myAwardList() {
      return this.$store.state.hb.myAwardList;
    },
    // 用户活动信息
    userHbInfo() {
      return this.$store.state.hb.userHbInfo;
    },
    // 当前选择的用户角色
    gameRoleInfo() {
      return this.$store.state.gameRoleInfo;
    },
  },
  watch: {
    // 抽中的奖品
    myAwardList: {
      handler: function () {},
      deep: true,
      immediate: true,
    },
    // 用户活动信息
    userHbInfo: {
      handler: function () {},
      deep: true,
      immediate: true,
    },
    // 所有角色列表
    gameRoleList: {
      handler: function () {},
      deep: true,
      immediate: true,
    },
    // 当前选择的用户角色
    gameRoleInfo: {
      handler: function () {},
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    const currentItem = {
      name: "请选择角色",
    };
    this.currentRoleInfo = this.gameRoleInfo || currentItem;
  },
  methods: {
    // 确定 关闭当前弹窗
    onCloseDialog() {
      this.$emit("onShowDialog", "");
    },

    // 显示折扣转盘
    onShowDraw() {
      this.$emit("onShowDialog", "luckDraw");
    },

    // 联系客服
    onService() {
      this.$emit("onShowDialog", "");
      this.$emit("onService");
    },

    // 去领取
    toUse() {
      this.$emit("onUseCash");
    },

    // 改变选择的角色
    onSelectChange(options) {
      this.currentRoleInfo = options;
    },

    // 选择角色
    onSelectRole() {
      if (!this.currentRoleInfo.server_id) {
        this.$toast.text("请选择角色!");
        return;
      }
      this.$emit("onSelectRole", this.currentRoleInfo);
    },
  },
};
</script>

<style lang='less'>
.hb_dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  background-color: rgba(0, 0, 0, 0.6);
  overflow-y: auto;

  .dialog_box {
    width: 500 / @rem;
    height: 350 / @rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -175 / @rem;
    margin-left: -250 / @rem;
    background-color: #fff;
    border-radius: 20px;

    .title {
      height: 60 / @rem;
      line-height: 60 / @rem;
      margin: 30 / @rem auto;
    }

    .content {
      width: 80%;
      line-height: 60 / @rem;
      margin: 0 auto;
    }

    .btn {
      width: 180 / @rem;
      height: 70 / @rem;
      line-height: 70 / @rem;
      margin: 50 / @rem auto 0;
      border-radius: 35 / @rem;
      background-image: linear-gradient(#fbd8c0, #ff092e);
      color: #fff;
      cursor: pointer;
    }
  }

  .dialog_title_none {
    .title {
      margin: 20 / @rem auto;
    }
  }

  // 大转盘
  .luck_dialog {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;

    .luck_draw {
      width: 620 / @rem;
      height: 620 / @rem;
      position: relative;
      top: 50%;
      left: 50%;
      margin-left: -310 / @rem;
      margin-top: -370 / @rem;

      .award_list .award_center img {
        width: 80%;
        margin-top: 18%;
      }
    }

    .close {
      width: 70 / @rem;
      height: 70 / @rem;
      position: absolute;
      top: 950 / @rem;
      left: 50%;
      margin-left: -35 / @rem;
      background: url("~@/assets/image/hb/luckDraw/close.png") 100%;
      background-size: cover;
    }
  }

  // 大转盘奖品
  .award_small_box {
    color: #f4434e;

    .award_small {
      width: 510 / @rem;
      height: 630 / @rem;
      margin: -380 / @rem -255 / @rem 0;
      position: absolute;
      top: 50%;
      left: 50%;
      background: url("~@/assets/image/hb/luckDraw/awardBgSmall.png") 100%;
      background-size: cover;

      .title {
        margin-top: 80 / @rem;
        height: 70 / @rem;
        line-height: 70 / @rem;
        font-size: 34 / @rem;
      }
      .award_name {
        margin-top: 20 / @rem;
      }
      .award_img {
        width: 40%;
        margin: 40 / @rem auto;
        img {
          width: 100%;
        }
      }

      .to_bag {
        width: 320 / @rem;
        height: 70 / @rem;
        line-height: 70 / @rem;
        color: #fff;
        margin: 0 auto;
        background-image: linear-gradient(#fbd8c0, #ff092e);
        border-radius: 35 / @rem;
        cursor: pointer;
      }

      .next_box {
        .to_bag {
          margin-top: -10 / @rem;
        }
      }

      .jump {
        float: right;
        margin-top: 10 / @rem;
        margin-right: 30 / @rem;
        font-size: 28 / @rem;
      }
    }

    .close {
      width: 70 / @rem;
      height: 70 / @rem;
      margin: 150 / @rem auto;
      background: url("~@/assets/image/hb/luckDraw/close.png") 100%;
      background-size: cover;
    }
  }

  // 绑定角色
  .bind_role {
    .bind_role_content {
      width: 500 / @rem;
      height: 600 / @rem;
      background-color: #fff;
      border-radius: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -250 / @rem;
      margin-top: -300 / @rem;

      // 标题
      .active_title {
        width: 200 / @rem;
        margin: -40 / @rem auto 0;

        .active_title_hb {
          width: 100%;
          height: 80 / @rem;
          line-height: 80 / @rem;

          &::before {
            left: 200 / @rem;
          }
        }
      }

      // 选择角色
      .select_role_box {
        width: 90%;
        line-height: 80 / @rem;
        margin: 40 / @rem auto;

        .dropdown_list {
          .show_value,
          ul {
            border: 2px solid #ffcac6;
          }

          ul {
            margin-top: -2px;

            li {
              &.active {
                background-color: #ffcac6;
              }
            }
          }
        }
      }

      // 按钮
      .btn_box {
        height: 80 / @rem;
        line-height: 80 / @rem;

        .confirm,
        .cancel {
          width: 120 / @rem;
          height: 60 / @rem;
          line-height: 60 / @rem;
          margin-left: 85 / @rem;
          float: left;
          border-radius: 30 / @rem;
          color: #fff;
          cursor: pointer;
        }

        .confirm {
          background-image: linear-gradient(#fbd8c0, #ff092e);
        }
        .cancel {
          background-image: linear-gradient(#dfdfdf, #b3b3b3);
        }
      }
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .hb_dialog {
    .dialog_box {
      width: 250 / @rem;
      height: 175 / @rem;
      margin-top: -87.5 / @rem;
      margin-left: -125 / @rem;

      .title {
        height: 30 / @rem;
        line-height: 30 / @rem;
        margin: 15 / @rem auto;
      }

      .content {
        width: 90%;
        line-height: 30 / @rem;
      }

      .btn {
        width: 90 / @rem;
        height: 40 / @rem;
        line-height: 40 / @rem;
        margin: 25 / @rem auto 0;
        border-radius: 20 / @rem;
      }
    }

    .dialog_title_none {
      .title {
        margin: 10 / @rem auto;
      }
    }

    .luck_dialog {
      .luck_draw {
        width: 300 / @rem;
        height: 300 / @rem;
        margin-left: -150 / @rem;
        margin-top: -150 / @rem;
      }

      .close {
        width: 35 / @rem;
        height: 35 / @rem;
        margin-left: 180 / @rem;
        top: 195 / @rem;
      }
    }

    // 大转盘奖品
    .award_small_box {
      .award_small {
        width: 250 / @rem;
        height: 306 / @rem;
        margin: -190 / @rem -127.5 / @rem 0;

        .title {
          margin-top: 40 / @rem;
          height: 35 / @rem;
          line-height: 35 / @rem;
          font-size: 17 / @rem;
        }
        .award_name {
          margin-top: 10 / @rem;
        }
        .award_img {
          margin: 20 / @rem auto;
        }

        .to_bag {
          width: 160 / @rem;
          height: 35 / @rem;
          line-height: 35 / @rem;
          border-radius: 17.5 / @rem;
        }

        .next_box {
          .to_bag {
            margin-top: -5 / @rem;
          }
        }

        .jump {
          margin-top: 5 / @rem;
          margin-right: 15 / @rem;
          font-size: 14 / @rem;
        }
      }

      .close {
        width: 35 / @rem;
        height: 35 / @rem;
        margin: 50 / @rem auto;
      }
    }

    // 绑定角色
    .bind_role {
      .bind_role_content {
        width: 250 / @rem;
        height: 300 / @rem;
        margin-left: -125 / @rem;
        margin-top: -150 / @rem;

        // 标题
        .active_title {
          width: 100 / @rem;
          margin: -20 / @rem auto 0;

          .active_title_hb {
            height: 40 / @rem;
            line-height: 40 / @rem;

            &::before {
              left: 100 / @rem;
            }
          }
        }

        // 选择角色
        .select_role_box {
          width: 90%;
          line-height: 40 / @rem;
          margin: 20 / @rem auto;
        }

        // 按钮
        .btn_box {
          height: 40 / @rem;
          line-height: 40 / @rem;

          .confirm,
          .cancel {
            width: 60 / @rem;
            height: 30 / @rem;
            line-height: 30 / @rem;
            margin-left: 42.5 / @rem;
            border-radius: 15 / @rem;
          }
        }
      }
    }
  }
}

// ipad 横屏
@media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .hb_dialog {
    .luck_dialog {
      .close {
        width: 35 / @rem;
        height: 35 / @rem;
        top: 520 / @rem;
        left: 50%;
        margin-left: -17.5 / @rem;
      }
    }
  }
}
</style>