<script setup>
// 引入依赖
import api from '@/api/order'
import capi from '@/api/course'
import custom from '@/utils/custom'
import {formatDate} from '@/utils/format'
// import { toSQLLine } from '@/utils/stringFun'
// import WarningBar from '@/components/warningBar/warningBar.vue'
// import coursePool from './components/coursePool.vue'
// import exercisesPool from '@/view/course/components/exercisesPool.vue'
import {ref,onMounted,provide } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
// 变量
// const order_id = ref(0)
const orderInfo = ref({})
// 生命周期
onMounted(() => {
  // console.log(route.params)
  // order_id.value = route.params.order_id
  getOrderDetail()
})
// funstions
async function getOrderDetail() {
  const res = await api.getOrderDetail({id:route.params.order_id})
  if(res.code === 0) {
    orderInfo.value = res.data
  }
}
function getStateName(state) {
  let str = ''
  switch (state){
    case 1:
        str = '未付款'
      break;
    case 2:
        str = '已付款'
      break;
    case 3:
        str = '已过期'
      break;
  }
  return str
}
function getOrderTypeName(order_type) {
		let name = ''
		switch(order_type){
			case 1:
				name = '课程';
				break;
			case 2:
				name = '章节';
				break;
			case 3:
				name = '大章节';
				break;
			case 4:
				name = '试卷';
				break;
		}
		return name
	}
</script>
<template>
  <div>
    <!--    基本信息-->
    <div class="gva-search-box">
      <div class="baseInfo-box">
        <div class="bd-img">
          <!-- <img :src="orderInfo.cover" alt=""> -->
          <el-image
            style="width: 100px; height: 100px"
            :src="orderInfo.cover"
            :zoom-rate="1.2"
            :initial-index="4"
            fit="cover"
          />
        </div>
        <div class="bd-info">
          <div class="bdi-title">
            {{orderInfo.name}}
            <!-- <text class="tip-css">{{ getOrderTypeName(orderInfo.order_type) }}</text>   -->
            <el-tag class="ml-2" type="warning">{{ getOrderTypeName(orderInfo.order_type) }}</el-tag>
          </div>
          <div class="bdi-price" style="color:red">￥{{custom.getStdPrice(orderInfo.price)}}</div>
        </div>
      </div>
    </div>
    <!--    章节信息-->
    <div class="gva-table-box">
      <div class="detail-info-box">
        <div class="dib-item di-title">
          用户信息
        </div>
        <div class="dib-item">
          <div class="di-left">用户名称：</div>
          <div class="di-right">{{orderInfo.nickname}}</div>
        </div>
        <div class="dib-item">
          <div class="di-left">用户手机：</div>
          <div class="di-right">{{orderInfo.phone}}</div>
        </div>
        <div class="dib-item">
          <div class="di-left">用户区域：</div>
          <div class="di-right">{{custom.getProvinceName(orderInfo.province)}}</div>
        </div>
        <div class="dib-item di-title">
          订单信息
        </div>
        <div class="dib-item">
          <div class="di-left">订单编号：</div>
          <div class="di-right">{{orderInfo.order_no}}</div>
        </div>
        <div class="dib-item">
          <div class="di-left">订单详情：</div>
          <div class="di-right">{{orderInfo.desc}}</div>
        </div>
        <div class="dib-item">
          <div class="di-left">提交时间：</div>
          <div class="di-right">{{formatDate(orderInfo.CreatedAt)}}</div>
        </div>
        <div class="dib-item">
          <div class="di-left">订单状态：</div>
          <div class="di-right">{{getStateName(orderInfo.status)}}</div>
        </div>
      </div>
      <!--    操作区域-->
<!--      <div class="action-box">-->
<!--        <div class="pay-btn">去付款</div>-->
<!--      </div>-->
    </div>

  </div>
</template>
<style scoped lang="scss">
  .action-box{
    display: flex;
    margin-top: 20px;
    .pay-btn{
      background: rgb(60, 106, 112);
      color: white;
      padding: 10px 50px;
      cursor: pointer;
    }
  }
  /*章节信息*/
  .gva-search-box{
    .baseInfo-box{
      display: flex;
      .bd-img{
        img{
          width: 200px;
          height: 100px;
        }
        margin-right: 10px;
      }
      .bd-info{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .bdi-title,.bdi-price{
          // font-weight: 900;
          font-size: 18px;
        }
        .bdi-title{
          margin-bottom: 20px;
          // .tip-css{
          //   font-size: 15px;
          //   color: gray;
          //   border: 1px solid red;
          //   padding: 0 20px;
          // }
        }
        .bdi-price{
          font-weight: 900;
        }
      }
    }
  }
  /*章节信息*/
  .gva-table-box{
    .detail-info-box{
      .dib-item{
        color: gray;
        padding: 10px 0;
        display: flex;
        .di-left{
        }
      }
      .di-title{
        color: black;
        font-weight: 900;
        font-size: 15px;
      }
    }
  }
</style>
