<style type="text/css">
        .main{min-width:1000px}
        .gd-title-serach {overflow: hidden;
        }
        .gd-title-serach-left {
            float: left;
            text-align: left;
            width: 30%;
            font-size: 0;
            padding-left: 10px;
        }

        .gd-title-serach-right {
            float: right;
            text-align: right;
            padding-right: 10px;
            margin-bottom: 10px;
        }

        .manage-title-add {
            margin: 10px 0px 40px 0px;
        }

        .pluginlist .box-card .el-card__body {
            padding: 15px;
        }

        .pluginlist .box-card {
            box-shadow: 1px 2px 8px 0 rgba(0,0,0,.1);
            margin: 10px;
        }

        .pluginlist .listbox {
            line-height: 2;
            min-width: 300px;
        }
    .pluginlist .listbox:hover{cursor:pointer;border:1px solid #0094ff}
            .pluginlist .listbox .topbox {
                position: relative;
                padding-left: 90px;
                margin-bottom: 6px;
            }

                .pluginlist .listbox .topbox img {
                    position: absolute;
                    left: 0px;
                    top: 0px;
                    width: 75px;
                    height: 75px;
                    border-radius:5px;
                }

            .pluginlist .listbox .content .title {
                display: block;
                color: #303133;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 15px;
            }

            .pluginlist .listbox .content .intro {
                display: block;
                color: #909399;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                line-height: 24px;
                height: 48px;
            }

            .pluginlist .listbox .price {
                color: #F04343;
                font-weight: bold;
            }

        .pluginlist .footer-bar {
            border-top: 1px solid #eeeeee;
            padding-top: 10px;
            text-align: left;
        }
    .box-card .el-alert--success.is-light {
        background-color: #fff;
    }
        .installed {
            color: #67C23A;
            font-size: 13px
        }
        .no-installed{color:#fff}
    </style>

    <div class="main" id="main" v-cloak>
        <div class="breadcrumb-box">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-s-home"></i>应用市场</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <template>
            <el-tabs type="card" v-model="searchInfo.IsFree">
                <el-tab-pane label="全部应用" name="all"></el-tab-pane>
                <el-tab-pane label="免费应用" name="0"></el-tab-pane>
                <el-tab-pane label="商业应用" name="1"></el-tab-pane>
            </el-tabs>
        </template>

        <table class="tb-head" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td align="right">
                    <el-input size="small" type="text" style="width:250px;margin-left: 10px;" v-model.trim="searchInfo.Keyword"
                              clearable placeholder="请输入关键字" v-on:clear="loadData">
                        <el-button size="mini" slot='append' v-on:click="loadData">搜索</el-button>
                    </el-input>
                </td>
            </tr>
        </table>
      
        <div class="pluginlist">
            <el-row>
                <el-col :span="8" v-for="item in dataList">
                    <el-card class="box-card listbox">
                        <div class="topbox">
                            <img :src="'@Url.ActionUrl("GetAppImage")?path='+item.Thumbnail"/>
                            <div class="content">
                                <div class="title" :href="item.link"> {{ item.Title }} </div>
                                <div class="intro">
                                    {{item.Description}}
                                </div>
                                <div class="price">
                                    <span v-show="item.Price != 0">
                                        ￥{{ item.Price }}
                                    </span>
                                    <span v-show="item.Price == 0">
                                        免费
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="footer-bar">
                            <el-row :gutter="0">
                                <el-col :span="12">
                                    <span class="installed" v-show="item.IsInstalled==1">
                                        <i class="el-alert__icon el-icon-success"></i> 已安装
                                    </span>
                                    <span class="no-installed" v-show="item.IsInstalled==0">
                                        <i class="el-alert__icon el-icon-success"></i> 未安装
                                    </span>
                                </el-col>
                                <el-col :span="12" style="text-align:right">
                                    <el-button size="mini" type="primary" v-show="item.IsInstalled==0" v-on:click="install(item)">安装</el-button>
                                    &nbsp;&nbsp;&nbsp;<el-link :href="formatUrl(item.Url)" type="primary" target="_blank">查看详情</el-link>
                                </el-col>
                            </el-row>

                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <ui-page-panel v-model="pageInfo" v-on:change="loadData"></ui-page-panel>
    </div>
    <script type="text/javascript">
        var vue = new Vue({
            el: "#main",
            data:{
                    //数据列表
                dataList: [],
                //搜索
                searchInfo: { Keyword: "", IsFree:"all",ClassisyId:0 },
                //分页
                pageInfo: { PageSize:12, CurrentPage: 1, RecordCount: 0, PageCount: 1 },
            },
            created: function () {
                this.loadData();
            },
            watch:
            {
                "searchInfo.IsFree": function (newVar,oldVar)
                {
                    this.loadData();
                }
            },
            methods: {
                formatUrl: function (url) {
                    if (url == "" || url == null)
                    {
                        return "";
                    }
                    return url
                },
                install: function (item) {
                    var _this = this;
                    var id = item.Id;
                    var name = item.Name;
                    var title = item.Title;
                    this.submit({
                        url: "@Url.ActionUrl("Install")",
                        data: { id: id,name: name,title:title},
                        showSuccessMsg:false,
                        success: function (responseData) {
                            item.IsInstalled = 1;
                            _this.$notify({
                                title: '安装成功',
                                message: title +"已成功安装！",
                                type: 'success'
                            });
                        }
                    });
                },
                loadData: function () {
                    var _this = this;
                    this.ajax({
                        url: "@Url.ActionUrl("PageListData")",
                        type: "get",
                        data: extend(_this.pageInfo, _this.searchInfo),
                        success: function (responseData) {
                            vue.dataList = responseData.Data;
                            vue.pageInfo = responseData.PageInfo;
                        }
                    });
                },
            }
        })
    </script>
