<template>
   <div class="page-wrap">
      <ui-loading :show="page_loading.show"></ui-loading>

      <div class="page-handle-wrap">
         <ul class="handle-wraper bd-b">
            <li class="f-l">
               <div class="text-exp"><b>全部信息</b></div>
            </li>
            <li class="f-r">
               <div class="handle-item">
                  <Button v-has="'create'" type="primary" icon="md-add" @click="openEdit(true,null)">添加账号</Button>
               </div>

               <div class="handle-item">
                  <Button type="primary" ghost icon="ios-search" @click="search.show=!search.show">搜索</Button>
               </div>

               <div class="handle-item">
                  <Button icon="md-refresh" @click="index(1)">刷新</Button>
               </div>
            </li>
         </ul>

         <div class="search-wrap" v-show="search.show">
            <ul class="handle-wraper">
               <li class="handle-item w-250">
                  <Input clearable placeholder="请输入用户名" v-model.trim="params.username"></Input>
               </li>

               <li class="handle-item w-250">
                  <Input clearable placeholder="请输入姓名" v-model.trim="params.nickname"></Input>
               </li>

               <li class="handle-item w-250">
                  <Select clearable v-model="params.status">
                     <Option :value="1">启用</Option>
                     <Option :value="2">禁用</Option>
                  </Select>
               </li>
            </ul>

            <ul class="handle-wraper">
               <li class="f-r">
                  <div class="handle-item">
                     <Button type="primary" ghost @click="index(1)">立即搜索</Button>
                  </div>
                  <div class="handle-item">
                     <Button type="warning" ghost @click="resetSearch">重置搜索</Button>
                  </div>
               </li>
            </ul>
         </div>
      </div>

      <div class="page-list-wrap">
         <Table :columns="table_titles" :data="list_data?list_data.data:[]"></Table>
      </div>

      <div class="page-turn-wrap" v-if="list_data">
         <Page
            show-total
            show-elevator
            :current="Number(list_data.current_page)"
            :total="Number(list_data.total)"
            :page-size="Number(list_data.per_page)"
            @on-change="index">
         </Page>
      </div>

      <ui-edit
         :show.sync="editObj.show"
         :data="editObj.data"
         @add-success="index"
         @update-success="index(list_data.current_page)">
      </ui-edit>

      <ui-detail
         :show.sync="detailObj.show"
         :data="detailObj.data">
      </ui-detail>
   </div>
</template>

<script src="./js/index.js"></script>
