<template>
  <view class="detail">
    <!-- 订单状态：0已取消，1待登记，2待处理，3，待上门，4待打款，5已完结 -->
    <block v-for="(item, value) in listMap" :key="value">
      <view v-if="statusInfo[model1.status].indexOf(value) > -1">
        <view>
          <view class="title">{{ item.name }}</view>
          <view class="content">
            <view v-for="(iitem, index) in item.attrList" :key="index">
              {{ iitem.name }}:

              <view v-if="iitem.name === '行驶证'" class="license">
                <up-row customStyle="flex-wrap: wrap" :gutter="8">
                  <up-col span="6">
                    <view class="grid-item">
                      <image
                        v-if="model1.formData[iitem.key]"
                        :src="model1.formData[iitem.key]"
                        :mode="'widthFix'"
                        :width="'100%'"
                      ></image>
                    </view>
                  </up-col>

                  <up-col span="6">
                    <view class="grid-item">
                      <image
                      v-if="model1.formData['licenseBackUrl']"
                        :src="model1.formData['licenseBackUrl']"
                        :mode="'widthFix'"
                        :width="'100%'"
                      ></image>
                    </view>
                  </up-col>
                </up-row>
                <view> </view>
              </view>
              <text v-else
                >{{ model1.formData[iitem.key] || "-" }} {{ iitem.unit }}</text
              >
            </view></view
          >
        </view>
      </view>
    </block>
  </view>
</template>

<script setup lang="ts">
import { VehicleApi } from "@/services";
import { onLoad } from "@dcloudio/uni-app";
import { reactive } from "vue";
const model1 = reactive<any>({
  formData: {},
  status: 0,
});
const statusInfo = reactive<any>({
  0: ["regis", "car", "vehicle"],
  1: ["vehicle"],
  2: ["regis", "car", "vehicle"],
  3: ["room", "regis", "car", "vehicle"],
  4: ["settle", "room", "regis", "car", "vehicle"],
  5: ["payment", "settle", "room", "regis", "car", "vehicle"],
});
const listMap = reactive<any>({
  payment: {
    name: "打款信息",
    attrList: [
      {
        name: "打款时间",
        value: "",
        key: "paymentTime",
        unit: "",
      },
      {
        name: "打款金额",
        value: "",
        key: "paymentPrice",
        unit: "元",
      },
    ],
  },
  settle: {
    name: "结算信息",
    attrList: [
      {
        name: "过磅重量",
        value: "",
        key: "netWeight",
        unit: "KG",
      },
      {
        name: "结算金额",
        value: "",
        key: "paymentPrice",
        unit: "元",
      },
    ],
  },
  room: {
    name: "上门服务",
    attrList: [
      {
        name: "上门时间",
        value: "",
        key: "upDoorTime",
      },
    ],
  },
  regis: {
    name: "登记信息",
    attrList: [
      {
        name: "车辆所属",
        value: "",
        key: "ownerType",
      },
      {
        name: "联系人",
        value: "",
        key: "owner_name",
      },
      {
        name: "联系方式",
        value: "",
        key: "owner_phone",
      },
      {
        name: "上门地址",
        value: "",
        key: "location",
      },
    ],
  },
  car: {
    name: "我要选新车",
    attrList: [
      {
        name: "选择品牌",
        value: "",
        key: "brandName",
      },
      {
        name: "预算范围",
        value: "",
        key: "budgetRange",
      },
    ],
  },
  vehicle: {
    name: "车辆信息",
    attrList: [
      {
        name: "行驶证",
        value: "",
        key: "licensePhotoUrl",
      },
      {
        name: "车辆类型",
        value: "",
        key: "vehicleType",
      },
      {
        name: "燃油类别",
        value: "",
        key: "fuelType",
      },
      {
        name: "钢圈材质",
        value: "",
        key: "wheelMaterial",
      },
      {
        name: "整车质量",
        value: "",
        key: "curbWeight",
        unit: "KG",
      },
      {
        name: "车架号",
        value: "",
        key: "vin",
      },
      {
        name: "品牌型号",
        value: "",
        key: "brandModel",
      },
      {
        name: "系列",
        value: "",
        key: "series",
      },
      {
        name: "总重量",
        value: "",
        key: "totalWeight",
        unit: "KG",
      },
      {
        name: "车牌号",
        value: "",
        key: "licensePlate",
      },
    ],
  },
});

onLoad((option: any) => {
  // 接收传递的标题参数
  if (option.id) {
    model1.formData.id = option.id;
    model1.status = option.status;
    VehicleApi.getDetail({ id: option.id }).then((res: any) => {
      if (res.code === 200) {
        model1.formData = {
          ...res.data,
          ownerType: res.data.ownerType ? "单位" : "个人",
        };
      }
    });
  }
});
</script>

<style lang="scss" scoped>
.detail {
  padding: 40rpx;
  font-size: 32rpx;
  .title {
    font-weight: bold;
    font-size: 34rpx;
    line-height: 80rpx;
  }
  .content {
    > view {
      line-height: 60rpx;
    }
    .license {
      .grid-item {
        position: relative;
        padding: 10rpx;
        image {
          width: 100% !important;
        }
      }
    }
  }
}
</style>
