<template>
    <div class="info-wrap">
        <el-dialog
            :title="data.title"
            :visible="dialogVisible"
            width="80%"
            top="36vh"
            @close="handleClose">
            <form class="content needs-validation p-2 pt-3" id="editInfo">
                <div v-if="keyVal==='realname'">
                    <el-input v-model="data.value" name="realname" required pattern="^[\u4e00-\u9fa5]{2,4}$"></el-input>
                    <div class="invalid-feedback">
                        请输入有效的姓名
                    </div>
                </div>
                <div v-if="keyVal==='social_type'">
                    <el-radio class="cheng" style="margin-right:0" v-for="item in data.sociallist"  v-model="data.value" name="socialType" :label="item.id" border size="medium">{{item.name}}</el-radio>
                </div>
                <div v-if="keyVal==='gender'" class="gender">
                    <el-radio v-model="data.value" name="gender" label="1" border size="medium">男</el-radio>
                    <el-radio v-model="data.value" name="gender" label="2" border size="medium">女</el-radio>
                </div>
                <div class="city-boxs" v-if="keyVal==='city'">
                    <select class="city-sheng" name="" id="sheng" v-model='data.code' @change="chooseShi()" required>
                        <option  value="" style="color: #cecece">请选择省份</option>
                        <option style="color:#8e8e8e" v-for="item in data.sheng" :value="item.code"> {{item.name}} </option>
                    </select>
                    <br>
                    <select class="city-shi" name="social_city" id="" required>
                        <option  value="" style="color: #cecece">请选择市级</option>
                        <option  v-for="items in data.shi" :value="items.code" > {{items.name}} </option>
                    </select>
                </div>
                <div v-if="keyVal==='id_card'">
                    <el-input v-model="data.value" name="idCard" required
                            pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)"></el-input>
                    <div class="invalid-feedback">
                        请输入有效的身份证号
                    </div>
                </div>
                <div v-if="keyVal==='mobile'">
                    <el-input v-model="data.value" name="mobile" required pattern="^1[3-9]\d{9}$"></el-input>
                    <div class="invalid-feedback">
                        请输入有效的手机号码
                    </div>
                </div>
                <div v-if="keyVal==='addr'">
                    <el-input v-model="data.value" name="addr" required></el-input>
                    <div class="invalid-feedback">
                        请输入有效的联系地址
                    </div>
                </div>
                <div v-if="keyVal==='email'">
                    <el-input v-model="data.value" name="email" required
                            ></el-input>
                    <div class="invalid-feedback">
                        请输入有效的电子邮箱
                    </div>
                </div>
            </form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="success" @click="barFunc" class="btnLast">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <header class="bar bar-nav d-flex justify-content-between align-items-center p-2">
            <el-button type="text" icon="el-icon-arrow-left" v-on:click="goBack"></el-button>
            <h4 class="title">{{data.title}}</h4>
            <el-button type="text" v-on:click="barFunc"><span>确定</span></el-button>
        </header>
        <form class="content needs-validation p-2 pt-3" id="editInfo">
            <div v-if="data.key==='realname'">
                <el-input v-model="data.value" name="realname" required pattern="^[\u4e00-\u9fa5]{2,4}$"></el-input>
                <div class="invalid-feedback">
                    请输入有效的姓名
                </div>
            </div>
            <div v-if="data.key==='social_type'">
                <el-radio class="cheng" v-for="item in data.sociallist"  v-model="data.value" name="socialType" :label="item.id" border size="medium">{{item.name}}</el-radio>
            </div>
            <div v-if="data.key==='gender'">
                <el-radio v-model="data.value" name="gender" label="1" border size="medium">男</el-radio>
                <el-radio v-model="data.value" name="gender" label="2" border size="medium">女</el-radio>
            </div>
            <div class="city-boxs" v-if="data.key==='city'">
                <select class="city-sheng" name="" id="sheng" v-model='data.code' @change="chooseShi()" required>
                    <option  value="" style="color: #cecece">请选择省份</option>
                    <option style="color:#8e8e8e" v-for="item in data.sheng" :value="item.code"> {{item.name}} </option>
                </select>
                <br>
                <select class="city-shi" name="social_city" id="" required>
                    <option  value="" style="color: #cecece">请选择市级</option>
                    <option  v-for="items in data.shi" :value="items.code" > {{items.name}} </option>
                </select>
            </div>
            <div v-if="data.key==='id_card'">
                <el-input v-model="data.value" name="idCard" required
                          pattern="(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)"></el-input>
                <div class="invalid-feedback">
                    请输入有效的身份证号
                </div>
            </div>
            <div v-if="data.key==='mobile'">
                <el-input v-model="data.value" name="mobile" required pattern="^1[3-9]\d{9}$"></el-input>
                <div class="invalid-feedback">
                    请输入有效的手机号码
                </div>
            </div>
            <div v-if="data.key==='addr'">
                <el-input v-model="data.value" name="addr" required></el-input>
                <div class="invalid-feedback">
                    请输入有效的联系地址
                </div>
            </div>
            <div v-if="data.key==='email'">
                <el-input v-model="data.value" name="email" required
                         ></el-input>
                <div class="invalid-feedback">
                    请输入有效的电子邮箱
                </div>
            </div>
        </form> -->
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop, Watch} from "vue-property-decorator";
    import Http from "../../extend/Http";
    import Utils from "../../extend/Utils";
    import wx from "weixin-jsapi";
    import router from "../../router";
    import {Message} from "element-ui";

    @Component({
        components: {}
    })
    export default class UserEdit extends Vue {
        @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: true, // 是否必填
        })  keyVal !: string;
        @Prop({
            type: Boolean, // 父组件传递给子组件的数据类型
            required: true, // 是否必填
        })  dialogVisible !: boolean;
        @Prop({
            type: Object, // 父组件传递给子组件的数据类型
            required: true, // 是否必填
        })  keyData !: object;
        // @Prop({
        //     type: Object, // 父组件传递给子组件的数据类型
        //     required: true, // 是否必填
        // })  curEditItem !: Object;

        public data: any = {
            title: "修改信息", key: "string", value: "string", sheng: '',shi:'',code:'',codes:'',sociallist:'',
        };
        // public dialogVisible: Boolean = false
        curEditItem: Object = {}

        async created() {
            let res = await Http.getInstance().getProvinceList();
            this.data.sheng = res.data.prolist
            // this.data.title = "修改" + this.$route.params["label"];
            // this.data.key = this.$route.params["key"];
            // this.data.value = this.$route.params["value"];
            console.log('params', this.$route.params);
            let ress = await Http.getInstance().getSociallist({
                code:  localStorage.getItem('citycode')
            });
            if(ress.data){
                this.data.sociallist = ress.data
            }
        }

        mounted() {
        }

        @Watch('dialogVisible') getDialogVisible(newVal: any) {
            if (newVal) {
                this.getCurEditItem()
            }
        }
        getCurEditItem() {
            console.log('this.$props.keyData', this.$props.keyData);
            this.curEditItem = this.$props.keyData
            this.data.title = "修改" + this.curEditItem["label"];
            // this.data.key = this.keyVal;
            this.data.value = this.curEditItem["value"];
        }

       async chooseShi(){
            let res = await Http.getInstance().getCityList({
                code: this.data.code
            });
            this.data.shi = res.data
            console.log(res.data)
        }
        // async chooseSocial(){
        //     let res = await Http.getInstance().getSociallist({
        //         code: this.data.codes
        //     });
        //     if(res.data){
        //         this.data.sociallist = res.data
        //     }
        // }
        async barFunc() {
            let form = document.querySelector("#editInfo") as HTMLFormElement;
            console.log('form', form.checkValidity());
            if (form.checkValidity() === false) {
                form.classList.add("was-validated");
                return false;

            }
            console.log('serialize', Utils.getInstance().serialize(form));
            let res = await Http.getInstance().saveBase(Object.assign(Utils.getInstance().serialize(form), {is_edit: true}));
            console.log('res.data', res)
            // localStorage.setItem("social_type", res.data.social_type);
              res.data && res.data.social_type && localStorage.setItem("social_type", res.data.social_type);
              res.data && res.data.city_code && localStorage.setItem("citycode", res.data.city_code);
              res.data && res.data.city_name && localStorage.setItem("cityname", res.data.city_name);
              res.data && res.data.social_name && localStorage.setItem("social_name", res.data.social_name);
            // @ts-ignore
            Message({
                // message: "修改成功", duration: 1500, type: "success", onClose: () => router.back()
                message: "修改成功", duration: 1500, type: "success", onClose: () => {
                    this.$emit('close', false)
                    this.$emit('getUserList')
                }
                // message: "修改成功", duration: 1500, type: "success", onClose: () => router.go(0)
            });
        }

        public goBack() {
            router.back();
        }

        private async wxInit() {
            let url = location.href.split("#")[0]; // 获取锚点之前的链接
            let links = "m.wercf.com";
            let title = "河马代缴";
            let desc = "了解更多知识，请关注“河马代缴”公众号";
            let imgUrl = "";
            let res = await Http.getInstance().getConfig({
                platform: "weixin", url: url,
            });
            res.jsApiList = ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "onMenuShareQZone"];
            wx.config(res);
            wx.ready(() => {
                wx.onMenuShareTimeline({
                    title: title, // 分享标题
                    link: links, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
                // 微信分享菜单测试
                wx.onMenuShareAppMessage({
                    title: title, // 分享标题
                    link: links, // 分享链接
                    desc: title, // 分享链接
                    type: "", // 分享链接
                    dataUrl: "", imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
                wx.onMenuShareQQ({
                    title: title, // 分享标题
                    link: links, // 分享链接
                    desc: title, // 分享链接
                    type: "", // 分享链接
                    dataUrl: "", imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
                wx.onMenuShareWeibo({
                    title: title, // 分享标题
                    desc: desc, // 分享描述
                    link: links, // 分享链接
                    imgUrl: imgUrl, // 分享图标
                    success: () => {
                    }, cancel: () => {
                    }
                });
            });
            wx.error((err: any) => {
                alert(JSON.stringify(err));
            });
        }

        // 关闭弹层
        handleClose() {
            // this.data.dialogVisible = false
            this.$emit('close', false)
        }
    }
</script>

<style lang="scss" scoped>
    // 弹出层内容
    .info-wrap /deep/.el-dialog {
        border-radius: 10px;
    }
    .info-wrap /deep/.el-dialog__body {
        padding-top: 0;
        margin-top: -0.625rem;
        text-align: center;
    }
    .info-wrap /deep/.el-dialog__header {
        text-align: center;
    }
    .info-wrap /deep/.el-dialog__footer {
        text-align: center;
        padding: 5px 20px 30px;
    }
    .info-wrap /deep/.el-button--success {
        background-color: #4FDCA2;
        border-color: #4FDCA2;
    }
    .info-wrap .el-radio.is-bordered.is-checked {
        border-color: #4FDCA2;
    }
    .info-wrap /deep/.el-radio__input.is-checked+.el-radio__label {
        color: #4FDCA2;
    }
    .info-wrap /deep/.el-radio__input.is-checked .el-radio__inner {
        background-color: #4FDCA2;
        border-color: #4FDCA2;
    }
    .el-button {
        font-size: 1.333rem;
        width: 7rem;
    }
    .info-wrap /deep/.el-input {
        font-size: 1.333rem;
    }
    .info-wrap /deep/.el-dialog__title {
        font-size: 1.6rem;
    }
    .btnLast {
        margin-left: 3.3rem;
    }

    .avator {
        width: 6rem;
        height: 6rem;
        border-radius: 3.5rem;
    }

    .list-group-item {
        border-color: #eee;
    }

    .list-group-item a {
        color: #212529;
    }

    .was-validated .invalid-feedback {
        display: block;
    }
    .cheng{
        margin-left: 0.8rem;
    }
    .el-message {
        margin-top: 8rem;
    }
    .pt-3{
        margin-top:3rem;
    }
    .gender .is-bordered{
        width:30%;
    }
    .city-boxs{
        display: flex;
        justify-content: space-around;
        // padding: 0 2rem;
        padding: 0 1.5rem;
    }
    .city-sheng{
        width: 12rem;
        height: 2.5rem;
        background: white;
        border-radius: 3px;
        border-color: #d2d2d2;
        color: #666666;
        margin-top: 1rem;
        display: block;
        margin-right: 1rem;
    }
    .city-shi{
        width: 12rem;
        height: 2.5rem;
        background: white;
        border-radius: 3px;
        border-color: #d2d2d2;
        color: #666666;
        margin-top: 1rem;
        display: block;
    }
</style>
