<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-input  placeholder="姓名" v-model="queryParam.name"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="县分">
                            <a-input  placeholder="县分" v-model="queryParam.area"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="12">
                        <a-form-item  label="学校">
                            <a-input  placeholder="学校" v-model="queryParam.school"></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-col>
                    </span>
                </a-row>
            </a-form>

            <!--列表-->
            <s-table :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">
                <template slot="genderoperation" slot-scope="text">
                   <span v-if="text==1">男</span>
                    <span v-else>女</span>
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a  @click="modifyfunction(record)">编辑</a>
                </template>
            </s-table>

            <!--编辑----弹框-->
            <a-modal :title="titleName" :visible="modifyvisible"  @ok="createfunctionOk" @cancel="createfunctionCancel" html-type="submit" width="720px">
                <a-form :form="Formtable">
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="合伙人电话号码">
                        <a-input placeholder="合伙人电话号码" v-decorator="[ 'phoneNum', {rules: [{ required: true, message: '合伙人电话号码不能为空！' ,whitespace:true}]} ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="学校">
                        <a-input placeholder="学校" v-decorator="[ 'school', {rules: [{ required: true, message: '学校名不能为空！' ,whitespace:true}]} ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="合伙人姓名">
                        <a-input placeholder="合伙人姓名" v-decorator="[ 'name', {rules: [{ required: true, message: '合伙人姓名不能为空！' ,whitespace:true}]} ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="合伙人账号">
                        <a-input placeholder="合伙人账号" v-decorator="[ 'account', {rules: [{ required: true, message: '合伙人账号不能为空！' ,whitespace:true}]} ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="合伙人身份证">
                        <a-input placeholder="合伙人身份证" v-decorator="[ 'idCard', {rules: [{ required: true, message: '合伙人身份证不能为空！' ,whitespace:true}]} ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="性别">
                        <a-radio-group  v-decorator="['gender', {rules: [{ required: true, message: '合伙人身份证不能为空！' ,whitespace:true}]} ]" >
                            <a-radio value="1">男</a-radio>
                            <a-radio value="2">女</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="县分">
                        <a-input placeholder="县分" v-decorator="[ 'area', {rules: [{ required: true, message: '县分不能为空！' ,whitespace:true}]} ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}" label="合伙人对应的微信账号">
                        <a-input placeholder="合伙人对应的微信账号" v-decorator="[ 'wxId' ]"></a-input>
                    </a-form-item>
                    <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 12, offset: 1}" label="通过预实名账号">
                        <a-radio-group  v-decorator="['ysm']" >
                            <a-radio :value="data.id" v-for="data in autoCompleteResult">{{data.userName}}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                </a-form>
            </a-modal>
        </div>
    </div>
</template>

<script>
    import STable from '@/components/table';
    import {findByList,modify,getlistysm} from "@/api/school-center/PartnerManagementAPI"
    import {cloneObject} from '@/utils/util';
    export default {
        name: "PartnerManagement",
        components: {
            STable,
        },
        data: function () {
            return {
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                queryParam: {
                    name: '',
                    area:'',
                    school:''
                },
                modifyvisible:false,
                modifyForm: {
                    id:"",
                    phoneNum: '',
                    school:'',
                    name: '',
                    account: '',
                    idCard: '',
                    gender: '',
                    area: '',
                    wxId: '',
                    ysm: '',
                },
                autoCompleteResult:[],
                columns: [
                    {dataIndex: 'name', width: 100, title: '姓名 ', align: "center"},
                    {dataIndex: 'phoneNum', width: 200, title: '电话', align: "center"},
                    {dataIndex: 'school', width: 200, title: '学校 ', align: "center"},
                    {dataIndex: 'idCard', width: 200, title: '身份证 ', align: "center"},
                    {dataIndex: 'account', width: 200, title: '账号 ', align: "center"},
                    {dataIndex: 'gender', width: 100, title: '性别 ', align: "center",scopedSlots: {customRender: 'genderoperation'},},
                    {dataIndex: 'area', width: 100, title: '县分 ', align: "center"},
                    {dataIndex: 'wxId', width: 100, title: '微信 ', align: "center"},
                    {
                        dataIndex: 'operation',
                        width: 100,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }
                    //表示
                    let obj = cloneObject(this.queryParam)
                    return findByList(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})
            },
            modifyfunction(data) {
                this.modifyForm.id = data.id
                this.titleName = "编辑"
                this.modifyvisible = true
                setTimeout(() => {
                    this.Formtable.setFieldsValue({
                        phoneNum: data.phoneNum,
                        school: data.school,
                        name: data.name,
                        account: data.account,
                        idCard: data.idCard,
                        gender: data.gender,
                        area: data.area,
                        wxId: data.wxId,
                        ysm: data.ysm,
                    })
                }, 0)
                getlistysm().then(res => {
                    if (res.state == "success") {
                        this.autoCompleteResult = res.data
                    }
                })
            },
            //提交表单
            createfunctionOk(){
                this.Formtable.validateFields(['school', 'name',"account","idCard", 'gender',"area", 'wxId',"ysm" ,'phoneNum'], {force: true}, (err, values)=>{
                    if (!err){
                        this.modifyForm.school=values.school
                        this.modifyForm.name=values.name
                        this.modifyForm.account=values.account
                        this.modifyForm.idCard=values.idCard
                        this.modifyForm.gender=values.gender
                        this.modifyForm.area=values.area
                        this.modifyForm.wxId=values.wxId
                        this.modifyForm.ysm=values.ysm
                        this.modifyForm.phoneNum=values.phoneNum
                        //修改数据
                        modify(this.modifyForm).then(res=>{
                            if (res.state=="success") {
                                this.$message.success(res.data ? res.data : '修改成功！', 5);
                                this.search();
                                return null;
                            }
                            this.$message.error(res.data ? res.data : '修改失败！', 5);
                        })
                    }

                })
            },
            createfunctionCancel(){
                this.modifyvisible=false
                this.autoCompleteResult=[]
                this.Formtable.setFieldsValue({
                    phoneNum: '',
                    school:'',
                    name: '',
                    account: '',
                    idCard: '',
                    gender: '',
                    area: '',
                    wxId: '',
                    ysm: '',
                })
            }
        }
    }
</script>

<style scoped>

</style>