<template>

    <div class="container resource">
        <div class="pop-banner clearfix">
            <!--<form class="search-bar" @submit.prevent="getData()">
            <div class="search-btn" >
              <input type="submit" value="搜索" >
            </div>
            <input type="text" v-model="search.search_LIKE_realname" placeholder="输入关键字" style="color: #373737;" >&ndash;&gt;
          </form>-->
            <div class="operate-btns">
                <a href="javascript:;" class="fbtn fb-refresh" @click="getData(true)" >刷新</a>

                <a href="javascript:;" class="fbtn fb-add" v-if="'/operator/user:insert' | myqx" v-link="{path:'/user/edit/0'}" >添加</a>
            </div>
            <h3 class="current-module">用户管理</h3>
        </div>

        <div class=" fast-search-form pd-form">
            <div class="group-row">
                <div class="form-group form-label">
                    <label class="label" for="cn1">姓名</label>
                    <div class="control">
                        <input type="text" id="cn1" maxlength="8" v-model='search.name' title='姓名' placeholder="姓名"> </div>
                </div>
                <div class="form-group form-label">
                    <label class="label" for='cn2'>手机号</label>
                    <div class="control">
                        <input type="text" id="cn2" maxlength="11" v-model="search.tel" title='手机号' placeholder="手机号"> </div>
                </div>
            </div>
            <div class="group-row">
                <div class="form-group form-label">
                    <label class="label" for='cn2'>所属机构</label>
                    <div class="control">
                        <input type="text" id="cn2" maxlength="20" v-model="search.company" title='所属机构' placeholder="所属机构"> </div>
                </div>
                <div class="form-group">
                    <label class="label">业务状态</label>
                    <div class="control control-filtering control-filtering-green w800">
                        <a class="option" :class="{'all active':search.state==''}" href="javascript:void(0)" @click="search.state=''">全部</a>
                        <a class="option" :class="{'all active':search.state=='Y'}" href="javascript:void(0)" @click="search.state='Y'">有效</a>
                        <a class="option" :class="{'all active':search.state=='S'}" href="javascript:void(0)" @click="search.state='S'">停用</a>
                        <a class="option" :class="{'all active':search.state=='N'}" href="javascript:void(0)" @click="search.state='N'">作废</a>
                    </div>
                </div>
            </div>
            <div class="group-row">
                <div class="form-group w920">
                    <label class="label">所属端</label>
                    <div class="control control-filtering control-filtering-green w800">
                        <a class="option" :class="{'all active':search.flag==''}" href="javascript:void(0)" @click="search.flag=''">全部</a>
                        <a class="option" :class="{'all active':search.flag=='1'}" href="javascript:void(0)" @click="search.flag='1'">供应商</a>
                        <a class="option" :class="{'all active':search.flag=='2'}" href="javascript:void(0)" @click="search.flag='2'">医院</a>
                        <a class="option" :class="{'all active':search.flag=='3'}" href="javascript:void(0)" @click="search.flag='3'">运营商</a>
                        <a class="option" :class="{'all active':search.flag=='4'}" href="javascript:void(0)" @click="search.flag='4'">配送商</a>
                    </div>
                </div>
            </div>

            <div class="group-row t-right">
                <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData">查 询</button>
            </div>
        </div>

        <table class="itable itable-thead-13px">
            <thead>
            <tr>
                <th class="w60">序号</th>
                <th class="w90">姓名</th>
                <th class="w190">所属机构</th>
                <th class="w190">登录平台</th>
                <th class="w100">角色</th>
                <th class="w70">状态</th>
                <th class="w100">手机号</th>
                <th class="w50">操作</th>
            </tr>
            </thead>
            <tbody>


            <tr v-for="user in userList">
                <td>{{$index + 1}}</td>
                <td>{{user.realname}}</td>
                <td>{{user.organizationName}}</td>
                <td>{{user.loginPlatform}}</td>
                <td>{{user.roletype}}</td>
                <td>
                    <template v-if="user.bizstate=='Y'">
                        有效
                    </template>
                    <template v-if="user.bizstate=='S'">
                        停用
                    </template>
                    <template v-if="user.bizstate=='N'">
                        作废
                    </template>
                </td>
                <td>{{user.mobiletel}}</td>
                <td>
                    <template v-if="user.loginPlatform=='运营商管理平台'">
                        <a class="btn-d btn-d-activate" v-link="{ path:'/user/edit/'+user.guid}">明细</a>
                    </template>
                    <template v-if="user.loginPlatform=='医疗机构管控平台'">
                        <a class="btn-d btn-d-activate" v-link="{ path:'/hospital/user/edit/'+user.guid}">明细</a>
                    </template>
                    <template v-if="user.loginPlatform=='配送商管理平台'">
                        <a class="btn-d btn-d-activate" v-link="{ path:'/distribution/user/edit/'+user.guid}">明细</a>
                    </template>
                    <template v-if="user.loginPlatform=='供应商协同平台'">
                        <a class="btn-d btn-d-activate" v-link="{ path:'/supplier/user/edit/'+user.guid}">明细</a>
                    </template>
                    <template v-if="user.loginPlatform=='政府机构管控平台'">
                        <a class="btn-d btn-d-activate" v-link="{ path:'/government/user/edit/'+user.guid}">明细</a>
                    </template>
                </td>
            </tr>

            </tbody>
        </table>

        <pagination
                @page-change="getData"
                :class="['m-20-0']"
                :page-no.sync="search.page"
                :total-pages.sync="search.totalPages"></pagination>
    </div>
</template>

<script>
    module.exports={
        data: function(){
            return {
                userList: [],
                search: {
                    pageSize: 10,
                    page: 1,
                    totalPages: 0,
                    //search_LIKE_realname:''
                    name:'',
                    tel:'',
                    state:'',
                    flag:'',
                    company:''
                },
            };
        },
        methods: {
            getData: function(isRefresh){
                //var admin = this.session.admin;
                var self = this;
                if(isRefresh) {
                    this.search.page = 1;
                }
                Ajax.post('/user/userList',{'page':self.search.page,'pageSize':self.search.pageSize,'name':self.search.name,'tel':self.search.tel,'state':self.search.state,'flag':self.search.flag,'company':self.search.company})
                    .then(function (response){
                        var data = response.data.data;
                        self.$set('userList',data.list);
                        self.search.totalPages = data.totalPages;
                    })
            }
        },
        route:{
            activate : function(){
                this.getData();
            }
        },
        watch:{
            'search.flag': function() {
                this.getData(true);
            },
            'search.state': function() {
                this.getData(true);
            },
        }
    };
</script>