<template>
    <div class="conatiner">
        <div class="PageTitle">
            认证开店
        </div>
        <div class="content">
            <certificationStep :list='stepList' :nowStep='userInfo.approveStep'></certificationStep>
            <template v-if="userInfo.approveStep<=1">
                <el-form v-if="userInfo.companyFlag=='N'" class="certain" :model="formData" :rules="rules" ref="personalAuthentication" label-width="100px" label-position="right" size="small" style="max-width: 600px;">
                    <el-form-item prop="realName" label="真实姓名">
                        <el-input v-model="formData.realName" style="width:320px;" placeholder="请填写您的真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item prop="idcard" label="身份证号">
                        <el-input v-model="formData.idcard" style="width:320px;" placeholder="请填写姓名所对应的身份证号码"></el-input>
                    </el-form-item>
                    <el-form-item prop="faceImage" label="身份证照片">
                        <single-upload-title v-model="formData.faceImage" style="display:inline-block" :title='"添加人像面"' :width='200' :height='125'>

                        </single-upload-title>
                        <single-upload-title v-model="formData.backImage" style="display:inline-block;margin-left:20px;" :title='"添加非人像面"' :width='200' :height='125'></single-upload-title>
                        <div class="ps">注：需要上传清晰身份证照，格式jpg/jpeg/png，大小不超过10M </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="$store.state.fetchingData" type="primary" @click="onSave" style="width:320px">下一步</el-button>
                    </el-form-item>
                </el-form>
                <el-form v-else class="certain" :model="formData1" :rules="rules1" ref="personalAuthentication" label-width="120px" label-position="right" size="small" style="max-width: 600px;">
                    <el-form-item prop="company" label="公司名称">
                        <el-input v-model="formData1.company" maxlength="30" style="width:320px;" placeholder="中英文、数字、空格或中文括号（30字以内）"></el-input>
                    </el-form-item>
                    <el-form-item prop="companyTime" label="公司注册时间">
                        <el-date-picker v-model="formData1.companyTime" type="year" placeholder="请选择公司注册年份">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="businessNo" label="工商注册号">
                        <el-input v-model="formData1.businessNo" style="width:320px;" maxlength="30" placeholder="英文或数字（30字以内）"></el-input>
                    </el-form-item>
                    <el-form-item prop="certificate" label="证件扫描">
                        <single-upload-title v-model="formData1.certificate" style="display:inline-block" :title='"添加证件照片"' :width='200' :height='125'>

                        </single-upload-title>
                        <div class="ps">注：建议上传清晰证件照，格式jpg/jpeg/png，大小不超过10M </div>
                    </el-form-item>
                    <el-form-item prop="address" label="所在地">
                        <el-cascader :options="cityData" :props='{value:"name",label:"name"}' v-model="formData1.address">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="$store.state.fetchingData" type="primary" @click="onSave" style="width:320px">下一步</el-button>
                    </el-form-item>
                </el-form>
            </template>

            <template v-else-if="userInfo.approveStep==2">
                <setStoreInfo class="certain" :typeFlag='2' @nextStep='changeStep(3)'></setStoreInfo>
            </template>

            <template v-else-if="userInfo.approveStep==3">
                <guaranteeMoney class="certain" @nextStep='changeStep(4)'></guaranteeMoney>
            </template>

            <template v-else-if="userInfo.approveStep==4">
                <systemState class="certain" :type='"warning"' :title="'系统审核中，需要1-3个工作日'" :subtitle='"就快好了请耐心等待哦～"'></systemState>
            </template>

            <template v-else-if="userInfo.approveStep==5">
                <systemState class="certain" :type='"success"' :title="'恭喜您，入驻成功！'" :subtitle='"您已经通过审核，可以入驻接单啦～"'></systemState>
            </template>

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import certificationStep from '../components/CertificationStep'
import setStoreInfo from '../pagesPre/SetStoreInfo'
import guaranteeMoney from '../pagesPre/GuaranteeMoney'
import systemState from '../pagesPre/SystemState'
import cityData from '../city'
// import moment from 'moment'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'
export default {
    name: 'order',
    data() {
        return {
            cityData,
            stepList: ['实名认证', '店铺信息', '缴纳质保金', '系统审核', '入驻成功'],
            formData: {},
            formData1: {
                company: '',
                companyTime: '',
                address: [],
                realName: ''
            },
            rules: {
                realName: [
                    { required: true, message: '请填写真实姓名', trigger: 'blur' },
                ],
                idcard: [
                    { required: true, message: '请填写身份证号', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (!value) {
                                callback(new Error('请填写身份证号'));
                            } else if (/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
                                callback();
                            } else {
                                callback(new Error('请输入正确的身份证号'));
                            }
                        }, trigger: 'blur'
                    }
                ],
                faceImage: [
                    { required: true, message: '请上传身份证照片', trigger: 'blur' },
                ]
            },
            rules1: {
                company: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                companyTime: [
                    { required: true, message: '请选择公司注册年份', trigger: 'blur' },
                ],
                businessNo: [
                    { required: true, message: '请输入工商注册号', trigger: 'blur' },
                ],
                certificate: [
                    { required: true, message: '请添加证件照片', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请选择地址', trigger: 'blur' },
                ]
            },
            address: []
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        if (this.userInfo.companyFlag == 'Y') {
            this.$http.get({
                url: '/companyAuthentication/getOne',
                data: {
                    userId: this.userInfo.id
                }
            }).then(res => {
                if (res.success) {
                    if (res.data) {
                        res.data.address = []
                        res.data.address.push(res.data.province)
                        res.data.address.push(res.data.city)
                        res.data.address.push(res.data.country)
                        res.data.companyTime = format(new Date(res.data.companyTime), 'YYYY', { locale: zh })
                        this.formData1 = res.data;
                    }

                }
            })
        }
        else {
            this.$http.get({
                url: '/personalAuthentication/getOne',
                data: {
                    userId: this.userInfo.id
                }
            }).then(res => {
                if (res.success) {
                    if (res.data) {
                        this.formData = res.data;
                    }

                }
            })
        }

    },
    methods: {
        onSave() {
            this.$refs.personalAuthentication.validate((valid) => {
                if (valid) {
                    this.submit();
                } else {
                    return false;
                }
            });
        },
        submit() {
            if (this.userInfo.companyFlag == 'Y') {
                var data = { ...this.formData1 }
                delete data.address
                data.province = this.formData1.address[0]
                data.city = this.formData1.address[1]
                data.country = this.formData1.address[2]
                data.companyTime = Date.parse(new Date(data.companyTime))
                if (!this.formData1.id) {
                    data.userId = this.userInfo.id
                    data.userName = this.userInfo.username
                }
                this.$http.post({
                    url: this.formData1.id ? '/companyAuthentication/update' : '/companyAuthentication/save',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.$message.success('提交成功');
                        this.changeStep(2)
                    } else {
                        this.$message.warning('失败')
                    }
                });
            }
            else {
                var data = JSON.parse(JSON.stringify(this.formData));
                if (!this.formData.id) {
                    data.userId = this.userInfo.id
                    data.userName = this.userInfo.username
                }
                this.$http.post({
                    url: this.formData.id ? '/personalAuthentication/update' : '/personalAuthentication/save',
                    data: data
                }).then(res => {
                    if (res.success) {
                        this.$message.success('提交成功');
                        this.changeStep(2)
                    } else {
                        this.$message.warning('失败')
                    }
                });

            }

        },
        changeStep(num) {
            this.$http.post({
                url: '/userInfo/update',
                data: {
                    id: this.userInfo.id,
                    approveStep: num
                }
            }).then(res => {
                if (res.success) {
                    this.$http.get({
                        url: '/userInfo/getUserInfo',
                        data: {}
                    }).then(res => {
                        if (res.success) {
                            this.$store.commit('updateUserInfo', res.data);
                        }
                    })
                } else {
                    this.$message.warning('失败')
                }
            });
        }

    },
    components: {
        certificationStep, setStoreInfo, guaranteeMoney, systemState
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    padding: 0 40px 0 24px;
    min-height: 600px;
}

.PageTitle {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 19px;
    padding: 18px 0 9px;
    border-bottom: 1px solid #ebebeb;
}

.content {
    padding-top: 18px;

    .certain {
        margin: 53px auto;

        .ps {
            font-size: 12px;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
            line-height: 16px;
        }
    }
}
</style>
