<template>
  <div id="pointMain" class="point-container">
    <div style="font-size: 18px;color: #333333;text-align: center;margin-bottom: 30px;font-weight: bold">河湖巡检任务信息表</div>
    <div style="display: flex;margin-bottom: 15px;">
      <div>小组名称: {{pointData.inspectHandName}}</div>
      <div style="margin-left: 40px">期望巡检时间: {{pointData.formatInspectTime}}</div>
    </div>
    <div style="border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;font-size: 14px;color: #666;">
      <table style="table-layout: fixed;width: 100%">
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <tbody>
        <tr>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">河道名称</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">{{pointData.driverName}}</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">区属</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">{{pointData.driverArea}}</td>
        </tr>
        <tr>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">执行时间</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="5">{{pointData.executionTime}}</td>
        </tr>
        <tr>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">起点</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{pointData.driverStart}}</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">终点</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{pointData.driverEnd}}</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">长度</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{pointData.driverLength}}</td>
        </tr>
        <tr>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">天气</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{pointData.weather}}</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">风向</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{pointData.wind}}</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">温度</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"><span v-if="pointData.temperature">{{pointData.temperature}}℃</span></td>
        </tr>
        <tr>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">飞行时间</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"><span v-if="pointData.flightTime">{{pointData.flightTime}}Min</span></td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">飞行高度</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"><span v-if="pointData.flightHeight">{{pointData.flightHeight}}M</span></td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">飞行速度</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"><span v-if="pointData.flightSpeed">{{pointData.flightSpeed}}M/S</span></td>
        </tr>
        <tr>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">图片位置信息</td>
          <td style=" text-align: left;width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;min-height: 150px" colspan="5">
            <viewer>
              <img style="width: 160px;cursor: pointer" v-if="pointData.driverImage" v-lazy="pointData.driverImage"/>
            </viewer>
          </td>
        </tr>
        <tr>
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: center" colspan="6">巡检情况纪要</td>
        </tr>
        <tr style="height: 80px">
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left">河湖水面</td>
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left" colspan="5"></td>
        </tr>
        <tr style="height: 80px">
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left">河湖岸线</td>
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left" colspan="5"></td>
        </tr>
        <tr style="height: 80px">
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left">入河、湖排口</td>
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left" colspan="5"></td>
        </tr>
        <tr style="height: 80px">
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left">河湖感观水质</td>
          <td style="width: 16.66%;padding: 15px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;text-align: left" colspan="5"></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default {
    name: "point",
    data() {
      return {}
    },
    props: {
      pointData: {
        type: Object,
        default() {
          return {};
        }
      }
    }
  }
</script>

<style lang="less">
  .point-container {

  }
</style>
