<comment>
    # 管理系统添加游戏页面
</comment>
<template>
    <div class="adminAddItem">
      <p v-show="false">{{getGetTable}}</p>
      <p v-show="false">{{getTableData}}</p>
      <!--左侧-->
      <el-row  >
        <el-col :span="4"  class="leftList">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
          >
            <el-submenu index="1">
              <template slot="title">
                <!--<i class="el-icon-location"></i>-->
                <span>游戏管理</span>
              </template>
              <el-menu-item-group>
                <template slot="title">分组一</template>
                <el-menu-item index="GameItem">所有游戏</el-menu-item>
                <!--<el-menu-item index="1-2">选项2</el-menu-item>-->
              </el-menu-item-group>
              <!--<el-menu-item-group title="分组2">-->
                <!--<el-menu-item index="1-3">选项3</el-menu-item>-->
              <!--</el-menu-item-group>-->
              <!--<el-submenu index="1-4">-->
                <!--<template slot="title">选项4</template>-->
                <!--<el-menu-item index="1-4-1">选项1</el-menu-item>-->
              <!--</el-submenu>-->
            </el-submenu>
            <!--<el-menu-item index="2">-->
              <!--<i class="el-icon-menu"></i>-->
              <!--<span slot="title">导航二</span>-->
            <!--</el-menu-item>-->
            <!--<el-menu-item index="3">-->
              <!--<i class="el-icon-setting"></i>-->
              <!--<span slot="title">导航三</span>-->
            <!--</el-menu-item>-->
          </el-menu>
        </el-col>

        <el-col :span="20" class="mainList">
          <div class="grid-content bg-purple">
            <el-table
              ref="multipleTable"
              v-show="listItemShowTag"
              :data="tableData3"
              tooltip-effect="dark"
              style="width: 100%"
              height="500"
              :row-style="rowStyle"
              @selection-change="handleSelectionChange">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                :key="index" v-for="(item, index) in titleData"
                :label="item.titleName"
                :prop="item.name"
                :width="getWidth(item)"
              >


                <!--<template  slot-scope="scope">-->
                  <!--<el-popover v-show="item.name =='GameUrl' " trigger="hover" placement="top">-->
                    <!--<p>{{ scope.row.GameUrl }}</p>-->
                    <!--<div slot="reference" class="name-wrapper">-->
                      <!--<el-tag size="medium">{{ scope.row.GameUrl }}</el-tag>-->
                    <!--</div>-->
                  <!--</el-popover>-->

                  <!--<p v-show="item.name !='GameUrl' ">{{ scope.row.GameTitle }}</p>-->
                <!--</template>-->
              </el-table-column>
              <!--<el-table-column-->
                <!--label="日期"-->
                <!--width="120">-->
                <!--&lt;!&ndash;<template slot-scope="scope">{{ scope.row.date }}</template>&ndash;&gt;-->
              <!--</el-table-column>-->
              <!--<el-table-column-->
                <!--prop="name"-->
                <!--label="姓名"-->
                <!--width="120">-->
              <!--</el-table-column>-->
              <!--<el-table-column-->
                <!--prop="address"-->
                <!--label="地址"-->
                <!--show-overflow-tooltip>-->
              <!--</el-table-column>-->
            </el-table>

            <div style="margin-top: 20px">
              <el-button @click="toggleSelection(tableData3)">全选</el-button>
              <el-button @click="toggleSelection()">取消选择</el-button>
              <el-button @click="addItem()">添加</el-button>
              <el-button @click="updataItem()">修改</el-button>
              <el-button @click="delItem()">删除</el-button>
            </div>
          </div>
        </el-col>
      </el-row>



      <component
        @ok="dialogOk"
        @okUpData="dialogUpDataOk"
        :is="itemDialog"
        ref="itemDialog">

      </component>
    </div>
</template>

<script>
    //import logo from '../../../static/logo.png'
    export default {
        name: 'adminAddItem',
        components: {
          itemDialog :  () => import('../dialog/itemDialog'),
        },
        data() {
            return {

              itemDialog : "itemDialog",
              //列表是否显示
              listItemShowTag : false,
              //列表数据
              tableData3: [
                // {
                // ID: 111,
                // GameType: 0,
                //   GameTitle: '上海市普陀区金沙江路 1518 弄',
                //   GameUrl: 'www.baidu.com',
                // },
                // {
                // ID: 111,
                // GameType: 0,
                //   GameTitle: '上海市普陀区金沙江路 1518 弄',
                //   GameUrl: 'www.baidu.com',
                // },
              ],
              //列头
              titleData : [],



              //选了多少
              multipleSelection: []
            }
        },
        //作为子组件的时候应用父组件的时候设定的变量
        props: {},
        //用来观察 方法 对象 变量 有变化 走的回调方法
        watch: {},
        //正常方法
        methods: {
          //如果是网址 就让他长一点
          getWidth(item){
            var width = 150
            if (item.name =='GameUrl') {
              width = 2000
            }

            return width
          },

          //点了OK之后
          dialogOk(data){
            console.log("dialog点了ok 之后",data);
            var jsonMap = []
            for (var i = 0; i < data.length; i++) {
              // json.data[i].name = data[i].value
              jsonMap[data[i].name] = data[i].value

            }
            var json = this.utils.mapToJson(jsonMap)
            var sendData = {
              data : {
                // id : 9527,
                className:"GameItem",
                json : json
              },

            }
            // this.utils.getListData(this,sendData);
            this.utils.addGameItem(this,sendData,function () {
              this.dialogShow(false);
              var sendTableData = {
                data : {
                  // id : 9527,
                  className:"GameItem"
                }
              }
              // this.utils.getListData(this,sendData);
              this.utils.getTableData(this,sendTableData);
            }.bind(this));

          },
          dialogUpDataOk(data){
            console.log("dialog点了ok 之后",data);
            var jsonMap = []
            for (var i = 0; i < data.length; i++) {
              // json.data[i].name = data[i].value
              jsonMap[data[i].name] = data[i].value

            }
            var json = this.utils.mapToJson(jsonMap)
            var sendData = {
              data : {
                // id : 9527,
                className:"GameItem",
                json : JSON.stringify(json)
              },

            }
            // this.utils.getListData(this,sendData);
            this.utils.upDataGameItem(this,sendData,function () {
              this.dialogShow(false);
              var sendTableData = {
                data : {
                  // id : 9527,
                  className:"GameItem",

                }
              }
              // this.utils.getListData(this,sendData);
              this.utils.getTableData(this,sendTableData);
            }.bind(this));

          },

          /**
           *map转换为json
           */
          _mapToJson(map) {
            return JSON.stringify(this._strMapToObj(map));
          },

          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          },
          handleSelect(key, keyPath) {
            console.log(key, keyPath);
            if (key == "GameItem") {
              console.log("点到对的地方了",key);
              var sendData = {
                data : {
                  // id : 9527,
                  className:"GameItem"
                }
              }
              // this.utils.getListData(this,sendData);
              this.utils.getTable(this,sendData);

              var sendTableData = {
                data : {
                  // id : 9527,
                  className:"GameItem"
                }
              }
              // this.utils.getListData(this,sendData);
              this.utils.getTableData(this,sendTableData);
            }
          },

          toggleSelection(rows) {
            if (rows) {
              rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
              });
            } else {
              this.$refs.multipleTable.clearSelection();
            }
          },
          addItem(){
            this.$refs.itemDialog.setTitileName("添加");
            this.$refs.itemDialog.setiItemData(this.titleData);




            this.dialogShow(true,0);
          },

          dialogShow(b,type){
            this.$refs.itemDialog.setShow(b,type);
          },




          updataItem(){
            console.log("点了修改",this.multipleSelection);
            if (this.multipleSelection.length == 0) {
              return
            }
            this.$refs.itemDialog.setTitileName("修改");
            var temp = this.utils.getNewObjData(this.titleData)
            var tempdata = this.utils.setItemData(temp,this.multipleSelection[0])

            console.log("装完数据的",temp);
            this.$refs.itemDialog.setiItemData(tempdata);
            this.dialogShow(true,1);
          },
          delItem(){
            console.log("现在选择的是",this.multipleSelection);
            if (this.multipleSelection.length == 0) {
              return
            }
            var json = this.multipleSelection

            var sendTableData = {
              data : {
                // id : 9527,
                className:"GameItem",
                json : JSON.stringify(json)
              }
            }
            // this.utils.getListData(this,sendData);
            this.utils.delGameItem(this,sendTableData,function () {
              this.dialogShow(false);
              var sendTableData = {
                data : {
                  // id : 9527,
                  className:"GameItem"
                }
              }
              // this.utils.getListData(this,sendData);
              this.utils.getTableData(this,sendTableData);
            }.bind(this));
          },


          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
          isItemShow(){
            if (this.tableData3.length > 0) {
              return true
            }else{
              return false
            }

          },
          rowStyle(data){
            // console.log("回来的",data);
            //
            //
            // return "max-height: 1vh;"
          }

        },
        //计算方法
        computed: {
          getGetTable (){

            var list  =this.$store.getters.getTable
            console.log("获取结构",list.data);
            if (list.data) {
              this.titleData = list.data
            }
            // console.log("网络数据是",this.$refs);
          },
          getTableData (){

            var list  =this.$store.getters.getTableData
            console.log("网络数据是",list.data);
            if (list.data) {
              this.tableData3 = list.data
              this.listItemShowTag = true
            }else{
              this.listItemShowTag = false
            }
            // console.log("网络数据是",this.$refs);
          },
        },
        //生命周期 渲染html之前 可以初始化数据
        created() {

        },
        //生命周期 渲染html完毕 可以dom操作
        mounted() {

        },
        //生命周期 离开这个页面
        destroyed() {

        }
    }
</script>

<style scoped>
.leftList{
  background: orange;
}
.mainList{
  /*background: #91e64f;*/
}
.grid-content {
  border-radius: 4px;
  /*min-height: 50vh;*/
}
.bg-purple {
  background: #d3dce6;
}
</style>
