<style>
@media (min-width: 1024px) {
    .checkbox_item_container {
        width: 70%;
    }
}

/*>=1024的设备*/

@media (min-width: 1100px) {
    .checkbox_item_container {
        width: 70%;
    }
}

/*>=1100的设备*/
@media (min-width: 1280px) {
    .checkbox_item_container_size {
        width: 70%;
    }
}

/*>=1280的设备*/

@media (min-width: 1366px) {
}

@media (min-width: 1440px) {
}

@media (min-width: 1680px) {
}

@media (min-width: 1920px) {
    .checkbox_item_container_size {
        width: 50%;
    }
}
</style>
<template>
    <div class="vm-image-list">
        <a-row class="image-list-heading vm-panel">
            <div class="panel-heading">{{ title }}</div>
            <a-row type="flex" align="middle" justify="space-between" class="panel-body">
                <div class="search-bar">
                    <a-button @click="handleAdd" type="primary" icon="plus" style="margin-right:10px">新增11</a-button>
                    <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px">
                        <a-icon slot="addonAfter" type="search" style="cursor: pointer;" @click="search"/>
                    </a-input>
                </div>
            </a-row>
        </a-row>
        <a-row class="image-list" :gutter="16" style="padding:0 8px">
            <a-col :lg="6" :sm="12" class="vm-margin" style="padding:0" v-for="(item, index) of dataShow" :key="index">
                <vm-card
                    style="margin: 0 15px;"
                    :editable="true"
                    :title="item.name"
                    :img="item.coverUrl"
                    :desc="item.speciality"
                    :detailUrl="item.videoUrl"
                    :editUrl="item.editUrl"
                    :pageTitle='title'
                    :id="item.id"
                    :record="item"
                    @delete-ok="deleteOk({...item,'page':currentPage})"
                    @updateList="updateList"
                ></vm-card>

            </a-col>
        </a-row>
        <a-row class="image-list-heading vm-panel">
            <a-row type="flex" align="middle" justify="space-between" class="panel-body">
                <div class="search-bar">
                </div>
                <a-row type="flex" align="middle" class="page">
                    <a-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="showNum"/>
                </a-row>
            </a-row>
        </a-row>
        <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" v-if="title=='演员列表'"></actor-modal>
        <propModal ref="modalForm" @ok="modalFormOk" @updateList="updateList" v-if="title=='道具列表'"></propModal>
    </div>
</template>

<script>
import VmCard from '@/components/ctop/vm-card'
import ARow from 'ant-design-vue/es/grid/Row'
import ACol from 'ant-design-vue/es/grid/Col'
import actorModal from './ActorModal'
import propModal from './propModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {getCityList} from "@api/actor";

export default {
    name: 'VmImageList',
    components: {
        ACol,
        ARow,
        VmCard,
        actorModal,
        propModal
    },
    mixins: [JeecgListMixin],

    props: {
        title: {
            type: String,
            // default: '演员列表'
        },
        // origin data
        data: {
            type: Array,
            default: function () {
                return [
                    {
                        id: '19920805',
                        title: 'Title',
                        img: require('@/assets/img/img-1.jpg'),
                        desc:
                            "Lorem Ipsum is simply dummy text of the printing and typesetting industry,Lorem Ipsum has been the industry's standard dummy text ever since the 1500s ly dummy tly dummy tly dummy tly dummy tly dummy tly dummy t",
                        to: '#'
                    }
                ]
            }
        },
        total: {
            type: Number,
            default() {
                return 0
            }
        }
    },
    data: function () {
        return {
            keyword: '', // keyword for search
            dataShow: [], // data for showing
            showNum: 8, // number of item per page
            currentPage: 1,
            url: {
                list: '/ctop/actor/list'
            },
            columns: [
                {
                    title: 'ID',
                    align: 'center',
                    dataIndex: 'id'
                },
                {
                    title: '姓名',
                    align: 'center',
                    dataIndex: 'name'
                },
                {
                    title: '生日',
                    align: 'center',
                    dataIndex: 'birthday'
                },
                {
                    title: '性别',
                    align: 'center',
                    dataIndex: 'sex_dictText'
                },
                {
                    title: '特长',
                    align: 'center',
                    dataIndex: 'speciality'
                },
                {
                    title: '创建时间',
                    align: 'center',
                    dataIndex: 'createTime'
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: 'center',
                    scopedSlots: {customRender: 'action'}
                }
            ]
        }
    },
    // provide:{
    //   page:this.currentPage,
    // },
    created() {
        getCity();
    },

    methods: {


        updateList() {
            this.$emit('updateList')
        },
        updateDataShow: function () {
            let startPage = (this.currentPage - 1) * this.showNum
            let endPage = startPage + this.showNum
            this.dataShow = this.data.slice(startPage, endPage)
        },
        pageChange: function (page) {
            console.log(page)
            this.currentPage = page

            this.updateDataShow()
            this.$emit('getList', page)
        },
        deleteOk: function (data) {
            this.$emit('delete-ok', {page: this.currentPage, ...data})
        },
        search() {
            if (this.keyword) {
                this.$emit('getList', 1, this.keyword + '')
            } else {
                this.$emit('getList')
            }
        }
    },
    watch: {
        data: function () {
            this.dataShow = this.data.slice(0, this.showNum) // update dataShow once data changed
        }
    },
    mounted: function () {
        this.dataShow = this.data.slice(0, this.showNum)
    }
}
</script>
