<template>
  <view class="course-box">
    <van-toast id="van-toast" />
    <view class="top-bar flex">
      <view class="top-left flex flex_between_center">
        <view class="top-title one_line"> 电子合同 </view>
        <van-image
          width="58rpx"
          height="66rpx"
          fit="cover"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/icon5.png"
        />
      </view>
      <view class="top-right">
        <view class="course-name one_line"> {{ CourseName||'暂无课程' }} </view>
        <view class="section-name one_line"> {{ data.length }}个合同 </view>
      </view>
    </view>
    <van-empty description="暂无数据" v-if="data.length === 0" />
    <view
      v-for="(item, index) in data"
      :key="index"
      class="data-item"
      v-if="data.length > 0"
	  @click="seeDetail(item)"
    >
      <view class="contract-name">
        <van-image
          width="22rpx"
          height="24rpx"
          fit="cover"
          src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/contracticon.png"
          style="margin-right: 10rpx"
        />
        {{ item.ContractNo }}</view
      >
      <view class="contract-con" v-if="item.Type === 1">订单合同</view>
      <view class="contract-con" v-if="item.Type === 2">退课合同</view>
      <van-image
        width="80rpx"
        height="80rpx"
        fit="cover"
        src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/contract.png"
        class="contract-icon"
        v-if="item.IsCompanySeal === 1"
      />
    </view>
  </view>
</template>

<script>
import {
  ref,
  reactive,
  toRefs,
  toRef,
  getCurrentInstance,
  watch,
  computed,
  onMounted,
} from "vue";
import { getContract } from "../../api/index";
let { CourseName } = uni.getStorageSync("indexData");
export default {
  setup() {
    let data = reactive({
      pageloading: false,
      CourseName,
      data: [],
    });
    let methods = {
      async getdata() {
        let res = await getContract({});
        if (res) {
          if (res.Data.length === 0) {
            data.pageloading = true;
          } else {
            data.pageloading = false;
          }
          console.log(69, res);
          data.data = res.Data;
        }
      },
	  seeDetail(item){
		uni.navigateTo({
			url:'/pages/contract/contractDetail?Id='+item.Id+'&&Type='+item.Type
		})
	  }
    };
    onMounted(() => {
      that.getdata();
    });
    let that = methods;
    return {
      ...toRefs(data),
      ...methods,
    };
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: "电子合同",
    });
  },
};
</script>

<style scoped>
.course-box {
  padding: 30rpx;
}
.top-bar {
  height: 120rpx;
  margin-bottom: 28rpx;
}
.top-left {
  width: 220rpx;
  height: 120rpx;
  background-color: #d9faf1;
  border-radius: 20rpx;
  margin-right: 30rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.top-title {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #0f1b35;
}
.top-right {
  width: 440rpx;
  height: 120rpx;
}
.course-name {
  box-sizing: border-box;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  height: 50%;
  line-height: 70rpx;
}
.section-name {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  height: 50%;
  line-height: 50rpx;
}
.data-item {
  margin-top: 30rpx;
  box-sizing: border-box;
  padding: 30rpx;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(36, 36, 36, 0.2);
  position: relative;
}
.contract-icon {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
}
.contract-name {
  max-width: 80%;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #111111;
  margin-bottom: 20rpx;
}
.contract-con {
  max-width: 80%;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-left: 30rpx;
}
/deep/.van-skeleton {
  padding: 0;
}
</style>
