<template>
  <page-meta>
    <navigation-bar
      :title="filmList[filmId].name"
      background-color="#FFFFFF"
      front-color="#000000"
    />
  </page-meta>
  <view class="schedulelist">
    <loadSke :loading="listLoading">
      <view class="des-box">
        <view class="address">
          {{ cinemaName }}
        </view>
        <swiper
          class="swiper-box"
          :current="current"
          previous-margin="200rpx"
          next-margin="200rpx"
          @change="swiperChange"
        >
          <swiper-item
            v-for="(item, index) in scheduleListKey"
            :key="index"
            class="swiper-item"
          >
            <image
              class="image"
              :class="{ imgBig: current == index }"
              :src="filmList[item].pic"
              mode="heightFix"
              :draggable="false"
            />
          </swiper-item>
        </swiper>
        <view class="film-name">
          {{ filmList[filmId].name }}
        </view>
        <view class="film-des">
          {{ filmList[filmId].duration }}分钟 |
          {{ filmList[filmId].filmTypes }} | {{ filmList[filmId].cast }}
        </view>
      </view>

      <view class="schedule-box">
        <van-tabs
          :active="tabActive"
          :swipe-threshold="3"
          animated
          swipeable
          id="tabs"
          @change="tabsChange"
        >
          <van-tab
            class="schedule-tab"
            :title="$utils.getDay(index) + ' ' + index.slice(5)"
            v-for="(item, index) in scheduleItem"
            :key="index"
          >
            <view
              v-for="(sonItem, sonIndex) in item"
              :key="sonItem.showId"
              class="schedule-des"
              @click="clickBuy(sonItem)"
            >
              <view class="left-box">
                <view class="item-box">
                  <text>{{ sonItem.showTime.slice(11, 16) }}</text>
                  <text class="bottom-text">{{ sonItem.duration }}分钟</text>
                </view>
                <view class="type-box">
                  <text>{{ sonItem.planType }}</text>
                  <text class="bottom-text">{{ sonItem.hallName }}</text>
                </view>
              </view>
              <view class="right-box">
                <view class="price-box">
                  <text
                    >{{
                      (
                        (sonItem.netPrice / 100) *
                        (sonItem.netPrice > 3900
                          ? discountRule.upDiscountRate
                          : discountRule.downDiscountRate) *
                        filmDiscount
                      ).toFixed(2)
                    }}元</text
                  >
                  <text class="bottom-text old-price"
                    >{{ sonItem.netPrice / 100 }}元</text
                  >
                </view>
                <button v-if="discontinued(sonItem.stopSellTime)">购 票</button>
                <button
                  v-else
                  type="default"
                  style="
                    background: linear-gradient(
                      90deg,
                      #c0c0c0,
                      #c0c0c0,
                      #c0c0c0
                    );
                  "
                >
                  停 售
                </button>
              </view>
            </view>
          </van-tab>
        </van-tabs>
      </view>
    </loadSke>
  </view>
</template>

<script>
export default {
  data: () => ({
    listLoading: true,
    tabActive: 0,
    current: 0,
    cinemaId: null,
    filmId: null,
    cinemaName: "",
    scheduleList: {},
    scheduleListKey: null,
    discountRule: {},
    scheduleItem: {},
  }),
  computed: {
    filmList() {
      let list = {};
      this.$store.state.cinema.filmList.map((val) => {
        list[val.filmId] = val;
      });
      return list;
    },
    filmDiscount() {
      return this.$store.state.cinema.filmDiscount;
    },
  },
  onLoad: function (option) {
    this.cinemaId = option.cinemaId;
    this.filmId = option.filmId;
  },
  mounted() {
    this.init();
  },
  methods: {
    clickBuy(item) {
      let flag = this.discontinued(item.stopSellTime);
      if (flag) {
        this.$utils.goPage(`/pages/cinema/selectseat`, null, {
          showItem: item,
        });
      }
      return;
    },
    init() {
      this.listLoading = true;
      this.$api.cinema
        .getScheduleList({
          cinemaId: this.cinemaId,
        })
        .then((res) => {
          this.scheduleList = {};
          this.discountRule = res.data.data.discountRule;
          this.$store.commit("SET_DISCOUNTRULE", res.data.data.discountRule);
          this.cinemaName = res.data.data.list[0].cinemaName;
          res.data.data.list.sort((a, b) => {
            return this.$utils.dayjs(a.showTime).isAfter(b.showTime) ? 1 : -1;
          });
          res.data.data.list.forEach((val) => {
            this.scheduleList[val.filmId] ||
              (this.scheduleList[val.filmId] = {});
            this.scheduleList[val.filmId][val.showDate] ||
              (this.scheduleList[val.filmId][val.showDate] = []);
            this.scheduleList[val.filmId][val.showDate].push(val);
          });
          this.scheduleListKey = Object.keys(this.scheduleList);
          //定位影片位置
          this.filmId == "undefined" && (this.filmId = this.scheduleListKey[0]);
          this.scheduleItem = this.scheduleList[this.filmId];
          this.current = this.scheduleListKey.indexOf(this.filmId);
          this.listLoading = false;
          setTimeout(() => {
            this.selectComponent("#tabs").resize();
          }, 500);
        });
    },
    discontinued(date) {
      let flag =
        new Date(date.replace(/-/g, "/")).getTime() -
          new Date().getTime() -
          1000 * 60 * 60 >
        0;
      return flag;
    },
    swiperChange(e) {
      this.current = e.detail.current;
      this.filmId = this.scheduleListKey[this.current];
      this.scheduleItem = {};
      this.$nextTick(() => {
        this.scheduleItem = this.scheduleList[this.filmId];
        this.$nextTick(() => {
          this.tabActive = 0;
          this.selectComponent("#tabs").resize();
        });
      });
    },
    tabsChange(e) {
      this.tabActive = e.detail.index;
    },
  },
};
</script>

<style lang="scss" scoped>
.button-box {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background-color: #ffffff;

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

  .active {
    border-bottom: 2px solid red;
  }
}

.des-box {
  background-image: url(https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/filmBg.png);
  padding: 35rpx 30rpx;
  box-sizing: border-box;
  width: 100%;
  height: 690rpx;

  .address {
    font-size: 30rpx;
    font-weight: bold;
    color: #ffffff;
  }

  .swiper-box {
    margin: auto;
    margin-top: 60rpx;
    padding: 0 45rpx;
    box-sizing: border-box;
    width: 100%;
    height: 270rpx;

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

    .image {
      height: 86%;
    }

    .imgBig {
      height: 100% !important;
    }
  }

  .film-name {
    margin-top: 53rpx;
    text-align: center;
    font-size: 30rpx;
    font-weight: bold;
    color: #ffffff;
  }

  .film-des {
    margin-top: 19rpx;
    text-align: center;
    font-size: 22rpx;
    font-weight: 400;
    color: #ffffff;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.schedule-box {
  width: 100vw;
  min-height: calc(
    100vh - 690rpx + 122rpx - 10px - env(safe-area-inset-bottom) / 2
  );
  padding-bottom: calc(10px + env(safe-area-inset-bottom) / 2);
  background-color: #ffffff;
  border-radius: 50rpx 50rpx 0px 0px;
  margin-top: -122rpx;
  overflow: hidden;

  .schedule-tab {
    overflow-y: auto;
  }

  .schedule-des {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    margin-top: 50rpx;

    .bottom-text {
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
      width: 100rpx;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .left-box {
      width: 50%;
      display: flex;
      justify-content: space-around;
      align-items: stretch;

      .item-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        &:first-child {
          font-size: 40rpx;
          font-weight: 400;
          color: #0f0404;
        }
      }

      .type-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        &:first-child {
          font-size: 26rpx;
          font-weight: 400;
          color: #0f0404;
        }

        :last-child {
          width: 220rpx !important;
        }
      }
    }

    .right-box {
      width: 45%;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .price-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        &:first-child {
          font-size: 36rpx;
          font-weight: 400;
          color: #e31919;
        }

        .old-price {
          text-decoration: line-through;
        }
      }

      button {
        margin: 0;
        width: 126rpx;
        height: 60rpx;
        background: linear-gradient(90deg, #e31818, #ed3e24, #ed4f24);
        border-radius: 30rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #ffffff;
        white-space: nowrap;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
