<template>
  <view>
    <view class="BanContain">
      <view
        class="status_bar"
        :style="{ height: statusBarHeight + 'px' }"
      ></view>
      <view class="navBar" :style="{ height: titleBarHeight + 'px' }">
        <image
          class="back-img"
          src="https://ndata.zzxcx.net/ctjk/mp-wx/beforeMockExam/arrow-left.png"
          mode=""
          @click="backPre"
        ></image>
        <text class="bans-title"> 我的考场 </text>
      </view>
    </view>
    <view class="header">
      <view class="rect">
        <!-- <van-search
          shape="round"
          background=""
          placeholder="输入考场名称"
          @search="searchRoadExamRoom"
        /> -->
        <!-- <view
          style="display: flex; padding: 30rpx; justify-content: space-between"
        >
          <input
            readonly
            disabled
            v-model="province.province"
            @click="
              () => {
                provinceShow = true;
              }
            "
            placeholder="省份"
            class="header-province"
            type="text"
          />
          <input
            disabled
            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: uni.getStorageSync("roadExamProvince") || {
        provinceId: "",
        province: "",
      },
      statusBarHeight: 0,
      titleBarHeight: 0,
      city: uni.getStorageSync("roadExamCity") || {
        cityId: "",
        city: "",
      },
    };
  },
  methods: {
    backPre() {
      uni.navigateBack();
    },
    searchRoadExamRoom(e) {
      console.log(e.detail);
      api.exam
        .studentExamInfoMylist({
          name: e.detail,
        })
        .then((res) => {
          this.examRoomList = res.rows;
        });
    },
    getCurrentCity(e) {
      console.log(e);
      // uni.choosePoi({
      //   success(res){
      //     console.log(res)
      //   }

      // })
    },
    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;
      uni.setStorageSync("roadExamCity", e.detail.value);
      this.cityShow = false;
      api.exam
        .studentExamInfoMylist({
          ...this.city,
        })
        .then((res) => {
          this.examRoomList = res.rows;
        });
    },
    getExamCityAndProviceName(e) {
      this.provinceShow = false;
      this.province = e.detail.value;
      uni.setStorageSync("roadExamProvince", e.detail.value);
      api.exam
        .studentExamInfoCityProviceId(e.detail.value.provinceId)
        .then((res) => {
          this.examCityList = res.data;
        });
      console.log(e);
    },
  },
  onLoad(query) {
    let systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight;
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height;
    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
    //     .studentExamInfoMylist({
    //       ...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;
    // });
    // if (this.city.cityId && this.province.provinceId) {
    //   api.exam
    //     .studentExamInfoCityProviceId(this.province.provinceId)
    //     .then((res) => {
    //       this.examCityList = res.data;
    //     });
    api.exam.studentExamInfoMylist({}).then((res) => {
      this.examRoomList = res.rows;
    });
    // }
  },
};
</script>

<style lang="scss" scoped>
.bans-title {
  text-align: center;
  margin-left: 222rpx;
  color: #fff;
}
.BanContain {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.back-img {
  width: 10px;
  height: 17px;
  margin-left: 30rpx;
}
.navBar {
  display: flex;
  align-items: center;
  /* padding-bottom: 10rpx; */
  background-color: transparent;
}
.status_bar {
  height: var(--status-bar-height);
  width: 100%;
  background-color: transparent;
}
.header {
  width: 100%;
  height: auto;

  border-radius: 0px 0px 45px 45px;
  .rect {
    width: 100%;
    height: 624rpx;
    background-image: url("https://ct.zzxcx.net/ctjk/mp-wx/myExamRoadVideo/header_bg.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%;

  transform: translateY(-80px);

  .list {
    width: 690rpx;
    height: 1200rpx;
  
    margin: 0 auto;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .list-item {
      width: 100%;
      padding: 30rpx;
      padding-top: 30rpx;
      padding-bottom: 0rpx;
      padding-left: 20rpx;
      display: flex;
      height: 220rpx;
      flex-wrap: wrap;
      background: #fff;
      margin-bottom: 20rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      box-shadow: 0px 6rpx 12rpx 2rpx rgba(5, 61, 26, 0.1);
      border-left: 10rpx solid #3AC770;
    }
    .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>