<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="站点管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="关键字搜索" />
            <Button type="primary" @click="getList">查询</Button>
            <Button icon="ios-add" type="primary" style="margin-left: 10px;" @click="$refs['addAddress'].isShow=true,$refs['addAddress'].type='add'">添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :list="list"
      :total="total"
      @page_sizeChange="e => {select.page_size = e,getList()}"
      @pageIndexChange="e => {select.page = e,getList()}"
      :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="260" header-align="center">
          <template slot-scope="scope">
            <Button type="primary" size="small" @click="editorAddress(scope.row.id,'editor')">编辑</Button>
            <Poptip
              transfer
              confirm
              title="确认要删除吗？"
              @on-ok="deleteList(scope.row.id)">
              <Button type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            </Poptip>
          </template>
        </el-table-column>
      </template>

      </xy-table>
      <addAddress ref='addAddress' @refresh='getList'></addAddress>
  </div>
</template>

<script>
  import addAddress from './components/addAddress.vue'
  import {listaddress,del} from '@/api/address'
  export default{
    components:{
      addAddress
    },
    data(){
      return{
        select:{
          keyword:'',
          page:1,
          page_size:10,
        },
        total:0,
        table:[{
          label:"站点分类",
          prop:'type_detail.value',
          align:'left',
          width:180,
        },{
          label:"站点名称",
          prop:'name',
          align:'left',
        },{
          label:"地址",
          prop:'address',
          width:180,
        },{
          label:"经度",
          prop:'lon',
          width:180,
        },{
          label:"纬度",
          prop:'lat',
          width:180,
        }],
        list:[]
      }
    },
    created(){
      this.getList()
    },
    watch:{},
    methods:{

     async getList(){
        const res = await listaddress({...this.select})
        this.list = res.data
        this.total = res.total

      },
      editorAddress(id,type){
        this.$refs.addAddress.id= id
        this.$refs.addAddress.type= type
        this.$refs.addAddress.isShow = true
      },
      deleteList(id){
        var that = this;
        if (id) {
          this.$Modal.confirm({
            title: '确认要删除数据？',
            onOk: () => {
              del(id).then(response => {
                this.$Message.success('操作成功');
                that.getList();
              }).catch(error => {
                console.log(error)
                reject(error)
              })
            },
            onCancel: () => {
              //this.$Message.info('Clicked cancel');
            }
          });
        }
      }
    },
  }
</script>

<style>
</style>
