<template>
  <div class="right_con">
    <div class="gameBoxTitle">
        <div class="news_info_fgx fl"></div>
        <p class="date_sum fl">游戏中心</p>
    </div>
    <div class=" mar_T_15 searchBox">
     <div class="searchLeftTab">
        <a href="javaScript:;" :class="tabChange === 1? 'tabChooseActive':'noActive' " @click="judge(1)">手游</a>
        <a href="javaScript:;" :class="tabChange === 2? 'tabChooseActive':'noActive' " @click="judge(2)">H5</a>
        <a href="javaScript:;" :class="tabChange === 3? 'tabChooseActive':'noActive' " @click="judge(3)">页游</a>
     </div>
     <div v-if="tabChange === 1">
         <Input class="wid_120" v-model="search.game_name" placeholder="请输入游戏名称"></Input>
        <Select class="wid_120" placeholder="选择平台" clearable v-model="search.platform_id" :transfer='true' filterable v-for="item in this.list" :key="item.id">
            <Option  :value="item.platform_id">{{item.platform_name}}</Option>
        </Select>
        <Button type="primary" class="mar_L_5" @click="getGameList(1)">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
     </div>
      <div v-else-if="tabChange === 2">
         <Input class="wid_120" v-model="search.game_name" placeholder="请输入游戏名称"></Input>
        <Select class="wid_120" placeholder="选择平台" clearable v-model="search.platform_id" :transfer='true' filterable v-for="item in this.list" :key="item.id">
            <Option  :value="item.platform_id">{{item.platform_name}}</Option>
        </Select>
        <Button type="primary" class="mar_L_5" @click="getGameList(2)">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
     </div>
      <div v-else>
         <Input class="wid_120" v-model="search.game_name" placeholder="请输入游戏名称"></Input>
        <Select class="wid_120" placeholder="选择平台" clearable v-model="search.platform_id" :transfer='true' filterable v-for="item in this.list" :key="item.id">
            <Option  :value="item.platform_id">{{item.platform_name}}</Option>
        </Select>
        <Button type="primary" class="mar_L_5" @click="getGameList(3)">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
     </div>
    </div>
    <div v-if="showNoData" class="noDataText">暂无数据，请到平台对接栏目对接游戏平台，获取游戏</div>
    <div v-else>
        <template v-if="tabChange === 1">
            <div class="gameContent">
                <div class="flexContanier" >
                    <div class="gameDetailBox" v-for="item in this.gameList" :key="item.id" >
                       <div class="fl" style="display:flex;width:74%">
                            <div class="game_img">
                                <img :src="item.icon" alt="">
                            </div>
                            <div class="gameContent_right">
                                <p class="right_title">{{item.game_name}}</p>
                                <p class="right_iconPic">
                                    <img src="../../../static/image/icon_android.png" alt="" v-if="item.sdk_version == 1">
                                    <img src="../../../static/image/icon_iphone.png" alt="" v-else>
                                    <span>{{item.game_type_name}}</span>
                                </p>
                                <div class="rightContent_bottom">
                                    <span>分成比例：</span>
                                    <span>{{item.ratio}}%</span>
                                </div>
                            </div>
                       </div>
                        <div class="applyButton fr">
                            <button @click="nowApply(item)">马上申请</button>
                        </div>
                    </div>
                   
                </div>
                 <div class="page">
                    <Page :total="total" :current="current" :page-size="16" size="small" show-total show-elevator @on-change="changePage" />
                </div>
        </div>
        </template>
        <template v-else-if="tabChange === 2">
            <div class="gameContent">
                <div class="flexContanier" >
                    <div class="gameDetailBox" v-for="item in this.gameFiveList" :key="item.id" >
                        <div style="display:flex;width:74%">
                            <div class="game_img">
                                <img :src="item.icon" alt="">
                            </div>
                            <div class="gameContent_right">
                                <p class="right_title">{{item.game_name}}</p>
                                <p class="right_iconPic">
                                    <img src="../../../static/image/icon_H5.png" alt="" v-if="item.sdk_version == 3">
                                    <span>{{item.game_type_name}}</span>
                                </p>
                                <div class="rightContent_bottom">
                                    <span>分成比例：</span>
                                    <span>{{item.ratio}}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="applyButton">
                            <button @click="goToApply(item)">马上申请</button>
                        </div>
                    </div>
                </div>
                 <div class="page">
                        <Page :total="totalCount" :current="current" :page-size="16" size="small" show-total show-elevator @on-change="onChangeSize"/>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="gameContent">
                <div class="flexContanier" >
                    <div class="gameDetailBox" v-for="item in this.gameOtherList" :key="item.id" >
                        <div style="display:flex;width:74%">
                            <div class="game_img">
                               <img :src="item.icon" alt="">
                            </div>
                            <div class="gameContent_right">
                                <p class="right_title">{{item.game_name}}</p>
                                <p class="right_iconPic">
                                    <img src="../../../static/image/icon_yy.png" alt="" v-if="item.sdk_version == 4">
                                    <span>{{item.game_type_name}}</span>
                                </p>
                                <div class="rightContent_bottom">
                                    <span>分成比例：</span>
                                    <span>{{item.ratio}}%</span>
                                </div>
                            </div>
                        </div>
                        <div class="applyButton">
                            <button @click="finalApply(item)">马上申请</button>
                        </div>
                    </div>
                </div>
                  <div class="page">
                        <Page :total="finalTotal" :current="current" :page-size="16" size="small" show-total show-elevator @on-change="finalChangePage"/>
                </div>
            </div>
    </template>
    </div>
    
  </div>
</template>
<script>
import { removeSearch } from "@/assets/js/common";
import { getStore } from "@/utils/utils";
export default {
  name: "game_enter",
  data() {
    return {
      total: 0,
      current: 1,
      totalCount:0,
      finalTotal:0,
      search: {
       game_name:'',
       limit:16,
       page:1,
       platform_id:'',
       sys_type:1
      },
      showNoData:false,
      gameList:[],
      gameFiveList:[],
      gameOtherList:[],
      list:[],
      tabChange: 1,
      manager_id:getStore('userInfo').id
    };
  },
  methods: {
   getGameList(num) {
    this.$store.commit("changeloading", true);
      this.$api.getGameCenterData(this.search).then(response=>{
          if(response.code == 200 ) {
              this.showNoData = false
              if(num == 1) {
                  this.gameList = response.data
                  this.total = response.count
                  this.showNoData = this.gameList.length < 1 ? true:false
              }else if(num == 2) {
                  this.gameFiveList = response.data
                  this.totalCount = response.count
                  this.showNoData = this.gameFiveList.length < 1 ? true:false
              }else {
                  this.gameOtherList = response.data
                  this.finalTotal = response.count
                  this.showNoData = this.gameOtherList.length < 1 ? true:false
              }
              this.$store.commit("changeloading", false);
              
          }else {
              this.$store.commit("changeloading", false);
              this.showNoData = true
              return
          }
         
      })
   },
   changePage(val){
       this.search.page = val
       this.getGameList(1)
   },
   onChangeSize(val){
        this.search.page = val
        this.getGameList(2)
   },
   finalChangePage(val){
        this.search.page = val
        this.getGameList(3)
   },
   judge(e){
       if(e == 1) {
           this.tabChange = 1
            this.search.sys_type = 1
           this.getGameList(1)
       }else if(e == 2) {
            this.tabChange = 2
            this.search.sys_type = 2
            this.getGameList(2)
       }else {
           this.tabChange = 3
           this.search.sys_type = 3
            this.getGameList(3)
       }
   },
    // 清空搜索条件
    removeSearch() {
      this.search = {
          limit:16,
          page:1,
          game_name:'',
          platform_id:'',
          sys_type:''
       };
    },
    // 手游马上申请的按钮
    nowApply(e){
        let form = {
            platform_id:e.platform_id,
            game_id:e.id
        }
        this.applyDataFunction(form,1)
    },
    // h5马上申请的按钮
    goToApply(e){
        let form = {
            platform_id:e.platform_id,
            game_id:e.id
        }
        this.applyDataFunction(form,2)
    },
    finalApply(e){
        let form = {
            platform_id:e.platform_id,
            game_id:e.id
        }
        this.applyDataFunction(form,3)
    },
    // 申请的接口函数
    applyDataFunction(form,num){
        this.$api.applyGameData(form)
        .then(response => {
          if (response.code == 200) {
            this.$Message.success('申请成功')
            if(num == 1) {
                 this.getGameList(1)
            }else if(num == 2) {
                this.getGameList(2)
            }else {
                this.getGameList(3)
            }
           
          }else {
            this.$Message.error(response.msg)
            return
          }
        })
    },
    getPlatformList() {
        this.$api.getManagerChannelList({manager_id:this.manager_id})
        .then(response => {
          if (response.code == 200) {
            this.list = response.data
          }else {
            this.$Message.error(response.msg)
            return
          }
        })
    }
  },
  created() {
      this.getGameList(1)
      this.getPlatformList()
  },
};
</script>
<style lang="less" scoped>
.date_sum{
  margin-top: 15px;
  font-size: 15px;
  margin-left: 5px
}
.gameBoxTitle {
    height: 48px;
    border-bottom: 1px solid #ccc;
}
.searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.searchLeftTab a {
    display: inline-block;
    width: 70px;
    height: 30px;
    border: 1px solid #3B82FF;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3B82FF;
    margin-right: 10px;
}
.tabChooseActive {
    background: #3B82FF;
    color: #fff!important;
}
.flexContanier{
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
}
.gameDetailBox {
    width: 375px;
    height: 130px;
    display: flex;
    align-items: center;
    border: 1px solid #E9EDF6;
    box-shadow: 11px 9px 24px 0px rgba(217, 217, 217, 0.1);
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 14px;
    color: #999999;
    margin-top: 16px;
    margin-right: 39px;
}
.gameDetailBox:nth-child(4n+4) {
    margin-right: 0;
}

.flexContanier .gameDetailBox:last-child {
    margin-right: 0;
}
.game_img {
    width: 74px;
    height: 74px;
    margin-left: 20px;
    margin-right: 12px;
    box-shadow: 11px 9px 24px 0px rgba(217, 217, 217, 0.1);
}
.game_img img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
}
.right_title{
    font-weight: bold;
    color: #333333;
    font-size: 16px;
}
.right_iconPic img {
    vertical-align: middle;
    margin-right: 1px;
}
.applyButton button {
    width: 88px;
    height: 34px;
    background: #3B82FF;
    border-radius: 4px;
    color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    margin-top: 45px;
}
.noDataText {
    text-align: center;
    color: #999;
    font-size: 15px;
    margin: 50px 0;
}
</style>