<template>
  <view class="">
    <view class="item" v-for="(item, index) in 10" :key="item.id">
      <view class="top">
        <image class="avatar" src="../../static/img/public/record.png"></image>
        <view class="body">
          <view class="t_top">
            <!-- <view>姓名:<text class="name">{{item.name}}</text></view>
            <view>电话:<text class="mobile">{{item.phone}}</text></view> -->
            <view>姓名:<text class="name">张三</text></view>
            <view>电话:<text class="mobile">18555566665</text></view>
          </view>
          <!-- <view class="t_bottom">片区:<text class="address">{{item.address}}</text></view> -->
          <view class="t_bottom">片区:<text class="address">地址</text></view>
        </view>
      </view>
      <u-line color="#cccccc"></u-line>
      <view class="bottom">
        <!-- <view>更新时间: {{item.create_time}}</view> -->
        <view>更新时间: 2023-05-09</view>
        <view class="right">
          <view v-if="item%3==0" class="update" @click="toast('已更新')">
            已更新
          </view>
          <view v-else class="un_update" @click="toast('未更新')">
            未更新
          </view>
          <view class="look" @click="navTo('/subpkg/updateArchives/updateArchives?id='+item.id)">
            更新需求
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { Toast } from '../../libs/uniApi'
import { informationList } from "@/api/information.js"
export default {
  data() {
    return {
      ids: -1,
      list: []
    }
  },
  onLoad(options) {
    try{
      this.ids = options.id;
      this.loadList();
    }catch(e){
      this.ids = -1;
    }
  },
  onShow() {},
  methods: {
    navTo(url) {
      if(url){
        uni.showLoading({
          title: '加载中',
          mask: true
        })
        uni.navigateTo({
          url: url,
          success() {
            uni.hideLoading()
          }
        })
      }
      else Toast('暂未开放');
    },
    toast(str){
      Toast(str)
    },
    async loadList(){
      let res = await informationList({
        'arr[]': [...this.ids]
      });
      console.log(res);
    }
  },
  onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.item {
      margin: 0 auto;
      width: 694rpx;
      // height: 201rpx;
      background: #FFFFFF;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      margin-bottom: 28rpx;
      box-sizing: border-box;
      padding: 28rpx;
      font-size: 24.53rpx;
      color: #999999FF;
      
      &:nth-child(1){
        margin-top: 28rpx;
      }

      .top {
        display: flex;
        align-items: center;
        width: 100%;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          margin-right: 18rpx;
          margin-bottom: 12rpx;
        }

        .body{
          flex: 1;
          .t_top{
            display: flex;
            justify-content: space-between;
            margin-bottom: 18rpx;
            .name{
              font-size: 32rpx;
              color: #333;
            }
            .mobile{
              font-size: 28rpx;
              color: #333;
            }
          }
          .t_bottom{
            width: 500rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .address{
              font-size: 28rpx;
              color: #333;
            }
          }
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 20rpx;
        font-size: 25rpx;
        
        .right{
          font-size: 28rpx;
          display: flex;
          .look{
            color: $theme-oa-color;
          }
          .update{
            color: #34A853;
            margin-right: 38rpx;
          }
          .un_update{
            color: #FA5151FF;
            margin-right: 38rpx;
          }
        }

      }


    }
</style>
