<template>
    <div class="flex-container">
  <!--      &lt;!&ndash; 查询区域 &ndash;&gt;
        <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                listType="picture"
                @change="transformFile"
                :beforeUpload="beforeUpload"
                :showUploadList="false"
        >
            <a-button> <a-icon type="upload" />上传图片</a-button>
        </a-upload>-->

        <a-upload
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :beforeUpload="transformFile"
        >
            <a-button> <a-icon type="upload" /> 上传图片 </a-button>
        </a-upload>

        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->

        </div>
        <new-poster ref="model1"></new-poster>

        <!--列表-->
        <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
            <template slot="createTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="picture" slot-scope="text">
                   <img src="">
            </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">
          <!--      <a-form layout="inline">
                    <a-row :gutter="24">
          <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                            <a-button @click="addPoster()" type="primary">新建海报</a-button>
                        </a-col>
                    </span>
                    </a-row>
                </a-form>-->
                <span>
                      <a @click="addPoster()">新建海报</a>
                </span>
            </template>
        </s-table>
        <!----弹框-->
        <a-modal :title="add ?'添加大学宽带信息': '编辑大学宽带信息'" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">

        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {universityList,universityDelete,universityInsert,universityUpdate} from "@/api/school-center/productAPI"
    import {uploadPicture} from "@/api/school-center/qrCode"
    import {cloneObject} from '@/utils/util';
    import newPoster from './newPoster'
    function getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    export default {
        name: "PosterList",
        components: {
            STable,newPoster
        },
        data(){
            return {
                pictureInfo:'',
                Formtable: this.$form.createForm(this),
                modifyvisible: false,
                add: true,
                queryParam: {
                    universityName :'', //学校
                    universityRegion  :'',  // 区域
                },
                modelData:{
                    universityName:'',
                    universityRegion:'',
                    universityInstalledAddress:'',
                    universityExteriorLines:'',
                    universityPackageNumber:'',
                    universityInstalledAddressId:'',
                    universityUserType:'',
                    universityContactPhone:'',
                    universityMonthlyRentType:'',
                    universityChargeMode:'',
                    universityChargingAttribute:'',
                    speed:'',
                    publicNumber:'',
                    universityId:''
                },
                columns: [
                    {dataIndex: 'picture', title: '图片 ', scopedSlots: {customRender: 'picture'}},
                    {dataIndex: 'createTime', width: 150, title: '创建时间 ', scopedSlots: {customRender: 'createTime'}},
                    {dataIndex: 'enable', width: 50, title: '是否启用 ', scopedSlots: {customRender: 'enable'}},
                    {
                        dataIndex: 'operation',
                        width: 100,
                        title: '操作',
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    let obj = cloneObject(this.queryParam)
                    //表示
                    return universityList(Object.assign(params,obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            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:{
            transformFile(file) {
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    this.$message.error('You can only upload JPG file!');
                    return isJpgOrPng && isLt2M;
                }
                const isLt2M = file.size / 1024 / 1024 < 5;
                if (!isLt2M) {
                    this.$message.error('文件不能超过5MB!');
                    return isJpgOrPng && isLt2M;
                }
                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.state == 'error'){
                                    this.$message.error(res.msg,5);
                                }
                                if(res.state == 'success'){
                                    this.$message.success(res.data,5);
                                }
                            })
                        };
                    };
                });
            },
            addPoster(){
                this.$refs.model1.showModal();
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            uploadPicture(){

            },
            beforeUpload(file) {

            },





            remove(id) {
                universityDelete(id).then((res) => {
                    if(res.state=="success"){
                        this.$notification.success({message: res.data, description: '', duration: 4})
                    }
                    this.$refs.table.refresh({search: true})
                })
            },
            modifyfunction(data){
                if(data != undefined ){
                    setTimeout(()=>{
                        this.modelData.universityId=data.universityId
                        this.Formtable.setFieldsValue({
                            "universityName":data.universityName,
                            "universityRegion":data.universityRegion,
                            "universityInstalledAddress":data.universityInstalledAddress,
                            "universityExteriorLines":data.universityExteriorLines,
                            "universityPackageNumber":data.universityPackageNumber,
                            "universityInstalledAddressId":data.universityInstalledAddressId,
                            "universityUserType":data.universityUserType,
                            "universityContactPhone":data.universityContactPhone,
                            "universityMonthlyRentType":data.universityMonthlyRentType,
                            "universityChargeMode":data.universityChargeMode,
                            "universityChargingAttribute":data.universityChargingAttribute,
                            "speed":data.speed,
                            "publicNumber":data.publicNumber
                        })
                    },0)
                    this.add=false;
                }
                this.modifyvisible=true;
            },
            createfunctionOk(){
                let that = this;
                that.Formtable.validateFields(['universityName','universityRegion','universityInstalledAddress','universityExteriorLines','universityPackageNumber','universityInstalledAddressId','universityUserType',
                    'universityContactPhone','universityMonthlyRentType','universityChargeMode','universityChargingAttribute','speed','publicNumber'], {force: true}, (err, values) => {
                    if (err ) {
                        return;
                    }
                    that.modelData.universityName=values.universityName
                    that.modelData.universityRegion=values.universityRegion
                    that.modelData.universityInstalledAddress=values.universityInstalledAddress
                    that.modelData.universityExteriorLines=values.universityExteriorLines
                    that.modelData.universityPackageNumber=values.universityPackageNumber
                    that.modelData.universityInstalledAddressId=values.universityInstalledAddressId
                    that.modelData.universityUserType=values.universityUserType
                    that.modelData.universityContactPhone=values.universityContactPhone
                    that.modelData.universityMonthlyRentType=values.universityMonthlyRentType
                    that.modelData.universityChargeMode=values.universityChargeMode
                    that.modelData.universityChargingAttribute=values.universityChargingAttribute
                    that.modelData.speed=values.speed
                    that.modelData.publicNumber=values.publicNumber
                    if(this.add){
                        let obj= that.modelData;
                        delete obj.universityId
                        let  university= JSON.stringify(obj);
                        universityInsert({university}).then((res) => {
                            this.modifyvisible=false;
                            this.clearmodel()
                            if(res.state=="success"){
                                this.$notification.success({message: res.data, description: '', duration: 4})
                            }
                            this.search()
                        })
                    }else {
                        let obj= that.modelData;
                        let  university= JSON.stringify(obj);
                        universityUpdate({university}).then((res) => {
                            this.modifyvisible=false;
                            this.clearmodel()
                            if(res.state=="success"){
                                this.$notification.success({message: res.data, description: '', duration: 4})
                            }
                            this.search()
                        })
                    }
                })
            },
            createfunctionCancel(){
                this.modifyvisible=false;
                this.clearmodel()
                this.add=true;
            },
            //清除弹窗信息
            clearmodel() {
                this.add=true
                this.modelData.universityId=''
                this.Formtable.setFieldsValue({
                    "universityName":'',
                    "universityRegion":'',
                    "universityInstalledAddress":'',
                    "universityExteriorLines":'',
                    "universityPackageNumber":'',
                    "universityInstalledAddressId":'',
                    "universityUserType":'',
                    "universityContactPhone":'',
                    "universityMonthlyRentType":'',
                    "universityChargeMode":'',
                    "universityChargingAttribute":'',
                    "speed":'',
                    "publicNumber":''
                })
            }
        }
    }
</script>

<style scoped>

</style>
