<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.startTime"
                        type="datetime"
                        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="datetime"
                            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="请输入关键字"
                            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 shipTypeOptions"
                                :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="destination" style="float:right">
                       </el-form-item>
                 </el-col>
                  <el-col :span="3">
                        <el-input
                          v-model="queryParams.destination"
                          placeholder="目的港"
                          clearable
                          size="small"
                          style="width: 80rem"
                        />
                 </el-col>
                  <el-col :span="2">
                         <el-form-item label="管辖机构" prop="orgName" style="float:right">
                        </el-form-item>
                 </el-col>
                  <el-col :span="3">
                         <el-select v-model="queryParams.orgName" clearable placeholder="请选择">
                              <el-option
                                v-for="item in orgOptions"
                                :key="item.dictValue"
                                :label="item.dictLabel"
                                :value="item.dictValue">
                              </el-option>
                            </el-select>
                 </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.dealResult" clearable placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                 </el-col>
                   <el-col :span="2">
                         <el-form-item label="快检结果" prop="fastResult" style="float:right">
                         </el-form-item>
                 </el-col>
                  <el-col :span="3">
                        <el-select v-model="queryParams.fastResult" clearable placeholder="请选择">
                            <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                 </el-col>
                
                  <el-col :span="2">
                         <el-form-item label="送检结果" prop="uploadResult" style="float:right">
                         </el-form-item>
                 </el-col>
                  <el-col :span="3">
                      <el-select v-model="queryParams.uploadResult" clearable placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                 </el-col>
           </el-row>

    

      <!--      <el-form-item label="受否中国国籍" prop="name">-->
      <!--          <el-radio v-model="queryParams.radio" label="1">是</el-radio>-->
      <!--          <el-radio v-model="queryParams.radio" label="2">否</el-radio>-->
      <!--       </el-form-item>-->


      <el-form-item style="margin-left:10rem">
        <el-button icon="el-icon-search" size="mini" @click="getLiuLists" class="search">查询</el-button>
        <el-button icon="el-icon-upload2" size="mini" @click="" class="export">导出</el-button>
        <el-button icon="el-icon-setting" size="mini" @click="dialogVisible = true" class="export">阈值</el-button>
      </el-form-item>


    </el-form>


    <el-radio-group v-model="tableShow" style="margin-bottom: 30px;" @change="tabChange">
      <el-radio-button label="1">嫌疑船舶管理</el-radio-button>
      <el-radio-button label="2">处置流程管理</el-radio-button>
    </el-radio-group>


    <el-table
      :data="tableData"
      :header-cell-style="{ background: 'linear-gradient(white, #ccebf9)'}"
      style="width: 100%"
      height=400>
       <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="shipRegionType"
        label="内河船/海船">
      </el-table-column>
      <el-table-column
        prop="monitorPointName"
        label="监测点">
      </el-table-column>
      <el-table-column
        prop="orgName"
        label="管辖机构" v-if="tableShow == 1">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="监测时间">
      </el-table-column>
      <el-table-column
        prop="so2Concentration"
        label="监测值" v-if="tableShow == 1">
      </el-table-column>
      <el-table-column
        prop="address"
        label="发送短信"
        v-if="false">
        <template slot-scope="scope">
          <el-button type="warning" icon="el-icon-chat-line-square">发送</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="快检结果"
        v-if="tableShow != 1">
      </el-table-column>
      <el-table-column
        prop="address"
        label="送检结果"
        v-if="tableShow != 1">
      </el-table-column>
      <el-table-column
        prop="address"
        label="处置结果"
        v-if="tableShow != 1">
      </el-table-column>
      <el-table-column
        prop="destination"
        label="目的港"
        v-if="tableShow == 1">
      </el-table-column>
      <el-table-column
        prop="berthName"
        label="锚铂计划"
        v-if="tableShow == 1">
      </el-table-column>
    </el-table>

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

    <div class="dialogContent">
      <el-dialog
        title=""
        :visible.sync="dialogVisible">
        <div class="dialogDiv" v-show="dialogShow">
          <span class="dialogFont" style="margin-left:10rem">燃油硫含量报警阈值(%)</span>
          <span class="dialogFont" style="margin-left:40rem">{{ liuCount }}</span>
          <button style="margin-left:40rem;" class="dialogButton" @click="dialogShow=false">修改</button>
        </div>

        <div class="dialogDiv" v-show="!dialogShow">
          <span class="dialogFont" style="margin-left:10rem">燃油硫含量报警阈值(%)</span>
          <el-input v-model="liuCount" placeholder="请输入内容" style="width:30rem;margin-left:15rem"></el-input>
          <button style="margin-left:13rem;" class="dialogButton" @click="getThresholdEdit">保存</button>
          <button style="margin-left:7rem;" class="dialogButton" @click="dialogShow=true">取消</button>
        </div>
      </el-dialog>
    </div>

  </div>

</template>

<script>
import {getLiuList, getThresholdEdit, getThresholdList} from "@/api/data/liuData";
import {getDicts} from "@/api/system/dict/data";

export default {
  name: "xtTable",
  data() {
    return {
      total: 0,
      dialogVisible: false,
      showSearch: true,
      //   tabPosition: 'left',
      tableShow: 1,
      liuCount: 0.3,
      dialogShow: true,
      liuCountId: '',
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: '',
        mmsi: '',
        shipName: '',
        shipRegionType: '',
        destination: '',
        orgName: '',
        illegalStatus: '',
        dealResult: '',
        fastResult: '',
        uploadResult: '',
        startTime: '',
        endTime: '',
        monitorPointName: '',
      },
      jianceOptions: [],
      orgOptions: [],
      shipTypeOptions: [{
        value: '0',
        label: '内河船'
      }, {
        value: '1',
        label: '海船'
      }],
      options: [{
        value: '选项1',
        label: '未处置'
      }, {
        value: '选项2',
        label: '已处置'
      }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  mounted() {
    this.getLiuLists();
    this.getThresholdList();
    this.getDicts();
  },
  methods: {
    getDicts() {
      getDicts('so2_snap_pos').then(data => {
        this.jianceOptions = data.data
      });
      getDicts('cb_org').then(data => {
        this.orgOptions = data.data
      });
    },
    tabChange() {
      console.log(this.tableShow);
    },
    getThresholdList() {
      getThresholdList({type: 'so2'}).then(response => {
        this.liuCount = response.rows[0].configValue;
        this.liuCountId = response.rows[0].configId;

      });
    }, getThresholdEdit() {
      getThresholdEdit({'configId': this.liuCountId, 'configValue': this.liuCount}).then(response => {
        this.dialogShow = true
      });
    },
    getLiuLists() {
      this.loading = true;
      getLiuList(this.queryParams).then(response => {
        for (var i in response.rows) {
          response.rows[i].shipRegionType = '内河船'
          response.rows[i].destination = '无'
          response.rows[i].berthName = '无'
        }
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }

  }
}
</script>

<style scoped>
.dialogContent >>> .el-dialog {
  background: url("./assets/pop_yzsz.png") no-repeat;
  background-size: 100% 100%;
  height: 150rem;
  width: 250rem;
  border: none;
  top: 100rem;
}

.dialogDiv {
  background-color: #1E2E51;
  height: 25rem;
  width: 220rem;
  margin-left: 3rem;
  padding-top: 6rem;
}

.dialogFont {
  color: #fff;
  font-size: 7rem;
}

.dialogButton {
  color: black;
  background-color: #00BFFF;
  border-radius: 2rem;
}

.dialogContent >>> .el-input--medium .el-input__inner {
  height: 10rem;
  text-align: center
}

.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>
