<template>
    <div class="detail_main">
        <navbar :title="navTitle"></navbar>
        <div class="wrapper">
            <div class="wrapper_view" v-if="isView">
                <div class="view_item">
                    <div class="view_item_left">姓名</div>
                    <div class="view_item_right">{{ baseInfo.custName }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">性别</div>
                    <div class="view_item_right">{{ baseInfo.custGender }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">年龄</div>
                    <div class="view_item_right">{{ baseInfo.custAge }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">身份证号</div>
                    <div class="view_item_right">{{ baseInfo.custIdc }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">出生日期</div>
                    <div class="view_item_right">{{ baseInfo.birthday }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">联系方式</div>
                    <div class="view_item_right">{{ baseInfo.custPhone }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">婚姻状况</div>
                    <div class="view_item_right">{{ baseInfo.isMarried }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">年收入</div>
                    <div class="view_item_right">{{ baseInfo.custSalary }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">学历</div>
                    <div class="view_item_right">{{ baseInfo.custEdu }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">行业名称</div>
                    <div class="view_item_right">{{ initIndustryBusiStr(baseInfo.industry) }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">户籍地址</div>
                    <div class="view_item_right">{{ baseInfo.registerLocation }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">单位地址</div>
                    <div class="view_item_right">{{ baseInfo.jobLocation }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">住宅地址</div>
                    <div class="view_item_right">{{ baseInfo.custLocation }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">管户客户经理</div>
                    <div class="view_item_right">{{ baseInfo.custIsn }}</div>
                </div>
                <div class="view_item">
                    <div class="view_item_left">更新时间</div>
                    <div class="view_item_right">{{ baseInfo.updateTime }}</div>
                </div>

            </div>
            <div class="wrapper_edit" v-if="!isView">
                <van-form ref="form">
                    <van-field v-model="baseform.custName" label="姓名" name="custName" placeholder="请输入姓名"
                        maxlength="18"></van-field>
                    <van-field label="性别" name="custGender">
                        <template #input>
                            <van-radio-group v-model="baseform.custGender" direction="horizontal">
                                <van-radio name="男">男</van-radio>
                                <van-radio name="女">女</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field v-model="baseform.custAge" label="年龄" name="custAge" placeholder="请输入年龄"
                        maxlength="3"></van-field>
                    <van-field v-model="baseform.custIdc" label="身份证号" name="custIdc" class="label_color"
                        :rules="[{ required: true, message: '身份证号不能为空' }, { required: true, validator: addFormValidateCustIdc }]"
                        @blur="initInfoByCustIdc(baseform.custIdc)"></van-field>
                    <van-field v-model="baseform.birthday" is-link readonly label="出生日期" name="birthday" placeholder="请选择日期"
                        @click="showDatePicker = true"></van-field>
                    <van-popup v-model:show="showDatePicker" position="bottom">
                        <van-datetime-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" type="date"
                            title="选择日期" @confirm="onConfirmDate" @cancel="showDatePicker = false"></van-datetime-picker>
                    </van-popup>
                    <van-field v-model="baseform.custPhone" label="联系方式" name="custPhone" placeholder="请输入联系方式"
                        :rules="[{ required: true, message: '法人手机号不能为空' }, { required: true, validator: validatePhone, }]"></van-field>
                    <van-field label="婚姻状况" name="isMarried">
                        <template #input>
                            <van-radio-group v-model="baseform.isMarried" direction="horizontal">
                                <van-radio name="未婚">未婚</van-radio>
                                <van-radio name="已婚">已婚</van-radio>
                                <van-radio name="离异">离异</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field v-model="baseform.custSalary" label="年收入" name="custSalary" placeholder="请输入"
                        maxlength="18"></van-field>
                    <van-field v-model="baseform.custEdu" label="学历" is-link readonly placeholder="请选择"
                        @click="showPicker = true"></van-field>
                    <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }">
                        <van-picker show-toolbar :columns="custEduList" @cancle="showPicker = false" @confirm="onConfirm"
                            @cancel="cancelStatus"></van-picker>
                    </van-popup>
                    <van-field v-model="industryText" label="行业名称" is-link readonly placeholder="请选择"
                        @click="showPickerBelonBusi = true"></van-field>
                    <van-popup v-model="showPickerBelonBusi" position="bottom" :style="{ height: '40%' }">
                        <van-picker show-toolbar :columns="belonBusiList" cancel-button-text="" confirm-button-text=""
                            @cancel="cancleBelonBusi" @confirm="changeBelonBusi" />
                    </van-popup>
                    <van-field v-model="baseform.registerLocation" label="户籍地址" name="registerLocation" disabled
                        class="label_color"></van-field>
                    <van-field v-model="baseform.jobLocation" label="单位地址" name="jobLocation" disabled
                        class="label_color"></van-field>
                    <van-field v-model="baseform.custLocation" label="住宅地址" name="custLocation" disabled
                        class="label_color"></van-field>
                    <van-field v-model="baseform.custIsn" label="管户客户经理" name="custIsn" disabled
                        class="label_color"></van-field>
                    <van-field v-model="baseform.updateTime" label="更新时间" name="updateTime" disabled
                        class="label_color"></van-field>

                </van-form>
            </div>
        </div>
        <div class="footer_view" v-if="isView">
            <van-button type="primary" @click="handleEdit">编辑</van-button>
        </div>
        <div class="footer_edit" v-if="!isView">
            <van-button plain color="#2372eb" @click="handleCancle" class="qx">取消</van-button>
            <van-button type="primary" @click="handleSave">保存</van-button>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getRecordDetail, editRecord } from "@/service/api/filing";
import { getIndustryTree } from "@/service/api/custome";
import {
    Button, Form, Field, RadioGroup, Radio, Popup, DatetimePicker, Picker, Area
} from 'vant';
import { custEduList } from '../details/custEdu'
export default {
    data() {
        return {
            navTitle: '',
            isView: true,
            baseInfo: {

            },
            baseform: {

            },
            currentDate: new Date(),
            minDate: new Date(1900, 0, 1),
            maxDate: new Date(),
            showDatePicker: false,
            custEduList,
            showPicker: false,
            showPickerBelonBusi: false,
            belonBusiList: [],
            industryText: [],
        }
    },
    components: {
        navbar: navbar,
        VanButton: Button,
        VanForm: Form,
        VanField: Field,
        VanRadioGroup: RadioGroup,
        VanRadio: Radio,
        VanPopup: Popup,
        VanDatetimePicker: DatetimePicker,
        VanPicker: Picker,
        VanArea: Area
    },
    created() {
        this.navTitle = sessionStorage.getItem('detailType')
        this.initIndustryTree()


    },
    methods: {
        addFormValidateCustIdc(value) {

            const regex = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
            if (!regex.test(value)) {
                // callback(new Error('请输入正确的身份证号码'))
                this.$toast('请输入正确的身份证号码')
                this.baseform.custIdc = ''
                return
            } else {
                return
            }
        },
        validatePhone(value) {

            const regExp = /^1(3|4|5|6|7|8|9)[0-9]{9}$/
            if (!regExp.test(value)) {
                this.$toast('请输入正确的手机号码')
                this.baseform.custPhone = ''
                return
            } else {
                return
            }
        },
        init() {
            let id = sessionStorage.getItem('custId')
            getRecordDetail(id).then(res => {
                if (res.code == 200) {
                    this.baseInfo = res.data.custInfoRecord
                    this.baseform = res.data.custInfoRecord
                    this.industryText = this.initIndustryBusiStr(this.baseInfo.industry)
                }
            })
        },
        initIndustryTree() {
            getIndustryTree().then(res => {

                this.industryOptions = res.data.map(item => {
                    return {
                        value: item.code,
                        label: item.name,
                        children: item.industryTrees
                    }
                })
                this.industryOptions.forEach(item => {
                    item.children.forEach(el => {
                        el.value = el.code
                        el.label = el.name
                    })
                })
                this.belonBusiList = res.data.map(item => {
                    return {
                        text: item.name,
                        id: item.code,
                        children: item.industryTrees
                    }
                })
                this.belonBusiList.forEach(item => {
                    item.children.forEach(el => {
                        el.text = el.name
                        el.id = el.code
                    })
                })
                this.belonBusiList.forEach(item => {
                    item.children.unshift({
                        text: '请选择',
                        id: ''
                    })
                })
                this.init()
            })
        },

        initIndustryBusiStr(data) {
            if (data) {
                for (let i = 0; i < this.industryOptions.length; i++) {
                    if (this.industryOptions[i].value == data) {
                        return this.industryOptions[i].label
                    } else {
                        for (let j = 0; j < this.industryOptions[i].children.length; j++) {
                            if (this.industryOptions[i].children[j].value == data) {
                                return this.industryOptions[i].children[j].label
                            }
                        }
                    }
                }
            }

        },
        handleEdit() {
            this.isView = false
        },
        handleCancle() {
            this.isView = true
        },
        handleSave() {
            this.isView = true
            editRecord(this.baseform).then(res => {
                if (res.code == 200) {
                    this.init()
                }
            })
        },
        initInfoByCustIdc(data) {
            //性别
            let sexCode = data.charAt(16)
            let gender = parseInt(sexCode, 10) % 2 === 0 ? '女' : '男'
            //年龄
            let today = new Date()
            let birthDate = new Date(data.substring(6, 10))
            let age = today.getFullYear() - birthDate.getFullYear()
            //出生日期
            let year = data.substring(6, 10)
            let mounth = data.substring(10, 12)
            let day = data.substring(12, 14)
            let csDate = `${year}-${mounth}-${day}`
            this.baseform.custGender = gender
            this.baseform.birthday = csDate
            this.baseform.custAge = age

        },
        onConfirmDate(value) {
            this.baseform.birthday = this.formatDate(value);
            const currentYear = new Date().getFullYear()
            const birthdayYear = Number(this.formatDate(value).slice(0, 4))
            this.baseform.custAge = currentYear - birthdayYear
            this.showDatePicker = false
        },
        formatDate(date) {
            if (date.getMonth() + 1 < 10) {
                return `${date.getYear() + 1900}-0${date.getMonth() + 1}-${date.getDate()}`;
            } else {
                return `${date.getYear() + 1900}-${date.getMonth() + 1}-${date.getDate()}`;
            }

        },
        onConfirm(value) {
            this.baseform.custEdu = value
            this.showPicker = false
        },
        cancelStatus() {
            this.showPicker = false
        },
        changeBelonBusi(value) {

            let strOne = value[0]
            let strTwo = value[1]
            if (strTwo == '请选择') {
                let obj = this.belonBusiList.find(item => item.text == strOne)
                this.baseform.industry = obj.id
                this.industryText = obj.text
            } else {
                let obj = {}
                for (let i = 0; i < this.belonBusiList.length; i++) {
                    for (let j = 0; j < this.belonBusiList[i].children.length; j++) {
                        if (strTwo == this.belonBusiList[i].children[j].text) {
                            obj = this.belonBusiList[i].children[j]
                        }
                    }
                }
                this.baseform.industry = obj.id
                this.industryText = obj.text
            }
            this.showPickerBelonBusi = false
        },
        cancleBelonBusi() {
            this.showPickerBelonBusi = false
        }
    }
}
</script>

<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    font-size: 16px;
    background-color: #fff;

}

.view_item {
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    font-size: 14px;
    border-bottom: 1px solid rgba(245, 245, 245, 1);
    padding: 0 20px;
}

.view_item_left {
    width: 40%;
    color: rgb(140, 140, 140);
}

.view_item_right {
    width: 60%;
}

.footer_view {
    /deep/ .van-button {
        width: 100%;
    }
}

.footer_edit {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;

    /deep/ .van-button {
        width: 48%;
    }
}

.label_color {
    /deep/ .van-field__label {
        color: #646566;
    }
}
</style>