<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">
            <template slot="createTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="picture" slot-scope="text">
                   <!--<img :src="text">-->
                <img style="height: 50px" src="http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png">
            </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-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 {universityDelete,universityInsert,universityUpdate} from "@/api/school-center/productAPI"
    import {listPicture,uploadPicture,deletePicture,updateEnable} 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: {
                    enable :'', //是否启用
                },
                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: 100, 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,
                        enable:this.queryParam.enable
                    }
                    return listPicture(params).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:{
            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){
                picture = 'http://yrym.winsun-aly.com/gdtel-xyzx-hhr/images/yrym-ruanyan-logo.png'
                this.$refs.model1.showModal(picture);
            },
            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})
                    }
                })
            },







            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>
