<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="服务记录" left-arrow />

    <view class="msg-content flex flex-col flex-v-center">
      <text class="msg-explain">您尚未签约家庭医生团队</text>
      <view class="msg-state flex flex-center flex-col">
        <image class="msg-state-img"
          src="https://zongzhi.xuqidata.com:5009/xq-ssg/77a936e8a4f5e388816ad7b3d31625336f782a62e946cf2d32517db731ce1cc5.png">
        </image>
        <text class="msg-state-text">未申请</text>
      </view>
      <view class="msg-bth">申请签约家庭医生</view>
    </view>

    <view class="service-record" v-if="serveRecordList.length">
      <view class="record-item" :data-item="item" @tap="headleDetails" v-for="(item, index) in serveRecordList"
        :key="index">
        <view class="record-item-one">
          <view :class="'info-state ' + (item.evaluationStatus === 0 ? 'hint-orange' : 'hint-green')">
            {{ item.evaluationStatus === 0 ? '待评价' : '已评价' }}</view>
          <view class="info flex flex-v-center">
            <text>服务对象：</text>
            <text class="prominent">{{ item.doctorName }}</text>
          </view>
          <view class="info flex flex-v-center">
            <text>服务形式：</text>
            <text class="prominent-bth evaluate-commonly">{{ item.serveWay }}</text>
          </view>
          <view class="info flex flex-v-center">
            <text>服务医生：</text>
            <text class="prominent-bth evaluate-commonly">{{ item.doctorName }}</text>
          </view>
          <view class="info flex flex-v-center">
            <text>服务评价：</text>
            <text class="prominent-bth evaluate-commonly">{{ item.evaluationGrade || '暂无' }}</text>
          </view>
        </view>

        <view class="record-item-two info">
          <text>服务时间：</text>
          <text class="prominent">{{ item.createTime }}</text>
          <van-icon name="arrow" color="#c1c1c1" size="32rpx" />
        </view>
      </view>
    </view>
    <van-empty v-else description="暂无数据" />
  </view>
</template>

<script>
  // packages/public/pages/service-record/service-record.js
  // const app = getApp();
  // const { publicApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        options: {},
        serveRecordList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0
      };
    },
    onLoad(options) {
      this.setData({
        options
      });
      this.serveRecordPageApi();
    },
    onReachBottom() {
      if (this.serveRecordList.length === this.total) {
        return;
      }
      this.serveRecordPageApi(false);
    },
    methods: {
      async serveRecordPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        const {
          data: {
            list = [],
            total = 0
          }
        } = await publicApi.serveRecordPageApi(params);
        if (list.length) {
          if (reset) {
            const _goodsList = list;
          } else {
            const _goodsList = this.serveRecordList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.setData({
            serveRecordList: _goodsList
          });
        }
      },

      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 10
        };
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },

      headleDetails(event) {
        const {
          item
        } = event.currentTarget.dataset;
        uni.navigateTo({
          url: `/packages/public/pages/service-record/service-record-detail?name=服务记录详情&id=${item.id}`
        });
      }
    }
  };
</script>
<style lang="less">
  .msg-content {
    padding-top: 150rpx;
    display: none;

    .msg-explain {
      font-size: 36rpx;
      font-weight: 500;
      color: #666666;
      line-height: 50rpx;
    }

    .msg-state {
      margin-top: 80rpx;
      width: 400rpx;
      height: 300rpx;
      background: url('https://zongzhi.xuqidata.com:5009/xq-ssg/77a936e8a4f5e388816ad7b3d31625336f782a62e946cf2d32517db731ce1cc5.png');
      background-size: 100% 100%;

      .msg-state-img {
        width: 108rpx;
        height: 108rpx;
      }

      .msg-state-text {
        margin-top: 25rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #666666;
        line-height: 32rpx;
      }
    }

    .msg-bth {
      margin-top: 149rpx;
      width: 500rpx;
      height: 100rpx;
      background: #0091ff;
      border-radius: 50rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 100rpx;
      text-align: center;
    }
  }

  .service-record {
    padding: 20rpx 24rpx;

    .info {
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      line-height: 28rpx;
      margin-bottom: 25rpx;

      &:last-of-type {
        margin-bottom: 0;
      }

      .prominent {
        margin-left: 4rpx;
        color: #333333;
      }

      .prominent-bth {
        margin-left: 4rpx;
        width: 80rpx;
        height: 38rpx;
        box-shadow: 2rpx 2rpx 2rpx 0px rgba(247, 114, 31, 0.1);
        border-radius: 19rpx;
        font-size: 20rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 38rpx;
        text-align: center;
      }
    }

    .hint-green {
      background: #00b477;
    }

    .hint-orange {
      background: linear-gradient(270deg, #f38a36 0%, #ff9d4f 100%);
    }

    .evaluate-difference {
      background: #fe3b53;
    }

    .evaluate-commonly {
      background: #f7721f;
    }

    .evaluate-satisfied {
      background: #00b477;
    }
  }

  .record-item {
    margin-top: 20rpx;

    &:first-child {
      margin-top: 0;
    }

    .record-item-one {
      width: 100%;
      background: #f9f9f9;
      border-radius: 8rpx 8rpx 0 0;
      padding: 32rpx;
      position: relative;

      .info-state {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 24rpx;
        line-height: 24rpx;
        color: #fff;
        font-weight: 400;
        border-radius: 0px 16rpx 0px 40rpx;
        padding: 12rpx 22rpx 12rpx 36rpx;
      }
    }

    .record-item-two {
      width: 100%;
      background: #efefef;
      border-radius: 0 0 8rpx 8rpx;
      padding: 21rpx 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .prominent {
        flex: 1;
      }
    }
  }
</style>