<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="6" :sm="12">
                        <a-form-item  label="县分：">
                            <a-input  placeholder="县分"  v-model="queryParam.universityRegion"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="6" :sm="12">
                        <a-form-item  label="学校名称">
                            <a-input  placeholder="学校名称"  v-model="queryParam.universityName" ></a-input>
                        </a-form-item>
                    </a-col>
                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                             <a-button @click="search()" type="primary">查询</a-button>
                             <a-divider type="vertical"/>
                            <a-button @click="modifyfunction()" type="primary">添加</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
           </div>

        <!--列表-->
        <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
            <!--拦截器-->
            <template slot="productLastUpdateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <!--拦截器-->
            <template slot="productCreateTime" slot-scope="text">
                {{ text | dayjs}}
            </template>
            <template slot="productState" slot-scope="text">
                <p v-if="text=='0'">正常</p>
                <p v-else=""></p>
            </template>
            <template slot="operation" slot-scope="text, record">
                <span>
                  <a @click="modifyfunction(record)">修改</a>
                  <a-divider type="vertical"/>
                  <a-popconfirm title="是否要删除此行？" @confirm="remove(record.universityId)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
            </template>
        </s-table>
        <!----弹框-->
        <a-modal :title="add ?'添加大学宽带信息': '编辑大学宽带信息'" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="1024px">
            <a-form :form="Formtable">
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="学校名称：">
                    <a-input placeholder="学校名称" v-decorator="[ 'universityName', {rules: [{ required: true, message: '学校名称不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="区域：">
                    <a-input placeholder="区域" v-decorator="[ 'universityRegion', {rules: [{ required: true, message: '区域不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="装机地址：">
                    <a-input placeholder="装机地址" v-decorator="[ 'universityInstalledAddress', {rules: [{required: true, message: '装机地址不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="外线方式：">
                    <a-input placeholder="如:(FTTB)光缆大楼" v-decorator="[ 'universityExteriorLines', {rules: [{ required: true, message: '外线方式不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="揽装工号：">
                    <a-input placeholder="揽装工号" v-decorator="[ 'universityPackageNumber', {rules: [{ required: true, message: '揽装工号不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="用户类型：">
                    <a-input placeholder="如:校园天翼宽带用户" v-decorator="[ 'universityUserType', {rules: [{ required: true, message: '用户类型不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="学校联系号码：">
                    <a-input placeholder="联系号码" v-decorator="[ 'universityContactPhone', {rules: [{ required: true, message: '学校联系号码不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="月租类型：">
                    <a-input placeholder="如:包月80元" v-decorator="[ 'universityMonthlyRentType', {rules: [{ required: true, message: '月租类型不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="收费模式：">
                    <a-input placeholder="如:首月按天收费" v-decorator="[ 'universityChargeMode', {rules: [{required: true, message: '收费模式不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="计费属性：">
                    <a-input placeholder="如:普通" v-decorator="[ 'universityChargingAttribute', {rules: [{ required: true, message: '计费属性不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="短信速率：">
                    <a-input placeholder="如:20M" v-decorator="[ 'speed', {rules: [{ required: true, message: '短信速率不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 9, offset: 1}" label="公众号名字：">
                    <a-input placeholder="公众号名字" v-decorator="[ 'publicNumber', {rules: [{ required: true, message: '公众号名字不能为空！' ,validator: 'click'}]} ]"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {universityList,universityDelete,universityInsert,universityUpdate} from "@/api/school-center/productAPI"
    import {cloneObject} from '@/utils/util';
    export default {
        name: "university",
        components: {
            STable,
        },
        data(){
            return {
                Formtable: this.$form.createForm(this),
                modifyvisible: false,
                add: true,
                queryParam: {
                    universityName :'', //学校
                    universityRegion  :'',  // 区域
                },
                modelData:{
                    universityName:'',
                    universityRegion:'',
                    universityInstalledAddress:'',
                    universityExteriorLines:'',
                    universityPackageNumber:'',
                    universityUserType:'',
                    universityContactPhone:'',
                    universityMonthlyRentType:'',
                    universityChargeMode:'',
                    universityChargingAttribute:'',
                    speed:'',
                    publicNumber:'',
                   universityId:''
                },
                columns: [
                    {dataIndex: 'universityName', width: 200, title: '学校名称'},
                    {dataIndex: 'universityRegion', width: 80, title: '县分 '},
                    {dataIndex: 'universityInstalledAddress', width: 300, title: '装机地址'},
                    {dataIndex: 'universityExteriorLines', width: 120, title: '外线方式 '},
                    {dataIndex: 'universityPackageNumber', width: 100, title: '揽装工号 '},
                    {dataIndex: 'universityUserType', width: 150, title: '用户类型 '},
                    {dataIndex: 'universityMonthlyRentType', width: 80, title: '月租类型 '},
                    {dataIndex: 'universityChargeMode', width: 120, title: '收费模式 '},
                    {dataIndex: 'universityChargingAttribute', width: 80, title: '计费属性 '},
                    {dataIndex: 'universityContactPhone', width: 200, title: '学校联系号码 '},
                    {dataIndex: 'universityLastUpdateTime', width: 150, title: '更新时间 ' ,scopedSlots: {customRender: 'productLastUpdateTime'}},
                    {dataIndex: 'universityCreateTime', width: 150, title: '创建时间 ', scopedSlots: {customRender: 'productCreateTime'}},
                    {
                        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:{
            search() {
                this.$refs.table.refresh({search: true})
            },
            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,
                            "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','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.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":'',
                    "universityUserType":'',
                    "universityContactPhone":'',
                    "universityMonthlyRentType":'',
                    "universityChargeMode":'',
                    "universityChargingAttribute":'',
                    "speed":'',
                    "publicNumber":''
                })
            }
        }
    }
</script>

<style scoped>

</style>