<template>
  <view>
    <view class="header">
      <view class="rect">
        <van-search
          :value="value"
          shape="round"
          background=""
          placeholder="输入系列课标题"
        />
        <view
          style="display: flex; padding: 30rpx; justify-content: space-between"
        >
          <input
            readonly
            v-model="province.province"
            @click="
              () => {
                provinceShow = true;
              }
            "
            placeholder="省份"
            class="header-province"
            type="text"
          />
          <input
            readonly
            @click="isShowCity()"
            v-model="city.city"
            placeholder="地市"
            class="header-city"
            type="text"
          />
        </view>
      </view>
      <van-popup round position="bottom" :show="provinceShow">
        <van-picker
          show-toolbar
          title="考场省份"
          :columns="examProviceList"
          value-key="province"
          @confirm="getExamCityAndProviceName"
          @cancel="
            () => {
              provinceShow = false;
            }
          "
        />
      </van-popup>
      <van-popup round position="bottom" :show="cityShow">
        <van-picker
          show-toolbar
          title="考场地市"
          :columns="examCityList"
          value-key="city"
          @confirm="getCityName"
          @cancel="
            () => {
              cityShow = false;
            }
          "
        />
      </van-popup>
    </view>
    <view class="content">
      <view class="list">
        <van-empty
          v-if="examRoomList.length == 0"
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="该城市无视频"
        />
        <view
          class="list-item"
          v-for="(item, index) in examRoomList"
          @click="goCourseCatalog(item)"
          :key="index"
        >
          <image mode="widthFx" :src="item.image" class="list-item-image">
          </image>
          <view
            style="
              display: flex;
              align-items: space-between;
              flex-wrap: wrap;
              width: 355rpx;
            "
          >
            <view class="list-item-text1">{{ item.name }}</view>
            <view class="list-item-text2">共3节</view>
          </view>
          <view class="list-item-border"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from "@/api";

export default {
  data() {
    return {
      query: {},
      cityShow: false,
      provinceShow: false,
      examProviceList: [],
      examCityList: [],
      examRoomList: [],
      province: { provinceId: "", province: "" },
      city: { cityId: "", city: "" },
    };
  },
  methods: {
    isShowCity() {
      if (this.province.provinceId && this.province.province) {
        this.cityShow = true;
      } else {
        uni.showToast({
          title: "请先选择省份",
          icon: "none",
        });
      }
    },
    goCourseCatalog(item) {
      uni.navigateTo({
        url:
          "/otherPages/courseCatalog/index?examId=" +
          item.id +
          "&price=" +
          item.price,
      });
    },
    getCityName(e) {
      this.city = e.detail.value;
      this.cityShow = false;
      api.exam
        .studentExamInfoList({
          ...this.city,
        })
        .then((res) => {
          this.examRoomList = res.rows;
        });
    },
    getExamCityAndProviceName(e) {
      this.provinceShow = false;
      this.province = e.detail.value;
      api.exam
        .studentExamInfoCityProviceId(e.detail.value.provinceId)
        .then((res) => {
          this.examCityList = res.data;
        });
      console.log(e);
    },
  },
  onLoad(query) {
    this.query = query;
    api.user.studentVipExamList().then(res=>{
      uni.setStorageSync('examRoom',res.rows)

    })
    api.exam.studentExamInfoIp().then((res) => {
      this.city.city = res.data.cityName;
      this.city.cityId = Number(res.data.city);
      this.province.province = res.data.provinceName;
      this.province.provinceId = Number(res.data.province);
      api.exam
        .studentExamInfoList({
          ...this.city,
        })
        .then((result) => {
          this.examRoomList = result.rows;
          if (result.rows.length == 0) {
            this.city.city = "";
            this.city.cityId = "";
            this.province.province = "";
            this.province.provinceId = "";
          }
        });
    });
    api.exam.studentExamInfoGetProvice().then((res) => {
      this.examProviceList = res.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: auto;

  border-radius: 0px 0px 45px 45px;
  .rect {
    width: 100%;
    height: 406rpx;
    background-image: url("https://ct.zzxcx.net/ctjk/mp-wx/buyVideo/headerBg.png");
    background-size: 100%;
  }
  .arc {
    width: 100%;
    height: 100rpx;
  }
  .header-province {
    width: 336rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 40rpx;
    font-size: 26rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
  }
  .header-city {
    width: 336rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 40rpx;
    font-size: 26rpx;
    padding-left: 30rpx;
    box-sizing: border-box;
  }
}
.content {
  width: 100%;
  padding: 0rpx 30rpx;
  transform: translateY(-80px);

  .list {
    width: 100%;
    background: #edf4ff;
    height: 1200rpx;
    box-shadow: 0px 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.1);

    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .list-item {
      width: 100%;
      padding: 30rpx;
      padding-top: 30rpx;
      padding-bottom: 0rpx;
      display: flex;
      height: 220rpx;
      flex-wrap: wrap;
    }
    .list-item-image {
      width: 248rpx;
      height: 138rpx;
      margin-right: 24rpx;
    }
    .list-item-border {
      width: 100%;
      background: #e0e0e0;
      height: 2rpx;
    }
    .list-item-text1 {
      width: 305rpx;
      color: #0a1a33;
      font-size: 30rpx;
      padding-top: 10rpx;
    }
    .list-item-text2 {
      width: 305rpx;
      color: #8a9099;
      font-size: 26rpx;
    }
  }
}
</style>