<template>
  <div id="address-search">
    <div class="search-title">
      <el-input
          placeholder="请输入地名地址搜索"
          v-model="address">
        <i slot="suffix" class="el-input__icon el-icon-search" @click="getAddressData"></i>
      </el-input>
    </div>
    <div v-if="tableData.length" class="search-content">
      <div class="result-header">
        <span>共{{ tableData.length }}条数据</span>
      </div>
      <div class="result-content">
        <el-table
            height="320px"
            :data="frontEndPageChange"
            @row-click="positionToAddress"
            :show-header="false"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="图层名称">
            <template slot-scope="scope">
              <div class="main-info">
                <img src="../../../../assets/imgs/mainPage/地名地址1.png" alt="">
                <span>
                  {{scope.row.name}}
                </span>

              </div>
              <div class="second-info">
                <span>
                  {{scope.row.address}}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="result-footer">
          <el-pagination small
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
              :current-page = "paginationOptions.currentPage"
              :page-size="paginationOptions.pageSize"
              :page-sizes="paginationOptions.pageSizes"
              layout="prev, pager, next"
              :total="tableData.length">
          </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getAddressList} from "@/service/show-platform";
import {changePosition} from "@/units/map/AddLayer";

export default {
  name: "AddressSearch",
  computed:{
    frontEndPageChange() {
      let start =(this.paginationOptions.currentPage - 1) * this.paginationOptions.pageSize;
      if(start >=this.tableData.length){
        start = 0
      }
      let end  = this.paginationOptions.currentPage * this.paginationOptions.pageSize;
      if(end >=this.tableData.length){
        end = this.tableData.length
      }
      return this.tableData.slice(start,end)
    }
  },
  data(){
    return{
      address:'',
      tableData:[
      ],
      paginationOptions:{
        currentPage:1,
        pageSize:4,
        pageSizes:[4,8,20]
      }
    }
  },
  methods:{
    getAddressData(){
      this.tableData = [];
      getAddressList(this.address).then(res =>{
        if(res.length >0){
          let position = [];
          for(let i=0;i<res.length;i++){
            let temp = {
              id:res[i].X+res[i].Y+i,
              name:res[i].PoiName,
              address:res[i].PoiAddress==undefined? res[i].TypeName : res[i].TypeName + '--' + res[i].PoiAddress,
              locationX:res[i].X,
              locationY:res[i].Y,
            }
            this.tableData.push(temp)

            let singlePosition = {
              "mapx": parseFloat(res[i].X),
              "mapy": parseFloat(res[i].Y),
            }
            position.push(singlePosition)
          }
          changePosition(position,true,false)

        }else{
          this.tableData = [];
        }
      })
    },
    positionToAddress(row){
      let position = [
        {
          "mapx": parseFloat(row.locationX),
          "mapy": parseFloat(row.locationY),
        },
      ]
      console.log(position)
      changePosition(position,true,true)
    },
    handleSizeChange(val){
      this.paginationOptions.pageSize = val;
    },
    handlePageChange(val){
      this.paginationOptions.currentPage = val;
    },

  }
}
</script>

<style scoped lang="scss">
#address-search{
  ::v-deep{
    ::-webkit-scrollbar{
      width: 8px;
      height: 8px;
    }
    ::-webkit-scrollbar-thumb{
      background-color: #028aab;
      border-radius: 3px;
    }
    .el-table{
      background-color: transparent;
      color: #fff;
    }
    .el-table tr{
      background-color: transparent;
      border: none;
    }
    .el-table td{
     border:none;
    }
    .el-table::before{
      background-color: transparent;
    }
    .el-table__empty-text{
      color: #fff;
    }
    .el-table__body tr:hover >td{
      background-color: rgba(0, 204, 255,0.7) !important;
    }
    .el-table__body{
      border-collapse: separate !important;
      border-spacing: 0 4px !important;
      table-layout:auto !important;
    }
    .el-table .el-table__cell{
      padding: 6px 0px;
    }

    .el-input__inner{
      background: rgba(0, 38, 115, 0.6);
      border: 1px solid #00AAFF;
      caret-color: #fff;
      color: #fff;
    }
    .el-input__prefix, .el-input__suffix{
      color: #fff;
    }
    button:disabled{
      background: transparent;
    }
    .el-pagination{
      color: #fff;
    }
    .el-pager li{
      background: transparent;
    }
    .el-pagination .btn-next, .el-pagination .btn-prev{
      background: transparent;

      color: #fff;
    }
    .el-pagination button:disabled{
     color: #96999d;
    }
    .el-pager li.btn-quicknext, .el-pager li.btn-quickprev{
      color: #fff;
    }
  }
  position: absolute;
  right:90px;
  top:120px;
  z-index: 1;
  text-align: center;
  width: 400px;
  .search-title{
    width: 100%;
    height: 42px;

  }

  .search-content{
    margin-top: 8px;
    height: 420px;
    background: rgba(0, 38, 115, 0.6);
    border: 1px solid #00AAFF;
    border-radius: 6px;
    color: #fff;
    padding: 10px;
    .result-header{
      display: flex;
      height: 40px;
    }
    .result-content{
      width: 100%;
      height: 340px;
      .main-info{
        width: 100%;
        padding: 4px;
        display: flex;
        align-items: center;
        >img{
          width: 30px;
          height: 30px;
          padding-right: 10px;
        }
        >span{
          font-size: 18px;
          font-weight: bold;
        }
      }
      .second-info{
        width: 100%;
        >span{
          padding-left: 40px;
          font-size:16px;
          font-weight: 300;
        }
      }
    }
    .result-footer{

    }
  }



}

</style>
