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

    <view class="service-record" v-if="inquiriesList.length">
      <view class="record-item" :data-item="item" @tap="headleDetails" v-for="(item, index) in inquiriesList"
        :key="index">
        <view class="record-item-one">
          <block v-for="(e, i) in getStatusList" :key="i">
            <view v-if="e.value === item.status + ''" :class="'info-state ' + ('hint-' + e.colorType)">{{ e.label }}
            </view>
          </block>
          <view class="info flex flex-v-center">
            <text>服务对象：</text>
            <text class="prominent">{{ item.patientName }}</text>
          </view>
          <view class="info flex flex-v-center">
            <text>问诊类型：</text>
            <block v-for="(e, i) in getTypeList" :key="i">
              <text v-if="e.value === item.type + ''" class="prominent">{{ e.label }}</text>
            </block>
          </view>
          <view class="info flex flex-v-center">
            <text>问诊时间：</text>
            <text class="prominent">{{ toods.getDateTime(item.createTime) }}</text>
          </view>
          <!-- <view class="info flex flex-v-center">
        <text>服务评价：</text>
        <text class="prominent-bth evaluate-commonly">一般</text>
      </view> -->
        </view>
      </view>
    </view>
    <van-empty v-else description="暂无数据" />
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const { publicApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  export default {
    data() {
      return {
        options: {},
        inquiriesList: [],
        getTypeList: [],
        getStatusList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        i: '',

        e: {
          value: '',
          colorType: '',
          label: ''
        }
      };
    },
    onLoad(options) {
      this.setData({
        options
      });
      this.inquiriesOnlinePageApi();
    },
    onReachBottom() {
      if (this.inquiriesList.length === this.total) {
        return;
      }
      this.serveRecordPageApi(false);
    },
    methods: {
      async inquiriesOnlinePageApi(reset = true) {
        const params = this.generalQueryData(reset);
        const {
          data: {
            list = [],
            total = 0
          }
        } = await publicApi.inquiriesOnlinePageApi(params);
        if (list.length) {
          if (reset) {
            const _goodsList = list;
          } else {
            const _goodsList = this.inquiriesList.concat(list);
          }
          this.pageNo = params.pageNo || 1;
          this.total = total;
          this.setData({
            inquiriesList: _goodsList
          });
          if (reset) {
            this.getDictDataApi1();
            this.getDictDataApi2();
          }
        }
      },

      async getDictDataApi1() {
        const {
          data: {
            list = []
          }
        } = await publicApi.getDictDataApi({
          dictType: 'people_inquiries_online_type'
        });
        if (list.length) {
          this.setData({
            getTypeList: list
          });
        }
      },

      async getDictDataApi2() {
        const {
          data: {
            list = []
          }
        } = await publicApi.getDictDataApi({
          dictType: 'people_inquiries_online_status'
        });
        if (list.length) {
          this.setData({
            getStatusList: list
          });
        }
      },

      // 分页参数处理事件
      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/inquiry/inquiry-detail?name=线上诊疗详情&id=${item.id}`
        });
      }
    }
  };
</script>
<style lang="less">
  .service-record {
    padding: 20rpx 24rpx;

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

      &: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-success {
      background: #00b477;
    }

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

    .hint-danger {
      background: linear-gradient(135deg, #ff3e3e 0%, #f20505 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>