<template>
    <div class="conatiner">
        <el-tabs v-model="activeName" class="tab">
            <el-tab-pane label="账户资料" name="first">
                <el-form :model="userInfo" ref="form" label-width="80px" label-position="right" size="small" style="max-width:400px;">
                    <el-form-item prop="icon" label="当前头像">
                        <single-upload class="icon" v-model="userInfo.icon" style="wdith:98px"></single-upload>
                        <span style="font-size:12px;color:#999">图片尺寸100*100</span>
                    </el-form-item>
                    <el-form-item prop="nickname" label="昵称">
                        <el-input v-model="userInfo.nickname"></el-input>
                    </el-form-item>
                    <el-form-item prop="sex" label="性别">
                        <el-radio-group v-model="userInfo.sex">
                            <el-radio label="男"></el-radio>
                            <el-radio label="女"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="birthday" label="生日">
                        <el-date-picker v-model="userInfo.birthday" format="yyyy-MM-dd" value-format="timestamp">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="mail" label="邮箱">
                        <el-input v-model="userInfo.mail"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="submit" :loading="$store.state.fetchingData" type="primary" style="width:80px">保存</el-button>
                        <!-- <el-button @click="$router.go(-1)">取消</el-button> -->
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="收货地址" name="second">
                <el-form class="demo-ruleForm" label-width="120px">
                    <el-form-item label="已保存收货地址" style="margin-bottom:0">

                    </el-form-item>
                </el-form>
                <el-table :data="tableData" class="" class="setTable" row-key="id" ref="table">

                    <el-table-column prop="realName" label="收货人" min-width="100">
                    </el-table-column>
                    <el-table-column prop="address" label="所在地区" min-width="150">
                        <template slot-scope="scope">
                            <span>{{scope.row.address.split(',').join(' ')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="addressDetail" label="详细地址" min-width="200">
                    </el-table-column>

                    <el-table-column prop="postcode" label="邮编" min-width="100">
                    </el-table-column>
                    <el-table-column prop="telephone" label="联系电话" min-width="100">
                    </el-table-column>
                    <el-table-column label="操作" align="center" min-width="150">
                        <template slot-scope="scope">
                            <el-button @click="editRow(scope.row)" type="text" size="mini">修改</el-button>
                            <el-button @click="deleteRow(scope.row)" type="text" size="mini">删除</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="defaultFlag" label="" min-width="100">
                        <template slot-scope="scope">
                            <el-button type="warning" size="mini" style="background-color:#fff;color:#FB6E08" v-if="scope.row.defaultFlag=='Y'" plain>默认地址</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-form :model="ruleForm" ref="ruleForm" label-width="120px" class="demo-ruleForm" style="max-width:500px;">
                    <el-form-item label="新增收货人地址" style="margin-bottom:0">

                    </el-form-item>
                    <el-form-item label="所在区域" required>
                        <el-cascader :options="cityData" :props='{value:"name",label:"name"}' v-model="ruleForm.address">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="详细地址" required>
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="ruleForm.addressDetail">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="邮政编码">
                        <el-input v-model="ruleForm.postcode"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人姓名" required>
                        <el-input v-model="ruleForm.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人电话" required>
                        <el-input v-model="ruleForm.telephone"></el-input>
                    </el-form-item>
                    <el-form-item label="设为默认">
                        <el-switch v-model="ruleForm.defaultFlag"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm()">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import orderItem from '../components/OrderItem'
import cityData from '../city'
export default {
    name: 'order',
    data() {
        return {
            activeName: 'first',
            formData: {},
            city: [],
            cityData,
            ruleForm: {
                address: [],
                addressDetail: '',
                postcode: '',
                realName: '',
                telephone: "",
                defaultFlag: true
            },
            tableData: []
        }
    },
    computed: {
        ...mapState(['userInfo']),
    },
    mounted() {
        this.getUserAddress()
        if (this.$route.query.activeName) {
            this.activeName = this.$route.query.activeName
        }
    },
    methods: {
        getUserAddress() {
            this.ruleForm = {
                address: [],
                addressDetail: '',
                postcode: '',
                realName: '',
                telephone: "",
                defaultFlag: true
            }
            this.$http.get({
                url: '/userAddress/all',
                data: {
                    userId: this.userInfo.id
                }
            }).then(res => {
                if (res.success) {
                    this.tableData = res.data;
                }
            }).catch(e => {
                console.log(e)
            })
        },
        submit() {
            var data = JSON.parse(JSON.stringify(this.userInfo));
            this.$http.post({
                url: '/userInfo/update',
                data: data
            }).then(res => {
                if (res.success) {
                    this.$message.success('成功');
                    this.$http.get({
                        url: '/userInfo/getUserInfo',
                        data: {}
                    }).then(res => {
                        if (res.success) {
                            this.$store.commit('updateUserInfo', res.data);
                        }
                    })
                } else {
                    this.$message.warning('失败')
                }
            });
        },
        editRow(row) {
            this.ruleForm = JSON.parse(JSON.stringify(row))
            this.ruleForm.address = this.ruleForm.address.split(',')
            this.ruleForm.defaultFlag = (this.ruleForm.defaultFlag == 'Y')
        },
        setDefault(id) {

            console.log(id)

            return new Promise((resolve, reject) => {
                this.$http.post({
                    url: '/userAddress/setDefault',
                    data: {
                        userId: this.userInfo.id,
                        addressId: id
                    }
                }).then(res => {
                    if (res.success) {

                        resolve()

                    }
                })
            })

        },
        submitForm() {

            if (this.ruleForm.address.length == 0) {
                this.$message({
                    message: '请选择所在区域',
                    type: 'warning'
                });

                return
            }


            if (!this.ruleForm.addressDetail) {
                this.$message({
                    message: '请填写详细地址',
                    type: 'warning'
                });

                return
            }

            if (!this.ruleForm.realName) {
                this.$message({
                    message: '请填写收货人姓名',
                    type: 'warning'
                });

                return
            }
            if (!this.checkPhone(this.ruleForm.telephone)) {
                this.$message({
                    message: '请输入正确电话格式',
                    type: 'warning'
                });

                return
            }

            var data = JSON.parse(JSON.stringify(this.ruleForm))

            if (!data.userId) {
                data.userId = this.userInfo.id
            }

            data.address = data.address.join(',')
            data.defaultFlag = data.defaultFlag ? 'Y' : 'N'


            this.$http.post({
                url: data.id ? '/userAddress/update' : '/userAddress/save',
                data: data
            }).then(res => {
                if (res.success) {
                    var id = ''
                    if (data.id) {
                        id = data.id
                    }
                    else {
                        id = res.data
                    }

                    console.log(id)

                    if (data.defaultFlag == 'Y') {
                        this.setDefault(id).then(() => {
                            this.$message({
                                message: '收货地址保存成功',
                                type: 'success'
                            });

                            this.getUserAddress()
                        })
                    }
                    else {
                        this.$message({
                            message: '收货地址保存成功',
                            type: 'success'
                        });
                        this.getUserAddress()
                    }


                }
            })



        },
        deleteRow(row) {
            this.$http.post({
                url: '/userAddress/del',
                data: {
                    id: row.id
                }
            }).then(res => {
                if (res.success) {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.getUserAddress()
                }
            })
        }

    },
    components: {
        orderItem
    }
}
</script>

<style lang="less" scoped>
.conatiner {
    background-color: #fff;
    min-height: 589px;
    border-radius: 4px;
    border: 1px solid rgba(234, 234, 234, 1);
    padding: 0 20px;
}

.setTable {
    border-top: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
}
</style>
