<style xmlns="http://www.w3.org/1999/html">
.ping .ant-modal-content .ant-modal-footer {
    display: none !important;
}

.ping .ant-list-item-content {
    justify-content: space-between;
    cursor: pointer;
}

.ping-list .detele {
    display: none;
}

/* .ping-list:hover span {
  display: block;
} */
li {
    list-style-type: none;
}
</style>
<style lang="scss" scoped>
.actor-photo-list {
    display: flex;
    padding-left: 0;

    li {
        width: 25%;
        margin: 10px;
        position: relative;
        height: 380px;
        border: 1px solid #f2f2f2;

        img,
        video {
            width: 100%;
            margin-top: auto;
            margin-bottom: auto;
            top: 0;
            bottom: 0;
            position: absolute;
            max-height: 380px;
        }
    }
}
</style>
<template>
    <div :class="[type === 'horizantal' ? 'vm-card-horizantal' : 'vm-card-vertical' , 'vm-panel']"
         style="border:1px solid black">
        <div
            class="card-img"
            style="height:250px;border-bottom:1px solid #f2f2f2"
            :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
        >
            <div v-if="editable && type == 'vertical'" class="control">
        <span class="edit">
          <a href="javascript:;">
            <a-icon type="edit" @click="handleDetails(record)"></a-icon>
          </a>
        </span>
                <span class="delete">
          <a-icon type="message" @click="getComment"></a-icon>
        </span>
            </div>
        </div>
        <div class="card-desc panel-body">
            <h2>{{ title }}</h2>

            <br/>
            <div>
                <p>
                    <font v-if="!!record.actorHeight">
                        身高:{{ record.actorHeight }}cm
                    </font>&nbsp;&nbsp;&nbsp;&nbsp;
                    <font v-if="!!record.actorWeight">
                        体重:{{ record.actorWeight }}kg
                    </font>
                    <br/>
                    <br/>
                    <font v-if="!!record.actorShoeSize">
                        鞋码:{{ record.actorShoeSize }}码
                    </font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <font v-if="!!record.actorThree">
                        三围:{{ record.actorThree }}
                    </font>


                </p>


            </div>
            <a :href="detailUrl" @click="getDetail">详情 ></a>
            <a :href="detailUrl" @click="deleteItemCard" style="float:right">删除 </a>
        </div>
        <a-modal title="评论" v-model="visible" class="ping">
            <div>
                <div style="height:300px;overflow:auto">
                    <a-list
                        v-if="comments.length"
                        :dataSource="comments"
                        itemLayout="horizontal"
                    >
                        <a-list-item slot="renderItem" slot-scope="item, index" class="ping-list">
                            <a-comment
                                :author="item.createBy"
                                :avatar="item.avatar"
                                :content="item.comment"
                                :datetime="item.createTime"
                            ></a-comment>
                            <span class="detele" style="margin:20px;color:red;" @click="detele(item,index)">删除</span>
                        </a-list-item>
                    </a-list>
                    <div v-else style="height：300px;text-align:center;line-height:300px">暂无评论</div>
                </div>
                <a-comment>
                    <img :src="logoImgUrl" alt slot="avatar"/>
                    <div slot="content">
                        <a-form-item>
                            <a-textarea :rows="4" @change="handleChange" :value="value"></a-textarea>
                        </a-form-item>
                        <a-form-item>
                            <a-button
                                htmlType="submit"
                                :loading="submitting"
                                @click="handleSubmit"
                                type="primary"
                            >添加
                            </a-button>
                        </a-form-item>
                    </div>
                </a-comment>
            </div>
        </a-modal>

        <a-modal title="详情" v-model="detail" class="ping" :width="1000">
            <!-- {{pageTitle}} -->
            <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail" v-if="pageTitle=='演员列表'">
                <a-tab-pane tab="演员信息" key="1">
                    <div style="display:flex;flex-direction:row;height:400px;">
                        <div
                            style="height:400px;width:30%;border:1px solid #f2f2f2;"
                            :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
                        ></div>
                        <div style="flex:1;margin:15px">
                            <a-form :form="form">

                                <div style="display: flex">
                                    <a-form-item style="flex: 1">姓名：{{ form.name }}</a-form-item>

                                    <a-form-item style="flex: 1" v-if="form.sex ==1 ">性别：男</a-form-item>
                                    <a-form-item style="flex: 1" v-if="form.sex ==2 ">性别：女</a-form-item>

                                </div>

                                <div style="display: flex">
                                    <a-form-item style="flex: 1">手机：{{ form.phone }}</a-form-item>
                                    <a-form-item style="flex: 1">价格：{{ form.unitPrice }}</a-form-item>

                                </div>

                                <div style="display: flex">
                                    <a-form-item style="flex: 1">身高：{{ form.actorHeight }}cm</a-form-item>
                                    <a-form-item style="flex: 1">体重：{{ form.actorWeight }}kg</a-form-item>

                                </div>

                                <div style="display: flex">
                                    <a-form-item style="flex: 1">鞋码：{{ form.actorShoeSize }}码</a-form-item>
                                    <a-form-item style="flex: 1">三围：{{ form.actorThree }}</a-form-item>

                                </div>

                                <div style="display: flex">

                                    <a-form-item style="flex: 1">标签：{{ form.actorRemark }}</a-form-item>
                                </div>


                                <div style="display: flex">
                                    <a-form-item style="flex: 1">备注：{{ form.actorRemark }}</a-form-item>
                                </div>


                            </a-form>
                        </div>
                    </div>
                    <div style="margin-top:20px">
                        <a-collapse accordion>
                            <a-collapse-panel header="个人信息" key="1">
                                <div style="display: flex">
                                    <a-form-item style="flex: 1">生日：{{ form.birthday }}</a-form-item>
                                    <a-form-item style="flex: 1">银行：{{ form.bankName }}</a-form-item>

                                </div>

                                <div style="display: flex">
                                    <a-form-item style="flex: 1">银行卡号：{{ form.bankCode }}</a-form-item>

                                </div>

                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                </a-tab-pane>
                <a-tab-pane tab="演员图集" key="2" forceRender>
                    <div >
                        <a-button style="margin-left:10px" @click="addPhoto=true">新增图集</a-button>
                        <ul  class="actor-photo-list">
                            <li v-for="(item,index) of photoList" :key="index">
                                <a-icon
                                    type="close-circle"
                                    style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
                                    @click="deteleImg(item.id)"
                                />
                                <img :src="item.photoUrl" @click="photoClick(photoList)" alt/>
                            </li>
                        </ul>
                    </div>
                    <div style="text-align:right">
                        <a-pagination
                            showQuickJumper
                            :total="total"
                            @change="pageChange"
                            :pageSize.sync="pageSize"
                        />
                    </div>
                </a-tab-pane>
                <a-tab-pane tab="演员作品" key="3">
                        <div >
                            <a-button type="primary" style="margin-left:10px" @click="addVideo=true">新增作品</a-button>
                            <ul class="actor-photo-list" >
                                <li v-for="(item,index) of videoList" :key="index">
                                    <a-icon
                                        type="close-circle"
                                        style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
                                        @click="deteleVideo(item.id)"
                                    />
                                    <img style="height:350px;display: flex;" :src="item.coverUrl"
                                         @click="videoClick(item.videoUrl)" alt/>

                                </li>
                            </ul>
                        </div>


                    <div style="text-align:right">
                        <a-pagination
                            showQuickJumper
                            :total="videoTotal"
                            @change="pageChange"
                            :pageSize.sync="pageSize"
                        />
                    </div>
                </a-tab-pane>
            </a-tabs>
            <div v-if="pageTitle=='道具列表'">
                <div style="display:flex;flex-direction:row;height:200px;">
                    <div
                        style="height:200px;width:30%;border:1px solid #f2f2f2;"
                        :style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
                    ></div>
                    <div style="flex:1;margin:15px">
                        <a-form :form="form">
                            <a-form-item label="道具名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                                <span>{{ form.name }}</span>
                            </a-form-item>
                            <a-form-item label="道具类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                                <span>{{ form.type || '暂无类型' }}</span>
                            </a-form-item>
                            <a-form-item label="道具描述" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                                <span>{{ form.decs || '暂无描述' }}</span>
                            </a-form-item>
                        </a-form>
                    </div>
                </div>
            </div>

        </a-modal>
        <!-- 新增图集 -->
        <a-modal
            v-model="addPhoto"
            title="新增图集"
            @ok="handleOk('photo')"
            @cancel="handleCancel('photo')"
            :confirm-loading="subLoading"
        >
            <uploadFile :value.sync="imageUrl" :fileCount="10" uploadType="image" :sizeCheck="false"/>
        </a-modal>
        <!-- 新增作品 -->
        <a-modal
            v-model="addVideo"
            title="新增作品"
            @ok="handleOk('video')"
            @cancel="handleCancel('video')"
            :confirm-loading="subLoading"
        >

            <uploadFile :value.sync="videoUrl" :fileCount="10" uploadType="video" :sizeCheck="false"/>
        </a-modal>


        <a-modal
            v-model="photoShow"
            title="图集详情"
            :width="1000"
        >
            <a-carousel arrows v-if="lookImageData && lookImageData != '-'">
                <div
                    v-for="(item, index) in lookImageData"
                    :key="index"
                    class="content"
                >
                    <div style="display: flex !important; justify-content: space-around">
                        <div
                            style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  width: 1200px;
                "
                        >
                            <img :src="item" style="width: 100%; max-height: 720px"/>
                        </div>
                    </div>
                </div>
                <a-icon
                    type="left-circle"
                    slot="prevArrow"
                    slot-scope
                    style="left: 10px; z-index: 100; font-size: 30px; color: black"
                />
                <a-icon
                    type="right-circle"
                    slot="nextArrow"
                    slot-scope
                    style="right: 10px; z-index: 100; font-size: 30px; color: black"
                />
            </a-carousel>
        </a-modal>

        <a-modal v-model="videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
            <video
                @click.stop
                class="video"
                :src="clickVideoUrl"
                controls="controls"
                style="height:600px;width:100%"
            >您的浏览器不支持 video 标签。
            </video>
        </a-modal>


        <actor-modal ref="modalFormActor" @ok="modalFormOks" @updateList="updateList" @close="closeVideo"></actor-modal>
        <propModal ref="modalFormProp" @ok="modalFormOks" @updateList="updateList" @close="closeVideo"></propModal>
        <yardModal ref="modalFormYard" @ok="modalFormOks" @updateList="updateList" @close="closeVideo"></yardModal>
    </div>
</template>
<script>
import moment from 'moment'

import {
    actorDetail,
    actorCommentList,
    actorCommentAdd,
    actorCommentDetele,
    actorPhotoList,
    actorVideoList,
    actorPhotoDelete,
    actorVideoDelete,
    actorPhotoAdd,
    actorVideoAdd,
    propDetail,
} from '@/api/actor'
import actorModal from './ActorModal'
import yardModal from '@/views/modules/yard/modules/YardModal'
import UploadToAli from '@femessage/upload-to-ali'
import uploadFile from '@/components/liveUploadFile.vue'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {closeAllVideoFun} from '@/utils/videoControl'

import propModal from './propModal'
import ImageList from "@views/modules/image/ImageList.vue";
import item from "@comp/AvatarList/Item.vue";

export default {
    name: 'VmCard',
    components: {
        ImageList,
        actorModal,
        UploadToAli,
        uploadFile,
        propModal,
        yardModal
    },
    props: {
        type: {
            type: String,
            default: 'vertical'
        },
        editable: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: 'Title'
        },
        pageTitle: {
            type: String,
        },
        img: {
            type: String,
            default: require('@/assets/img/noImg.png')
        },
        desc: {
            type: String,
            default() {
                return ""
            }

        },
        detailUrl: {
            type: String,
            default: '#'
        },
        editUrl: {
            type: String,
            default: '#'
        },
        deleteUrl: {
            type: String,
            default: '#'
        },
        id: {
            default() {
                return 0
            }
        },
        record: {
            default() {
                return {}
            }
        }
    },
    data: function () {
        return {
            subLoading: false,
            videovisible: false,
            lookImageData: [],
            photoShow: false,
            addPhoto: false,
            addVideo: false,
            indexDetail: '1',
            to: null,
            comments: [],
            submitting: false,
            value: '',
            moment,
            visible: false,
            detail: false,
            customDomain: '',
            region: 'oss-cn-beijing',
            bucket: 'ctop-media',
            acceptVideo: 'video/mpeg,video/mp4',
            acceptImage: 'image/jpeg,image/jpg,image/png',
            accessKeyId: 'LTAIbNbqWzSOklQV',
            accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
            form: {
                name: '',
                birthday: '',
                sex: null,
                speciality: '',
                desc: '',
                type: '',

            },
            noImgUrl: require('@/assets/img/noImg.png'),
            logoImgUrl: require('@/assets/img/huichuanglogo.png'),
            loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
            photoList: [],
            imageUrl: [],
            videoUrl: [],
            clickVideoUrl: '',
            total: 1,
            videoTotal: 1,
            pageSize: 4,
            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'}
                }
            ],
            currentPage: 1,
            videoList: []
        }
    },
    methods: {
        videoOk() {
            this.videovisible = false
        },
        videoClick(value) {
            this.videovisible = true
            this.clickVideoUrl = value
        },
        photoClick(value) {
            console.log(value)
            this.photoShow = true
            this.lookImageData = value.map((item) => {
                return item.photoUrl
            });
        },
        updateList() {
            this.$emit('updateList')
            if (this.pageTitle == '场地列表') {
                this.loadData(1)
            }
        },
        pageChange: function (page) {
            console.log(page)
            this.currentPage = page
            if (this.indexDetail == '2') {
                this.getPhoto()
            } else if (this.indexDetail == '3') {
                this.getVideo()
            }
        },
        handleSubmit() {
            if (!this.value) {
                return
            }

            this.submitting = true

            actorCommentAdd({actorId: this.id, comment: this.value}).then(res => {
                this.submitting = false
                if (res.code == 200) {
                    this.getComment()
                    this.value = ''
                }
            })
            //   setTimeout(() => {}, 1000)
        },
        handleChange(e) {
            this.value = e.target.value
        },
        // 删除
        deleteItemCard() {

            this.$emit('delete-ok', {id: this.id})
        },
        getDetail() {
            this.indexDetail = '1'
            this.detail = true
            if (this.pageTitle == '演员列表') {
                actorDetail({actorId: this.id}).then(res => {
                    console.log(res)
                    if (res.code == 0) {
                        this.form.name = res.result.name
                        this.form.phone = res.result.phone
                        this.form.idCard = res.result.idCard
                        this.form.unitPrice = res.result.unitPrice
                        this.form.bankName = res.result.bankName
                        this.form.bankCode = res.result.bankCode
                        this.form.actorRemark = res.result.actorRemark
                        this.form.actorHeight = res.result.actorHeight
                        this.form.actorWeight = res.result.actorWeight
                        this.form.actorThree = res.result.actorThree
                        this.form.actorShoeSize = res.result.actorShoeSize
                        this.form.birthday = res.result.birthday
                        this.form.sex = res.result.sex
                        this.form.speciality = res.result.speciality
                    }
                })
            } else if (this.pageTitle == '道具列表') {
                propDetail({propId: this.id}).then(res => {
                    console.log(res)
                    if (res.code == 0) {
                        this.form.name = res.result.name
                        this.form.type = res.result.type
                        this.form.desc = res.result.desc

                    }
                })
            } else {
                console.log(1)
                this.indexDetail = '1'
                this.detail = false
                this.$emit('showDetail')
            }

        },
        getComment() {
            this.visible = true
            this.comments = []
            actorCommentList({actorId: this.id}).then(res => {
                if (res.code == 0) {
                    console.log(res)
                    this.comments = res.result.records.reverse()
                }
            })
        },
        detele(item, index) {
            console.log(item, index)

            actorCommentDetele({id: item.id}).then(res => {
                if (res.code == 200) {
                    this.comments.splice(index, 1)
                }
            })
        },
        closeVideo() {
            closeAllVideoFun()
        },
        callback(key) {
            console.log(key)
            if (key == '2') {
                this.closeVideo()
                this.currentPage = 1
                this.getPhoto()
            } else if (key == '3') {
                this.currentPage = 1
                this.getVideo()
            } else if (key == '1') {
                this.closeVideo()
            }
        },
        getPhoto() {
            actorPhotoList({pageNo: this.currentPage, pageSize: 4, actorId: this.id}).then(res => {
                this.photoList = []
                if (res.code == 0) {
                    console.log(res)
                    this.photoList = res.result.records
                    this.total = res.result.total
                    this.subLoading = false
                }
            })
            this.subLoading = false
        },
        getVideo() {
            this.subLoading = true
            this.videoList = []
            actorVideoList({pageNo: this.currentPage, pageSize: 4, actorId: this.id}).then(res => {
                if (res.code == 0) {
                    console.log(res)
                    this.videoList = res.result.records
                    this.videoTotal = res.result.total
                    this.subLoading = false
                }
            })
            this.subLoading = false
        },
        deteleImg(id) {
            actorPhotoDelete({id: id}).then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.getPhoto()
                }
            })
        },
        deteleVideo(id) {
            actorPhotoDelete({id: id}).then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.getPhoto()
                }
            })
        },
        handleOk(type) {
            this.subLoading = true
            const that = this
            if (type == 'photo') {
                console.log(this.imageUrl)
                actorPhotoAdd({actorId: that.id, photoUrl: that.imageUrl + ''})
                    .then(res => {
                        if (res.success) {
                            this.currentPage = 1
                            this.getPhoto()
                            this.handleCancel('photo')
                            this.subLoading = false
                        } else {
                            this.subLoading = false
                            that.$message.warning(res.message)
                        }
                    })
                    .finally(() => {
                        that.confirmLoading = false
                        this.subLoading = false
                        that.handleCancel('photo')

                    })
            } else {
                actorVideoAdd({actorId: that.id, videoUrl: that.videoUrl + ''})
                    .then(res => {
                        if (res.success) {
                            this.currentPage
                            this.getVideo()
                            this.handleCancel('video')
                            this.subLoading = false
                        } else {
                            this.subLoading = false
                            that.$message.warning(res.message)

                        }
                    })
                    .finally(() => {
                        that.confirmLoading = false
                        this.subLoading = false
                        that.handleCancel('video')
                    })
            }
        },
        handleCancel(type) {
            if (type == 'photo') {
                this.imageUrl = []
                this.addPhoto = false
            } else {
                this.videoUrl = []
                this.addVideo = false
            }
        },

        handleDetails(record) {
            console.log(record)
            if (this.pageTitle == '演员列表') {
                console.log(this.$refs.modalFormActor)
                this.$refs.modalFormActor.edit(record);
                this.$refs.modalFormActor.title = "详情";
                this.$refs.modalFormActor.disableSubmit = true;
            } else if (this.pageTitle == '道具列表') {
                this.$refs.modalFormProp.edit(record);
                this.$refs.modalFormProp.title = "详情";
                this.$refs.modalFormProp.disableSubmit = true;
            } else if (this.pageTitle == '场地列表') {
                this.$refs.modalFormYard.edit(record);
                this.$refs.modalFormYard.title = "详情";
                this.$refs.modalFormYard.disableSubmit = true;
            }

        },

        modalFormOks() {
            // 新增/修改 成功时，重载列表
            if (this.pageTitle == '演员列表') {
                this.url.list = '/ctop/actor/list'
            } else if (this.pageTitle == '道具列表') {
                this.url.list = '/ctop/prop/list'
            } else if (this.pageTitle == '场地列表') {
                this.url.list = '/ctop/yard/list'
            }
            // this.loadData(1);
            this.updateList()
        },
    }
    ,

    mounted() {
        console.log(this.pageTitle)
    }
    ,
}
</script>
