<template>
    <div class="sera">
        <div class="seraTop">
            <img @click="backPage" src="../../../assets/images/appStoreCopy/backPage.svg" alt="">
            <van-search left-icon="" @change="getData" style="flex: 1;" shape="round" v-model="seraval" placeholder="请输入搜索关键词" />
            <img @click="getData" src="../../../assets/images/appStoreCopy/serImg.svg" alt="">
        </div>
        <!-- <div v-if="isShow" 
            class="zzcl"
          >
              加载中...
        </div> -->
        
            <div class="serCon" v-if="seraval">
                <div>{{ seraval }}</div>
                <div class="serConL">
                    <div>共{{ dataList.length }}条数据</div>
                    <img src="../../../assets/images/appStoreCopy/arrowL.svg" alt="">
                </div>
            </div>
            <template v-if="dataList.length">
                <div @click="openUrl(i.url)" class="serCon" v-for="(i,ind) in dataList" :key="ind">
                    <div>{{ i.name }}</div>
                    <div class="serConL">
                        <img src="../../../assets/images/appStoreCopy/arrowL.svg" alt="">
                    </div>
                </div>
            </template>
        
        
        
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {  getStoreCopy } from '@/api/appStore'
    export default {
        data(){
            return{
                seraval:'',
                dataList:[],
                isShow:false
            }
        },
        computed: {
            ...mapGetters(['userinfo']),
        },
        watch:{
            seraval(){
                if (this.seraval.trim() == '') this.dataList = []
            }
        },
        methods:{
            backPage(){
                this.$router.push('/appStoreCopy')
            },
            openUrl(url) {
                window.open(url, '_blank')
            },
            // 查询应用数据
            getData() {
                if (this.seraval.trim() == '') return
                this.isShow = true
                let params = {
                    uid: this.userinfo.userid,
                    name: this.seraval,
                    label: '',
                    type: '',
                    juri: 3,
                    stand: this.userinfo.schoolArea,
                    status:'',
                    model:'',
                    exportType:''
                }

                getStoreCopy(params)
                    .then(res => {
                        let _data = res[0]
                        if (_data.length > 0) {
                            _data.forEach(i => {
                            if (i.json) {
                                i.json = JSON.parse(i.json)
                            }
                            })

                            this.dataList = _data
                        } else {
                            this.dataList = []
                        }
                        this.isShow = false
                    })
                    .catch(err => {
                        this.isShow = false
                        this.$toast.error('查询应用数据失败')
                    })
            },
        }
    }
</script>

<style lang="scss" scoped>
.sera{
    width: 100vw;
    height: 100vh;
    background: #fff;
    position: relative;
}
.seraTop{
    width: 100%;
    padding: 10px 15px 0;
    box-sizing: border-box;
    display: flex;
    border-bottom: 0.5px solid #D9D9D9;
    img{
        width: 23px;
    }
}
.zzcl{
      position: absolute;
      left: 0%;top: 0%;
      background: #fff;
      width: 100%;height: 100%;opacity: .6;
      display: flex;justify-content: center;line-height: 350px;
      font-size: 16px;
      color: #000;
}
.serCon{
    display: flex;
    padding: 10px 18px;
    align-items: center;
    justify-content: space-between;
    font-family: PingFang HK;
    font-weight: 300;
    font-size: 13px;
    line-height: 20px;
    color: #969BA3;
    border-bottom: 0.5px solid #D9D9D9;
    .serConL{
        display: flex;
        align-items: center;

    }
}
</style>