<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:;" @click="childrenPromote()">子平台打包</a>
     </div>
     <div>
        <Select class="wid_120" placeholder="选择游戏" clearable v-model="search.game" :transfer='true' filterable>
            <Option  :value="1"></Option>
        </Select>
        <Select class="wid_120" placeholder="游戏平台" clearable v-model="search.type" :transfer='true' filterable>
            <Option  :value="1">系统推荐</Option>
        </Select>
        <Select class="wid_120" placeholder="平台来源" clearable v-model="search.from" :transfer='true' filterable>
            <Option  :value="1">系统推荐</Option>
        </Select>
        <Button type="primary" class="mar_L_5" @click="getPromoteList()">搜索</Button>
        <Button class="clear_btn" @click="removeSearch">清空</Button>
     </div>
    </div>
     <Table :columns="gamePromoteList" :data="gamePromoteData" class="clear game_table" border></Table>
     <div class="page">
        <Page :total="count" :current="pindex" :page-size="10" size="small" show-total show-elevator @on-change="getPromoteList"/>
    </div>
    <!-- 弹窗 -->
         <Modal
            v-model="packDialog"
            class="game_promoteDialog"
            title="子平台打包"
            width="1022px"
            >
           <div class="packDialogContainer">
             <div class=" mar_T_15 modalSearchBox ">
                <Select class="wid_120" placeholder="子平台账号" clearable v-model="modalSearch.accountNum" :transfer='true' filterable>
                    <Option  :value="1">系统推荐</Option>
                </Select>
                <Select class="wid_120" placeholder="选择游戏" clearable v-model="modalSearch.game" :transfer='true' filterable>
                    <Option  :value="1">系统推荐</Option>
                </Select>
                <Button type="primary" class="mar_L_5 searchBtn" @click="getPackList()">搜索</Button>
                <Button class="clear_btn" @click="removeSearch">清空</Button>
             </div>
             <div>
                <Table :columns="packList" :data="packData" class="clear game_table" border height="280" @on-select="selectData"></Table>
             </div>
           </div>
            <div slot="footer">
                <Button type="primary" class="game_promoteConfirm" @click="packingConfirm()">打包</Button>
            </div>
      </Modal>
  </div>
</template>
<script>
import { removeSearch } from "@/assets/js/common";
import { setStore } from "@/utils/utils";
import gamePic from "@/assets/image/game.jpg"
import iconTable from "../../../static/image/icon_android.png"
export default {
  name: "game_promote",
  data() {
    return {
      count: 0,
      pindex: 1,
      search: {
       game:'',
       type:'',
       from:''
      },
      modalSearch: {
       game:'',
       accountNum:'',
      },
      gamePromoteList:[],
      gamePromoteData:[],
      packDialog: false,
      // 子平台打包表格
      packList:[],
      packData:[],
      // 子平台打包表格所选择的数据
      selectedData:[]
    };
  },
  methods: {
    setColumns() {
        const that = this
        this.gamePromoteList = [
        {
          title: "平台账号",
          key: "account",
          align: "left"
        },
        {
          title: "ICON",
          align: "left",
          render(h,params) {
              return <div><img src={ gamePic } style="width:40px;height:40px"/></div>
          }
        },
        {
          title: "游戏名称",
          key: "name",
          align: "left"
        },
        {
          title: "游戏类型",
          align: "left",
          key: "type"
        },
        {
          title: "游戏平台",
          align: "left",
          render(h,params) {
              return <div><img src={ iconTable } /></div>
          }

        },
        {
          title: "分包状态",
          key: "status",
          align: "left",
          render: (h,params) => {
              if(params.row.status === 1) {
                  return h('span',
                    {class: 'packingIcon' , style: { color:'#FF7900',position:'relative',display:'inline-block','padding-left':'20px'}},'打包中')
              }else if(params.row.status === 2) {
                  return h('span',{
                    class: 'developNew' , 
                    style: { 
                      color:'#246EEA', 
                      background:'#D0E0FC',
                      width:'92px',
                      height:'27px',
                      'line-height':'27px',
                      'text-align':'center',
                      'border-radius':'4px',
                      position:'relative',
                      display:'inline-block',
                      'padding-left':'10px',
                      cursor:'pointer'
                    },
                    on: {
                      click: () => {
                       console.log('chongxin')
                      }
                    }

                  },'重新生成')
              }else {
                    return h('div',{
                      class: 'developDone' , 
                      style: {
                         color:'#F35656', 
                         background:'#FCD4D4',
                         width:'106px',
                         heigth:'27px',
                         'text-align':'center',
                         'border-radius':'4px',
                         position:'relative',
                         'padding-left':'10px',
                         cursor:'pointer'
                      },
                      on: {
                      click: () => {
                       console.log('chongxin')
                      }
                    }

                },'生成平台包')
              }
          }
        },
        {
          title: "分成比例",
          key: "percent",
          align: "left",
          render(h,params) {
              return h('div', {
                  class: 'ratio'
              },[
                  h('span', {
                      on: {
                          click(e) {
                            e.target.style.display = 'none'
                            e.target.nextElementSibling.style.display = 'block'
                            e.target.nextElementSibling.children[1].focus()
                          }
                      }
                  },params.row.percent + '%'),
                  h('Input', {
                      props: {
                        value: params.row.percent
                      },
                      style: {
                          display: 'none'
                      },
                      on: {
                           'on-blur' (e) {                              
                              that.gamePromoteData[params.index].percent = e.target.value
                              e.target.parentNode.style.display = 'none'
                              e.target.parentNode.previousElementSibling.style.display = "block"
                            }
                      },
                  })
                ])
          }
        },
    ]
    },
    setPackColumns() {
      const that = this
      this.packList = [
         {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: "ICON",
          align: "left",
          render(h,params) {
            return <div><img src={ gamePic } style="width:40px;height:40px"/></div>
          }
        },
         {
          title: "游戏名称",
          key: "name",
          align: "left"
        },
         {
          title: "游戏类型",
          key: "type",
          align: "left"
        },
        {
          title: "游戏平台",
          key: "promote",
          align: "left"
        },
         {
          title: "分成比例",
          key: "percent",
          align: "left",
            render(h,params) {
              return h('div', {
                  class: 'ratio'
              },[
                  h('span', {
                      on: {
                          click(e) {
                            e.target.style.display = 'none'
                            e.target.nextElementSibling.style.display = 'block'
                            e.target.nextElementSibling.children[1].focus()
                          }
                      }
                  },params.row.percent + '%'),
                  h('Input', {
                      props: {
                        value: params.row.percent
                      },
                      style: {
                          display: 'none'
                      },
                      on: {
                           'on-blur' (e) {                              
                              that.packData[params.index].percent = e.target.value
                              e.target.parentNode.style.display = 'none'
                              e.target.parentNode.previousElementSibling.style.display = "block"
                            }
                      },
                  })
                ])
          }
        },
      ]
    },
   getPromoteList() {
       const list = [
           {account:'ouyangzhangdehao1',name:'重装上阵',type:'竞技类',percent:'60',from:'一牛游戏',status:1},
           {account:'ouyangzhangdehao2',name:'重装上阵',type:'竞技类',percent:'60',from:'一牛游戏',status:2},
           {account:'ouyangzhangdehao3',name:'重装上阵',type:'竞技类',percent:'60',from:'一牛游戏',status:3},
            {account:'ouyangzhangdehao4',name:'重装上阵',type:'竞技类',percent:'60',from:'一牛游戏',status:1},
       ]
       this.gamePromoteData = list
       this.count = this.gamePromoteData.length
   },
   getPackList() {
     const list = [
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
        {name:'重装上阵',type:'竞技类',percent:'60',promote:'一牛游戏'},
     ]
     this.packData = list
   },
   // 子平台打包按钮
   childrenPromote() {
     this.packDialog = true
     this.getPackList()
   },
   // 打包按钮
   packingConfirm(){
      this.packDialog = false
   },
   selectData(e) {
     this.selectedData = e
   },
    // 清空搜索条件
    removeSearch() {
      this.search = { ...removeSearch({ ...this.search }) };
      this.modalSearch = { ...removeSearch({ ...this.modalSearch }) };
    },
  },
  created() {
      this.getPromoteList()
      this.setColumns()
      this.setPackColumns()
  },
};
</script>
<style lang="less" scoped>
.date_sum{
  margin-top: 15px;
  font-size: 15px;
  margin-left: 5px
}
#datasum-table .ivu-table td{
  background-color: #FAFAFC!important
}
#datasum-table .ivu-table-row-hover{
  background-color: #FAFAFC
}
.gameBoxTitle {
    height: 48px;
    border-bottom: 1px solid #ccc;
}
.searchBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.modalSearchBox {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
    margin-right: 26px;
}
.modalSearchBox .searchBtn {
  margin-right: 6px;
}
.modalSearchBox .wid_120 {
  margin-right: 6px;
}
.searchLeftTab a {
    display: inline-block;
    width: 88px;
    height: 30px;
    border: 1px solid #3B82FF;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    color: #3B82FF;
    margin-right: 10px;
}
.game_promoteDialog .packDialogContainer {
  padding: 0 25px;
}
</style>