<template>
  <view class="card" @click="jumpToOrderDetail">
    <view class="flex top">
      {{ data.title }}
    </view>
    <view :class="['tag', `tag-${data.status}`]">
      {{ statusDesc }}
    </view>
    <view class="flex row">
      <view class="row-label">联系人：</view>
      <view class="row-content">{{ data.customerName }}</view>
    </view>
    <view class="flex row">
      <view class="row-label">下单时间：</view>
      <view class="row-content">{{ data.orderDate }}</view>
    </view>
    <view class="flex row">
      <view class="row-label">联系电话：</view>
      <view class="row-content">{{ data.customerPhone }}</view>
    </view>
    <view class="bottom">
      <view class="flex row">
        <text class="row-label">总价格：</text>
        <text class="flex row-content price">¥</text><text class="highlight">{{ data.orderAmount }}</text>
      </view>
      <view class="flex btns">
        <!-- 待支付 -->
        <template v-if="data.status == 0">
          <button class="btn" @click.stop="onPay">立即支付</button>
        </template>
        <!-- 已支付 -->
        <template v-else-if="data.status == 1">
          <button class="btn" @click.stop="onContactMentor">联系导师</button>
        </template>
        <!-- 待评价 -->
        <template v-else-if="data.status == 2">
          <button class="btn" @click.stop="onComment">立即评价</button>
        </template>
        <!-- 已完成 -->
        <template v-else-if="data.status == 3">
          <button class="btn" @click.stop="onApplyService">申请售后</button>
        </template>
        <!-- 售后 -->
        <template v-else-if="data.status == 4">
          
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  const STATUS_AND_DESC_MAPPING = {
    0: '待支付',
    1: '已支付',
    2: '待评价',
    3: '已完成',
    4: '售后',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      statusDesc() {
        const { status } = this.data
        return STATUS_AND_DESC_MAPPING[status]
      },
    },
    methods: {
      onPay() {
        this.$utils.navigateTo(`/pages_order/order/orderPay/index?id=${this.data.id}`)
      },
      onContactMentor() {
        this.$emit('contatcMentor', this.data.mentorPhone)
      },
      onComment() {
        this.$emit('comment')
      },
      onApplyService() {
        // todo
        const obj = {
          id: this.data.id
        }
        this.$emit('applyService', obj)
      },
      jumpToOrderDetail() {
        if (this.data.status == 0) { // 待支付
          this.$utils.navigateTo(`/pages_order/order/orderPay/index?id=${this.data.id}`)
        } else {
          this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../styles/tag.scss';

  .card {
    position: relative;
    width: 100%;
    padding: 40rpx 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;
  }

  .tag {
    position: absolute;
    top: 0;
    right: 0;
  }

  .top {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    line-height: 1.4;
    color: #181818;
  }

  .row {
    justify-content: flex-start;
    column-gap: 4rpx;

    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 1.4;

    &-label {
      color: #8B8B8B;
    }

    &-content {
      color: #393939;
    }
  }

  .row + .row {
    margin-top: 16rpx;
  }

  .bottom {
    justify-content: space-between;

    .price {
      column-gap: 8rpx;
      font-family: PingFang SC;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 1.4;
      color: #FF4800;

      .highlight {
        font-size: 32rpx;
      }
    }

    .btns {
      flex: 1;
      justify-content: flex-end;
      column-gap: 16rpx;
    }

    .btn {
      padding: 10rpx 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;
      color: #393939;
      border: 2rpx solid #252545;
      border-radius: 32rpx;
    }
  }
</style>
