<template>
    <div>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form>
                <el-form-item>
                    <div class="tool-wrap fle">
                        <el-button @click="handleAdd()" type="primary">新增</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-col>

        <!-- 列表 -->
        <el-table
            :data="totalData.dataList"
            highlight-current-row
            v-loading="listLoading"
            style="width: 100%;"
        >
            <!-- <el-table-column type="index" width="60">
            </el-table-column>-->
            <el-table-column prop="month" label="月龄"></el-table-column>
            <el-table-column prop="title" label="视频标题"></el-table-column>
            <!-- <el-table-column prop="pic" label="封面地址"></el-table-column> -->
            <el-table-column label="封面图">
                <template slot-scope="scope">
                    <img class="poster" :src="scope.row.pic" alt>
                </template>
            </el-table-column>
            <el-table-column prop="vedioUrl" label="视频链接"></el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="small" @click="modifyHandler(scope.$index, scope.row)">修改</el-button>
                    <el-button
                        size="small"
                        type="danger"
                        @click="deleteHandler(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--编辑界面-->
        <el-dialog
            :title="dialogTitle"
            :visible.sync="editFormVisible"
            :close-on-click-modal="false"
        >
            <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-form-item label="月龄" prop="month">
                    <el-input-number v-model="editForm.month" :min="0"></el-input-number>
                </el-form-item>
                <el-form-item label="视频标题" prop="title">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="封面图" prop="pic">
                    <img class="upload-poster-image" v-show="editForm.pic" :src="editForm.pic" alt>
                    <upload-item pid="p1" v-on:upload-success="onUploadSuccess"></upload-item>
                    <!-- <el-input v-model="editForm.pic"></el-input> -->
                </el-form-item>
                <el-form-item label="视频链接" prop="vedioUrl">
                    <!-- <el-input v-model="editForm.vedioUrl"></el-input> -->
                    <!-- <img v-show="editForm.vedioUrl" :src="editForm.vedioUrl" alt> -->
                    <upload-item pid="v1" accept="video/*" v-on:upload-success="onUploadSuccess"></upload-item>
                    <!-- <div class="upload-video-url">{{editForm.vedioUrl}}</div> -->
                    <el-input disabled v-model="editForm.vedioUrl"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--分页导航-->
        <el-col :span="24" class="toolbar fl pagination-wrap">
            <div class="page-tips">总共{{total}}条记录，每页{{pageSize}}条，总共{{pageNum}}页</div>
            <el-pagination
                layout="prev, pager, next"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :total="total"
                style="float:right;"
            ></el-pagination>
        </el-col>
    </div>
</template>

<script>
import { getVideoList, saveVideo, deleteVideo } from '../../api/api.js'
import UploadItem from '../../components/UploadItem'

export default {
    data() {
        return {
            key: 'value',
            page: 1,
            pageSize: 10,
            total: 0,
            totalData: {
                dataList: []
            },
            listLoading: false,
            editLoading: false,
            dialogLoading: false,
            editFormVisible: false,
            dialogTitle: '编辑',
            //编辑界面数据
            editForm: {
                month: 0,
                title: '',
                pic: '',
                vedioUrl: ''
            },
            editFormRules: {
                month: [
                    { type: 'number', message: '请输入数字', trigger: 'blur' }
                ],
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                pic: [
                    {
                        required: true,
                        message: '请上传封面图',
                        trigger: 'blur'
                    }
                ],
                vedioUrl: [
                    {
                        required: true,
                        message: '请上传视频',
                        trigger: 'blur'
                    }
                ]
            }
            // dialogData: {
            //     pic: '',
            //     vedioUrl: ''
            // }
        }
    },
    computed: {
        pageNum() {
            return Math.ceil(this.total / this.pageSize)
        }
    },
    methods: {
        name() {},
        // 文件上传完毕
        onUploadSuccess(evtAny) {
            let { pid, url } = evtAny
            if (pid == 'p1') {
                this.$set(this.editForm, 'pic', url)
            } else if (pid == 'v1') {
                this.$set(this.editForm, 'vedioUrl', url)
            }
        },
        // 获取视频列表
        reqQuery() {
            let data = {
                page: this.page,
                size: this.pageSize
            }
            getVideoList(data).then(result => {
                // this.data.
                console.log('result:', result)
                let { content, code } = result
                let { list, total } = content
                this.total = total
                this.$set(this.totalData, 'dataList', list)
                console.log('this.totalData:', this.totalData.dataList)
            })
        },
        // 修改 显示修改对话框
        modifyHandler(index, row) {
            // console.log('row:', row)
            try {
                this.$refs['editForm'].resetFields()
            } catch (error) {}
            this.dialogTitle = '修改'
            this.editFormVisible = true
            this.editForm = Object.assign({}, row)
            this.dialogImage = this.editForm.pic
        },
        deleteHandler(index, row) {
            let data = {
                vedioCode: row.vedioCode
            }
            this.$confirm('确认删除吗？', '提示', {}).then(() => {
                deleteVideo(data)
                    .then(result => {
                        let { code, content } = result
                        if (code == 200) {
                            this.$notify({
                                title: '成功',
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                        }
                        this.editFormVisible = false
                        this.reqQuery()
                    })
                    .catch(err => {})
            })
        },
        // 新增视频
        handleAdd() {
            this.editForm = {
                month: 0,
                title: '',
                pic: '',
                vedioUrl: ''
            }
            try {
                this.$refs['editForm'].resetFields()
            } catch (error) {}
            this.editFormVisible = true
            this.dialogTitle = '新增'
        },
        // 提交视频 新增/修改
        editSubmit() {
            let data = this.editForm
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.editLoading = true
                    saveVideo(data)
                        .then(result => {
                            let { code, content } = result
                            if (code == 200) {
                                this.$notify({
                                    title: '成功',
                                    message: '提交成功',
                                    type: 'success'
                                })
                            } else {
                            }
                            this.editLoading = false
                            this.editFormVisible = false
                            this.reqQuery()
                        })
                        .catch(err => {})
                } else {
                }
            })
        },
        // 点击页数
        handleCurrentChange(val) {
            this.page = val
            this.reqQuery()
        }
    },
    created() {
        this.reqQuery()
    },
    components: {
        UploadItem
    }
}
</script>

<style lang="less" scoped>
.tool-wrap {
    color: #333333;
}

.pagination-wrap {
    .page-tips {
        height: 32px;
        line-height: 32px;
        color: #333333;
    }
}

.fl {
    display: flex;
    justify-content: space-between;
}

.fle {
    display: flex;
    justify-content: flex-end;
}

</style>