<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">

      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="开始时间" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryParams.beginTime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-form-item label="结束时间" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryParams.endTime"
            type="date"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-form-item label="船名" prop="shipName" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.shipName"
            placeholder="请输入船舶名称"
            clearable
            size="small"
            style="width: 80rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
        <el-col :span="2">
          <el-form-item label="MMSI" prop="mmsi" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.mmsi"
            placeholder="请输入MMSI"
            clearable
            size="small"
            style="width: 100rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="2">
          <el-form-item label="船舶类型" prop="name" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.shipRegionType" clearable placeholder="请选择海船/内河船">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-form-item label="抓拍地点" prop="monitorPointName" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-input
            v-model="queryParams.monitorPointName"
            placeholder="请输入抓拍地点"
            clearable
            size="small"
            style="width: 90rem"
            @keyup.enter.native="handleQuery"
          />
        </el-col>

        <el-col :span="2">
          <el-form-item label="黑度等级" prop="rcgSoots" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.rcgSoots" multiple clearable placeholder="请选择">
            <el-option
              v-for="item in rcgSootOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-form-item label="违规类型" prop="illegalStatus" style="float:right">
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-select v-model="queryParams.illegalStatus" clearable placeholder="请选择违规类型">
            <el-option
              v-for="item in illegalStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="0">
        </el-col>
        <el-radio-group v-model="queryParams.filterMmsi" size="small">
          <el-radio label="" border>全部</el-radio>
          <el-radio label="!0" border>MMSI不为空</el-radio>
        </el-radio-group>
      </el-row>

      <el-form-item style="margin-left:1rem;margin-top:2rem;">
        <el-button icon="el-icon-search" size="mini" @click="getBlackList" class="search">查询</el-button>
        <!--        <el-button icon="el-icon-upload2" size="mini" class="export">导出</el-button>-->
      </el-form-item>

    </el-form>


    <el-table
      :data="tableData"
      :header-cell-style="{ background: 'linear-gradient(white, #ccebf9)'}"
      style="width: 100%"
      height=520>
      <el-table-column
        label='序号'
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="shipName"
        label="船名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mmsi"
        label="MMSI"
        width="180">
      </el-table-column>
      <el-table-column
        prop="aisShipType"
        label="内河船/海船"
        :formatter="shipTypeFormat">
      </el-table-column>
      <el-table-column
        prop="monitorPointName"
        label="抓拍地点">
      </el-table-column>
      <el-table-column
        prop="snapTimeFmt"
        label="抓拍时间">
      </el-table-column>
      <el-table-column
        prop="rcgSoot"
        label="黑度等级">
      </el-table-column>
      <el-table-column
        prop="address"
        label="详情">
        <template slot-scope="scope">

          <!-- <img style="width:40rem;height:40rem" :src="scope.row.sootImgUrl"/> -->
          <!-- </div> -->
          <!-- <div v-for="item in scope.row.allImgUrl"> -->
          <div style="width:86rem;overflow-y: hidden;overflow-x: auto;white-space: nowrap;">
            <!-- <img style="width:40rem;height:40rem" :src="item.replace(' ','')"/> -->
            <!-- <el-image   v-for="item in ['https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00315-1423.jpg','https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg']"
style="width:20rem;height:20rem;display:inline-block;margin-right:10px"
:src="item"
:preview-src-list="['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg','https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00315-1423.jpg']">
</el-image> -->
            <el-image v-for="item in scope.row.allImgUrl"
                      style="width:20rem;height:20rem;display:inline-block;margin-right:10px"
                      :src="item"
                      :preview-src-list="scope.row.allImgUrl">
            </el-image>

            <!-- <img style="width:40rem;height:40rem" src="https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00315-1423.jpg"/>  -->

            <!-- <div>{{item.replace(' ','')}}</div> -->
          </div>
          <!-- <video style="width:40rem;height:40rem" controls="" autoplay="" name="media"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></video> -->
          <!-- <div>{{scope.row.sootImgUrl}}</div> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="管辖海事机构">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getBlackList"
    />

  </div>

  <!-- <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="船名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="MMSI"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="内河船/海船">
    </el-table-column>
      <el-table-column
      prop="address"
      label="抓拍地点">
    </el-table-column>
      <el-table-column
      prop="address"
      label="抓怕时间">
    </el-table-column>
       </el-table-column>
      <el-table-column
      prop="address"
      label="黑度登记">
    </el-table-column>
       </el-table-column>
      <el-table-column
      prop="address"
      label="详情">
    </el-table-column>
       </el-table-column>
      <el-table-column
      prop="address"
      label="管辖海事机构">
    </el-table-column>
  </el-table> -->
</template>

<script>
import {getBlackList} from "@/api/data/blackData";

export default {
  name: "xtTable",
  data() {
    return {
      total: 0,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shipName: undefined,
        monitorPointName: undefined,
        rcgSoots: undefined,
        mmsi: undefined,
        beginTime: undefined,
        endTime: undefined,
        shipRegionType: undefined,
        illegalStatus: 3,
        filterMmsi: '!0'
      },
      typeOptions: [
        {
          value: '0',
          label: '内河船'
        }, {
          value: '1',
          label: '海船'
        }
      ],
      illegalStatusOptions: [
        {
          value: '',
          label: '全部'
        }, {
          value: 1,
          label: '正常'
        }, {
          value: 3,
          label: '违规'
        }
      ],
      rcgSootOptions: [
        {
          value: '1',
          label: '1'
        }, {
          value: '2',
          label: '2'
        }, {
          value: '3',
          label: '3'
        }, {
          value: '4',
          label: '4'
        }, {
          value: '5',
          label: '5'
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getBlackList();
  },
  methods: {
    getBlackList() {
      // console.log('1'+this.queryParams);
      this.loading = true;

      var dateRange = '';
      if (this.queryParams.beginTime != undefined && this.queryParams.beginTime != "" && this.queryParams.endTime != undefined && this.queryParams.endTime != "") {
        dateRange = [];
        dateRange.push(this.queryParams.beginTime.toJSON().split("T")[0]);
        dateRange.push(this.queryParams.endTime.toJSON().split("T")[0]);
      }

      getBlackList(this.addDateRange(this.queryParams, dateRange)).then(response => {

        // var response ={
        //     "total": 1,
        //     "rows": [
        //         {
        //             "searchValue": null,
        //             "createBy": "",
        //             "createTime": "2021-10-26 08:41:43",
        //             "updateBy": "",
        //             "updateTime": "2021-11-04 08:39:44",
        //             "remark": "",
        //             "params": {},
        //             "id": 805,
        //             "aisDist": 0,
        //             "aisDrt": 0,
        //             "aisDst": "",
        //             "aisMmsi": 413793209,
        //             "aisShipLen": 60,
        //             "aisShipName": "宇坤668",
        //             "shipRegionType": "0",
        //             "orgName": null,
        //             "aisShipSpd": 4.2,
        //             "aisShipType": "货船",
        //             "aisShipWidth": 13,
        //             "isAbnormalSize": 1,
        //             "latitude": 31.77495575,
        //             "rcgSoot": 1,
        //             "lockSeq": 1,
        //             "longitude": 120.96312714,
        //             "rcgCargoType": "",
        //             "rcgDeadweightTon": 0,
        //             "rcgDist": 0,
        //             "rcgDrt": 0,
        //             "rcgIsFleet": 0,
        //             "rcgLoadSts": "UNKNOWN",
        //             "rcgShipHeightAboveWater": 4.7,
        //             "rcgShipLen": 53.7,
        //             "rcgShipName": "皖振远2198",
        //             "rcgShipSpd": -3.9,
        //             "rcgShipType": "内河船",
        //             "rcgShipWidth": null,
        //             "regportName": "蚌埠",
        //             "snapImPath": "D:/ShipIm/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668",
        //             "snapPos": "常电煤码头",
        //             "snapTime": "2021/10/26 08:41:43",
        //             "snapTimeFmt": "2021-10-26 08:41:43",
        //             "status": "ENABLED",
        //             "textFeatureLabel": "{\"name\": null, \"label\": null, \"points\": [1740.0, 697.0, 1965.0, 750.0], \"feature\": \"text\"}",
        //             "textImgUrl": "/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/Z0_C1_细节_长焦_高速枪2134-03_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845.jpg",
        //             "rcgShipTypeDetail": "",
        //             "useWarn": null,
        //             "warnLabelList": "[]",
        //             "qrcode": "",
        //             "shipNameDirection": "",
        //             "shipNameValid": "皖振远2198",
        //             "sootFeatureLabel": "{\"name\": null, \"label\": null, \"points\": [1277.0, 283.0, 1552.0, 358.0], \"feature\": \"soot\"}",
        //             "sootImgUrl": "http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668\\Z0_C1_细节_长焦_高速枪2134-04_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845.jpg",
        //             "allImgUrl": "[http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/Z0_C1_细节_长焦_高速枪2134-01_fp0.0_vpr-10000.0_hm5.00_ym132.69_roi929_114_4095_845.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/Z0_C1_细节_长焦_高速枪2134-02_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/Z0_C1_细节_长焦_高速枪2134-03_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/Z0_C1_细节_长焦_高速枪2134-04_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/全貌_fp0.0_vpr-15000.0_hm10.00_xm-77.7_ym333.0_roi00_00_2559_1439_1_fas0.0_z2s6.1.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/细节_fp41839.0_vpr-15000.0_hm10.00_xm-27.2_ym347.7_roi00_00_2559_1439_3_fas0.0_z2s17.6.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/细节_fp41839.0_vpr-15000.0_hm10.00_xm-27.2_ym347.7_roi00_00_2559_1439_4_fas0.0_z2s17.6.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/细节_fp41839.0_vpr-15000.0_hm10.00_xm-27.2_ym347.7_roi00_00_2559_1439_7_fas0.0_z2s17.6.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/鑫_1634776877_宇坤668细节抓拍录像.mp4全貌拼接.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/黑烟检测_Z0_C1_细节_长焦_高速枪2134-04_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845_1.jpg, http://198.17.188.6:8091/shipface/static/snap/常电煤码头/2021/10/21/AisOn/昼间_084117_413793209_宇坤668_L53.7W13.0_V2.1mps_RcgName宇坤668/黑烟检测_Z0_C1_细节_长焦_高速枪2134-04_fp0.0_vpr-10000.0_hm5.00_ym143.75_roi929_114_4095_845_I.jpg]",
        //             "illegalStatus": 3,
        //             "uploadFlag": 1,
        //             "shipName": "宇坤668",
        //             "monitorPointName": "常电煤码头",
        //             "mmsi": "413793209"
        //         }
        //     ],
        //     "code": 200,
        //     "msg": "查询成功"
        // }
        for (var index in response.rows) {
          if (response.rows[index].allImgUrl != null) {
            response.rows[index].allImgUrl = response.rows[index].allImgUrl.replace('[', '').replace(']', '').split(',')
          }
        }
        // console.log(response);
        // console.log(response.rows[0].allImgUrl.replace('[','').replace(']','').split(','));
        // var jsonArry = JSON.parse(response.rows[0].allImgUrl.replace('，',','));
        // console.log(jsonArry);
        this.tableData = response.rows;
        this.total = response.total;
        console.log(response);
        this.loading = false;
      });
    },
    // 内河船、海船转化
    shipTypeFormat(row, column) {
      return row.shipRegionType == 0 ? "内河船" : row.shipRegionType == 1 ? "海船" : ""
    }
  }
}
</script>
<style>
.search {

  opacity: 1;
  background: linear-gradient(0deg, #098cf1 0%, #14eaef 100%);
  border-radius: 2rem;
  color: white
}

.export {

  opacity: 1;
  background: #ffffff;
  border: 1rem solid #e1e1e1;
  border-radius: 2rem;
}
</style>
