<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :md="4" :sm="8">
                        <a-form-item  label="多媒体账号：">
                            <a-input  placeholder="多媒体账号" v-model="queryParam.accountNumber"></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="add()" type="primary">添加</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
           </div>

        <!--列表-->
        <s-table  :locale="emptyText" :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
            <template slot="operation" slot-scope="text,record">
                <a  @click="modifyfunction(record)">编辑</a>
                <a-divider type="vertical"/>
                    <a-popconfirm title="是否要删除此行？" @confirm="deleteActivity(record.id)">
                        <a>删除</a>
                    </a-popconfirm>
                <a-divider type="vertical"/>
            </template>
        </s-table>

        <!--编辑----弹框-->
        <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="840px">
            <a-form :form="Formtable">
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="宽带接入号">
                    <a-input  v-decorator="[ 'sort', {rules: [{ required: true, type:'number', message: '宽带接入号不能为空！' ,whitespace:true,transform:(value)=> {return Number(value)}  }]} ]"></a-input>
                </a-form-item>
                <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="多媒体账号">
                    <a-input  v-decorator="[ 'sort', {rules: [{ required: true, type:'number', message: '多媒体账号不能为空！' ,whitespace:true,transform:(value)=> {return Number(value)}  }]} ]"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {cloneObject} from '@/utils/util';
    export default {
        name: "kdyList",
        components: {
            STable,
        },
        data: function () {
            return {
                emptyText: {emptyText: '暂无数据'},
                fileList: [
                ],
                apis:'',
                // form
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                titleName:"",
                modifyForm: {
                    id: '',
                    accountNumber:"",
                },
                chosePages:[],
                //输入框列表
                queryParam: {
                   id: '',
                   accountNumber: '',
                },
                modifyvisible: false,
                visiblepicture: false,
                columns: [
                    {dataIndex: 'id', width: 200, title: '宽带接入号', align: "center"},
                    {dataIndex: 'accountNumber', width: 200, title: '多媒体账号', align: "center"},
                    {
                        dataIndex: 'operation',
                        width: 200,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {

                }
            }
        },
        methods:{
            deleteActivity(id){

            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            add(){
                this.titleName="添加"
                this.modifyForm.id = '';
     
                setTimeout(()=>{
                    this.Formtable.setFieldsValue({
                        id: '',
                        accountNumber:"",
                    })
                },0)
                this.modifyvisible=true;
            },
            modifyfunction(data){

            },
            //提交表单
            createfunctionOk(){
               
            },
            createfunctionCancel(){

            },
        }
    }
</script>

<style scoped>

</style>
