<template>
  <view>
    <view class="container" :style="{ 'padding-top': statusBarHeight + 'px' }">
      <image
        mode="aspectFill"
        class="top-bkg"
        src="~@/static/index/top-bkg.png"
        alt=""
      ></image>
      <view class="top" :style="{ 'padding-right': menuButtonRight + 'px' }">
        <view class="position" @click="toPage('/pages/CitySelect/CitySelect')">
          <u-icon name="map-fill"></u-icon>
          <view>{{ vuex_location.city.replace(/(市|区|县)/,'') }}</view>
          <u-icon name="arrow-down" size="22"></u-icon>
        </view>
        <view class="icon">
          <image src="~@/static/index/icon.png" mode="aspectFit" alt=""></image>
        </view>
      </view>

      <view class="search">
        <view class="search__icon">
          <u-icon name="search" size="50" color="#999"></u-icon>
        </view>
        <view class="search__content">
          <u-input
            :clearable="false"
            :value="select.keyword"
            placeholder="请输入要搜索的内容"
            height="56"
            :custom-style="inputStyle"
            @input="searchInput"
          ></u-input>
        </view>
      </view>

      <view v-if="isShowSticky" class="search-sticky" :style="{ 'padding-top': statusBarHeight + 'px','padding-right': menuButtonRight + 'px' }">
        <view class="search-sticky__position" @click="isShowCity = true">
          <u-icon name="map-fill"></u-icon>
          <view>{{ vuex_location.city.replace(/(市|区|县)/,'') }}</view>
          <u-icon name="arrow-down" size="22"></u-icon>
        </view>

        <view class="search-sticky__search">
          <view class="search-sticky__search--content">
            <u-input
                :clearable="false"
                :value="select.keyword"
                placeholder="请输入要搜索的内容"
                height="46"
                @input="searchInput"
            ></u-input>
          </view>
        </view>
      </view>

      <view class="swiper">
        <u-swiper :list="list"></u-swiper>
      </view>

      <view class="links">
        <u-grid :col="5" :border="false">
          <u-grid-item
            v-for="item in links"
            :key="item.text"
            bg-color="transparent"
            @click="$u.throttle($u.route({
              url: item.to
            }))"
          >
            <image class="icon" :src="item.icon" mode="aspectFit"></image>
            <view class="text">{{ item.text }}</view>
          </u-grid-item>
        </u-grid>
      </view>

      <view class="img1">
        <image src="~@/static/index/ask-png.png" alt="" mode="aspectFit"></image>
      </view>

      <view class="hospitals">
        <view class="hospitals__title">热门医院</view>

        <view class="hospitals__content">
          <view class="hospitals__content__item" v-for="item in 3" :key="item">
            <view class="left">
              <image
                src="https://sstt.115.langye.net/storage/files/172760356266f9236a22e58.png"
                alt=""
                mode="aspectFit"
              ></image>
            </view>
            <view class="right">
              <view class="title">苏州大学附属第一医院</view>
              <view class="tag">
                <view class="tag__item">三甲</view>
                <view class="tag__item">综合医院</view>
              </view>
              <view class="description"> 内科、外科、五官科、其他 </view>
            </view>
          </view>
        </view>
      </view>

      <view class="statistics">
        <view class="block1" @click="toPage('/package_sub/pages/AddOrder/AddOrder')">
          <view class="text1">陪诊团队介绍</view>
          <view class="text2">让就医体验更美好</view>
          <view class="order">预约陪诊</view>

          <image class="img" src="~@/static/index/block1.png" mode="aspectFit" alt=""></image>
        </view>
        <view class="block2">
          <view class="text1">
            <text>142812</text><text>人次</text>
          </view>
          <view class="text2">医院陪护累计</view>

          <image class="img" src="~@/static/index/block2.png" mode="aspectFit" alt=""></image>
        </view>
        <view class="block3">
          <view class="text1">
            <text>12456</text><text>人次</text>
          </view>
          <view class="text2">居家照护累计</view>

          <image class="img" src="~@/static/index/block3.png" mode="aspectFit" alt=""></image>
        </view>
        <view class="block4">
          <view class="text1">关于我们</view>

          <image class="img" src="~@/static/index/block4.png" mode="aspectFit" alt=""></image>
        </view>
      </view>

      <view class="honor">
        <view class="honor__title">
          <image src="~@/static/index/honor-title.png" alt="" mode="aspectFit"></image>
          <text>资质荣誉</text>
        </view>

        <scroll-view class="scroll-content" scroll-x="true">
          <image class="images" v-for="i in 5" :key="i" src="https://sstt.115.langye.net/storage/files/172760356266f9236a22e58.png" mode="aspectFit"></image>
        </scroll-view>
      </view>

      <image class="bottom" src="~@/static/index/bottom.png" mode="aspectFit" alt=""></image>
    </view>

    <u-top-tips :navbar-height="navbarHeight" ref="uTips"></u-top-tips>

    <tabbar />
    <PrivacyPopup />
  </view>
</template>

<script>
import Tabbar from "@/component/Tabbar/Tabbar.vue";
import PrivacyPopup from "@/component/privacy-popup/privacy-popup.vue";

export default {
  components: {
    Tabbar,
    PrivacyPopup
  },
  data() {
    return {
      isShowSticky: false,
      scrollTop: 308,
      statusBarHeight: 40,
      menuButtonRight: 0,

      inputStyle: {
        width: "600rpx",
        fontSize: "28rpx",
        fontWeight: "500",
      },
      select: {
        keyword: "",
      },
      list: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
      links: [
        {
          text: "陪诊服务",
          icon: "/static/index/peizhenfuwu.png",
          to: "/package_sub/pages/ServiceList/ServiceList"
        },
        {
          text: "就医服务",
          icon: "/static/index/jiuyifuwu.png",
        },
        {
          text: "居家照护",
          icon: "/static/index/jujiazhaohu.png",
        },
        {
          text: "医院陪护",
          icon: "/static/index/yiyuanpeihu.png",
        },
        {
          text: "商城服务",
          icon: "/static/index/shangchengfuwu.png",
        },
      ],

    };
  },
  mounted() {
    this.getElScrollTop()
    if (this.$store.state.vuex_location.status !== 2) {
      this.$store.dispatch('getLocation')
    }
  },
  created() {
    this.menuButtonRight =
      uni.getSystemInfoSync().screenWidth -
      uni.getMenuButtonBoundingClientRect().left +
      10;
    this.statusBarHeight = uni.getMenuButtonBoundingClientRect().top;
  },
  onPageScroll(e) {
    this.isShowSticky = e.scrollTop > this.scrollTop
  },
  onLoad() {
  },
  computed: {
    navbarHeight() {
      return getApp().globalData.navbarHeight
    }
  },
  methods: {
    getElScrollTop () {
      const query = uni.createSelectorQuery().in(this)
      query.select('.links').boundingClientRect(data => {
        if (data) {
          this.scrollTop = data.top
        }
      }).exec()
    },
    searchInput(e) {},

    toPage (url, type='page') {
      switch (type) {
        case 'page':
          uni.navigateTo({
            url
          })
          break
        case 'tabbar':
          uni.switchTab({
            url
          })
          break
        case 'back':
          uni.navigateBack()
          break
      }
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .u-swiper-wrap {
  overflow: inherit !important;
}
::v-deep .u-swiper-indicator {
  bottom: -30rpx !important;
}
::v-deep .u-indicator-item-round-active {
  background: #ca2328 !important;
}

.container {
  padding-bottom: calc(76px + 34px + 10px);
  position: relative;

  .top-bkg {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    object-fit: contain;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28rpx;
    position: relative;

    .position {
      color: #fff;
      font-size: 30rpx;
      letter-spacing: 3rpx;
      font-weight: 500;
      display: flex;
      align-items: center;

      & > view {
        padding: 0 13rpx;
        max-width: 160rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .icon {
      & > image {
        width: 197rpx;
        height: 72rpx;
        object-fit: contain;
      }
    }
  }
  .search {
    height: 68rpx;
    border-radius: 34rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    position: relative;

    padding: 20rpx 25rpx;
    margin: 24rpx 26rpx 0 25rpx;

    &__content {
      margin-left: 18rpx;
    }

    &__icon {
    }
  }
  .search-sticky {
    display: flex;
    align-items: center;
    background: url("~@/static/index/top-bkg.png") no-repeat;
    background-size: cover;
    position: sticky;
    z-index: 5;
    top: 0;
    width: 100vw;
    padding-bottom: 20rpx;
    animation: fade .4s;
    filter: drop-shadow(0 2rpx 6rpx #c20d1266);
    @keyframes fade {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    &__position {
      flex: 0;
      color: #fff;
      font-size: 30rpx;
      letter-spacing: 3rpx;
      font-weight: 500;
      white-space: nowrap;
      padding: 0 16rpx;
      display: flex;
      align-items: center;

      & > view {
        padding: 0 10rpx;
        max-width: 160rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &__search {
      flex: 1;
      height: 64rpx;
      border-radius: 34rpx;
      background: #ffffff;
      display: flex;
      align-items: center;
      position: relative;

      padding: 20rpx 25rpx;
    }
  }

  .swiper {
    margin-top: 24rpx;
    padding: 0 25rpx;
  }

  .links {
    padding: 0 25rpx;
    margin-top: calc(43rpx + 30rpx);

    .icon {
      height: 59rpx;
      width: 67rpx;
    }
    .text {
      font-size: 24rpx;
      line-height: 16rpx;
      color: #333333;
      font-weight: 500;
      margin-top: 26rpx;
    }
  }

  .img1 {
    margin-top: 26rpx;
    padding: 0 25rpx;

    & > image {
      width: 700rpx;
      height: 169rpx;
    }
  }

  .hospitals {
    background: #fff;
    border-radius: 10rpx;
    margin: 26rpx 25rpx 0;
    padding: 28rpx 25rpx;

    &__title {
      font-size: 28rpx;
      color: #000000;
      font-weight: bold;
      padding: 0 32rpx 28rpx;
    }
    &__content {
      max-height: 516rpx;
      overflow-y: scroll;

      &__item {
        display: flex;
        align-items: center;

        .left {
          & > image {
            height: 162rpx;
            width: 250rpx;
            border-radius: 6rpx;
          }
        }
        .right {
          margin-left: 25rpx;
          .title {
            font-size: 28rpx;
            color: #000000;
            font-weight: bold;
          }
          .tag {
            margin-top: 16rpx;
            display: flex;
            flex-wrap: wrap;

            &__item {
              padding: 5rpx 16rpx;
              font-size: 22rpx;
              line-height: 31rpx;
              font-weight: 500;

              &:nth-child(1) {
                color: #ca2328;
                background-color: #faefef;
              }
              &:nth-child(2) {
                color: #f38628;
                background-color: #fcf3e9;
              }
            }
            .tag__item + .tag__item {
              margin-left: 12rpx;
            }
          }
          .description {
            width: 320rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 22rpx;
            color: #929196;
            font-weight: 500;
            margin-top: 16rpx;
          }
        }
      }
    }
  }

  .statistics {
    margin: 26rpx 25rpx 0;
    display: grid;
    grid-template-columns: 286rpx 182rpx 182rpx;
    grid-template-rows: 203rpx 203rpx;
    grid-gap: 25rpx;
    grid-template-areas:
      "block1 block2 block3"
      "block1 block4 block4";

    @for $index from 1 through 4 {
      .block#{$index} {
        border-radius: 10rpx;
        grid-area: block#{$index};
      }
    }
    .block1 {
      background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
      position: relative;

      .text1 {
        color: #fff;
        padding: 74rpx 0 0 34rpx;
        font-weight: bold;
        font-size: 28rpx;
      }
      .text2 {
        font-size: 18rpx;
        color: #ffffff;
        font-weight: 500;
        padding: 17rpx 0 0 34rpx;
      }
      .order {
        font-size: 24rpx;
        color: #c20d12;
        font-weight: 500;
        padding: 9rpx 22rpx;
        background: #fff;
        border-radius: 20rpx;
        display: inline-block;
        margin: 18rpx 0 0 34rpx;
      }
      .img {
        height: 190rpx;
        width: 152rpx;
        position: absolute;
        right: 0;
        bottom: 10rpx;
      }
    }
    .block2 {
      position: relative;
      background: linear-gradient(to bottom, #f3d4d4, #f2edf0);

      .text1 {
        text-align: center;
        padding-top: 40rpx;

        text:nth-child(1) {
          font-size: 36rpx;
          color: #ca3831;
          font-weight: bold;
        }
        text:nth-child(2) {
          font-size: 18rpx;
          color: #929196;
          font-weight: 500;
        }
      }
      .text2 {
        font-size: 24rpx;
        color: #202020;
        font-weight: 500;
        padding-top: 20rpx;
        text-align: center;
      }

      .img {
        width: 114rpx;
        height: 114rpx;
        position: absolute;
        right: 10rpx;
        bottom: 20rpx;
      }
    }
    .block3 {
      position: relative;
      background: linear-gradient(to bottom, #f7e9dd, #f4f1f1);

      .text1 {
        text-align: center;
        padding-top: 40rpx;

        text:nth-child(1) {
          font-size: 36rpx;
          color: #ca3831;
          font-weight: bold;
        }

        text:nth-child(2) {
          font-size: 18rpx;
          color: #929196;
          font-weight: 500;
        }
      }
      .text2 {
        font-size: 24rpx;
        color: #202020;
        font-weight: 500;
        padding-top: 20rpx;
        text-align: center;
      }
      .img {
        width: 123rpx;
        height: 127rpx;
        position: absolute;
        right: 10rpx;
        bottom: 20rpx;
      }
    }
    .block4 {
      position: relative;
      background: #dee5f9;

      .text1 {
        font-size: 28rpx;
        color: #6c70c3;
        font-weight: bold;
        position: absolute;
        left: 39rpx;
        top: 50%;
        transform: translateY(-50%);
      }
      .img {
        position: absolute;
        width: 147rpx;
        height: 131rpx;
        top: 50%;
        transform: translateY(-50%);
        right: 18rpx;
      }
    }
  }

  .honor {
    background-color: #ede8dc;
    padding: 27rpx 40rpx;
    margin-top: 38rpx;

    &__title {
      display: flex;
      align-items: center;

      & > image {
        width: 31rpx;
        height: 36rpx;
      }
      & > text {
        font-size: 28rpx;
        color: #000000;
        font-weight: bold;
      }
    }
    .scroll-content {
      margin-top: 27rpx;
      white-space: nowrap;

      .images {
        height: 200rpx;
        width: 311rpx;
      }
    }
  }

  .bottom {
    margin-top: 35rpx;
    width: 100vw;
    height: 92rpx;
  }
}
</style>
