<template>
  <view>
    <view class="service-list" style="padding-bottom: 120rpx">
      <view
          class="service-list-item"
          v-for="(item, i) in list_archive"
          :key="i.id"
      >
        <view class="service-list-item__wrap">
          <view class="service-list-item__name">
            {{ item.name }}
          </view>
          <view class="service-list-item__price">
            <u-icon name="phone-fill"></u-icon>
            {{ item.mobile }}
          </view>
        </view>
        <view class="service-list-item__wrap">
          <view class="service-list-item__address">
            {{ item.address }}
          </view>
          <view class="service-list-item__idcard">
            {{ item.idcard }}
          </view>
        </view>
      </view>
    </view>
    <view class="service-list-btn">
      <u-button
          shape="circle"
          ripple
          :custom-style="btnStyle"
          @click="addArchive"
      >新增就诊人</u-button
      >
    </view>

    <service-archive ref="serviceArchive"></service-archive>
  </view>
</template>

<script>
import serviceArchive from "@/component/serviceArchive/service-archive.vue";

export default {
  components: {
    serviceArchive
  },
  data() {
    return {
      btnStyle: {
        "background-image":
            "linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)",
        "font-weight": "500",
        "font-size": "28rpx",
        color: "#fff",
        width: "288rpx",
        "margin-right": "25rpx",
      },
      list_archive: [],
    };
  },
  methods: {
    async getUserArchive() {
      try {
        const res = await this.$u.api.userArchive({
          page: 1,
          page_size: 999,
        });
        this.list_archive = res.data;
      } finally {
        uni.stopPullDownRefresh()
      }
    },

    addArchive() {
      this.$refs.serviceArchive.isShow = true;
    },
  },
  onLoad() {
    this.getUserArchive()
  },
  onPullDownRefresh() {
    this.getUserArchive()
  },
}
</script>

<style lang="scss">
.service-list {
  padding-top: 80rpx;

  &-item {
    border: 2rpx solid #e6e6eb;
    border-radius: 10rpx;
    background-color: #ffffff;
    margin: 0 25rpx;
    padding: 28rpx 39rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    &__wrap {
      display: flex;
      align-items: center;
      width: 100%;
    }

    &__address {
      width: 100%;
      padding-left: 14rpx;
      line-height: 2;

    }

    &__icon {
      display: flex;
      justify-content: center;
      align-items: center;
      // background: #f9f5e9;
      // padding: 20rpx;
    }

    &__name {
      padding-left: 14rpx;
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
      line-height: 2;

    }

    &__price {
      color: #c20d12;
      font-weight: 500;
      margin-left: auto;
      line-height: 2;

    }
    &__idcard {
      color: #c20d12;
      font-weight: 500;
      margin-left: auto;
      line-height: 2;

    }
  }

  &-btn {
    position: fixed;
    bottom: 40rpx;
    left: calc(50% - 144rpx);
  }

  &-item + &-item {
    margin-top: 20rpx;
  }
}
</style>
