<template>
  <div>
    <page-model
      v-if="picaWechat != 'wechat'"
      ref="PageModel"
      :header-info="headerInfo"
    />
    <div class="insurance-reseach-detail">
      <div class="detail-status">
        <img
          v-if="expireFlag"
          src="https://files.yunqueyi.com/image/png/common/20230301105920798.png"
          alt=""
        >
        <img
          v-else
          src="https://files.yunqueyi.com/image/png/common/20230228133738711.png"
          alt=""
        >

        {{ !expireFlag ? statusMap(detailInfo.status):'已过期' }}
      </div>
      <div class="detail-top insurance-detection">
        <div class="detection-title">
          您的{{ isUnderLine ? '领取' : '检测' }}时间
        </div>
        <div class="detection-time mb5">
          {{ detailInfo.appointmentTimeStr }}
        </div>
        <div class="detection-time">
          {{ detailInfo.appointmentTimeStr2 }}
        </div>
        <div class="detail-top-info">
          <div class="detail-top-address">
            <div class="detail-top-address-name">
              {{ detailInfo.hospitalName || "--" }}
            </div>
            <div class="detail-top-address-info">
              检验科/检验室/采血室
            </div>
            <div class="detail-top-address-info">
              {{ detailInfo.hospitalAddress || "--" }}
            </div>

            <div
              class="detail-top-address-navigation"
              @click="navigation"
            >
              <img
                class="navigation-img"
                src="https://files.yunqueyi.com/image/png/common/20230301160437750.png"
              >
              <div class="navigation-text">
                导航
              </div>
            </div>
          </div>
          <img
            class="detail-top-img"
            src="https://files.yunqueyi.com/image/png/common/20230228180052259.png"
            alt=""
          >
          <div
            v-if="detailInfo.hospitalRemarks && detailInfo.hospitalRemarks !== ''"
            class="detail-top-hospitalInfo"
          >
            <img
              src="https://files.yunqueyi.com/image/png/common/20230228181040335.png"
              alt=""
            >
            {{ detailInfo.hospitalRemarks }}
          </div>
        </div>
      </div>
      <div
        v-if="!expireFlag"
        class="detail-bottom"
      >
        <div

          class="tips"
        >
          <div class="tip-org">
            <div class="tip-org-left" />
            云鹊医温馨提示
            <div class="tip-org-right" />
          </div>
          <div
            v-if="isUnderLine"
            class="tip-grey"
          >
            <div class="tip-grey-dot" />
            请在预约日前往现场领取产品；
          </div>
          <div
            v-else
            class="tip-grey"
          >
            <div class="tip-grey-dot" />

            {{ insuranceInfo && insuranceInfo.detectionKind == 0 ? '请在预约日期前往预约医院完成采样。无需空腹，采样前三天可适当清淡饮食；' : '请在预约日前往现场领取产品；' }}
          </div>
          <div class="tip-grey">
            <div class="tip-grey-dot" />
            {{ insuranceInfo && insuranceInfo.detectionKind == 0 ? '注意携带好您投保时注册的手机前往，凭手机号扫码确认采样；' : '注意携带好投保时注册的手机前往，凭手机号扫码确认领取成功;' }}
          </div>
          <div
            v-if="insuranceInfo && insuranceInfo.detectionKind == 0"
            class="tip-grey"
          >
            <div class="tip-grey-dot" />
            预计7-10个工作日电子报告将返回至您的手机，届时将提供进一步的报告解读服务，请注意查收。
          </div>
        </div>
      </div>
      <div class="detail-bottom">
        <div class="detail-bottom-title">
          订单信息
        </div>
        <div class="detail-bottom-item">
          <div class="title">
            受检人:
          </div>
          <div class="value">
            {{ detailInfo.patientName || "--" }}
          </div>
        </div>
        <div class="detail-bottom-item">
          <div class="title">
            检测名称:
          </div>
          <div class="value">
            {{ detailInfo.detectName || "--" }}
          </div>
        </div>
        <div class="detail-bottom-item">
          <div class="title">
            下单时间:
          </div>
          <div class="value">
            {{ formatDate(detailInfo.orderTime) || "--" }}
          </div>
        </div>
        <div class="detail-bottom-item">
          <div class="title">
            检测编号:
          </div>
          <div
            class="value"
          >
            {{ detailInfo.recordNo || "--" }}
            <img
              class="value-copy"
              src="https://files.yunqueyi.com/image/png/common/20230301110919111.png"
              alt=""
              @click="copyNum()"
            >
            <!-- <text
              class="value-copy"
              @click="copyNum()"
            >
              复制
            </text> -->
          </div>
        </div>
      </div>
      <div class="appoint-detail-tel">
        客服电话：<a
          style="font-weight:600"
          href="tel:400-006-5252"
        >400-006-5252</a>
        <div class="serve-time">
          周一至周五8:00-18:00 <span /> 双休日9:00-18:00
        </div>
      </div>
      <div
        v-if="!expireFlag"
        class="detail-btn-bottom"
      >
        <div

          class="detail-btn-bottom-tips"
        >
          <van-icon name="warning-o" />
          请在预约日前往预约地{{ isUnderLine ? '领取产品' : '完成采样' }}，并点击按钮绑定{{ insuranceInfo && insuranceInfo.detectionKind == 0 ? '采样码' : '条形码' }}
        </div>
        <div
          class="detail-btn btn-empty reAppoint"
          @click="reAppoint"
        >
          重新预约
        </div>
        <div
          class="detail-btn"
          @click="bindingCode"
        >
          绑定{{ insuranceInfo && insuranceInfo.detectionKind == 0 ? '采样码' : '条形码' }}
        </div>
      </div>
      <div
        v-else
        class="detail-btn-bottom"
      >
        <div
          class="detail-btn"
          @click="reAppoint"
        >
          重新预约
        </div>
      </div>

      <van-action-sheet
        v-model="showSsheet"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="selectItem"
      />
    </div>
  </div>
</template>

<script>
import {getDetailByYunOrderNo, getDetectionName} from '@/api/appoint';
import { formatDate } from '@/utils/common';
import storejs from 'storejs';
import AMapLoader from '@amap/amap-jsapi-loader';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      picaWechat:window._picaWechat,
      headerInfo: {
        title: '预约详情',
        isBlack: true,
        backMethod: 'web',
        style: 'backgroundColor:#ffffff;zIndex:100;',
        background: '',
      },
      actions: [{ name: '高德地图', value:1 }, { name: '腾讯地图', value:2 }, { name: '百度地图', value:3}],
      detailInfo: {},
      showSsheet:false,
      yunOrderNo: '',
      projectEquityNo: '',
      expireFlag:false,
      query: {},
      isUnderLine:false,
    };
  },
  computed: {
    ...mapGetters('home', ['insuranceInfo']),
  },
  mounted() {
    this.$loading.show();
    const { yunOrderNo, projectEquityNo} = this.$route.query;
    this.yunOrderNo = yunOrderNo;
    this.projectEquityNo = projectEquityNo;
    console.log('yunOrderNo', yunOrderNo);
    this.getDetailByYunOrderNo(yunOrderNo);
    this.getDetectionName(yunOrderNo);
    this.$sendBuriedData({
      action: 'ACTION_WEB_AFTER',
      component_tag: '7802855#0#0#预约详情',
      web_data:{yunOrderNo: yunOrderNo},
    });
  },
  methods: {
    formatDate(orderTime) {
      if (!orderTime) {
        return '--';
      }
      return formatDate(orderTime);
    },
    getDetailByYunOrderNo(yunOrderNo) {
      getDetailByYunOrderNo(yunOrderNo).then(res => {
        console.log(res);
        const {expireFlag} = res.data;
        this.detailInfo = res.data;
        this.expireFlag = expireFlag || '';
        this.isUnderLine = res.data.detectionCategory == 2;
        this.$loading.hide();
      });
    },
    initMap() {
      AMapLoader.load({
        key:'009dd02e4fe0a1b5f895cd7b86b9e216', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        AMap.plugin('AMap.Geolocation', function() {
          var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
            // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
            buttonOffset: new AMap.Pixel(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            zoomToAccuracy: true,
            //  定位按钮的排放位置,  RB表示右下
            buttonPosition: 'RB'
          });
          geolocation.getCurrentPosition((status, result) => {
            console.log('geolocationgeolocation,', status, result);
            if (result.position) {
              const position = { ...result.position, addr: result.formattedAddress };
              storejs.set('geolocation', position);
            } else {
              storejs.remove('geolocation');
            }

          });

        });
      });
    },

    reAppoint() {
      this.$sendBuriedData({
        action: 'ACTION_WEB_CLICK',
        component_tag: '7802855#0#0#重新预约',
        web_data:{yunOrderNo: this.yunOrderNo},
      });
      this.$router.push({
          path: '/appoint',
          query: {
            projectEquityNo:this.projectEquityNo,
            yunOrderNo:this.yunOrderNo
          }
        });
    },
    selectItem(item) {
      console.log('--$rocNative', this.$rocNative);
      const geolocation = storejs.get('geolocation');
      const hospitalName = this.detailInfo.hospitalName;

      let url = '';
      // lat<纬度>,lng<经度>
      const latitude = this.detailInfo.latitude;
      const longitude = this.detailInfo.longitude;

      if (geolocation && geolocation.lat && geolocation.lng) {
        // https://uri.amap.com/navigation
        switch (item.value) {
          case 1:
          // navigation?from=116.478346,39.997361,startpoint&to=116.3246,39.966577,endpoint&via=116.402796,39.936915,midwaypoint&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0
          // https://lbs.amap.com/api/uri-api/guide/mobile-web/point api地址
            url = `https://uri.amap.com/navigation?from=${geolocation.lng},${geolocation.lat},${geolocation.addr}&to=${longitude},${latitude},${hospitalName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
            break;
          case 2:
            // https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker  api地址
            // https://apis.map.qq.com/uri/v1/routeplan?type=bus&from=我的家&fromcoord=39.980683,116.302&to=中关村&tocoord=39.9836,116.3164&policy=1&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77
            url = `https://apis.map.qq.com/uri/v1/routeplan?type=drive&from=${geolocation.addr}&fromcoord=${geolocation.lat},${geolocation.lng}&to=${hospitalName}&tocoord=${latitude},${longitude}&policy=0&referer=DJ6BZ-AU6E2-XMJUH-CZVD6-T2WQV-27F3S`;
            break;
          case 3:
            // https://lbsyun.baidu.com/index.php?title=uri/api/web
            url = 'http://api.map.baidu.com/direction?origin=latlng:' + geolocation.lat + ',' + geolocation.lng + '|name:' + geolocation.addr + '&destination=latlng:' + latitude + ',' + longitude + '|name:' + hospitalName + '&region=' + geolocation.city + '&mode=driving&output=html&src=webapp.baidu.openAPIdemo&coord_type=gcj02';
            break;
          default:
            url = `https://uri.amap.com/navigation?from=${geolocation.lng},${geolocation.lat},${geolocation.addr}&to=${longitude},${latitude},${hospitalName}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`;
            break;
        }
      } else {
        console.log(item);
        switch (item.value) {
          case 1:
          // https://lbs.amap.com/api/uri-api/guide/mobile-web/point api地址
            url = 'https://uri.amap.com/marker?&name=' + hospitalName + '&position=' + longitude + ',' + latitude + '&callnative=1';
            break;
          case 2:
            // https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker  api地址
            url = 'https://apis.map.qq.com/uri/v1/geocoder?coord=' + latitude + ',' + longitude + '&referer=DJ6BZ-AU6E2-XMJUH-CZVD6-T2WQV-27F3S';
            break;
          case 3:
            // https://lbsyun.baidu.com/index.php?title=uri/api/web api地址
            url = 'http://api.map.baidu.com/marker?location=' + latitude + ',' + longitude + '&title=' + hospitalName + '&coord_type=gcj02&output=html&src=webapp.baidu.openAPIdemo';
            break;
          default:
            url = 'https://uri.amap.com/marker?&name=' + hospitalName + '&position=' + longitude + ',' + latitude + '&callnative=1';
            break;
        }
      }
      console.log('geolocation', url);
      // window.open(url);
      window.location.href = url;

    },
    bindingCode() {
      const { pprotocolType, detectionServiceRecordId } = this.detailInfo;
      console.log('window.miniProgram', window._miniprogram);
      this.$sendBuriedData({
        action: 'ACTION_WEB_CLICK',
        component_tag: '7802855#0#0#去绑定',
        web_data:{yunOrderNo: this.yunOrderNo},
      });
      if (window._miniprogram) {
        const {detectionKind} = this.insuranceInfo;
        this.$rocNative.WXInstance.miniProgram.navigateTo({
          url:`/pages/health/binding-code/index?yunOrderNo=${this.yunOrderNo}&projectEquityNo=${this.projectEquityNo}&detectionRecordId=${detectionServiceRecordId}&pprotocolType=${pprotocolType}&channelSource=insurance_channel&detectionKind=${detectionKind}`
        });
      } else {
        this.$router.push({
          path: '/insuranceBindCode',
          query: {
            pprotocolType,
            detectionRecordId: detectionServiceRecordId,
            yunOrderNo:this.yunOrderNo
          }
        });
      }
    },
    navigation() {
      if (window._miniprogram) {
        const addressInfo = {
          address: this.detailInfo.hospitalAddress,
          latitude: this.detailInfo.latitude,
          longitude: this.detailInfo.longitude,
          name: this.detailInfo.hospitalName,
        };
        console.log(this.$rocNative.WXInstance);
        this.$rocNative.WXInstance.openLocation(addressInfo);
        return;
      }
      this.initMap();
      this.showSsheet = true;

    },
    // 复制快递单号
    copyNum() {
      console.log(this.detailInfo.recordNo);
      const copyText = this.detailInfo.recordNo;
      const input = document.createElement('input');
      input.value = copyText;
      document.body.appendChild(input);
      input.select();
      input.setSelectionRange(0, input.value.length);
      document.execCommand('Copy');
      document.body.removeChild(input);
      this.$toast('已复制');
      console.log('已复制的内容：', copyText);
    },
    getDetectionName(yunOrderNo) {
      getDetectionName(yunOrderNo).then(res => {
        if (res.code === '000000' && res.data) {
          const dectionData = res.data[0] || {};
          this.$store.dispatch('home/setInsuranceInfo', dectionData);
        }
      });
    },
    statusMap(type) {
      const obj = {
        '0101': '未填写问卷',
        '0102': '已填写问卷',
        '0201': '待预约',
        '0202': '预约成功',
        '0203': '已取消待重新预约',
        '0301': '待采样',
        '0302': '已采样',
        '0303': '待重新采样',
        '0304': '已出报告',
        '0401': '已结束',
      };
      const obj2 = {
        '0101': '未填写问卷',
        '0102': '已填写问卷',
        '0201': '待预约',
        '0202': '预约成功',
        '0203': '已取消待重新预约',
        '0301': '待领取',
        '0302': '已领取',
        '0303': '待重新领取',
        '0304': '已出报告',
        '0401': '已结束',
      };
      return this.insuranceInfo.detectionKind == 1 ? obj2[type] : obj[type];
    },
  },
};
</script>

<style lang="scss" scoped>
.insurance-reseach-detail {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #f5f6f8;
  background: linear-gradient(180deg, #00BDA5 0%, #20C5B0 125px, #F5F6F8 257px);
  padding: 20px 12px 160px;
  overflow: auto;
  // .top-bg{
  //   position: absolute;
  //   width: 100%;
  //   height: 257px;
  //   top: 0;
  //   background: linear-gradient(180deg, #00BDA5 0%, #20C5B0 52%, #F5F6F8 100%);
  // }

  .detail-status{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 28px;
    img{
      width: 24px;
      height: 24px;
      margin-right: 6px;
    }

  }

  .detail-top {
    padding: 15px;
    background: #ffffff;
    border-radius: 15px;
    margin-bottom: 10px;
  }
  .detail-top-info {
    background: #F9FAFB;
    border-radius: 11px;
    padding-bottom: 10px;
    .detail-top-img {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      width: 307px;
      height: 6px;
      margin-bottom: 10px;
    }
    .detail-top-hospitalInfo{
      position: relative;
      display: flex;
      padding-left: 27px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #212121;
      line-height: 19px;
      align-items: center;

      img{
        position: absolute;
        left: 12px;
        top: 1px;
        width: 12px;
        height: 14px;
        margin-right: 5px;
      }
    }
    .detail-top-time {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 25px;
    }
    .detail-top-status {
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #04bda4;
      line-height: 25px;
    }
  }
  .grey {
    .detail-top-time {
      color: #999999;
    }
    .detail-top-status {
      color: #999999;
    }
  }
  .detail-top-address {
    position: relative;
    padding: 15px 52px 6px 12px;
    .detail-top-address-name {
      height:21px;
      width: 257px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #212121;
      line-height: 21px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .detail-top-address-info {
      height: 16px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9f9f9f;
      line-height: 16px;
    }
    .detail-top-address-navigation {
      position: absolute;
      top: 13px;
      right: 12px;
      .navigation-img {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
      }
      .navigation-text {
        height: 12px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #212121;
        line-height: 12px;
      }
    }
  }
  .detail-bottom {
    background: #ffffff;
    border-radius: 15px;
    padding: 15px 15px 1px 15px;
    margin-bottom: 10px;
    .detail-bottom-title{
      height: 25px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #212121;
      line-height: 25px;
      margin-bottom: 12px;
    }
    .detail-bottom-item {
      display: flex;
      justify-content: space-between;
      height: 20px;
      margin-bottom: 14px;
      .title {
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
      }
      .value {
        display: flex;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #212121;
        line-height: 20px;
        align-items: center;
        .value-copy {
          width: 14px;
          height: 14px;
          margin-left: 4px;
          color: #1677fe;
        }
      }
    }
    .tips {
      font-size: 14px;
      border-radius: 11px;
      padding: 5px 0 10px 0;
      .tip-org {
        text-align: center;
        height: 21px;
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #212121;
        line-height: 21px;
        margin-bottom: 18px;
        background: url('https://files.yunqueyi.com/image/png/common/20230301094652399.png') no-repeat center center;
        background-size: 213px 4px;
      }
      // .tip-org-left{
      //   width: 62px;
      //   height: 1px;
      //   opacity: 0.31;
      //   border: 7px solid;
      //   border-image: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(6, 191, 167, 1)) 7 7;
      // }
      // .tip-org-right{
      //   width: 62px;
      //   height: 1px;
      //   opacity: 0.31;
      //   border: 7px solid;
      //   border-image: linear-gradient(270deg, rgba(255, 255, 255, 1), rgba(6, 191, 167, 1)) 7 7;
      // }
      .tip-grey {
        position: relative;
        color: #999999;
        font-weight: 200;
        padding-left: 12px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 18px;
        margin-bottom: 10px;
      }
      .tip-grey-dot{
        position: absolute;
        width: 4px;
        height: 4px;
        background: #FF720C;
        opacity: 0.5;
        border-radius: 50%;
        left: 0;
        top: 7px;

      }
    }
  }

  .detail-btn {
    width: 345px;
    height: 40px;
    background: #00bda5;
    border-radius: 25px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
  }
  .btn-empty {
    color: #00bda5;
    background: transparent;
    border: 1px solid #00bda5;
  }
  .detail-fixed-account {
    position: absolute;
    height: 84px;
    bottom: 16px;
    left: 16px;
    right: 16px;
  }
}
.insurance-detection{
    background: #FFFFFF;
    border-radius: 11px;
    padding: 20px 15px;
    margin-top: 22px;
    // .detection-item{
    //   margin-bottom: 9px;
    //   display: flex;
    //   .label{
    //     width: 60px;
    //     height: 20px;
    //     font-size: 14px;
    //     font-family: PingFangSC-Regular, PingFang SC;
    //     font-weight: 400;
    //     color: #666666;
    //     line-height: 20px;
    //     margin-right: 4px;
    //   }
    //   .value{
    //     height: 20px;
    //     font-size: 14px;
    //     font-family: PingFangSC-Medium, PingFang SC;
    //     font-weight: 500;
    //     color: #212121;
    //     line-height: 20px
    //   }
    // }
    .detection-title{
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 18px;
      text-align: center;
      margin-bottom: 1px;
    }
    .detection-time{
      height: 30px;
      font-size: 21px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #212121;
      line-height: 30px;
      text-align: center;
      margin-bottom: 15px ;
    }
    .mb5{
      margin-bottom: 5px ;
    }
  }
  .appoint-detail-tel{
    margin-top: 25px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 22px;
    text-align: center;
    .serve-time{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      span{
        width: 1px;
        height: 12px;
        margin: 0 12px;
        background: #BBBBBB;
      }
    }
  }
  .detail-btn-bottom{
    position: fixed;
    background: #fff;
    left: 0;
    width: calc(100vw - 24px);
    bottom: 0;
    padding:5px 12px 5px 12px ;
    display: flex;
    .detail-btn-bottom-tips{
      position: absolute;
      padding: 6px 0;
      left: 0;
      top: -30px;
      width: 100vw;
      height: 18px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FF720C;
      line-height: 18px;
      background: #FFFBE7;
      text-align: center;
    }
    .reAppoint{
      width: 155px;
      margin-right:11px ;
      border: 1px solid #C0C0C0;
      color: #212121;
    }
  }
</style>
