<template>
  <view class="content">
    <u-navbar title="保洁详情"></u-navbar>
    <view class="area-info">
      <view class="name">{{ dataInfo.name }}</view>
      <view class="position">所属计划：{{ dataInfo.planName }}</view>
    </view>
    <view class="area-details">
      <view class="title">区域详情</view>
      <view class="details">
        <view class="block">
          <view class="value"> {{ dataInfo.areaType }}</view>
          <view class="label">区域类型</view>
        </view>
        <view class="block">
          <view class="value">{{ dataInfo.userName }}</view>
          <view class="label">保洁人员</view>
        </view>
        <view class="block">
          <view class="value">{{ dataInfo.cleanTime }}</view>
          <view class="label">清扫时间</view>
        </view>
        <view class="block">
          <view class="value">{{ dataInfo.note }}</view>
          <view class="label">备注</view>
        </view>
      </view>
      <view class="title">保洁区域图片</view>
      <view class="images">
        <image
          class="image"
          v-for="(v, i) in dataInfo.pictures"
          :key="i"
          mode="scaleToFill"
          style="width: 180rpx; height: 180rpx; border-radius: 18rpx"
          :src="BASE_URL + '/uploads/' + v.path"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import BASE_URL from "@/api/env.js"; //引入接口共用地址
import { GetPlanInfoAre } from "@/api/apiList";
export default {
  data() {
    return {
      id: "",

      params: {},

      dataInfo: {},

      BASE_URL,
    };
  },

  onLoad(options) {
    console.log("options", JSON.parse(decodeURIComponent(options.params)));
    this.params = JSON.parse(decodeURIComponent(options.params));
  },

  onShow() {
    this.getAreaInfo();
  },

  methods: {
    async getAreaInfo() {
      const res = await GetPlanInfoAre({
        id: this.params.id,
      });

      if (res.succeed) {
        this.dataInfo = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background: linear-gradient(#fff 0%, #e0ebf9 20%);
  .title {
    line-height: 1;
    border-left: 10rpx solid #5a7ee9;
    padding-left: 16rpx;
    font-weight: bold;
    font-size: 36rpx;
    color: #000000;
  }
  .area-info {
    padding: 44rpx;
    margin-top: 30rpx;
    height: 290rpx;
    background: url("@/static/images/area-bg.png") no-repeat 100% 100%;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .name {
      font-weight: bold;
      font-size: 56rpx;
      color: #211d2f;
    }
    .position {
      margin-top: 44rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #717b94;
    }
  }
  .area-details {
    padding: 50rpx 32rpx;
    background: #ffffff;
    border-radius: 36rpx 36rpx 0 0;
    min-height: calc(100vh - 400rpx);
    .details {
      margin-top: 42rpx;
      margin-bottom: 70rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 48.5%;
        height: 160rpx;
        background: #f1f7fe;
        border-radius: 18rpx;
      }
      .block:nth-child(n + 3) {
        margin-top: 14rpx;
      }
    }
    .images {
      margin-top: 46rpx;
      display: grid;
      grid-template-columns: repeat(auto-fill, 212rpx);
      gap: 20rpx; // 图片间距
    }
  }
}
</style>
