<div class="main" id="main" v-cloak>
    <table border=0 cellpadding=0 cellspacing=0 class="tb-head form-inline form-group-sm">
        <tr>
            <td align="right">
                <el-select size="mini" v-model="queryData.searchField" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-input style="width:150px;" size="mini" v-model.trim="queryData.searchKeyword" placeholder="请输入内容" clearable v-on:clear="loadData"></el-input>
                <el-button size="mini" v-on:click="loadData()">搜索</el-button>
            </td>
        </tr>
    </table>
    <div class="table-list-box">
        <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" highlight-current-row border>
            <template slot="empty">
                <span>暂无数据或没有分配站点权限</span>
            </template>
            <el-table-column label="选择管理站点" align="left">
                <template slot-scope="scope">
                    <el-radio :label="scope.row.Id" v-model="id" style="width:14px;">{{scope.row.Remark}}({{getUrlPrefix(scope.row.Domain,scope.row.Directory)}})</el-radio>
                </template>
            </el-table-column>
        </el-table>
        <ui-page-panel v-model="pageInfo" v-if="pageInfo.RecordCount>0" v-on:change="loadData()"></ui-page-panel>
    </div>
    <div class="footer-submit-bar" style="padding-left:100px">
        <el-button type="primary" v-on:click="setSite">切换选中站点</el-button>
        <el-button onclick="closeSelf()">关闭</el-button>
    </div>
</div>

<script type="text/javascript">

    //vue实例化
    var vue = new Vue({
        el: "#main",
        data: {
            id:@ViewBag.CurrentSiteId,
            pageInfo: { PageSize:10, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            dataList: [],
            queryData: { searchField: "name", searchKeyword: "" },
            options: [{ value: 'name', label: '站点名称' }, { value: 'domain', label: '绑定域名' }, { value: 'directory', label: '站点目录' }],
        },
        methods: {
            loadData: function () {
                loadData();
            },
            getUrlPrefix:function(domain,directory)
            {
                if (domain!= ""  && domain != null && domain != undefined)
                {
                    return domain;
                }
                else
                {
                    return "@(ViewBag.Domain)/"+directory;
                }
            },
            setSite: function () {
                var _this = this;
                if (_this.id == 0)
                {
                    _this.$message({
                        message: "请选择要切换的站点！",
                        type: 'error',
                        showClose: true
                    });
                    return;
                }
                _this.submit({url:"@Url.ActionUrl("SetCurrentSite")", data: { id: _this.id },success: function () {
                        top.location.href = top.location.href;
                        closeSelf();
                    },
                });

            }
        }
    });

        //加载数据
    function loadData()
    {
        var serverData = extend(vue.pageInfo, vue.queryData);
        vue.ajax({
            url: "@Url.ActionUrl("CanAdminSiteList")",
            data: serverData,
            success: function (responseData) {
                if (responseData != "") {
                    vue.dataList = responseData.Data;
                    vue.pageInfo = responseData.PageInfo;
                }
            }
        });
    }
    loadData();
</script>
