<template>
    <div style="height: 50%;width: 100%">
        <div style="height: 85%;width: 100%">
             <el-table :data="tableDataDetail" height="100%" :header-cell-style="{background:'rgb(213,216,217)',align:'center'}"  border v-loading="loading"
              @row-dblclick="showDivDetial">
                <el-table-column  type="index" label="序号" align="center" width="100px"/>
                <el-table-column  prop="NAME" label="计费单元" :show-overflow-tooltip="true"  width="433px"  resizable align="center" />
                <el-table-column  prop="ID" label="计费单元id" :show-overflow-tooltip="true"  v-if="false" width="480px"  resizable align="center" />
              </el-table>
            </div>
    </div>
    <el-dialog :title="feeunitTitleMain"
               v-model="feeDetailShow"
               width="80%"
               top="0.5%"
               :close-on-click-modal="clickDialog">
      <feeStatDetail :key="new Date().getTime()" :begindate="begindate" :enddate="enddate"  :tollvalid="tollvalid"></feeStatDetail>
    </el-dialog>
</template>
<script>
import { getSelectList} from "@/util/api/api";
import feeStatDetail from "@/views/dev/detail/feeStatDetail.vue";
var _this;
export default {
  name: "BaiduMap",
  props: ["begindate","enddate","gantryid"],
  components: {
    feeStatDetail
  },
  data() {
    return {
      tableDataDetail: [],
      loading: true,
      feeunitTitleMain:"",
      feeDetailShow:false,
      tollvalid:"",
      clickDialog:false
    };
  },
  methods: {
    showDivDetial(row,column,e){
      this.feeunitTitleMain=row.NAME;
      this.feeDetailShow=true;
      this.tollvalid=row.ID;
    }
  },component:{
    feeStatDetail
  },
  mounted() {
    _this=this;
      let selectType={
        "selectType":"ALL_FEE_LIST",
        "gantryid":this.gantryid
      }
      getSelectList(selectType).then(res=>{
        this.loading=false;
        if(res.code>0){
          this.tableDataDetail=res.data;
        }
      })
  }
};

</script>

<style >
#container {
  margin: 0px;
}
.el-dialog{
  height: 96% !important;
  margin-bottom: 0px !important;
}
.el-dialog__body{
  height: 90% !important;
  padding-bottom: 0px !important;
}
</style>

