<template>
    <div>
        <img v-if="officialwebsite" style="width:100%;height:450px; object-fit: cover;" src="/assets/home/2@2x.png" alt="">
        <div  :class="officialwebsite?'tytool':'notytool'">
            <div style="display:flex">              
                <div class="typetext">工具类型</div>
                <el-tabs v-if="tooltypelist.length>0"  v-model="toolType" @tab-click="showDataTypeChage">
                    <!-- dictValue dictLabel -->
                    <el-tab-pane label="全部" name="''"></el-tab-pane>
                    <el-tab-pane v-for="(item,key) of tooltypelist" :key="key" :label="item.dictLabel" :name="item.dictValue"></el-tab-pane>
                </el-tabs>
            </div>
            <el-divider></el-divider>
            <div style="display:flex">              
                <div class="typetext">交付方式</div>
                <el-tabs v-if="paytypelist.length>0" v-model="deliverType" @tab-click="payTypeChage">
                    <el-tab-pane label="全部" name="''"></el-tab-pane>
                    <el-tab-pane v-for="(item,key) of paytypelist" :key="key" :label="item.dictLabel" :name="item.dictValue">     </el-tab-pane>
                </el-tabs>
            </div>
            <div v-if='toolslist && toolslist.length>0' v-loading="loading">
                <div v-for='(tool,key) of toolslist' :key="key" class="productbox" :style="{padding:officialwebsite?'':'10px 0 5px 18px'}" @click="toolsinform(tool.toolId)">
                    <div style="width:150px;display:flex;align-items:center;">
                        <img :src="tool.img" style="width:119px;height:119px;" alt="">
                        <!-- <img v-if="tool.name=='代码静态分析工具'" src="/assets/toolmarket/EagleEye.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='源代码安全检测工具'" src="/assets/toolmarket/wukong.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='C/C++单元测试工具'" src="/assets/toolmarket/EagleWing-C.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='接口测试工具'" src="/assets/toolmarket/Kinterface.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='JAVA单元测试工具'" src="/assets/toolmarket/EagleWing-Java.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='功能测试工具AutoFun'" src="/assets/toolmarket/AutoFun.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='代码组成分析平台'" src="/assets/toolmarket/KeySwan.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='性能测试工具'" src="/assets/toolmarket/KeySphere.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='自鉴-交互式应用安全测试系统IAST'" src="/assets/toolmarket/自鉴交互式.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='Web应用安全测试工具'" src="/assets/toolmarket/web.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='资产识别及漏洞管理工具'" src="/assets/toolmarket/资产识别.png" style="width:119px;object-fit:contain" alt="">
                        <img v-if="tool.name=='性能测试工具KeyTurbo'" src="/assets/toolmarket/AutoLoad.jpg" style="width:119px;object-fit:contain" alt=""> -->
                    </div>
                    <div style="width: 100%;padding: 0 20px;" >
                        <div style="display:flex;justify-content:space-between;" class="raise">   
                            <p>{{tool.name}}</p>
                            <p v-if="tool.price == 0" style="font-weight: bold; color:#E93A3A;">
                                限时免费
                            </p>
                            <p v-else style="font-weight: bold">
                                <span style="color:#E93A3A;">￥ {{tool.price}} </span>
                                <span>/月</span>
                            </p>
                        </div>
                        <el-divider></el-divider>
                        <p  :title="tool.toolDesc"
                            style="font-size:14px;margin-bottom:5px;line-height:1.8">{{tool.toolDesc | ellipsis}}</p>
                        <div class="cetype">   
                            <p>工具类型：{{tool.toolTypeName}} </p>
                            <p>交付方式：{{tool.deliverType}}</p>
                            <p>上架时间： {{tool.onlineTime}}</p>
                            <p>服务商：{{tool.providerName}}</p>
                        </div>
                    </div>
                </div>
               
            </div>
            <div v-else>   
                <el-empty ></el-empty>
            </div>
            <div  v-if="officialwebsite && total>10" style='width:100%;margin-top:30px;text-align: center;'>
                <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 30]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            <!--  :page-sizes="[3, 6, 30]" sizes,-->
            <div v-if="!officialwebsite && total>3" style='width:100%;margin-top:30px;text-align: center;'>
                <el-pagination background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"              
                    :page-size="pageSize"
                    layout="total,  prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {listTools} from "@/api/toolInfo/market";
    export default{
        data(){
            return{
                loading:true,
                toolType:null,//工具类型
                deliverType:null,//支付方式
                toolslist:[],//工具数组
                currentPage:1,
                total:'',
                pageNum:1,
                pageSize:20,
                officialwebsite:true,//是否官网

                imageList: ['EagleEye.png', 'wukong.png', 'EagleWing-C.png', 'Kinterface.png', 'EagleWing-Java.png', 'AutoFun.png'
                , 'KeySwan.png', 'KeySphere.png', '自鉴交互式.png', 'web.png', '资产识别.png', 'AutoLoad.png'],

                img0: 'EagleEye.png',
                img1: '/assets/toolmarket/wukong.png',
                img2: '/assets/toolmarket/EagleWing-C.png',
                img3: '/assets/toolmarket/Kinterface.png',
                img4: '/assets/toolmarket/EagleWing-Java.png',
                img5: '/assets/toolmarket/AutoFun.png',
                img6: '/assets/toolmarket/KeySwan.png',
                img7: '/assets/toolmarket/KeySphere.png',
                img8: '/assets/toolmarket/自鉴交互式.png',
                img9: '/assets/toolmarket/web.png',
                img10: '/assets/toolmarket/资产识别.png',
                img11: '/assets/toolmarket/AutoLoad.png',
            }
        },
        computed: {
            ...mapGetters(['paytypelist','tooltypelist'])
        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 100) {
                    return value.slice(0, 100) + '...'
                }
                return value
            }
        },
        mounted(){
            // console.log('路由',this.$route.path);  
            let currentrout=this.$route.path;
            if(currentrout!=='/market'){
                this.officialwebsite=false;
                this.pageSize=3
            }
            // console.log('toolType----',this.tooltypelist,this.deliverType)
            this.getList()      
        },
        methods:{
            /** 查询列表 */
            getList() {
                this.loading = true;
                // console.log('toolType----'.this.toolType)
                let data={
                     toolType:this.toolType,
                     deliverType:this.deliverType,
                     pageNum:this.pageNum,
                     pageSize:this.pageSize,
                     status: 1
                };
                Object.keys(data).forEach(keyd=>{
                    if(!data[keyd] || data[keyd]=='' || data[keyd]=='0' || data[keyd]=="''") { delete data[keyd]; }
                    // console.log('data处理后----',data)
                })
                // console.log('data----',data)
                listTools(data).then(response => {
                    // console.log('response----',response)
                    this.toolslist = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }).catch(err=>{
                    console.log('异常',err)
                })
            },
            //工具方式
            showDataTypeChage(){
                // console.log('工具',this.toolType,this.deliverType)
                this.getList()      
            },
            //支付方式
            payTypeChage(){
                // console.log('支付',this.toolType,this.deliverType)
                this.getList()      
            },
            //工具详情
            toolsinform(id){
                // this.$message({
                //     message: '即将上线，敬请期待',
                //     type: 'info',
                //     duration: 1000,
                // })
                if(this.officialwebsite){
                    this.$router.push(`./market/tooldetails?id=${id}`)
                }else{
                    this.$router.push(`/console/mytooldetails?id=${id}`)
                }
            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                 this.pageSize=val;
                this.getList();
            },
            //当前页码
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.getList();
            }
        },

    }
</script>
<style scoped>
    .tytool{
        width:1200px;
        margin:30px auto;
    }
    .notytool{
        /* width:1200px; */
        /* margin-left:30px; */
    }
    .tytool>>>.el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }
    .notytool>>>.el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }
    .el-tabs>>>.el-tabs__nav-wrap::after{
        background-color:transparent;
    }
    .el-tabs>>>.el-tabs__item{
        color: #4D4D4D;
    }
    .el-tabs>>>.el-tabs__active-bar{
        background-color:transparent;
    }
    .el-tabs>>>.el-tabs__item.is-active{
        background:#0066EB;
        color:#fff;
        border:none;
        border-radius: 4px;
    }
    .tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left:22px;
    }
    .tytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) {
        padding-right:18px;
    }
    .tytool>>>.el-divider--horizontal{
        margin:5px 0 15px 0
    }
    .notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left:22px;
    }
    .notytool>>>.el-tabs--top .el-tabs__item.is-top:nth-child(6) {
        padding-right:18px;
    }
    .notytool>>>.el-divider--horizontal{
        margin:-5px 0 5px 0
    }
    .typetext{
        color: #4D4D4D;
        font-weight: bold;
        height:40px;
        line-height:40px;
        margin-right:20px;
        font-size:17px;
    }
    .productbox>>>.el-divider--horizontal{
        margin:0px
    }
    .cetype{
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap
    }
    .productbox{
        /* width: 1200px; */
        /* height: 110px; */
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(54, 61, 67, 0.1);
        border-radius: 4px;
        padding:25px 0 10px 18px;
        display:flex;
        margin-bottom:30px;
        cursor:pointer;
        transition: all .1s linear;
    }
    .cetype p{
        /* width:200px; */
        font-size:14px;
        margin:10px 0
    }
    .raise :nth-child(1){
        font-weight: bold;
    }
    .productbox:hover .raise p:nth-child(1){
        color:#0066EB
    }
    .productbox:hover{
          transform: scale(1.01);
          box-shadow: 0px 2px 8px 0px #87898d;
     }
     @media screen and (max-width: 1500px){
        .productbox{
            width:1100px;
            padding:25px 20px 10px 18px!important
        }

     }
</style>