<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>

            <div class="table-page-search-wrapper">
                <a-form layout="inline">
                    <a-row :gutter="24" style="margin-left:10px">
                        <a-col :md="6" :sm="8">
                            <a-form-item label="演员名称">
                                <a-input placeholder="请输入演员名称" v-model="queryParam.name"></a-input>
                            </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="8">
                            <a-form-item label="标签">
                                <a-select
                                    v-model="queryParam.tagList"
                                    placeholder="请选择标签"
                                    showSearch
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                    allow-clear
                                    mode="multiple"
                                >
                                    <a-select-option
                                        :value="item.tagId"
                                        v-for="(item, index) of tagArray"
                                        :key="index"
                                    >
                                        {{ item.tagName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="6" :sm="8">
                            <a-form-item label="城市">
                                <a-select
                                    v-model="queryParam.cityId"
                                    placeholder="请选择城市"
                                    showSearch
                                    optionFilterProp="children"
                                    :filterOption="filterOption"
                                    allow-clear>
                                    <a-select-option
                                        :value="item.cityId"
                                        v-for="(item, index) of cityList"
                                        :key="index"
                                    >
                                        {{ item.cityName }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>


                        <a-col :md="6" :sm="8">

                            <a-button type="primary" @click="search" icon="search" :loading="searchLoading">查询 </a-button>
                            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px" :loading="searchLoading">重置
                            </a-button>
                            <a-button @click="handleAdd" type="primary" icon="plus" style="margin-left:8px">新增  </a-button>
                        </a-col>


                    </a-row>
                </a-form>
            </div>
        </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, getTagList} 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 {
            searchLoading: false,
            cityList: [],
            tagArray: [],
            queryParam: {
                tagList: []

            },
            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() {
        getCityList().then(res => {
            if (res.code == 0) {
                this.cityList = res.result
            }
        }),
            getTagList().then(res => {
                if (res.code == 0) {
                    this.tagArray = res.result
                }
            })
    },

    methods: {

        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text
                    .toLowerCase()
                    .indexOf(input.toLowerCase()) >= 0
            );
        },
        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() {
            this.searchLoading = true
            if (this.queryParam) {
                console.log("开始查询")

                this.$emit('getList', 1, this.queryParam)
                this.searchLoading = false
            } else {
                this.$emit('getList')
                this.searchLoading = false
            }
        },
        searchReset() {
            this.searchLoading = true
            this.queryParam = {}
            this.$emit('getList')
            this.searchLoading = false
        }

    },
    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>
