<template>
    <div>
        <el-button type="primary" size="small" @click="addMapList">创建轮播图</el-button>
        <el-button class="btn-primary" size="small" @click="ISMobile">批量移动</el-button>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-tree
                    :data="mapData"
                    :props="defaultProps"
                    @node-click="targetNode"
                    highlight-current>
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="mapMobile">确 定</el-button>
            </span>
        </el-dialog>
        <el-table
                :data="tableData"
                border
                :span-method="objectSpanMethod"
                @selection-change="selectionChange"
                style="width: 100%; margin-top:20px;">
            <el-table-column
                    label="全选"
                    type="selection"
                    width="50">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="id"
                    label="ID"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="轮播图名称"
                    width="200">
            </el-table-column>
            <el-table-column label="图片信息" prop="content" >
                <el-table-column
                        prop="sort"
                        label="序号"
                        :rowspan="3"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="图片"
                        width="120">
                        <template slot-scope="scope">
                            <img :src="scope.row.url " width="100" height="80" alt="">
                        </template>
                </el-table-column>
                <el-table-column
                        prop="thumbnail_url"
                        label="缩略图"
                        width="120">
                        <template slot-scope="scope">
                            <img :src="scope.row.thumbnail_url" width="100" height="80" alt="">
                        </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="图片名称"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="redirect_url"
                        label="图片链接"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="245">
                <template slot-scope="scope">
                    <el-button size="small" @click="openDialog(scope.row)">预览</el-button>
                    <el-button type="info" @click="mapDetail(scope.row)" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="mapDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
          background
          v-if="tableData.length !== 0"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :page-size="20"
          :total="total">
        </el-pagination>
        <previewDialog :previewData="dialogData"></previewDialog>   
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import axios from '../../../common/axios';
import { timeQuick } from '../../../common/common';
import previewDialog from './Preview.vue'; 

export default {
    name: "map-list",
    data() {
        return {
            isSenior: false,
            defaultProps: {
                children: 'children',
                label: 'abstract'
            },
            
            dialogVisible: false,
            tableData: [],
            pickerOptions2: timeQuick,
            batchId: [],
            batchParentId: '',
            targetId: '',
            rowArr: [],
            cos: '',
            dialogData: {
                
            },
            total: 0
        };
    },
    methods: {
        handleCurrentChange(currentPage) {
            this.initData(currentPage);
        },
        openDialog(row) {
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/detail',
                params: {
                    id: row.id,
                    parent_id: row.parent_id,
                }
            }).then((response) => {
                response.data.result.dialogFormVisible = false;
                this.dialogData = response.data.result;
                console.log(this.dialogData);
                this.dialogData.dialogFormVisible = true;
            });

        },
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 9) {
                const _row = this.rowArr[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return  {
                    rowspan: _row,
                    colspan: _col
                };
            }
        },
        getRowArr(data) {
            for (let i = 0; i < data.length; i++) {
                if (i === 0) {
                    this.rowArr.push(1);
                    this.cos = 0;
                }
                else {
                    if (data[i].id === data[i - 1].id) {
                        this.rowArr[this.cos]++;
                        this.rowArr.push(0);
                    }
                    else {
                        this.rowArr.push(1);
                        this.cos = i;
                    }
                }
            };
        },
        initData(currentPage) {
            let data = {
                parent_id: this.$route.query.id,
                type: 4,
            };
            if (currentPage) {
                data.page_num = currentPage;     
            }
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/list',
                params: data
            }).then((response) => {
                this.tableData = [];
                response.data.data.map((key, i) => {
                    key.content.map((item, j) => {
                        this.tableData.push({
                            parent_id: key.parentId,
                            id: key.id,
                            title: key.title,
                            sort: item.sort,
                            url: item.url,
                            name: item.name,
                            redirect_url: item.redirect_url,
                            thumbnail_url: item.thumbnail_url,
                            status: item.is_show === '1' ? '显示' : '隐藏'
                        });
                    });
                });
                this.getRowArr(this.tableData);
                this.total = parseInt(response.data.total);
            });
        },
        mapMobile() {
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/move',
                params: {
                    id: this.batchId,
                    parent_id: this.batchParentId,
                    target_id: this.targetId
                }
            }).then((response) => {
                if (this.$route.query.id !== this.targetId) {
                    this.tableData.map((key, i) => {
                        this.batchId.map((item, j) => {
                            if (this.tableData[i].id === this.batchId[j]) {
                                this.tableData.splice(i, 1);
                            }
                        });
                    });
                }
                this.dialogVisible = false;
            });
        },
        targetNode(node) {
            this.targetId = node.id;
        },
        ISMobile() {
            if (this.batchId.length !== 0) {
                this.dialogVisible = true;
            }
            else {
                this.$message({
                    type: 'warning',
                    message: '请您选择要移动轮播图!'
                });
            }
        },
        selectionChange(selectData) {
            this.batchId = [];
            selectData.map((key, index) => {
                this.batchId.push(key.id);
                this.batchParentId = key.parent_id;
            });
        },
        addMapList() {
            this.$router.push({
                path: '/map/add',
                query: this.$route.query
            });
        },
        mapDetail(row) {
            this.$router.push({
                path: '/map/edit',
                query: {
                    id: row.id,
                    parent_id: row.parent_id,
                    breadcrumb: this.$route.query.breadcrumb
                }
            });
        },
        mapDelete(row) {
            this.$confirm('您确定删除该轮播图吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    method: 'post',
                    url: '//api-ces-test.oasgames.com/api/item/delete',
                    params: {
                        id: row.id,
                        parent_id: row.parent_id,
                        category: 0
                    }
                }).then((response) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.tableData.map((key, i) => {
                        if (this.tableData[i].id === row.id) {
                            this.tableData.splice(i, 1);
                        }
                    });
                    console.log(this.tableData);
                }).catch((error) => {
                    console.log(error);
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        mapRelese(row, status) {
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/status',
                params: {
                    id: [row.id],
                    parent_id: row.parent_id,
                    status: status
                }
            }).then((response) => {
                if (status === 0) {
                    row.releaseTime = 0;
                }
                else {
                    row.releaseTime = response.data.result;
                }
            });
        },
        mapBatchRelese(status) {
            axios({
                method: 'post',
                url: '//api-ces-test.oasgames.com/api/item/status',
                params: {
                    id: this.batchId,
                    parent_id: this.batchParentId,
                    status: status
                }
            }).then((response) => {
                if (response.data.result) {
                    this.tableData.map((key, i) => {
                        this.batchId.map((item, j) => {
                            if (this.tableData[i].id === this.batchId[j] && status === 1) {
                                this.tableData[i].releaseTime = response.data.result;
                            }
                            if (this.tableData[i].id === this.batchId[j] && status === 0) {
                                this.tableData[i].releaseTime = 0;
                            }
                        });
                    });
                }
            });
        }
    },
    computed: {
        ...mapGetters('map', {
            mapTypeDetail: 'mapTypeDetail',
            mapData: 'isMapData',
        })
    },
    watch: {
        $route (to, from) {   
            console.log(to.query.id, from.query.id);
            if (to.query.id !== from.query.id) {
                this.initData();
            }
        }
    },
    mounted() {
        this.initData();
    },
    components: {
        previewDialog
    }
};
</script>

<style scoped>
    .el-popover{
        max-width:136px;
    }
</style>
