@extends('layouts.base')
@section('title', '安装应用')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/plugins-market/assets/css/index.css')}}">
<style>
    .all{
        padding-top: 10px !important;
    }
    .vue-page{
        width: calc(100% - 124px);
    }
    .base_set{
        background: #fff;
        margin: 20px 10px 0 20px;
    }
    .base_sets{
        height: 100vh;
        background: #fff;
        margin: 10px 10px 0 10px;
    }
    .vue-main-title{
        margin-left: 20px;
        padding-top: 10px;
    }
    .el-row{
        padding: 5px 0 0px 0;
    }
    .topSearch{
        display: flex;
    }
    .topSearch .el-input{
        margin-right: 5px;
        width: 700px;
    }
    .topSearch .el-button{
        background-color: #29ba9c;
        border-radius: 2px;
        color: #fff;
        border-radius: 4px;
        width: 98px;
        border-color: #29ba9c;
    }
    .applicationClassification{
        color: #333333;
        font-size: 16px;
        font-weight: normal;
    }
    .applicationClassification span{
        display: inline-block;
        margin-top: 22px;
        margin-right: 50px;
        cursor: pointer;
    }
    .activeColor{
        padding: 5px 16px;
        background-color: #29ba9c;
        border-radius: 15px;
        color: #fff;
    }
    .applicationStatus{
        color: #333333;
        font-weight: normal;
    }
    .applicationStatus span{
        display: inline-block;
        margin-top: 22px;
        margin-right: 50px;
        cursor: pointer;
        font-size: 16px;
    }
    .plugManagement{
        margin-top: 38px;
        height: 30px;
        display: flex;
        align-items: center;
    }
    .plugManagementContext{
        padding: 7px 16px;
        background: #ec544a;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        margin-right: 37px;
        font-size: 16px;
        width: 130px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .plugManagement .noticeDetail{
        font-size: 16px;
        color: #333333;
        font-weight: normal;
    }
    .cardBox{
        display: flex;
        flex-wrap: wrap;
        margin: 20px 10px 20px 20px;
        justify-content: space-between;
    }
    .box{
        width: 32.8%;
        background: #fff;
        margin:0 0 20px 0;
        display: flex;
        padding: 15px;
        border-radius: 10px;
        height: 180px;
    }
    /* .boxLast{
        margin-bottom: 40px;
    } */
    .boxDetail{
        width: 100%;
        background: #fff;
        margin: 20px 10px;
        display: flex;
        padding: 20px;
        border-radius: 10px;
    }
    .box .cardDetail{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 150px;
    }
    .box .cardDetail .verification{
        color: #202020;
    }
    
    .verification-version {
        font-size: 14px;
        color: #a3a3a3;
        margin-left: 14px;
    }
    .buttonLeft{
        display: flex;
        justify-content: space-between;
        height: 30px;
    }
    .box .grant{
        background: #c6eee2 !important;
        color: #29ba9c !important;
        border-radius: 4px;
        border-color: #c6eee2 !important;
    }
    .box .grant:hover{
        background: #ec544a;
        color: #fff;
        border-color: #ec544a;
    }
    .activeGrant{
        color: #ec544a;
        background: #fcd7d3;
        border-radius: 4px;
        border-color: #fcd7d3;
    }
    .el-button--whiteBackground {
        background: #ec544a !important;
        color: #fff !important;
        border-color: #ec544a !important;
    }
    .box .install{
        background: #29ba9c;
        color: #fff;
        border-radius: 4px;
        border-color: #29ba9c;
    }
    .activeInstall{
        background-color: #c6eee2 !important;
        color: #29ba9c !important;
        border-radius: 4px;
        border-color: #c6eee2 !important;
    }
    .box .details {
        color: #29ba9c;
        cursor: pointer;
        font-size: 14px;
    }
    .cardDetail .tip{
        color: #ec544a;
        margin-left: 10px;
    }
    .categoryDes{
        color: #595959;
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .batchInstallation{
        margin-top: 30px;
        margin-right: 23px;
        margin-left: 20px;
        padding: 0 15px;
        display: flex;
        color: rgb(255, 255, 255);
        border-radius: 2px;
        justify-content: center;
        align-items: center;
        width: 120px;
        height: 42px;
        background-color: #29ba9c;
        border-radius: 4px;
        cursor:pointer
    }
    .el-loading-spinner {
        top: 30% !important;
    }

    .buttonLeft .el-button{
        height: 30px;
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 14px;
    }

    .cardStatus {
        display: flex;
    }
</style>
<div class="all">
        <div id="app" v-cloak >
            <el-form ref="form"  label-width="15%" v-loading="isShow" @submit.native.prevent>
                <div :class="[isShow ? 'base_sets' : 'base_set']">
                    <div class="vue-main-title">
                        <div class="vue-main-title-left"  style="height: 24px;margin-top: 1px;"></div>
                        <div class="vue-main-title-content" v-if="!isShow" style="font-size: 20px;font-weight: normal;">应用市场</div>
                    </div>
                    <el-row v-if="!isShow">
                        <el-col :span="4">&nbsp;</el-col>
                        <el-col :span="13">
                            <div class="topSearch">
                                <el-input placeholder="请输入应用名称" v-model="keyword"  @keyup.enter.native="searchEnterFun"></el-input>
                                <el-button @click="search(1)" >搜索</el-button>
                            </div>
                            <div class="applicationClassification"  >
                                <span >应用分类:</span>
                                <span v-for="(item,index) in applicationClassificationData" :class="[currentShowClassifyPage == item.id ? 'activeColor':'']" @click="applicationClassify(item.id,item.name)">[[item.name]]</span>
                            </div>
                            <div class="applicationStatus" >
                                <span>应用状态:</span>
                                <span v-for="(item,index) in applicationStatusData" :class="[currentShowStatusPage == item.id ? 'activeColor':'']" @click="applicationStatus(item.id)">[[item.name]]</span>
                            </div>
                        </el-col>
                        <el-col :span="7">&nbsp;</el-col>
                    </el-row>
                    <el-row v-if="!isShow">
                        <el-col :span="4"> &nbsp;</el-col>
                        <el-col :span="20" style="display: flex;justify-content: space-between;align-items: center;margin-bottom:20px">
                            <div class="plugManagement">
                                <span class="plugManagementContext" @click="gobackPlugins">返回插件管理</span>
                                <span class="noticeDetail">安装应用之后，需要返回插件管理启用已安装应用！！</span>
                            </div>
                            <div style="display: flex;align-items: end;">
                                <el-checkbox @change="allChange" v-model="allStatus" style="margin-bottom: 0;">全选</el-checkbox>
                                <span class="batchInstallation" @click="batchInstallation" >批量安装</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <!-- boxLast -->
                <div class="cardBox"  v-loading="loading">
                    <div class="box" v-for="(item,index) in boxData" :key="index">
                        <div style="width: 150px;height: 150px;margin-right: 22px;"><img :src="item.imageUrl" alt="" style="width: 150px;height: 150px;"></div>
                        <div class="cardDetail">
                            <div style="font-weight: normal;">
                                <div style="display: flex;justify-content: space-between;height: 19px;">
                                    <div style="display: flex;">
                                        <div class="verification"><span style="font-size: 20px;">[[item.title]]</span><span class="verification-version">版本号：[[item.version]]</span></div>
                                        <span class="tip" style="display: flex;" v-if="item.empower == 'un_auth' && item.version_status == 'installed'">涉嫌盗版使用，请卸载或联系客服!!</span>
                                    </div>
                                    <el-checkbox v-model="item.checked" v-if="item.empower == 'auth' && item.version_status == 'un_install'" @change="oneChange"></el-checkbox>
                                </div>
                                <div style="display: flex;justify-content: space-between;margin:13px 0px 10px 0px;color: #595959;font-size: 16px;">
                                    <span class="categoryDes" >分类: [[item.category_name]]</span>
                                    <span  class="details" @click="btnDetail(item)">详情介绍 ></span>
                                    <!-- <el-button class="details" @click="btnDetail(item)">详情介绍</el-button> -->
                                </div>
                                <span class="categoryDes" >描述: [[item.description]]</span>
                            </div>
                            <div class="buttonLeft">
                                <div class="cardStatus">
                                    <!-- 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'" @click="installOne(item,'1')">安装</el-button>
                                    <el-button class="install" v-if="item.version_status == 'new'" @click="installOne(item,'2')">可升级</el-button>
                                    <!-- <el-button class="install" v-if="item.version_status == 'un_auth'" @click="installOne(item,'3')">安装</el-button> -->
                                    <el-button class="activeInstall" v-if="item.version_status == 'installed'" :disabled="item.version_status == 'installed'" @click="installOne(item,'2')">已安装</el-button>
                                </div>
                                <!-- <el-button class="details" @click="btnDetail(item)">详情介绍</el-button> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div style="padding: 10px;"></div>
            </el-form>

            <!-- 分页 -->
            <div class="vue-page" >
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total" :page-size="per_size" :current-page="current_page" background></el-pagination>
                    </el-col>
                </el-row>
            </div>

            <el-dialog title="授权" :visible.sync="dialog1">
                <el-form ref="form" :model="impower" label-width="15%">
                    <el-form-item label="密钥key" prop="key">
                        <el-input v-model="impower.key" placeholder="请输入密钥key" style="width:70%;"></el-input>
                    </el-form-item>
                    <el-form-item label="密钥secret" prop="secret">
                        <el-input v-model="impower.secret" placeholder="请输入密钥secret" style="width:70%;"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="confirmImpower">授 权</el-button>
                    <el-button @click="dialog1=false">关 闭</el-button>
                </span>
            </el-dialog>

        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'market',
            data() {
                return {
                    applicationClassificationData:[],
                    applicationStatusData:[{
                        id:0,
                        name:"全部"
                    },{
                        id:1,
                        name:"未授权"
                    },{
                        id:2,
                        name:"未安装"
                    },{
                        id:3,
                        name:"已安装"
                    }],
                    currentShowClassifyPage:"",
                    currentShowClassifyName:"",
                    currentShowStatusPage:0,
                    boxData:[],
                    total: 0,
                    per_size: 0,
                    current_page: 0,
                    loading:false,
                    isShow:true,
                    keyword:"",
                    dialog1:false,
                    impower: {
                        key:'',
                        secret:'',
                    },
                    // 全选
                    allStatus:false
                }
            },
            mounted() {
                this.getData({status:0,category_name:""})
            },
            methods: {
                getData(json){
                    this.loading = true
                    this.$http.post("{!! yzWebFullUrl('plugin.plugins-market.Controllers.new-market.getList') !!}",json).then(response => {
                        if (response.data.result == 1) {
                            this.boxData = response.data.data.data;
                            this.total = response.data.data.total;
                            this.per_size = response.data.data.per_page;
                            this.current_page =  response.data.data.current_page;
                            this.applicationClassificationData = response.data.data.category_list
                            this.allStatus = false
                            if(response.data.data.category_list){
                                this.applicationClassificationData.unshift({
                                    id:"",
                                    name:"全部"
                                })
                            }
                            this.isShow = false
                            this.loading = false
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    }), function (res) {
                        console.log(res);
                    };
                },
                searchEnterFun(e){
                    let keyCode = window.event? e.keyCode:e.which;
                    if(keyCode == 13){
                        this.search(1)
                    }
                },
                search(val){
                    this.getData({
                        page:val,
                        status:this.currentShowStatusPage,
                        keyword:this.keyword,
                        // category_id:this.currentShowClassifyPage
                        category_name:this.currentShowClassifyName
                    })
                },
                applicationStatus(index){ 
                    this.currentShowStatusPage=index
                    this.getData({
                        page:1,
                        status:this.currentShowStatusPage,
                        keyword:this.keyword,
                        // category_id:this.currentShowClassifyPage
                        category_name:this.currentShowClassifyName
                    })
                },
                applicationClassify(id,name){
                    // console.log(id,555);
                    this.currentShowClassifyPage=id
                    this.currentShowClassifyName = name
                    if(this.currentShowClassifyName == "全部"){
                        this.currentShowClassifyName = ""
                    }
                    this.getData({
                        page:1,
                        status:this.currentShowStatusPage,
                        keyword:this.keyword,
                        // category_id:this.currentShowClassifyPage
                        category_name:this.currentShowClassifyName
                    })
                },
                allChange(status){
                    for(let item of this.boxData){
                        if(item.empower == 'auth' && item.version_status == 'un_install'){
                            if(status){
                                this.$set(item,'checked',true)
                            }else{
                                this.$set(item,'checked',false)
                            }
                        }
                    }
                },
                oneChange(status){
                    for(let item of this.boxData){
                        if(item.empower == 'auth' && item.version_status == 'un_install'){
                            if(!item['checked']){
                                this.allStatus = false
                                return
                            }else{
                                this.allStatus = true
                            }
                            
                        }
                    }
                },
                batchInstallation(){
                    let plugin = []
                    for(let item of this.boxData){
                        if(item['checked']){
                            plugin.push({
                                name:item.name,
                                version:item.version
                            })
                        }
                    }
                    // console.log(plugin,'plugin');
                    this.batch(plugin);
                },
                // batchUpdate() {
                //     let that = this;
                //     let plugin = []
                //     that.selected_list.forEach((item,index) => {
                //         plugin.push({
                //             name:item.name,
                //             version:item.latestVersion
                //         })
                //     });
                //     let json = {
                //         plugin:plugin,
                //     }
                //     that.batch(json);
                //
                // },
                batch(json) {
                    let that = this;
                    that.loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.plugins-market.Controllers.new-plugin.batchInstall') !!}",{plugin:{...json}}).then(response => {
                        // console.log(response);
                        if (response.data.result == 1) {
                            that.$message.success(response.data.msg);
                            // let json = {status:0}
                            // that.getData(json);
                            // window.location.reload();
                            this.applicationStatus(this.currentShowStatusPage)
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.loading = false;
                    }), function (res) {
                        that.loading = false;
                        //console.log(res);
                    };
                },

                // 安装、授权单个
                installOne(row,type) {
                    let that = this;
                    that.impower = {
                        key:'',
                        secret:'',
                    };
                    that.row = row;
                    if(type == 1 || type == 2) {
                        let json = {};
                        if(type == 1) {
                            json = {
                                plugin:{
                                    name:row.name,
                                    version:row.version,
                                }
                            }
                        }
                        else if(type == 2) {
                            json = {
                                plugin:{
                                    name:row.name,
                                    version:row.latestVersion,
                                }
                            }
                        }
                        that.loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.plugins-market.Controllers.new-plugin.install') !!}",json).then(response => {
                            // console.log(response);
                            if (response.data.result == 1) {
                                that.$message.success(response.data.msg);
                                // let json = {status:0}
                                // that.getData(json);
                                // window.location.reload();
                                this.applicationStatus(this.currentShowStatusPage)
                            } else {
                                that.$message.error(response.data.msg);
                            }
                            that.loading = false;
                        }), function (res) {
                            //console.log(res);
                            that.loading = false;
                        };
                    }
                    else if(type == 3) {
                        that.openDialog(row);
                    }
                    console.log(row)
                },
                openDialog(row) {
                    let that = this;
                    that.dialog1 = true;

                },
                // 确认授权
                confirmImpower() {
                    let that = this;
                    // console.log(that.impower);
                    if(that.impower.key == '') {
                        that.$message.error("密钥key不能为空");
                        return;
                    }
                    if(that.impower.secret == '') {
                        that.$message.error("密钥secret不能为空");
                        return;
                    }
                    let json = {
                        plugin:{
                            name:that.row.name,
                            version:that.row.version,
                        },
                        keyData:{
                            key:that.impower.key,
                            secret:that.impower.secret,
                        }
                    };
                    that.dialog_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.plugins-market.Controllers.new-plugin.authorize') !!}",json).then(response => {
                        // console.log(response);
                        if (response.data.result == 1) {
                            that.$message.success(response.data.msg);
                            // let json = {status:0}
                            // that.getData(json);
                            // that.dialog1 = false;
                            window.location.reload();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.dialog_loading = false;
                    }), function (res) {
                        //console.log(res);
                        that.dialog_loading = false;
                    };
                },

                btnDetail(data){
                    let link =`{!! yzWebFullUrl('plugin.plugins-market.Controllers.new-market.details-index') !!}`+`&id=`+data.id
                    window.location.href = link;
                    console.log(data,55);
                },
                gobackPlugins(){
                    let link =`{!! yzWebFullUrl('plugins.get-plugin-data') !!}`
                    window.location.href = link;
                }
            },
        })
    </script>
@endsection