<template>
    <div class="appControlList flex-display">
        <div class="head">
            <div class="text">

                <el-button plain type="success" icon="el-icon-circle-plus-outline" @click="handelClickAdd">新增</el-button>
            </div>
        </div>

        <div class="list">
            <el-table :data="appControlList.slice((curPage-1)*pageSize,curPage*pageSize)" border stripe :fit="false" height="100%" >
                <el-table-column label="编号" prop="id" width="150" show-overflow-tooltip/>
                <el-table-column label="渠道id" prop="channelName" width="150" show-overflow-tooltip/>
                <el-table-column label="游戏id" prop="gameName" width="150" show-overflow-tooltip/>
                <el-table-column label="状态" prop="state" width="150"
                                 :formatter="formatState" show-overflow-tooltip/>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="headrow" >
                            <el-button size="mini" type="success" @click="updateAppControlList(scope.row)" v-if="scope.row.state !== 1">开启</el-button>
                            <el-button size="mini" type="danger" @click="updateAppControlList(scope.row)" v-if="scope.row.state !== 0">关闭</el-button>
                        </div>
                    </template>
                </el-table-column>

            </el-table>

        </div>

        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" center @close="handelCancel">
            <div class="content">
                <el-form  label-width="80px">

                    <el-form-item label="游戏">
                        <el-select v-model="dialogDto.gameId" placeholder="请选择游戏" filterable clearable>
                            <el-option
                                    v-for="item in gameList"
                                    :key="item.gameId"
                                    :label="item.gameId + '_' +item.gameName"
                                    :value="item.gameId"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="渠道">
                        <el-select v-model="dialogDto.channelId" placeholder="请选择渠道" filterable clearable>
                            <el-option
                                    v-for="item in channelList"
                                    :key="item.channelId"
                                    :label="item.channelId + '_' +item.channelName"
                                    :value="item.channelId"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                </el-form>

            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="handelCancel">取 消</el-button>
                <el-button type="primary" @click="handelClickConform">确 定</el-button>
            </span>
        </el-dialog>


        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="pageSize"
                    :current-page="curPage"
                    :pager-count="11"
                    :total="total"
            ></el-pagination>
        </div>

    </div>
</template>

<script>

    import appControlApi from "@/api/AppControlList"

  export default {
    name: 'appControlList',
    data(){
      return{
        appControlList:[],
        dialog: {
          title: "新增",
          visible: false
        },
        total: 0,
        pageSize: 20,
        curPage: 1,
        gameList:null,
        dialogDto:{},
        channelList:null
      }

    },
    mounted(){
      this.getAppControlList()

    },
    methods:{
      getAppControlList(){
        appControlApi.getAppControlList().then(res =>{
          this.appControlList = res;
          this.appControlList.map(m =>{
            m.channelName = m.channelId + '_' + m.channelName;
            m.gameName = m.gameId + '_' + m.gameName;
          })
          this.total = this.appControlList.length;
          console.log(res)
        })
      },
      updateAppControlList(param){
        param.state = param.state^1;
        appControlApi.updateAppControlList(param).then(this.getAppControlList)
      },
      /**
       * 处理前端分页
       * @param val
       */
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.curPage = val;
      },
      handelCancel(){
        this.dialogDto = {}
        this.dialog.visible = false;
      },
      handelClickConform(){
        appControlApi.addAppControlList(this.dialogDto).then(res =>{
          this.getAppControlList()
          this.dialog.visible = false
        })
      },
      handelClickAdd(){
        if(this.gameList != null && this.channelList != null){
          this.dialog.visible = true
        }else {
          appControlApi.getGameList().then(game =>{
            appControlApi.getChannelList().then(channel =>{
              this.gameList = game;
              this.channelList= channel;
              this.dialog.visible = true
            })
          })
        }
      },
      formatState:function(row,column) {
        return row.state === 0 ? '关闭' : '开启'

      }

    },
  }
</script>

<style scoped>

</style>
