<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" :left-text="options.name" left-arrow />

    <view class="page-content">
      <view class="cell cell-defale">
        <view class="cell-left">服务形式</view>
        <view class="cell-right">{{ serveRecordObj.serveWay }}</view>
      </view>
      <view class="cell">
        <view class="cell-left">服务内容</view>
        <view class="cell-multiline">{{ serveRecordObj.serveContent }}</view>
      </view>
      <view class="cell cell-defale">
        <view class="cell-left">服务对象</view>
        <view class="cell-right">{{ serveRecordObj.patientName }}</view>
      </view>
      <view class="cell cell-defale">
        <view class="cell-left">服务医生</view>
        <view class="cell-right">{{ serveRecordObj.doctorName }}</view>
      </view>
      <view class="cell cell-defale">
        <view class="cell-left">时间</view>
        <view class="cell-right">{{ serveRecordObj.createTime }}</view>
      </view>
      <view class="cell cell-defale" v-if="serveRecordObj.evaluationStatus === 1">
        <view class="cell-left">评价</view>
        <view class="prominent-bth evaluate-commonly">{{ serveRecordObj.evaluationGrade }}</view>
      </view>
    </view>

    <view class="evaluate flex flex-center flex-col" v-if="serveRecordObj.evaluationStatus === 0">
      <view class="title">请对此服务做出评价</view>
      <view class="evaluate-list flex flex-between">
        <text class="evaluate-item evaluate-difference" data-name="差" @tap="handEvaluate">差</text>
        <text class="evaluate-item evaluate-commonly" data-name="一般" @tap="handEvaluate">一般</text>
        <text class="evaluate-item evaluate-satisfied" data-name="满意" @tap="handEvaluate">满意</text>
      </view>
    </view>

    <van-dialog use-slot :show="isEvaluate" confirm-button-color="#0090FC" show-cancel-button @close="onClose"
      @confirm="healedOrder">
      <view class="dialog">
        <view>您对本次服务的评价为</view>
        <view>“ {{ evaluateText }} ”</view>
      </view>
    </van-dialog>
  </view>
</template>

<script>
  // const app = getApp();
  // const { publicApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        options: {
          name: ''
        },
        isEvaluate: false,
        evaluateText: '',
        serveRecordObj: {
          serveWay: '',
          serveContent: '',
          patientName: '',
          doctorName: '',
          createTime: '',
          evaluationStatus: 0,
          evaluationGrade: ''
        }
      };
    },
    onLoad(options) {
      this.setData({
        options
      });
      this.serveRecordGetApi();
    },
    methods: {
      async serveRecordGetApi() {
        const {
          data: {}
        } = await publicApi.serveRecordGetApi({
          id: this.options.id
        });
        if (Object.keys(data).length) {
          this.setData({
            serveRecordObj: data
          });
        }
      },

      handEvaluate(event) {
        const {
          name
        } = event.currentTarget.dataset;
        this.setData({
          isEvaluate: true,
          evaluateText: name
        });
      },

      healedOrder(event) {
        // 调用接口
      },

      onClose() {
        this.setData({
          isEvaluate: false
        });
      }
    }
  };
</script>
<style lang="less">
  .page-content {
    margin-top: 20rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;

    .cell {
      width: 100%;
      padding: 42rpx 0;
      background: #ffffff;
      border-bottom: 1px solid #efefef;

      .cell-left {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        line-height: 28rpx;
      }

      .cell-right {
        font-size: 32rpx;
        font-weight: 400;
        color: #999999;
        line-height: 32rpx;
      }
    }

    .cell-defale {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .cell-tag-two {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .tag-bth {
      padding: 16rpx 32rpx;
      background: #f7faff;
      border-radius: 40rpx;
      border: 1px solid #c5dff4;
      font-size: 28rpx;
      font-weight: 400;
      color: #0091ff;
      line-height: 28rpx;
      margin-right: 16rpx;
      margin-top: 24rpx;

      &:last-child {
        margin-right: 0;
      }
    }

    .cell-img {
      margin-top: 32rpx;
      display: grid;
      grid-template-columns: repeat(3, 218rpx);
      grid-gap: 10rpx;

      .cell-img-item {
        width: 218rpx;
        height: 200rpx;
      }
    }

    .cell-multiline {
      margin-top: 32rpx;
      font-size: 32rpx;
      font-weight: 400;
      color: #999999;
      line-height: 40rpx;
    }

    .prominent-bth {
      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;
    }

    .evaluate-difference {
      background: #fe3b53;
    }

    .evaluate-commonly {
      background: #f7721f;
    }

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

  .evaluate {
    padding: 88rpx 40rpx 30rpx;

    .title {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      line-height: 36rpx;
      padding-left: 6rpx;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        z-index: -1;
        width: 150rpx;
        height: 10rpx;
        background: var(--title-guides-color);
        border-radius: 2rpx;
        transform: translateX(-50%);
      }
    }

    .evaluate-list {
      margin-top: 100rpx;
      width: 100%;

      .evaluate-item {
        width: 210rpx;
        height: 120rpx;
        background: #fe3b53;
        box-shadow: 2rpx 2rpx 2rpx 0px rgba(254, 59, 83, 0.1);
        border-radius: 8rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        line-height: 120rpx;
        text-align: center;
      }

      .evaluate-difference {
        background: #fe3b53;
      }

      .evaluate-commonly {
        background: #f7721f;
      }

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

  .dialog {
    text-align: center;
    padding: 66rpx 86rpx 76rpx 86rpx;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 60rpx;
    color: #333333;
  }
</style>