<template>
  <view>
    <cpn-navbar title="回访记录" :is-back="true"></cpn-navbar>

    <view>
      <view>
        <u-button :custom-style="{'margin':'24rpx 24rpx 0 24rpx'}" type="warning" @click="refresh">刷新</u-button>
      </view>
      <!-- 搜索 -->
     <!-- <view class="search">
        <view class="input-content">
          <u-input :clearable="false" :value="select.keyword" placeholder="请输入要搜索的内容" height="30" :custom-style="inputStyle"
                   @input="searchInput"></u-input>
        </view>
        <view class="icon">
          <u-icon name="search" size="46" color="#ABAEBE"></u-icon>
        </view>
      </view> -->

      <!-- 护理列表 -->
      <view class="nursing-list">
        <view v-if="nursingList && nursingList.length > 0">
          <view v-for="(item,index) in nursingList" :key="index" class="list-item"
		  @click="pageTo('/package_sub/pages/quality/qualityDetail?id='+item.id)">
            <view class="top">
              <view class="time">
				  回访日期： <text style="color:#2979ff">{{ item.date }}</text></view>
            </view>
            <view class="line"></view>
            <view class="center">
              <view class="user-info">
                <view class="name">护理员：{{item.nurse_name?item.nurse_name:''}}</view>
                <view class="name">总分：{{item.total_score?item.total_score:0}}</view>
				<view class="name">备注：</view>
				<view class="name">{{item.remark?item.remark:''}}</view>
				<view class="name">回访地址：</view>
				<view class="name">
				 {{ `${(item.longitude || item.latitude) ? ('(' + item.longitude + ',' + item.latitude + ')') : ''}${item.address?item.address:''}` }}
				</view>
              </view>
            </view>

          </view>
        </view>

        <view v-else>
          <u-empty mode="list" text="暂无记录"></u-empty>
        </view>
      </view>
    </view>

    <u-loadmore :status="status" :load-text='loadText' @loadmore='select.page++,getList()' />
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
import { getAgeByIdcard } from "@/common/util";
export default {
  data() {
    return {
      scrollTop: 0,
      isShowCalendar: false,
      inputStyle: {
        width: "600rpx",
        fontSize: "28rpx",
        fontWeight: "500"
      },
      
      status: 'loadmore',
      loadText: {
        loadmore: '轻轻上拉或点击',
        loading: '努力加载中',
        nomore: '实在没有了'
      },
      nursingList: [],

      select: {
        page_size: 10,
        page: 1,
		customer_id:'',
      },
    }
  },
  
  methods: {
    getAgeByIdcard,
    refresh(){
      this.select.page_size = 10
        this.select.page = 1
      
      this.nursingList = []
      this.getList()
    },
    async getList() {
      const response = await this.$u.api.adminQualityList(this.select)
	  console.log("response",response)
      let res = response
      if (res.data.length > 0 && res.data) {
        this.nursingList.push(...res.data)
        this.status = 'loadmore'
      } else {
        this.status = 'nomore'
        if (this.select.page > 1) {
          this.select.page--
        }
      }
    },

    pageTo (url) {
      uni.navigateTo({
        url
      })
    }
  },
  computed: {
    defaultAddress () {
      return function (address) {
        return address&&address.length>0?address[0]: {}
      }
    }
  },
  watch: {
  },
  onReachBottom() {
    this.select.page++
    this.status = 'loading';
    this.getList()
  },
  onLoad(options){
	  this.select.customer_id = options.customer_id?options.customer_id:''
	  this.select.page = 1
	  this.nursingList = []
	  this.getList()
  },
  onShow() {
    
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  }
}
</script>

<style scoped lang="scss">
//下拉自定义
/deep/.u-dropdown__menu {
  justify-content: space-evenly !important;
}

/deep/.u-dropdown__menu__item {
  width: 224rpx !important;
  flex: none !important;
  height: 70rpx;
  background: #FFFFFF;
  border-radius: 10rpx;
  justify-content: space-between !important;
}

/deep/.u-dropdown__menu__item .u-flex {
  flex: 1;
}

/deep/.u-dropdown__menu__item__text {
  flex: 1 !important;
  font-size: 32rpx !important;
  font-weight: 500 !important;
  color: #333333 !important;
  text-align: center;

  padding: 12rpx 0rpx !important;
}

/deep/.u-dropdown__menu__item__arrow {
  width: 70rpx !important;
  height: 70rpx !important;
  background: rgba(20, 121, 255, 0.1) !important;
  border-radius: 10rpx !important;
  border: 2rpx solid #FFFFFF !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/deep/.u-load-more-wrap {
  padding: 10px 0;
}

.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;
  }
}

.drop-down {
  margin-top: 20rpx;
}

.nursing-list {

  margin-top: 10rpx;

  .list-item {
    width: 710rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);

    margin: 0 20rpx 26rpx 22rpx;

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

      padding: 22rpx 0;

      .time {
        font-size: 32rpx;
        font-weight: 500;
        color: #36596A;
        line-height: 32rpx;

        padding-left: 20rpx;
      }

      .status {
        display: flex;
        align-items: center;

        .status-icon {

          margin-right: 10rpx;
        }

        .status-text {
          height: 40rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #36596A;
          line-height: 40rpx;

          margin-right: 20rpx;
        }
      }
    }

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

      margin: 0 auto;
    }

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

      padding-top: 24rpx;
	  padding-bottom:24rpx;

      .avatar {

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

      .user-info {
        flex: 1;

        padding-left: 24rpx;

        .name {
          width: 100%;
          // font-size: 32rpx;
		  margin-bottom:10rpx;
          // 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;
        }
      }
      .age {
        @extend .address;
      }
      .dislevel {
        @extend .address;
      }
      .contact {
        @extend .address;
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin-top: 16rpx;
      padding-bottom: 26rpx;

      .distance {
        align-items: center;
        display: flex;

        .distance-icon {

          padding-left: 20rpx;
        }

        .distance-text {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #A7AFBC;
          line-height: 34rpx;

          padding-left: 20rpx;
        }
      }

      .to-there {
        display: flex;
        align-items: center;

        margin-right: 20rpx;

        .to-there-text {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #A7AFBC;
          line-height: 34rpx;

          margin-right: 14rpx;
        }

        .to-there-icon {

          margin-left: 3rpx;
        }
      }
    }
  }
}
</style>
