<!-- 计费未拆分 与 拆分数据进行匹配-->

<template>
  <div id="contain" style="width:100%;height: 100%;position: inherit">
      <div style="height:88%;width:100%;position:relative">
        <div style="height: 94%;width: 100%">
          <el-table :data="tableData" width="100%"  id="table_el"  :header-cell-style="{background:'#e9ecee',align:'center'}"  border
                    v-loading="tableLoading"
                    :row-style="rowStyle">
            <el-table-column type="index" label="序号" width="100px" align="center"/>
            <el-table-column  prop="classdate" label="日期" :show-overflow-tooltip="true"  :formatter="dateFormatter" width="150px"  resizable align="center" />
            <el-table-column  prop="passid" label="PASSID" :show-overflow-tooltip="true"  width="280px"  resizable align="center" />
            <el-table-column  prop="vehicleid" label="车牌号" :show-overflow-tooltip="true"  width="150px"  resizable align="center" />
            <el-table-column  prop="maname" label="处理人" :show-overflow-tooltip="true"  width="180px"  resizable align="center" />
            <el-table-column  prop="createTime" label="处理时间" :show-overflow-tooltip="true"  :formatter="dateFormatterSSS" width="200px"  resizable align="center" />
            <el-table-column  prop="vehicletypeName" label="车型" :show-overflow-tooltip="true"  width="180px"  resizable align="center" />
            <el-table-column  prop="multitypeName" label="匹配类型" :show-overflow-tooltip="true"  width="200px"  resizable align="center" />
            <el-table-column  prop="gpaTollintervalid" label="计费单元组id" v-if="tableDisable" align="center" />
            <el-table-column  prop="gpaFeegroup" label="计费金额(元)" v-if="tableDisable"  width="200px"  resizable align="center" />
            <el-table-column  prop="mediatype" label="通行介质" v-if="tableDisable"  width="200px"  resizable align="center" />
            <el-table-column  prop="vehicleclassname" label="车种" v-if="tableDisable"  :show-overflow-tooltip="true"  width="100px"  resizable align="center" />
            <el-table-column  prop="statusname" label="拆分状态"  v-if="tableDisable"   width="400px"  resizable align="center" />
            <el-table-column  prop="id" label="计费单元组id" v-if="tableDisable" align="center" />
            <el-table-column  prop="roadno" label="计费单元组id" v-if="tableDisable" align="center" />
            <el-table-column label="操作" v-slot="slot" fixed="right" align="center">
              <!--              <HintButton type="primary" :icon="Filter" title="地图查看" circle @click="skipMapVue(slot.row)"></HintButton>-->
              <el-button type="primary" :icon="Filter"  circle @click="skipMapVue(slot.row)"></el-button>
              <el-button type="primary"   @click="matchData(slot.row)">数据匹配</el-button>
            </el-table-column>
          </el-table>
        </div>
        <div tyle="height: 5%;width: 100%">
          <!-- 分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[15, 30,50,100]"
              :page-size="pageSize"
              :total="totalCount"
              layout="total, sizes, prev, pager, next, jumper"
              style="width: 90%;height:5%;padding: 0;position:relative;margin-top:10px;bottom: 0;font-size: x-small">
          </el-pagination>
        </div>
      </div>
    <el-dialog id="map_dialog" v-model="isShowMap" title="地图" style="width: 80%;height:76%;" draggable >
      <mapData  ref="mapD" :key="new Date().getTime()" :params="mapParams" ></mapData>
    </el-dialog>
<!--    <el-dialog id="detail_dialog" v-model="isShowDivDetail" title="详细信息" style="width: 80%;height:76%;" draggable >
      <divMoneyDetail  ref="divDetail" :key="new Date().getTime()" :params="dataParams" ></divMoneyDetail>
    </el-dialog>-->
  </div>
</template>

<style >
#table_el{
  height: 100% ;
  width: 100%;
}
</style>
<script >

import { ref} from "vue";
import mapData from "@/views/dev/detail/map.vue";
import {Filter,Search} from '@element-plus/icons-vue'
import {getFeeListByPage} from "@/util/api/api";
import {ElMessageBox} from "element-plus";
var _this;
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      totalCount: 0,
      tableData: ref([]),
      isShowMap: false,
      isShowDivDetail: false,
      tableDisable:false,
      mapParams: {},
      Filter: Filter,
      tableLoading: false,
      searchButton: Search,
      doubleclikIndex: -1,//双击选中的行号
      params:{}

    }
  },
  //props: ['params'],
  methods: {
    refreshData(paramAll){
      this.tableLoading=true;
      this.params=paramAll;
      getTableDataLists();
    },
    skipMapVue(row) {
      this.isShowMap = true;
      let _params = {
        "gpaTollintervalid": row.gpaTollintervalid,
        "gpaFeegroup": row.gpaFeegroup,
        "PASSID": row.PASSID

      }
      this.isShowMap = true;
      this.mapParams = _params;
      // _this.$refs.mapD.getMapDatas(_params);
    },matchData(row){
      ElMessageBox.confirm({

      })
      this.isShowMap = true;
      this.mapParams = _params;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.isLoding = true;
      getTableDataLists();
    },handleCurrentChange(val) {
      this.currentPage = val;
      this.isLoding = true;
      getTableDataLists();
    }, dateFormatter(row, column, cellValue) {
      if (cellValue == null || cellValue == "" || cellValue == undefined) {
        return "";
      }
      const date = new Date(cellValue);
      // 格式化日期，并返回字符串
      //return `${date.toLocaleDateString()}`;
      return formatDate(cellValue, "YYYY-MM-DD");
    }, dateFormatterSSS(row, column, cellValue) {
      if (cellValue == null || cellValue == "" || cellValue == undefined) {
        return "";
      }
      const date = new Date(cellValue);
      // 格式化日期，并返回字符串
      //return `${date.toLocaleDateString()}`;
      return formatDate(cellValue, "YYYY-MM-DD HH:MM:SS:SSS");
    }, rowStyle(row, rowIndex) {
      if (this.doubleclikIndex === row.row.RN) {
        return {
          "background-color": "lightcyan",
          "cursor": "pointer"
        }
      }
      return {
        "cursor": "pointer"
      }
    }

  }, components: {
    mapData,
    Search
  },
  mounted() {
    _this = this;
  }
}
function getTableDataLists(){
  _this.tableLoading=true;
  var paramsData=_this.params;
  paramsData.pageNum=_this.currentPage;
  paramsData.pageSize=_this.pageSize;
/*  if(! paramsData.queryStartTime){
    _this.tableLoading=false;
      return ;
  }*/
  getFeeListByPage(paramsData).then(res=>{
    _this.tableLoading=false;
    if(res.code<=0){
      return false;
    }else{
      debugger
      _this.totalCount=res.total;
      _this.tableData=res.records;
      _this.isLoding=false;
    }
  })
}

function skipMoneyVue(row){
  let _params={
    "gpaTollintervalid": row.gpaTollintervalid,
    "gpaFeegroup": row.gpaFeegroup,
    "GPA_FEE": row.GPA_FEE,
    "DIV_TOLLINTERVALID": row.DIV_TOLLINTERVALID,
    "DIV_FEEGROUP": row.DIV_FEEGROUP,
    "DIV_FEE": row.DIV_FEE,
    "PASSID":row.PASSID,
    "GPA_ENPOINTID":row.GPA_ENPOINTID,
    "GPA_EXPOINTID":row.GPA_EXPOINTID,
    "CHECKSTATUS":row.CHECKSTATUS,
    "STATUS":row.STATUS

  }
  _this.isShowDivDetail=true;
  _this.dataParams=_params;
  // _this.$refs.divDetail.getDivDatas(_params);
  /*  window.localStorage.setItem("params",JSON.stringify(params));
    window.open(href.href,'Map',"",false)*/
}



//日期格式修改

function formatDate(dateString,format) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');

  let hour=date.getHours();
  let minute=date.getMinutes();
  let second=date.getSeconds();
  if(hour<10){
    hour ="0"+hour;
  }
  if(minute<10){
    minute ="0"+minute;
  }
  if(second<10){
    second ="0"+second;
  }
  const milSecond=date.getMilliseconds();
  if(format=="YYYY-MM-DD"){
    return `${year}-${month}-${day}`;
  }else if(format=="YYYY-MM-DD HH:MM:SS"){
    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  }else if(format=="YYYY-MM-DD HH:MM:SS:SSS"){
    return `${year}-${month}-${day} ${hour}:${minute}:${second}:${milSecond}`;
  }else if(format=="HH:MM:SS"){
    return `${hour}:${minute}:${second}:${milSecond}`;
  }
  return "";
}

function getCurrentDate(){
  var myDate = new Date(); //获取今天日期
  myDate.setDate(myDate.getDate() - 1);
  // dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
  return myDate.getFullYear()+"-"+((myDate.getMonth()+1) >9?(myDate.getMonth()+1):"0"+(myDate.getMonth()+1))+"-"+(myDate.getDate() >9?myDate.getDate():"0"+myDate.getDate());
}

function getCurrentDateHour(){
  var date = new Date(); //获取今天日期
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  let hour=date.getHours();
  let minute=date.getMinutes();
  let second=date.getSeconds();
  if(hour<10){
    hour ="0"+hour;
  }
  if(minute<10){
    minute ="0"+minute;
  }
  if(second<10){
    second ="0"+second;
  }
  // dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
  return `${year}${month}${day}${hour}${minute}${second}`;
}
</script>