<template>
  <view>
    <cpn-navbar title="预约护理"></cpn-navbar>

    <view>
      <!-- 搜索 -->
      <view class="search">
        <view class="input-content">
          <u-input :clearable="false" value="" placeholder="请输入要搜索的内容" height="30" :custom-style="inputStyle"
                   @input=""></u-input>
        </view>
        <view class="icon">
          <u-icon name="search" size="46" color="#ABAEBE"></u-icon>
        </view>
      </view>

      <view class="customer-list">
        <view class="customer-list__item" v-for="(item, index) in customers" :key="item.id">
          <view class="top">
            <view class="avatar">
              <u-image :src="item.customer.sex === '男' ? vuex_male_img : vuex_female_img" height="104"
                       width="104" shape="circle"></u-image>
            </view>
            <view class="user-info">
              <view class="name">{{item.customer.name}}</view>
              <view class="tel">
                <view>
                  <u-icon name="phone" size="28" color="#1479FF"></u-icon>
                </view>
                <view class="text">{{item.customer.phone || '无'}}</view>
              </view>
              <view class="address">
                <view>
                  <u-icon name="map" size="28" color="#1479FF"></u-icon>
                </view>
                <view class="text">{{item.customer_address.address || '无'}}</view>
              </view>
            </view>
            <view class="sex">
              <view class="sex-text">
                {{item.customer.sex || '无'}}
              </view>
            </view>
          </view>

          <view class="line"></view>

          <view class="bottom" @click="toAddOrder">
            <u-icon color="#1479FF" name="bell-fill"></u-icon>
            <span>立即预约</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputStyle: {
        width: "600rpx",
        fontSize: "28rpx",
        fontWeight: "500"
      },
      customers: [{"id":11395,"no":"202312250933084cac20335","order_id":892,"admin_id":1,"department_id":null,"customer_id":768,"product_id":24,"date":"2023-12-25","start_time":"2023-12-25 09:31:13","end_time":"2023-12-25 11:31:20","nurse_id":90,"status":2,"address_id":1592,"created_at":"2023-12-25 09:33:08","updated_at":"2023-12-25 10:32:08","deleted_at":null,"sign_in":"2023-12-25 09:39:49","sign_in_address":"江苏省苏州市吴中区太湖东路288号长桥苏州市吴中区人民政府(太湖东路北)","sign_in_loc":"31.26249,120.63212","sign_out":"2023-12-25 10:32:08","sign_out_address":"江苏省苏州市吴中区太湖东路288号长桥苏州市吴中区人民政府(太湖东路北)","sign_out_loc":"31.26249,120.63212","is_error":0,"address":"金坛区直溪镇溪滨村村民委员会","month_count":"1","month_time":"0","distance":12878.6,"status_text":"已护理","customer":{"id":768,"name":"叶华","phone":"18861212210","idcard":"320124197907010227","sex":"女","birthday":"1979-07-01","contact_name":"耿志俊","contact_phone":"18861212210","idcard_address":"直溪镇溪滨村村委会大耿庄85","is_dead":0,"remark":null,"level_id":18,"created_at":"2023-11-20 13:58:47","updated_at":"2023-11-20 13:58:47","deleted_at":null,"city_id":"21","area_id":"15","street_id":"27","level_type":34,"status":1},"customer_address":{"id":1592,"name":null,"customer_id":768,"address":"金坛区直溪镇溪滨村村民委员会","comment":null,"lat":"31.868529","lng":"119.454772","created_at":"2023-11-20 13:58:47","updated_at":"2023-11-20 13:58:47","deleted_at":null,"default":1}},{"id":11396,"no":"20231225111421dc2e75816","order_id":891,"admin_id":1,"department_id":null,"customer_id":768,"product_id":17,"date":"2023-12-25","start_time":"2023-12-25 11:14:00","end_time":"2023-12-25 12:14:02","nurse_id":90,"status":2,"address_id":1592,"created_at":"2023-12-25 11:14:21","updated_at":"2023-12-25 11:19:02","deleted_at":null,"sign_in":"2023-12-25 11:14:51","sign_in_address":"江苏省苏州市吴中区太湖东路288号长桥苏州市吴中区人民政府(太湖东路北)","sign_in_loc":"31.26249,120.63212","sign_out":"2023-12-25 11:19:01","sign_out_address":"江苏省苏州市吴中区太湖东路288号长桥苏州市吴中区人民政府(太湖东路北)","sign_out_loc":"31.26249,120.63212","is_error":0,"address":"金坛区直溪镇溪滨村村民委员会","month_count":"1","month_time":"0","distance":12878.6,"status_text":"已护理","customer":{"id":768,"name":"叶华","phone":"18861212210","idcard":"320124197907010227","sex":"女","birthday":"1979-07-01","contact_name":"耿志俊","contact_phone":"18861212210","idcard_address":"直溪镇溪滨村村委会大耿庄85","is_dead":0,"remark":null,"level_id":18,"created_at":"2023-11-20 13:58:47","updated_at":"2023-11-20 13:58:47","deleted_at":null,"city_id":"21","area_id":"15","street_id":"27","level_type":34,"status":1},"customer_address":{"id":1592,"name":null,"customer_id":768,"address":"金坛区直溪镇溪滨村村民委员会","comment":null,"lat":"31.868529","lng":"119.454772","created_at":"2023-11-20 13:58:47","updated_at":"2023-11-20 13:58:47","deleted_at":null,"default":1}},{"id":11397,"no":"20231225112026a43896149","order_id":893,"admin_id":1,"department_id":null,"customer_id":767,"product_id":24,"date":"2023-12-25","start_time":"2023-12-25 11:20:19","end_time":"2023-12-25 12:20:20","nurse_id":90,"status":1,"address_id":1591,"created_at":"2023-12-25 11:20:26","updated_at":"2023-12-25 11:20:44","deleted_at":null,"sign_in":"2023-12-25 11:20:44","sign_in_address":"江苏省苏州市吴中区太湖东路288号长桥苏州市吴中区人民政府(太湖东路北)","sign_in_loc":"31.26249,120.63212","sign_out":null,"sign_out_address":null,"sign_out_loc":null,"is_error":0,"address":"直溪镇新河村退役军人服务站","month_count":null,"month_time":null,"distance":12878.6,"status_text":"护理中","customer":{"id":767,"name":"吴浩","phone":"13813519467","idcard":"320482199412044619","sex":"男","birthday":"1994-12-04","contact_name":"吴冬兆","contact_phone":"13813519467","idcard_address":"直溪镇新河村村委会上新河村8号","is_dead":0,"remark":null,"level_id":19,"created_at":"2023-11-20 13:51:25","updated_at":"2023-11-20 13:51:25","deleted_at":null,"city_id":"21","area_id":"15","street_id":"27","level_type":35,"status":1},"customer_address":{"id":1591,"name":null,"customer_id":767,"address":"直溪镇新河村退役军人服务站","comment":null,"lat":"31.836242","lng":"119.508225","created_at":"2023-11-20 13:51:25","updated_at":"2023-11-20 13:51:25","deleted_at":null,"default":1}}]
    };
  },
  methods: {
    toAddOrder () {
      uni.$u.throttle(() => {
        uni.navigateTo({
          url: `/pages/order/addOrder`
        })
      })
    }
  }
}
</script>

<style lang="scss">
.search {
  width: 710rpx;
  height: 70rpx;
  background: #FFFFFF;
  border: 2rpx solid #FAFBFC;
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: 24rpx 24rpx 0 24rpx;

  .input-content {

    margin-left: 30rpx;
  }

  .icon {


    margin-right: 30rpx;
  }
}
.customer-list {

  margin-top: 26rpx;
  &__item {
    width: 710rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

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

    .top {
      display: flex;
      justify-content: space-between;

      padding-bottom: 24rpx;
      .avatar {

        padding-top: 4rpx;
        padding-left: 20rpx;
      }

      .user-info {
        flex: 1;

        padding-left: 24rpx;

        .name {
          width: 270rpx;
          height: 48rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
        }

        .tel {
          height: 40rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;
          display: flex;

          margin-top: 18rpx;

          .text {

            margin-left: 10rpx;
          }
        }

        .address {
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;
          display: flex;

          margin-top: 14rpx;

          .text {

            margin-left: 10rpx;
          }
        }
      }

      .sex {
        width: 40rpx;
        height: 40rpx;
        background: #FDECEC;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;

        margin-right: 20rpx;

        .sex-text {
          width: 28rpx;
          height: 34rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 34rpx;
        }
      }
    }


    .line {
      width: 670rpx;
      height: 2rpx;
      border: 2rpx solid #EEEFF5;

      margin: 0 auto;
    }

    .bottom {
      display: flex;
      justify-content: center;
      font-size: 32rpx;
      color: #1479FF;

      padding-top: 24rpx;

      & > span {
        letter-spacing: 2rpx;
        padding: 0 10rpx;
      }
    }
  }
}
</style>
