<template>
  <el-drawer
    title="任务详情"
    :visible.sync="visible"
    :direction="direction"
    :size="drawerWidth"
    :before-close="handleReportClose">
    <div id="reportMap">
      <h4>基础信息</h4>
      <table
        style="margin-top:15px;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>
      <div v-if="reportData.inspectFileList&&reportData.inspectFileList.length>0&&reportData.status!=2&&reportData.status!=3">
        <h4 style="margin-top: 15px">航拍照片(共{{reportData.inspectFileList.length}}张)</h4>
        <viewer class="item-list">
          <img :title="item.description" :key="index" v-for="(item,index) in reportData.inspectFileList" v-lazy="item.thumbImg" :data-source="item.originalImg">
        </viewer>
      </div>
      <div v-if="reportData.status!=2&&reportData.status!=3&&reportData.driverVideo" class="video-detail">
        <h4 style="margin-top: 15px">航拍视频</h4>
        <pcVideo style="margin-top:15px;width: 300px;height: 200px" :videoUrl="reportData.driverVideo"></pcVideo>
      </div>
      <div style="width: 100%;text-align: center;margin-top: 20px;margin-bottom: 20px">
        <el-button size="medium" icon="el-icon-back"
                   @click="$emit('goBack')">返回
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import inspectApi from '@/api/business/inspect'
  import pcVideo from '@/components/pcVideo'
  export default {
    name: "inspectReport",
    data(){
      return {
        drawerWidth: (document.body.clientWidth - 190) + 'px',
        direction: 'rtl',
        reportData:{}
      }
    },
    props:{
      status:{
        type:String,
        default(){
          return ''
        }
      },
      inspectId:{
        type:Number,
        default(){
          return 0
        }
      },
      visible:{
        type:Boolean,
        default(){
          return false
        }
      },
    },
    mounted(){
      this.getDetail()
    },
    components:{pcVideo},
    methods: {
      getDetail(){
        inspectApi.getDetail(this.inspectId).then(res => {
          this.reportData=res.data?res.data:{}
        }).catch(e => {
          this.reportData={}
        })
      },
      handleReportClose() {
        this.$emit('goBack')
      }
    }
  }
</script>

<style lang="less">
  #reportMap{
    .item-list{
      >img{
        width: 250px;
        height: 150px;
        margin-left: 10px;
        margin-top: 10px;
      }
    }
    .video-detail{
    }
  }
</style>
