<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" left-text="我的患者" left-arrow />

    <view class="patient-details">
      <view class="tabs-bg">
        <view :class="'position ' + (index === currentTab ? 'aciotn' : '')" :data-current="index"
          @tap.stop.prevent="handleTabChange" v-for="(item, index) in ObjectList" :key="index">
          {{ item.title }}

          <view v-if="index !== currentTab" class="dot">{{ item.count }}</view>
        </view>
      </view>

      <view class="mt-60" v-if="currentTab === 0">
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">健康档案编码</text>
          <text class="patient-subhead">112312323345543211</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">姓名</text>
          <text class="patient-subhead">张文远</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">身份证号码</text>
          <text class="patient-subhead">112312323345543211</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">联系电话</text>
          <text class="patient-subhead">18615543271</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">所属街道/乡镇</text>
          <text class="patient-subhead uniline">北京朝阳区来广营北京朝阳区来广营北京朝阳区来广营北京朝阳区来广营</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">现住详址</text>
          <text class="patient-subhead uniline">朝来科技园8号院2号楼209室</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">家属联系电话</text>
          <text class="patient-subhead uniline">1871163729</text>
        </view>
        <view class="pd">
          <text class="patient-title">人群类别</text>
          <view class="label">
            <view>普通居民</view>
            <view>高血压</view>
            <view>普通居民</view>
            <view>高血压</view>
            <view>普通居民普通居民普通居民普通居民</view>
            <view>高血压</view>
          </view>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">家庭成员药物过敏史</text>
          <text class="patient-subhead uniline">青霉素</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">既往史</text>
          <text class="patient-subhead uniline">无</text>
        </view>
        <view class="flex flex-v-center flex-between pd">
          <text class="patient-title">家族史</text>
          <text class="patient-subhead uniline">无</text>
        </view>
        <view class="pd">
          <text class="patient-title">照片</text>
          <view class="image">
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
            <image src="/static/images/default-avatar.png"></image>
          </view>
        </view>
      </view>

      <!-- 问诊记录 -->
      <view class="mt-60" v-if="currentTab === 1">
        <view class="inquiry" v-for="(item, index) in conentList" :key="index">
          <view>
            <text class="gray">姓名：</text>
            <text class="light-black">张无忌</text>
          </view>

          <view>
            <text class="gray">问诊类型：</text>
            <text class="light-black">日常记录</text>
          </view>

          <view>
            <text class="gray">问诊时间：</text>
            <text class="light-black">2022-12-12 20:09:23</text>
          </view>

          <view :class="'state ' + (item.state === t.state ? t.class : '')" v-for="(t, index1) in stateList"
            :key="index1">
            <text v-if="item.state === t.state">{{ t.label }}</text>
          </view>
        </view>
      </view>

      <!-- 服务记录 -->
      <view class="mt-60 mb-150" v-if="currentTab === 2">
        <view class="inquiry" style="padding-bottom: 100rpx" :data-item="item" @tap="skipServiceRecordDetail"
          v-for="(item, index) in conentList" :key="index">
          <view>
            <text class="gray">服务形式：</text>
            <text class="light-black">张无忌</text>
          </view>

          <view>
            <text class="gray">服务医生：</text>
            <text class="light-black">日常记录、日常记录、日常记录、日常记录</text>
          </view>

          <view>
            <text class="gray">服务评价：</text>
            <text v-if="item.state === t.state" :class="'appraise ' + (item.state === t.state ? t.class : '')"
              v-for="(t, index1) in stateList" :key="index1">
              <text>{{ t.label }}</text>
            </text>
          </view>

          <view :class="'state ' + (item.state === t.state ? t.class : '')" v-for="(t, index1) in stateList"
            :key="index1">
            <text v-if="item.state === t.state">{{ t.label }}</text>
          </view>

          <view class="service-log-time flex flex-between">
            <view>
              <text class="gray">服务时间：</text>
              <text class="light-black">2022-12-12 20:09:23</text>
            </view>
            <view>
              <van-icon name="arrow" color="#999" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="currentTab === 2" class="fixed-bottom">
      <button @tap="createServerRecord">新增服务记录</button>
    </view>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  const List = [{
      icon: '',
      title: '个人档案',
      count: '12'
    },
    {
      icon: '',
      title: '问诊记录',
      count: '3'
    },
    {
      icon: '',
      title: '服务记录',
      count: '1'
    }
  ];
  const conentList = [{
      name: '张无忌',
      record: '日常记录',
      tiem: '2022-12-12 20:09:23',
      state: '1'
    },
    {
      name: '张无忌',
      record: '日常记录',
      tiem: '2022-12-12 20:09:23',
      state: '2'
    },
    {
      name: '张无忌',
      record: '日常记录',
      tiem: '2022-12-12 20:09:23',
      state: '3'
    },
    {
      name: '张无忌',
      record: '日常记录',
      tiem: '2022-12-12 20:09:23',
      state: '3'
    }
  ];
  const stateList = [{
      label: '待回复',
      state: '1',
      class: 'orange'
    },
    {
      label: '已回复',
      state: '2',
      class: 'green'
    },
    {
      label: '待查看',
      state: '3',
      class: 'red'
    }
  ];
  export default {
    components: {},
    data() {
      return {
        ObjectList: List,
        conentList: conentList,
        stateList: stateList,
        currentTab: 0,
        dictType: '',

        t: {
          state: '',
          class: '',
          label: ''
        }
      };
    },
    onLoad(options) {},
    methods: {
      handleTabChange(e) {
        let {
          current
        } = e.target.dataset;
        if (this.currentTab == current || current === undefined) {
          return;
        }
        this.setData({
          currentTab: current
        });
      },

      // 跳转公共服务记录--详情
      skipServiceRecordDetail(event) {
        const {
          item
        } = event.currentTarget.dataset;
        uni.navigateTo({
          url: `/packages/public/pages/service-record/service-record-detail?id=${item.id}&name=服务记录详情`
        });
      },

      // 新增服务记录
      createServerRecord() {
        uni.navigateTo({
          url: '/packages/my/pages/create-server-record/create-server-record'
        });
      }
    }
  };
</script>
<style lang="less">
  .mt-60 {
    margin-top: 40rpx;
  }

  .mb-150 {
    margin-bottom: 150rpx;
  }

  .gray {
    color: #999999;
  }

  .light-black {
    color: #333333;
  }

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

  .green {
    background: #00b477;
  }

  .red {
    background: linear-gradient(135deg, #ff3e3e 0%, #f20505 100%);
  }

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

  .patient-subhead {
    width: 60%;
    text-align: right;
    font-size: 32rpx;
    font-weight: 400;
    color: #999999;
    line-height: 32rpx;
  }

  .pd {
    padding: 40rpx 0;
    border-bottom: 1px solid #efefef;
  }

  .patient-details {
    padding: 32rpx 40rpx 32rpx 40rpx;
  }

  .tabs-bg {
    background: #f1f0ef;
    border-radius: 45px;

    view {
      position: relative;
      display: inline-block;
      width: 33.3%;
      text-align: center;
      height: 70rpx;
      line-height: 70rpx;
      background: #f1f0ef;
      border-radius: 50000rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      vertical-align: top;
    }

    .aciotn {
      color: #fff;
      background: #fe3b53;
      transition: all 0.2s linear;
    }

    .dot {
      position: absolute;
      top: 0;
      right: 0;
      width: 46rpx;
      height: 35rpx;
      background-color: #fe3b53;
      font-size: 22rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 30rpx;
      border: 1px solid #fff;
    }
  }

  .label {
    margin-top: 24rpx;
    display: flex;
    flex-wrap: wrap;

    view {
      color: #0091ff;
      padding: 7rpx 16rpx;
      margin-bottom: 8rpx;
      margin-right: 8rpx;
      border: 1px solid #c5dff4;
      border-radius: 5000rpx;
    }
  }

  .image {
    margin-top: 32rpx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10rpx;

    image {
      width: 100%;
      height: 200rpx;
      border: 1px solid red;
      border-radius: 8rpx;
    }
  }

  .inquiry {
    position: relative;
    padding: 30rpx 32rpx;
    margin-bottom: 20rpx;
    background: #f9f9f9;
    border-radius: 8rpx;

    view {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      line-height: 28rpx;
      margin-bottom: 24rpx;
    }

    .state {
      position: absolute;
      right: 0;
      top: 0;
      width: 130rpx;
      height: 48rpx;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      border-radius: 0px 16rpx 0px 40rpx;
    }

    .service-log-time {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 70rpx;
      width: 100%;
      background: #efefef;
      border-radius: 0px 0px 8rpx 8rpx;
      padding: 21rpx 32rpx;
    }

    .appraise {
      color: #fff;
      font-size: 20rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 20rpx;
      border-radius: 1000rpx;
      padding: 9rpx 15rpx;
    }
  }

  .fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    padding: 20rpx 36rpx 50rpx 36rpx;

    button {
      width: 100%;
      height: 80rpx;
      background: #0091ff;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 32rpx;
      line-height: 80rpx;
      border-radius: 8rpx;
    }
  }
</style>