<template>
  <view class="app-container">
    <view v-if="!detailData" class="no-text">
      <image src="/static/image/no-data.png"></image>
      <view class="texts">暂无数据</view>
    </view>

    <block v-else>
      <view class="count-container">
        <view class="item">
          <view>¥{{ detailData.shouldAmount || '0' }}</view>
          <view>应缴金额</view>
        </view>
        <view class="item">
          <view>¥{{ (detailData.payableAmount || 0) - (detailData.refundAmount || 0) }}</view>
          <view>质保金余额</view>
        </view>
      </view>

      <view class="info-container">
        <view class="title">个人信息</view>
        <view class="row">服务人员姓名：{{ detailData.workerName }}</view>
        <view class="row">服务人员电话：{{ detailData.mobile }}</view>
        <view class="row">服务人员身份证：{{ detailData.idCard }}</view>
      </view>

      <view class="list-container">
        <block v-if="detailData && detailData.workerWarrantyPrices && detailData.workerWarrantyPrices.length > 0">
          <block v-for="(item, index) in detailData.workerWarrantyPrices" :key="index">
            <view class="item">
              <view class="left">
                <view class="title">质保金{{ item.type === 'A' ? '退还' : '扣除' }}</view>
                <view class="date">{{ item.time }}</view>
              </view>
              <view class="right">{{ item.type === 'A' ? '+' : '-' }}{{ item.price }}</view>
            </view>
          </block>
        </block>
        <view v-else class="no-text">
          <image src="/static/image/no-data.png"></image>
          <view class="texts">暂无记录</view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailData: {}
    }
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.getDetail()
  },

  onLoad() {
    this.getDetail()
  },

  methods: {
    // 获取详情
    getDetail() {
      this.$api
        .post('/user/warranty')
        .then(res => {
          this.detailData = res.data
        })
        .finally(() => {
          uni.stopPullDownRefresh()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.count-container {
  display: flex;
  height: 160rpx;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #f7f7f7;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120rpx;
    border-right: 1px solid #e5e5e5;
    &:last-child {
      border-right: none;
    }
    view {
      &:nth-child(1) {
        font-size: 40rpx;
        color: #e95505;
      }
      &:nth-child(2) {
        font-size: 28rpx;
        color: #666666;
        margin-top: 20rpx;
      }
    }
  }
}

.info-container {
  background: #ffffff;
  padding: 0 30rpx 15rpx;
  .title {
    line-height: 80rpx;
    font-size: 32rpx;
    color: #6da7ff;
  }
  .row {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
    line-height: 32rpx;
  }
}

.list-container {
  padding: 0 30rpx;
  margin-top: 20rpx;
  .item {
    background: #ffffff;
    padding: 30rpx;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:last-child {
      margin-bottom: 0;
    }
    .left {
      .title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
      }
      .date {
        font-size: 28rpx;
        color: #666666;
        margin-top: 30rpx;
      }
    }
    .right {
      font-size: 32rpx;
      color: #e95505;
    }
  }
}
.no-text {
  height: 100%;
  width: 100%;
  margin-top: 50rpx;
  text-align: center;
  image {
    width: 450rpx;
    height: 250rpx;
    margin-bottom: 40rpx;
  }
  .texts {
    color: #cccccc;
    font-size: 28rpx;
  }
}
</style>
