<template>
    <div class="flex-container">
        <div class="table-page-search-wrapper" >
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="12">
                        <a-form-item label="是否启用：">
                            <a-select v-model="queryParam.enable" style="width: 120px">
                                <a-select-option value>全部</a-select-option>
                                <a-select-option value="0">不启用</a-select-option>
                                <a-select-option value="1">启用</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-button @click="search()" type="primary">查询</a-button>
                        <a-divider type="vertical"/>
                        <a-upload
                                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                                :beforeUpload="uploadPicture"
                        >
                            <a-button> <a-icon type="upload" /> 上传图片 </a-button>
                        </a-upload>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <new-poster ref="model1"></new-poster>

        <!--列表-->
        <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling"  :locale="emptyText">
            <template slot="createTime" slot-scope="text">
                    {{ text | dayjs}}
            </template>
            <template slot="picture" slot-scope="text">
                   <img style="width: 20%" :src="apis + text" @click="imgClick(text)">
              </template>
            <template slot="enable" slot-scope="text">
                    <span v-if="text == 0">不启用</span>
                    <span v-if="text == 1">启用</span>
            </template>
            <template slot="operation" slot-scope="text, record">
                    <span>
                      <a @click="addPoster(record.picture)">新建海报</a>
                     <a-divider type="vertical"/>
                  <a-popconfirm title="是否要删除此行？" @confirm="remove(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
                     <a-divider type="vertical"/>
                     <a v-show="record.enable == '0'"
                        @click="updateEnable(record.id,'1')">启用</a>
                    <a v-show="record.enable == '1'"
                       @click="updateEnable(record.id,'0')">不启用</a>
                </span>
            </template>
        </s-table>
        <!----弹框-->
        <a-drawer
                title="海报图片"
                placement="right"
                :closable="false"
                @close="pictureOnClose"
                :visible="visiblepicture"
                width="30%"
        >
           <div >
               <img class="bg-img" :src="imgInfo">
           </div>
        </a-drawer>

    </div>
</template>

<script>
    import STable from '@/components/table';
    import {listPicture,uploadPicture,deletePicture,updateEnable} from "@/api/school-center/qrCode"
    import newPoster from './newPoster'

    export default {
        name: "PosterList",
        components: {
            STable,newPoster
        },
        data(){
            return {
                emptyText: {emptyText: '暂无数据'},
                jumpPath:'http://hhrcode.winsun-aly.com/#/hhr/home?id=',
                imgInfo:'',
                visiblepicture:false,
                pictureInfo:'',
                Formtable: this.$form.createForm(this),
                modifyvisible: false,
                add: true,
                queryParam: {
                    enable :'', //是否启用
                },
                modelData:{
                    universityName:'',
                    universityRegion:'',
                    universityInstalledAddress:'',
                    universityExteriorLines:'',
                    universityPackageNumber:'',
                    universityInstalledAddressId:'',
                    universityUserType:'',
                    universityContactPhone:'',
                    universityMonthlyRentType:'',
                    universityChargeMode:'',
                    universityChargingAttribute:'',
                    speed:'',
                    publicNumber:'',
                    universityId:''
                },
                apis:'',
                columns: [
                    {dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'},align: 'center'},
                    {dataIndex: 'createName', width: 100, title: '创建人',align: 'center'},
                    {dataIndex: 'createTime', width: 100, title: '创建时间 ', scopedSlots: {customRender: 'createTime'},align: 'center'},
                    {dataIndex: 'enable', width: 50, title: '启用状态', scopedSlots: {customRender: 'enable'},align: 'center'},
                    {
                        dataIndex: 'operation',
                        width: 100,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right",
                        align: 'center'
                    }]
                ,
                rowdata: parameter => {
                    const env = process.env.NODE_ENV; //获取当前环境
                    if(env === 'development'){     //测试环境默认添加前缀
                        this.apis = '/api/';
                    }
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize,
                        enable:this.queryParam.enable
                    }
                    return listPicture(params).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.$message.error("查询失败！", 5);
                            this.emptyText.emptyText = '查询失败！'
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                }
            }
        },
        methods:{
            pictureOnClose() {
                this.imgInfo=''
                this.visiblepicture = false;
            },
            imgClick(res){
                this.imgInfo=this.apis + res
                this.visiblepicture=true
            },
            uploadPicture(file) {
                return new Promise(resolve => {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        const img = document.createElement('img');
                        img.src = reader.result;
                        img.onload = () => {
                            const  limitWidth = arguments[2] ? arguments[2] : 640;
                            const  width = img.width > limitWidth ? limitWidth : img.width;
                            const height = img.width > limitWidth ? parseInt((img.height * limitWidth) / img.width) : img.height;
                            const canvas = document.createElement('canvas');
                            const  ctx = canvas.getContext('2d');
                            canvas.width = width
                            canvas.height = height
                            ctx.fillStyle = '#fff'
                            ctx.fillRect(0,0,canvas.width,canvas.height)
                            ctx.drawImage(img,0,0,width,height)
                            const picture = canvas.toDataURL('image/jpeg')
                            return uploadPicture({picture}).then(res => {
                                if(res == 'error'){
                                    this.$message.error('删除失败！',5);
                                }
                                if(res.state == 'success'){
                                    this.search()
                                    this.$message.success(res.data,5);
                                }
                            })
                        };
                    };
                });
            },
            addPoster(picture){
                let url = this.jumpPath+this.$store.state.user.info.id
                picture = this.apis + picture
                this.$refs.model1.showModal(picture,url);
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            remove(id) {
                deletePicture(id).then((res) => {
                    if(res.state=="success"){
                        this.$notification.success({message: res.data, description: '', duration: 4})
                        this.search()
                    }
                    if(res.state=="error"){
                        this.$notification.error({message: res.msg, description: '', duration: 4})
                    }
                })
            },
            updateEnable(id,enable) {
                updateEnable(id,{enable}).then((res) => {
                    if(res.state=="success"){
                        this.$notification.success({message: res.data, description: '', duration: 4})
                        this.search()
                    }
                    if(res.state=="error"){
                        this.$notification.error({message: res.msg, description: '', duration: 4})
                    }
                })
            },
        }
    }
</script>

<style scoped lang="less">

        .bg-img {
            margin-left: 20%;
            width: 60%;
    }
</style>
