<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"
            :picker-options="beginTime"
            type="date"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd">
          </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"
            :picker-options="endTime"
            type="date"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd">
          </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"

            @keyup.enter.native="handleQuery"
          />
          <el-checkbox v-model="isselect" style="position: absolute;right: 56rem;top: 2rem;">MMSI不为空</el-checkbox>
        </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-select v-model="queryParams.monitorPointName" clearable placeholder="请选择抓拍地点">
            <el-option
              v-for="item in jianceOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </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" v-show="false">
        <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="船名">
      </el-table-column>
      <el-table-column
        prop="mmsi"
        label="MMSI">
      </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="deviceName"
        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> -->

            <!--            v-for="item in scope.row.allImgUrl"
                        style="width:20rem;height:20rem;display:inline-block;margin-right:10px"-->
            <el-badge v-if="scope.row.allImgUrl" :value="scope.row.allImgUrl.length" class="item" style="margin-top: 10px">
              <el-image
                style="width:25rem;height:25rem;display:inline-block;"
                :src="scope.row.allImgUrl[scope.row.allImgUrl.length-1]"
                :preview-src-list="scope.row.allImgUrl">
              </el-image>
            </el-badge>
          </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>

</template>

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

export default {
  name: "xtTable",
  data() {
    return {
      total: 0,
      showSearch: true,
      isselect: 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'
        }
      ],
      jianceOptions: [],
      tableData: [],
      /* start 开始时间小于今天,结束时间不能大于开始时间 */
      beginTime: {
        disabledDate: time => {
          if (this.queryParams.endTime) {
            return (
              time.getTime() > new Date(this.queryParams.endTime).getTime()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.queryParams.beginTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(this.queryParams.beginTime).getTime() - 86400000
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      },
      /* end*/
    }
  },
  created() {
    this.getBlackList();
    this.getDicts();
  },
  methods: {
    getDicts() {
      getDicts('heiyan_snap_pos').then(data => {
        this.jianceOptions = data.data
      });
    },
    getBlackList() {
      // console.log('1'+this.queryParams);
      this.loading = true;
      this.queryParams.filterMmsi = this.isselect ? "!0" : "";

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

      getBlackList(this.addDateRange(this.queryParams, dateRange)).then(response => {
        for (var index in response.rows) {
          if (response.rows[index].allImgUrl != null) {
            const split = response.rows[index].allImgUrl.replace('[', '').replace(']', '').split(',');
            response.rows[index].allImgUrl = split.concat(response.rows[index].sootImgUrl);
          }
        }
        // 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;
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: auto !important;
}

.el-input--small .el-input__inner {
  height: 36px !important;
}
</style>
