<template>
    <a-card :bordered="false" :body-style="{ padding: '0px 0px 8px' }">
        <div style="height:400px;width:100%;overflow:auto;">
            <a-row style="display: flex; flex-wrap: wrap;">
                <a-col :span="3" style="text-align: center;">
                    <a-row style="margin-top: 20px;">
                        <a-col style="display: flex; width: 100%; justify-content:center;">
                            <div class="title" style="text-align: right;">{{this.record.name}}</div>
                            <a-icon v-if="this.record.sex === Number(1)" type="man" style="color:#1890ff;text-align: left;margin-top: 5px;margin-left: 4px;" />
                            <a-icon v-if="this.record.sex ===  Number(2)" type="woman" style="color:#1890ff;text-align: left;margin-top: 5px;margin-left: 4px;"/>
                        </a-col>
                        <a-col>
                            <a-button @click="handleEdit(record)" type="primary" icon="edit" ghost style="margin-top: 10px;">编辑</a-button>
                        </a-col>
                        <a-col>
                            <a-popconfirm
                                title="确定删除该潜客?"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="deleteConfirm"
                                @cancel="cancel"
                            >
                            <a-button type="primary" icon="delete" ghost style="margin-top: 10px;">删除</a-button>
                            </a-popconfirm>
                        </a-col>
                    </a-row>
                </a-col>
                <a-col :span="2" style="text-align: center; ">
                    <a-divider type="vertical" style="height:90%;margin-top: 20px;" />
                </a-col>
                <a-col :span="13" style="text-align: left;margin-top: 20px;">
                    <a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">学员积分:</a-col>
                            <a-col :span="20" style="text-align:left;"></a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">年龄:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.age}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">身份证号:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.idCard}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">主要联系人:</a-col>
                            <a-col :span="20" style="text-align:left;">
                                <span style="color:tomato">{{this.record.contactPhone}}</span>&nbsp;{{this.record.contactName_dictText}}
                            </a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">学校:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.school_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">年级:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.grade_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">住址:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.address}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">备注:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.markString}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">意向课程:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.intendedCourse_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">意向度:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.intendedDegress_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">顾问:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.saleCode_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">渠道来源:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.channelType_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">推荐人:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.referencesPhone}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;"> 
                            <a-col :span="4">采单员:</a-col>
                            <a-col :span="20" style="text-align:left;">{{this.record.collectinoCode_dictText}}</a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">学员账户:</a-col>
                            <a-col :span="20" style="text-align:left;"></a-col>
                        </a-row>
                        <a-row style="margin-bottom: 8px;">
                            <a-col :span="4">标签:</a-col>
                            <a-col :span="20" style="text-align:left;"></a-col>
                        </a-row>
                        
                    </a-row>
                </a-col>
            </a-row>
        </div>
        <customer-potential-modal ref="modalForm" @ok="editReturn()"></customer-potential-modal> 
    </a-card>
</template>
<script>
import { getAge } from '@/utils/util';
import { getAction,postAction } from '@/api/manage'
import CustomerPotentialModal from '../../customer/modules/CustomerPotentialModal'
export default {
    name: 'CustomerInfoBasic',
    components: {
        CustomerPotentialModal
    },
    data() {
        return {
            age: undefined,
            record: {}
        }
    },
    created() { //没用watch 用的create 传入不同的key  key不同每次都会调用刷新 尤其应用在tabs上
        if(this.dataPara.birthday !== null && this.dataPara.birthday !== undefined) {
            this.age = getAge(this.dataPara.birthday);
        }
        let para = {
            id: this.dataPara.id
        }
        getAction("/customer/customerInfo/queryById", para).then((res) => {
            console.log(res)
            this.record = res.result
        }); 
    },
    props: ['infoShow', 'dataPara'],
    methods: {
        handleEdit: function(record) { //调用生成
            this.$refs.modalForm.edit(record);
            this.$refs.modalForm.title="编辑";
            this.$refs.modalForm.disableSubmit = false;
        },
        editReturn: function() {  //回调刷新
            let para = {
                id: this.record.id
            }
            getAction("/customer/customerInfo/queryByIdText", para).then((res) => {
                this.record = res.result.records[0];
                this.$emit('editRefresh',this.record.name,this.dataPara.contactPhone); //刷新主页面
            }); 
        },
        deleteConfirm() {
            let para = {
                id: this.record.id,
                status: 9
            }
            postAction("/customer/customerInfo/statusEdit", para).then((res) => {
                this.$emit('deleteRefresh'); //刷新主页面
            }); 
        },
        cancel() {
        }
    },
}
</script>
<style lang="less">
.title {
    font-weight: 400;
    font-size: 20px;
}
</style>