<template>
    <div class="main-content__div">
      <div class="table-box__div" v-cloak v-loading="loadingFlag">
      <el-form  class="demo-form-inline">
        <el-form-item label="城市名称：">
          <el-input
            placeholder="城市名称"
            v-model="keyWord"
            style="width:150px;"
            size="small"
            >
          </el-input>
        </el-form-item>
        
        <!-- 搜索按钮 -->
        <el-form-item>
          <el-button type="primary" size="small" @click="searchFrom()">搜索</el-button>
        </el-form-item>
       
      </el-form>
      </div>
      <!-- 列表 -->
      <div class="table-box__div" v-cloak v-loading="loadingFlag">

        <el-table
          size="mini"
          :data="tableData"
          :empty-text="tableDataLoadingText"
          style="width: 100%;font-size: 15px;"
          :header-cell-style="{background:'#FAFAFA'}"
        >
          <el-table-column label="编号" width="150" prop="id"></el-table-column>
          <el-table-column label="城市名称" prop="name" width="250"></el-table-column>
          <el-table-column label="等级" prop="level" width="100"></el-table-column>
          <el-table-column label="编码" prop="code" width="200"></el-table-column>
          <el-table-column label="区号" prop="city_code" width="100"></el-table-column>
          <el-table-column label="备注" prop="remark" width="200"></el-table-column>
          <el-table-column label="创建时间" prop="create_time"  width="200"></el-table-column>
          <el-table-column label="更新时间" prop="update_time" ></el-table-column>

        </el-table>
        <!-- 分页 -->
        <div class="block" v-show="pagination" style="margin-top: 10px;float: right;">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="parseInt(tableCount)">
          </el-pagination>
        </div>
      </div>
    </div>


  </template>
  <script>
 
  export default {

    data() {
      return {
        value:"1",
        //  站点数据
        tableData: [],
        //  加载中数据提示
        tableDataLoadingText:"拼命加载中······",
        //  是否显示分页
        pagination:false,
        //  每页显示的条数
        pageSize:15,
        //  当前页
        currentPage:1,
        //  菜单列表数据总条数
        tableCount:0,
        keyWord:'',
        loadingFlag: false,
        isShowSource: false, // 是否显示来源列
        id:0,
        DialogShow: false, //控制删除弹窗
        cityId:'',
        cityRowIndex:'',
        cityDataForm: {},
        cityTableData: [],
        isloading:false, //提交按钮状态
        cityDialogShow: false, // 控制保存弹窗
      }
    },
    mounted() {},
    methods: {
      // 获取菜单信息列表
      getList:function(){
        let _t = this;
        _t.loadingFlag = true;
        let parames = {
            'page':this.currentPage,
            'pageSize':this.pageSize,
            'keyWord':this.keyWord
        }
        this.$api.publicApi.getCityList(parames).then(res=>{
                _t.loadingFlag = false;
                if(res.code==200){
                  if(res.data.rows.length==0){
                    this.$message.error("没有数据了")
                    return
                  }
                    _t.tableData = res.data.rows;
                    _t.tableCount = res.data.count;
                     //  总条数大于每页显示的条数时显示分页
                    if( _t.tableCount > _t.pageSize ){
                     _t.pagination = true;
                    }
                    if( _t.tableData.length==0 ){
                     _t.tableDataLoadingText = "暂无数据";
                    }
                }else{
                    this.$message.error("查询失败")
                }
            })
      },
      // 点击翻页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getList();
      },
      searchFrom(){
        this.currentPage = 1
        this.pageSize = 15
        this.getList()
      }

    },
    created() {
        this.getList();
    }
  }
  </script>
  <style >
   .demo-form-inline{
      display: flex;
   }
   .demo-form-inline .el-form-item{
    margin: 0 20px;
   }
  </style>
  
  