<template>
    <div class="ces-add">
        <el-popover
                placement="right"
                trigger="hover">
            <div class="add-text">
                <span @click="addArticle">文章</span>
                <div class="pic-box">
                    <span @click="addPicOrVideo(2)" class="span-pic">图片 / 视频 </span>
                </div>
                <span @click="addTap" style="margin-left:8px;"> 轮播图</span>
            </div>
            <el-button slot="reference" class="addBtn"><i class="el-icon-circle-plus"></i></el-button>
        </el-popover>
        <i class="fa fa-clone cesGameCopy" @click="dialogCopyGame=true" v-show="!ArticleData.length && !mapData.length && !pictureVideoData.length"></i>

        <el-dialog title="复制游戏分类" :visible.sync="dialogCopyGame">
          <el-form :model="copyGameForm">
            <el-form-item label="复制游戏" :label-width="formLabelWidth">
              <el-select v-model="value" placeholder="请选择" @change="getCategroy">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
                <el-scrollbar>
                    <!-- article -->
                    <h2 class="ces-title" v-if="addArticleData.length">文章</h2>
                    <el-tree 
                    v-if="addArticleData.length"
                    :data="addArticleData" 
                    :props="defaultProps" 
                    accordion
                    default-expand-all
                    empty-text="暂无数据"
                    ></el-tree>
                    <!-- picture video -->
                    <h2 class="ces-title" v-if="addPictureVideoData.length">图片/视频</h2>
                     <el-tree 
                    v-if="addPictureVideoData.length"
                    :data="addPictureVideoData" 
                    accordion
                    default-expand-all
                    empty-text="暂无数据"
                    :props="defaultProps" 
                    ></el-tree>
                    <!-- map -->
                    <h2 class="ces-title" v-if="addMapData.length">轮播图</h2>
                     <el-tree 
                    :data="addMapData" 
                    v-if="addMapData.length"
                    accordion
                    default-expand-all
                    empty-text="暂无数据"
                    :props="defaultProps" 
                    ></el-tree>
                </el-scrollbar>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogCopyGame = false">取 消</el-button>
            <el-button type="primary" @click="copyConfirm">确 定</el-button>
          </div>
        </el-dialog>
        <DialogTypeList :createForm="createForm"></DialogTypeList> 
    </div>

</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex';
import axios from '../../common/axios';
import articleIndex from './article/Index';
import pictureVideoIndex from './picture_video/Index';
import mapIndex from './map/Index';
export default {
    name: "add",
    data() {
        return {
            isCopy: true,
            dialogCopyGame: false,
            showCopyBtn: false,
            createForm: {
                createDialogType: false,
                type: '',
                category: 1,
                parent_id: '',
                keywords: '',
                description: '',
                title: '',
                abstract: ''
            },
            copyGameForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px',
            options: [],
            value: '',
            addArticleData: [],
            addPictureVideoData: [],
            addMapData: [],
            defaultProps: {
                children: 'children',
                label: 'abstract'
            },
        };
    },
    methods:{
        copyConfirm() {
            axios({
                method: 'post',
                url: 'https://api-ces-test.oasgames.com/api/item/fast-create',
                params: {
                    gamecode: localStorage.getItem("lastid"),
                    target_gamecode: this.value
                }
            }).then((response) => {
                if (response.data.result === true) {
                    window.location.reload();
                }
            });
        },
        addArticle() {
            this.createForm.createDialogType = true;
            this.createForm.parent_id = this.isgameCodeId;
            this.createForm.type = 1;
        },
        addPicOrVideo(type) {
            this.createForm.createDialogType = true;
            this.createForm.parent_id = this.isgameCodeId;
            this.createForm.type = type;
        },
        addTap() {
            this.createForm.createDialogType = true;
            this.createForm.parent_id = this.isgameCodeId;
            this.createForm.type = 4;
        },
        ...mapMutations('article', {
            isArticleDataChange: 'isArticleDataChange',
            detailRuleForm: 'articleTypeDetailChange'
        }),
        ...mapMutations('pictureVideo', {
            isPictureVideoDataChange: 'isPictureVideoDataChange',
            picVideoDetailRuleForm: 'picVideoTypeDetailChange'
        }),
        ...mapMutations('map', {
            isMapDataChange: 'isMapDataChange',
            mapDetailRuleForm: 'mapTypeDetailChange'
        }),
        getRootTree() {
            axios({
                method: 'post',
                url: 'https://api-ces-test.oasgames.com/api/item/list',
                params: {
                    parent_id: 0
                },
                token: window.bridge.tokens
            }).then((response) => {
                for (let key in response.data) { 
                    this.options.push({
                        value: response.data[key].id, 
                        label: response.data[key].title,
                    }); 
                }
            }); 
           
        },
        getCategroy(id) {
            axios({
                method: 'post',
                url: 'https://api-ces-test.oasgames.com/api/item/list',
                params: {
                    type: -1,
                    parent_id: id
                }
            }).then((response) => {
                this.addArticleData = [];
                this.addPictureVideoData = [];
                this.addMapData = [];
                response.data.map((key) => {
                    switch (key.type) {
                        case 1:
                            this.addArticleData.push(key);
                            break;
                        case 2:
                            this.addPictureVideoData.push(key);
                            break;
                        case 3:
                            this.addPictureVideoData.push(key);
                            break;
                        case 4:
                            this.addMapData.push(key);
                            break;
                    }

                });
            });
        },
    },
    computed:{
        ...mapGetters('utils', {
            isgameCodeId: 'isgameCodeId',
        }),
        ...mapGetters('article', {
            ArticleData: 'isArticleData',
        }),
        ...mapGetters('map', {
            mapData: 'isMapData',
        }),
        ...mapGetters('pictureVideo', {
            pictureVideoData: 'isPictureVideoData',
        })
    },
    components:{
        articleIndex,
        pictureVideoIndex,
        mapIndex
    },
    mounted() {
        this.getRootTree();
    }
};
</script>

<style scoped>
.cesGameCopy{
    color: #199ed8;
    font-size: 22px; 
    cursor: pointer;
    margin-left: 10px;
}
</style>
