<template>
  <div>
    <div id="reportMap">
      <h4>基础信息</h4>
      <table
        style="border-collapse:collapse;table-layout: fixed;width: 100% ;font-size: 14px;color: #333333;border-top: 1px solid #999999;border-left: 1px solid #999999">
        <col style="width: 25%"/>
        <col style="width: 25%"/>
        <col style="width: 25%"/>
        <col style="width: 25%"/>
        <tbody>
        <tr>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            任务单号
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.inspectNo}}
          </td>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            行号
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.num}}
          </td>
        </tr>
        <tr>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            河道名称
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.driverName}}
          </td>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            区划
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.driverAreaName}}
          </td>
        </tr>
        <tr>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            起点
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.driverStart}}
          </td>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            终点
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.driverEnd}}
          </td>
        </tr>
        <tr>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            长度
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.driverLength}}
          </td>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            航线文件
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            <span @click="downLoad(reportData.driverFile)" style="color: #1890ff;cursor: pointer">{{reportData.driverFilename}}</span>
          </td>
        </tr>
        <tr>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            巡检时间
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.inspectTime}}
          </td>
          <td
            style="background-color: #f2f2f2;width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            飞手
          </td>
          <td
            style="width:25%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{reportData.inspectHandName}}
          </td>
        </tr>
        </tbody>
      </table>
      <h4 v-if="reportData.equipmentList&&reportData.equipmentList.length>0">无人机设备</h4>
      <table
        v-if="reportData.equipmentList&&reportData.equipmentList.length>0"
        style="border-collapse:collapse;table-layout: fixed;width: 100% ;font-size: 14px;color: #333333;border-top: 1px solid #999999;border-left: 1px solid #999999">
        <col style="width: 10%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <tbody>
        <tr>
          <td
            style="background-color: #f2f2f2;width:10%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            序号
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            无人机类型
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备编号
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备名称
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备品牌
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备型号
          </td>
        </tr>
        <tr :key="index" v-for="(item,index) in reportData.equipmentList">
          <td
            style="width:10%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{index+1}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.typeName}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.productSn}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.name}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.brand}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.model}}
          </td>
        </tr>
        </tbody>
      </table>
      <h4 v-if="reportData.mountEquipmentList&&reportData.mountEquipmentList.length>0">挂载设备</h4>
      <table
        v-if="reportData.mountEquipmentList&&reportData.mountEquipmentList.length>0"
        style="border-collapse:collapse;table-layout: fixed;width: 100% ;font-size: 14px;color: #333333;border-top: 1px solid #999999;border-left: 1px solid #999999">
        <col style="width: 10%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <col style="width: 16%"/>
        <tbody>
        <tr>
          <td
            style="background-color: #f2f2f2;width:10%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            序号
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            挂载类型
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备编号
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备名称
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备品牌
          </td>
          <td
            style="background-color: #f2f2f2;width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            设备型号
          </td>
        </tr>
        <tr :key="index" v-for="(item,index) in reportData.mountEquipmentList">
          <td
            style="width:10%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{index+1}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.typeName}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.equipmentSn}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.name}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.brand}}
          </td>
          <td
            style="width:16%;text-align: center;padding: 15px 15px;border-right: 1px solid #999999;border-bottom: 1px solid #999999;">
            {{item.model}}
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px">
      <el-button @click="pointMain" type="primary" size="medium"
                 icon="el-icon-printer">打印
      </el-button>
      <el-button size="medium" icon="el-icon-back"
                 @click="$emit('goBack')">返回
      </el-button>
    </div>
  </div>
</template>

<script>
  import  $ from 'jquery'
  export default {
    name: "report",
    data() {
      return {}
    },
    props: {
      reportData: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    methods: {
      pointMain() {
        this.print(document.getElementById('reportMap').innerHTML);
      },
      print(content, w = null, h = null) {
        const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
        const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;

        const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
        w = +w === 0 ? width : w;
        h = +h === 0 ? height : h;
        const left = ((width / 2) - (w / 2)) + dualScreenLeft;
        const top = ((height / 2) - (h / 2)) + dualScreenTop;
        var myWindow = window.open("", "打印", "toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=" + w + ", height=" + h + ", top=" + top + ", left=" + left);
        var style = "<style type='text/css'>table.gridtable {font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}</style>";
        myWindow.document.write(content + style);
        myWindow.focus();
        myWindow.document.close();     //关闭document的输出流, 显示选定的数据
        $(myWindow).ready(function () {
          myWindow.print();
          myWindow.close()
        });
        return myWindow;
      },
      downLoad(filePath) {
        location.href = filePath
      }
    }
  }
</script>

<style lang="less">
  .report-cc {
  }
</style>
