<template>
  <div class="box">
    <el-form ref="formRef" label-width="84px">
      <el-col>
        <el-row>
          <el-col :span="8">
            <span>车牌号:</span>{{ formData.license }}
          </el-col>

          <el-col :span="8">
            <span>使用人:</span>{{ formData.rent_info?.use_user_name }}
          </el-col>
          <el-col :span="8">
            <span>联系方式:</span>{{ formData.rent_info?.use_user_phone }}
          </el-col>
          <!-- <el-col :span="5"> <span>身份:</span>xxxxxxxxxxx负责人 </el-col> -->
        </el-row>
        <el-row>
          <el-col :span="8">
            <span>承租对象:</span>{{ formData.rent_info?.company_name }}
          </el-col>
          <el-col :span="8">
            <span>租赁时间:</span>{{ formData.rent_info?.create_time }}
          </el-col>
          <el-col :span="8">
            <span>合同:</span
            ><span
              @click="checkContract"
              v-if="formData.rent_info?.contract_file"
              style="color: blue; cursor: pointer"
              >合同</span
            >
          </el-col>
        </el-row>
        <el-row class="map_row">
          <el-col :span="8">
            <span>今日轨迹:</span>
            <!-- <div class="map"></div> -->
            <div id="container"></div>
            <div id="panel"></div>
          </el-col>
          <el-col :span="8">
            <span>车辆使用情况:</span>
            <p v-for="(item, index) in formData.travel_info">
              {{ item.day }}行驶了{{ item.mileage }}米
            </p>
          </el-col>
          <el-col :span="8">
            <span>车辆图片:</span>
         
            <img
              :src="formData.pic"
              style="width: 200px; height: 200px"
              alt=""
            />
          </el-col>
        </el-row>

        <el-row>
          <span> 当前运载货物:</span>
          <el-button type="primary">
            <router-link
              :to="{
                path: '/vehicle/goodsList',
                query: {
                  id: route.query.id,
                },
                // route
              }"
              >查看全部</router-link
            >
          </el-button>
          <!-- <el-button type="primary" @click="goDetail">查看全部</el-button> -->
        </el-row>

        <el-row>
          <el-table
            :default-sort="{ prop: 'create_time', order: 'descending' }"
            :data="formData.logistic_info"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              label="订单编号"
              prop="order_sn"
              show-overflow-tooltip
            />
            <el-table-column
              label="商品"
              prop="shop_name"
              show-overflow-tooltip
            />
            <el-table-column
              label="提供商家"
              prop="shop_name"
              show-overflow-tooltip
            />
            <el-table-column
              label="下单用户"
              prop="user_name"
              show-overflow-tooltip
            />

            <el-table-column
              label="收货地址"
              prop="receiver_address"
              show-overflow-tooltip
            />

            <el-table-column
              label="上车时间"
              prop="qh_time"
              show-overflow-tooltip
            />

            <el-table-column
              label="运输时间"
              prop="diff_time"
              show-overflow-tooltip
            />
          </el-table>
        </el-row>
      </el-col>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { vehicleDetil } from "@/api/vehicle";
const formData = reactive({
  id: 0,
  license: "",
  gps_imei: "",
  type: 0,
  status: 0,
  create_time: "",
  update_time: "",
  mileage: 0,
  track_info: [],
  travel_info: [],
  pic: "",
  rent_info: {
    id: null,
    car_id: null,
    contract_id: null,
    company_id: null,
    company_name: "",
    company_user: "",
    company_phone: "",
    use_user_id: null,
    use_user_name: "",
    use_user_phone: "",
    create_time: "",
    contract_file: "",
  },
  logistic_info: [
    {
      order_id: null,
      order_sn: "",
      shop_name: "",
      user_name: "",
      receiver_address: "",
      qh_time: null,
      ps_time: null,
      diff_time: "",
      products: [
        {
          product_num: null,
          goods_name: "null",
          goods_unit: "null",
        },
      ],
      product_count: null,
    },
  ],
});
const route = useRoute();
// 查看合同
const checkContract = () => {
  window.open(formData.rent_info.contract_file, "_blank");
};

vehicleDetil({ id: route.query.id }).then((res) => {
  Object.keys(formData).forEach((key) => {
    //@ts-ignore
    formData[key] = res[key];
  });
});

// Object.keys(formData).forEach((key) => {
//   //@ts-ignore
//   formData[key] = data[key];
// });
onMounted(() => {
  const lists = [
    {
      lon: 116.368904,
      lat: 39.913423,
    },
    {
      lon: 116.382122,
      lat: 39.901176,
    },
    {
      lon: 116.387271,
      lat: 39.912501,
    },
    {
      lon: 116.398258,
      lat: 39.9046,
    },
  ];
  var map = new AMap.Map("container", {
    viewMode: "3D", // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
    zoom: 11, // 初始化地图层级
    center: [
      formData.track_info[0]?.lon || lists[0]?.lon,
      formData.track_info[0]?.lat || lists[0]?.lat,
    ], // 初始化地图中心点
    mapStyle: "amap://styles/red",
  });

  let objs = formData.track_info;
  var path = [];
  objs.forEach((item) => {
    path.push(new AMap.LngLat(item.lon, item.lat));
  });
  //   lists.forEach((item) => {
  //     path.push(new AMap.LngLat(item.lon, item.lat));
  //   });

  var polyline = new AMap.Polyline({
    path: path,
    borderWeight: 100, // 线条宽度，默认为 1
    strokeColor: "blue", // 线条颜色
    lineJoin: "round", // 折线拐点连接处样式
  });
  map.add(polyline);
});
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 1vh 1vw;
  .el-row {
    margin-bottom: 5vh;
  }
  #container {
    width: 25vw;
    height: 25vh;
  }
  span {
    margin-right: 1vw;
  }
  .map {
    background-color: #c0ebaf;
  }
}
</style>
