@extends('layouts.base')
@section('title', '安装应用')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/plugins-market/assets/css/index.css')}}">
<style>
    .base_set{
        background: #fff;
        margin: 10px 10px 0 20px;
    }
    .vue-main-title{
        margin-left: 20px;
        padding-top: 10px;
    }
    .detailRoute{
        padding:0 10px;
        color: #333333;
        display: block;
    }
    .cardBox{
        display: flex;
        flex-wrap: wrap;
    }
    .box{
        width: 100%;
        background: #fff;
        margin:0 10px 10px 15px;
        display: flex;
        padding: 20px;
        border-radius: 10px;
        font-weight: normal;
    }
    .boxDetail{
        width: 100%;
        background: #fff;
        margin: 20px 10px;
        display: flex;
        padding: 20px;
        border-radius: 10px;
    }
    .box img{
        margin-right: 22px;
    }
    .box .cardDetail{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }
    .box .cardDetail .verification{
        color: #202020;
        font-size: 22px;
    }
    .buttonLeft{
        display: flex;
        justify-content: space-between;
    }
    .box .grant{
        background: #ec544a;
        color: #fff;
        border-radius: 4px;
        border-color: #ec544a;
    }
    .box .grant:hover{
        background: #ec544a;
        color: #fff;
        border-color: #ec544a;
    }
    .box .grant:active{
        background: #fcd7d3;
        color: #ec544a;
        border-color: #fcd7d3;
    }
    .activeGrant{
        color: #ec544a;
        background: #fcd7d3;
        border-radius: 4px;
        border-color: #fcd7d3;
    }
    .box .activeGrant:hover{
        background: #fcd7d3;
        color: #ec544a;
        border-color: #fcd7d3;
    }
    .box .activeGrant:active{
        background: #fcd7d3;
        color: #ec544a;
        border-color: #fcd7d3;
    }
    .box .install{
        background: #29ba9c;
        color: #fff;
        border-radius: 4px;
    }
    .activeInstall{
        background-color: #c6eee2;
        color: #29ba9c;
        border-radius: 4px;
        border-color: #c6eee2;
    }
    .box .btnGoback {
        /* padding: 8px 20px; */
        height: 42px;
        width: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #29ba9c;
        color: #ffffff;
        border-radius: 4px;
        cursor: pointer;
    }
    .categoryDes{
        color:#595959;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 16px;
    }
    .detailCard{
        background: #fff;
        margin: 20px 10px 20px 20px;
        }
    .detailCardBox{
        display: flex;
        justify-content: center;
        margin-top: 138px;
        padding-bottom: 138px;
        color: #595959;
        font-size: 16px;
    }
    .el-button--whiteBackground {
        background: #ec544a !important;
        color: #fff !important;
        border-color: #ec544a !important;
    }
    .categoryDes-card {
        display: flex;
        justify-content: space-between;
        color: #595959;
    }

    .buttonLeft .el-button {
        height: 42px;
        width: 96px;
    }
</style>
<div class="all">
    <div id="app" v-cloak>
        <el-form ref="form"  label-width="15%">
            <div class="base_set">
                <div style="margin:10px;background:#fff;padding-top: 10px;">
                    <div class="vue-main-title">
                        <!-- <div class="vue-main-title-left"></div> -->
                        <div class="vue-main-title-content" style="font-size: 16px;font-weight: normal;"><span @click="btnGoback" style="cursor: pointer;">应用市场</span> > 应用详情介绍</div>
                    </div>
                </div>
                <div class="cardBox">
                    <div class="box" v-for="(item,index) in boxData" :key="index">
                        <img :src="item.imageUrl" alt="" style="width: 170px;height: 170px;">
                        <div class="cardDetail">
                            <div style="display: flex;justify-content: space-between;">
                                <div>
                                    <span class="verification">[[item.title]]</span>
                                    <span class="tip" style="display: flex;" v-if="item.empower == 'un_auth' && item.version_status == 'installed'">涉嫌盗版使用，请卸载或联系客服</span>
                                </div>
                            </div>
                            <div  class="categoryDes-card" >
                                <span class="categoryDes">分类: [[item.title]]</span>
                                <span style="font-size: 14px;">版本号：[[item.version]]</span>
                            </div>
                            <span class="categoryDes">描述: [[item.description]]</span>
                            <div class="buttonLeft">
                                <div>
                                    <!-- empower == 验证授权 -->
                                    <el-button type="whiteBackground" class="grant" v-if="item.empower == 'auth'">已授权</el-button>
                                    <el-button type="whiteBackground" class="activeGrant" v-if="item.empower == 'un_auth'">未授权</el-button>

                                    <!-- version_status == 安装、升级、未安装 -->
                                    <el-button class="install" v-if="item.version_status == 'un_install'">安装</el-button>
                                    <el-button class="install" v-if="item.version_status == 'new'">可升级</el-button>
                                    <!-- <el-button class="install" v-if="item.version_status == 'un_auth'">安装</el-button> -->
                                    <el-button class="activeInstall" v-if="item.version_status == 'installed'">已安装</el-button>
                                </div>
                                <span class="btnGoback" @click="btnGoback">返回应用市场</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detailCard">
                <div class="vue-main-title">
                    <div class="vue-main-title-left" style="height: 24px;margin-top: 1px;"></div>
                    <div class="vue-main-title-content" style="font-size: 20px;font-weight: normal;">详情介绍</div>
                </div>
                <div class="detailCardBox" v-if="boxData.length > 0">
                    <div v-html="boxData[0].content"></div>
                    <div v-if="!boxData[0].content">暂无详情，请联系客服咨询</div>
                </div>
            </div>
        </el-form>

    </div>
</div>

    <script>
        let detailData = {!! $data?:'{}' !!};
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'market',
            data() {
                return {
                    boxData:[],
                    detailData:detailData
                }
            },
            mounted() {
                console.log(detailData,'data');
                this.boxData.push(this.detailData)
            },
            methods: {
                btnGoback(){
                    let link =`{!! yzWebFullUrl('plugins.jump') !!}`
                    window.location.href = link;
                },
                
            },
        })
    </script>
@endsection