<template>
    <!--<div>
        <div class="header"
             style="padding:10px;background-color: rgb(59, 103, 160); height: auto; min-height: 108px; background-position: center 100%; background-repeat: repeat-x;">
            <div class="fb_headerInfo" style="padding-top:0px" tabindex="1" role="heading" aria-level="1">
                <div class="h_headline" style="text-align:center;color:#FFFFFF;">
                    <span>服务至上是我们永恒的主题</span><br><span>&nbsp;</span><br><span>&nbsp;</span></div>
                <div class="h_description" style="text-align:center;color:#FFFFFF;">
                    <span>因运营商政策调整，本公司为各位卡粉提供一条龙式换卡服务</span>
                </div>
            </div>
        </div>


        <el-form :model="card_replace" label-width="25%">
            <el-form-item label="旧卡号 *">
                <el-input id="card_no"  autofocus="autofocus" v-model="card_replace.card_no"/>
            </el-form-item>
            <el-form-item v-if="card_replace.is_web=='是'" label="支付密码 *">
                <el-input v-model="card_replace.pwd"/>
            </el-form-item>

            <el-collapse v-for="(item,index) in package_option" :key="index">

                <el-collapse-item :title="item.package_name" :name="item.package_id">
                    <template slot="title">
                        <label style="margin-left: 5%;" class="el-radio ">
                                    <span class="el-radio__input my_checkbox__inner">
                                    <input type="radio" v-model="card_replace.new_package_id"
                                           :value="item.package_id"/>
                                     </span>
                            <span class="el-radio__label ">{{item.package_name}}</span>
                        </label>
                    </template>
                    <ul v-for="(o,i) in item.dataArr" :key="i">

                        <li v-if="o.packet_wx_name!=undefined && o.packet_wx_name!=null && o.packet_wx_name!=''">
                            {{o.packet_wx_name}}
                        </li>
                        <li v-if="o.packet_wx_name==undefined || o.packet_wx_name==null || o.packet_wx_name==''">
                            {{o.packet_name}}
                        </li>

                    </ul>
                </el-collapse-item>
            </el-collapse>

            <el-form-item label="收货人 *" style="margin-top: 5px;">
                <el-input v-model="card_replace.consignee"/>
            </el-form-item>
            <el-form-item label="联系电话 *">
                <el-input v-model="card_replace.tel"/>
            </el-form-item>
            <el-form-item label="快递类型 *">
                <el-radio-group>
                    <label class="el-radio " v-for="(item,index) in express_optino">
                                    <span class="el-radio__input my_checkbox__inner">
                                    <input type="radio" v-model="card_replace.express"
                                           :value="item.value"/>
                                     </span>
                        <span class="el-radio__label ">{{item.label}}</span>
                    </label>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="收货地址 *">
                <el-input id="city" v-model="card_replace.addressVal"/>
            </el-form-item>
            <el-form-item label="详细地址 *">
                <el-input type="textarea" v-model="card_replace.address"/>
            </el-form-item>
            <el-form-item v-if="card_replace.replace_price>0" label="换卡费用">
                <el-input  readonly="readonly" :value="card_replace.replace_price"/>
            </el-form-item>
            <el-form-item v-if="card_replace.express_price>0" label="快递费用">
                <el-input  readonly="readonly" :value="card_replace.replace_price"/>
            </el-form-item>
        </el-form>n


        <div slot="footer" class="dialog-footer">
            <el-button style="width: 95%;margin-left: 5%;" @click="edit()" type="primary">保存</el-button>
        </div>

        <div style="height: 3000px"></div>
    </div>
-->
</template>


<script>

    import tools from "../../utils/tools";
    import City from "../../static/js/citySet";
    import weixinPay from "../../static/js/weixinPay";

    export default {
        name: 'cardReplacement',
        components: {
            //Pagination,
        },
        mounted: function () {
            let _this = this;
            _this.card_replace.openid=_this.$route.params.openid;
            _this.initPID()
            //if(_this.$check.checkIsNull(_this.card_replace.openid)){
                _this.card_replace.openid=sessionStorage.getItem("openid")
            //}
           // _this.card_replace.appId =_this.$route.params.appid;
            //if(_this.$check.checkIsNull(_this.card_replace.appId)){
                _this.card_replace.appId=_this.$store.state.appid
           // }

            $("#card_no").blur(function (){
                tools.MessageShow(_this,_this.card_replace.openid,"info");
                //tools.MessageShow(_this,_this.card_replace.appId,"info");
                _this.Myfind_data();
            })

            $("#city").click(function (e) {
                City.SelCity(this, e);

                $('#PoPy').attr("style", " position: absolute;background: #3b67a0;z-index: 20000;width:80%;top: 10%;left: 10%;");

            });

        },
        data() {
            return {


                PaymentAmount:0,
                card_replace: {
                    //微信支付参数
                    body:"change-Card",
                    price:0.01,
                    openid:"",
                    active:false,
                    appId:'wxb9c885c722d8cd36',

                    agent_id:'',
                    consignee: '',
                    express_price:0,
                    tel: '',
                    card_no: "",
                    province: '',
                    city: '',
                    area: '',
                    address: '',
                    new_package_id: '',
                    cre_time: '',
                    city: '',
                    express: '',
                    pwd: '',
                    replace_price: 0,
                    is_web: '否',
                    addressVal:'',
                    id:'',
                },
                is_status: 0,
                express_optino: [{"label": "申通", "value": "申通"}, {"label": "邮政", "value": "邮政"}, {
                    "label": "顺丰",
                    "value": "顺丰"
                }],
                package_option: [/*{
                    package_id: 'jshzdx-338b6268', package_name: '电信悠悠套餐30天',
                    dataArr: [
                        {packet_name: '佳圣电信悠悠30G套餐[30天]', packet_wx_name: '电信悠悠30G套餐[30天有效期]'},
                        {packet_name: '佳圣电信悠悠60G套餐[30天]', packet_wx_name: '电信悠悠60G套餐[30天有效期]'},
                        {packet_name: '佳圣电信悠悠200G加油包'},
                        {packet_name: '佳圣电信悠悠2000G加油包'}
                    ]
                },{
                    package_id: 'hzlt-cae84344', package_name: '联通悠悠套餐30天',
                    dataArr: [
                        {packet_name: '菏泽联通悠悠30G套餐[30天]', packet_wx_name: '联通悠悠30G套餐[30天有效期]'},
                        {packet_name: '菏泽联通悠悠60G套餐[30天]', packet_wx_name: '联通悠悠60G套餐[30天有效期]'},
                        {packet_name: '菏泽联通悠悠100G套餐[30天]'},
                        {packet_name: '菏泽联通悠悠200G套餐[30天]'}
                    ]
                }*/
                ],

            }
        },
        methods: {
            initPID(){
                let _this=this
                let jumpath =window.location.href
                let urlArr =jumpath.split("?")
                let url =urlArr[0]
                let param=_this.getRequest()
                if(param!=null){
                    _this.card_replace.appId=param.appId
                }else{
                    _this.card_replace.appId=_this.$store.state.appid
                }
            },
            getRequest(){
                let url=location.search
                let theRequest =new Object()
                if (url.indexOf("?") !== -1) {
                    let str = url.substr(1);
                    let strs = str.split("&");
                    for(let i = 0; i < strs.length; i ++) {
                        theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                    }
                    return theRequest
                }
            },
            edit() {
                let _this = this;
                //申请换卡
                if(_this.Parameter_verification()){
                   //如果是本平台卡需要验证支付密码是否正确

                    //判断只有需要支付费用
                    if(_this.PaymentAmount>0){
                        //console.log("changeCardWeixinPay");
                        let card_replace = _this.card_replace;
                        card_replace.price = _this.PaymentAmount;
                        //console.log(card_replace);
                        _this.card_replace.openid=sessionStorage.getItem("openid")
                        _this.changeCardWeixinPay(_this.card_replace);
                    }else{
                        //console.log("update_info");
                        _this.update_info(_this.card_replace);
                    }
                }
                //console.log(_this.card_replace);
            },
            Parameter_verification() {
                let bool = false;
                let _this = this;
                _this.card_replace.province = '';
                _this.card_replace.city = '';
                _this.card_replace.area = '';
                _this.card_replace.addressVal = $("#city").val();
                //console.log(_this.card_replace);
                if (tools.VerificationsText_wx(_this, _this.card_replace.card_no, "旧卡号不能为空！") == true &&
                    tools.VerificationsText_wx(_this, _this.card_replace.consignee, "收货人不能为空！") == true &&
                    tools.VerificationsText_wx(_this, _this.card_replace.tel, "联系电话不能为空！") == true &&
                    //tools.VerificationsText_wx(_this, _this.card_replace.new_package_id, "请选择套餐类型！") == true &&
                    tools.VerificationsText_wx(_this, _this.card_replace.express, "快递类型不能为空！") == true &&
                    tools.VerificationsText_wx(_this, _this.card_replace.addressVal, "收货地址不能为空！") == true &&
                    //tools.VerificationsText_wx(_this, _this.card_replace.id, "网络错误请刷新后重试！") == true &&
                    tools.VerificationsText_wx(_this, _this.card_replace.address, "详细地址不能为空！") == true ) {
                    let addressVal = _this.card_replace.addressVal.split("-");

                    //console.log(addressVal);
                    if(addressVal.length==3){
                        _this.card_replace.province = addressVal[0];
                        _this.card_replace.city = addressVal[1];
                        _this.card_replace.area = addressVal[2];

                    }else{
                        tools.MessageShow(_this,"请按提示选择收货地址！","info");
                        return false;
                    }
                    if(_this.card_replace.is_web=='是' ){
                       let isnull = tools.VerificationsText_wx(_this, _this.card_replace.addressVal, "收货地址不能为空！");
                        if(!isnull){
                            return false;
                        }
                    }

                    bool = true;
                }
                return bool;
            },
            update_info(map) {
                let _this = this;
                // //console.log(map);
                //console.log(JSON.stringify(map))
                let Pwd_Str = tools.encrypt(JSON.stringify(map));
                ////console.log(Pwd_Str);
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/CardReplace/update_info", Pwd_Str).then((response) => {
                    //console.log(response);
                    if (response.data.code == "200") {
                        tools.open(_this, response.data.data);
                        tools.loadSX(2000);
                    } else {
                        let Message = tools.Is_null(response.data.data) ? response.data.data : response.data.msg;
                        tools.open(_this, Message);
                    }
                })
            },
            changeCardWeixinPay(map) {
                let _this = this;
                // //console.log(map);
                //console.log(Pwd_Str);

                let encrypt_text = tools.encrypt(JSON.stringify(map));

                        _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/weixin/pay/changeCardWeixinPay", encrypt_text).then((response) => {
                    if (response.data.code === "0") {
                        weixinPay(response.data).then(res=>{
                            alert("success")
                        }).catch(err=>{
                            alert("error"+err)
                        })
                    } else {
                        let Message = tools.Is_null(response.data.data) ? response.data.data : response.data.msg;
                        tools.open(_this, Message);
                    }
                })
            },
            Myfind_data() {
                //查询卡号套餐数据等
                let _this = this;
                let card_replace = _this.card_replace;
                if (tools.Is_null(card_replace.card_no)) {
                    //console.log(card_replace.card_no);
                    let map = {card_no: card_replace.card_no};
                    if (_this.is_status ==0) {
                        _this.findSimpleData(map);
                    }

                }

            },
            findSimpleData(map) {
                let _this = this;
                //console.log(JSON.stringify(map))
                let Pwd_Str = tools.encrypt(JSON.stringify(map));
                _this.card_replace.is_web = '否';
                _this.card_replace.package_id = '';
                _this.card_replace.replace_price = 0;
                _this.card_replace.express_price = 0;
                _this.card_replace.agent_id = '';
                _this.card_replace.id = '';


                _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/CardReplace/findSimpleData", Pwd_Str).then((response) => {
                    if (response.data.code == "200") {
                        let  card_replace = response.data.data;
                        //console.log(card_replace);
                        _this.card_replace.is_web = card_replace.is_web;
                        _this.card_replace.package_id = card_replace.package_id;
                        _this.card_replace.replace_price = card_replace.replace_price;
                        _this.card_replace.express_price = card_replace.express_price;
                        _this.card_replace.agent_id = card_replace.agent_id;
                        _this.card_replace.id = card_replace.id;


                        _this.PaymentAmount = tools.NumberAdd(card_replace.replace_price,card_replace.express_price);

                        if(tools.Is_null(_this.card_replace.package_id)){
                            //加载套餐包
                            let package_idArr = card_replace.package_id.split(",");
                            // //console.log(package_idArr);
                            if(package_idArr==null){
                                package_idArr = [card_replace.package_id];
                            }
                            _this.findPackage({package_id:package_idArr});
                        }

                    } else {
                        let Message = tools.Is_null(response.data.data) ? response.data.data : response.data.msg;
                        if (Message == '该卡号不需要换卡,如需 继续换卡请刷新界面！') {
                            _this.is_status = 1;
                        }
                        tools.MessageShow(_this,Message,"error");
                    }
                })
            },
            findPackage(map) {
                let _this = this;
                // //console.log(JSON.stringify(map))
                let Pwd_Str = tools.encrypt(JSON.stringify(map));
                _this.package_option = [];

                _this.$ajax.post(process.env.VUE_APP_SERVER + "/web/CardReplace/findPackage", Pwd_Str).then((response) => {
                    if (response.data.code == "200") {
                        let  data = response.data.data;
                        //console.log(data);
                        let Package = data.Package;
                        let Packet = data.Packet;
                        let package_option =[];
                        $.each(Package,function (i,o) {
                            let dataArr = [];
                            $.each(Packet,function (index,obj) {
                                if (o.package_id==obj.package_id){
                                    dataArr.push(obj);
                                }
                            })
                            o.dataArr=dataArr;
                            package_option.push(o);
                        })
                        _this.package_option = package_option;
                    } else {
                        let Message = tools.Is_null(response.data.data) ? response.data.data : response.data.msg;
                        tools.MessageShow(_this,Message,"error");
                    }
                })
            },



        }
    }
</script>

<style scoped>


    .h_headline {
        line-height: 1.4;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        white-space: pre-wrap;
        max-width: 100%;
    }

    ._citys {
        max-width: 450px;
        width: 100%;
        display: inline-block;
        border: 2px solid #eee;
        padding: 5px;
        position: relative;
    }

    ._citys span {
        color: #56b4f8;
        height: 15px;
        width: 15px;
        line-height: 15px;
        text-align: center;
        border-radius: 3px;
        position: absolute;
        right: 10px;
        top: 10px;
        border: 1px solid #56b4f8;
        cursor: pointer;
    }

    ._citys0 {
        width: 100%;
        height: 34px;
        display: inline-block;
        border-bottom: 2px solid #56b4f8;
        padding: 0;
        margin: 0;
    }

    ._citys0 li {
        display: inline-block;
        line-height: 34px;
        font-size: 15px;
        color: #fff;
        width: 80px;
        text-align: center;
        cursor: pointer;
    }

    .citySel {
        background-color: #56b4f8;
        color: #fff !important;
    }

    ._citys1 {
        width: 100%;
        display: inline-block;
        padding: 10px 0;
    }

    ._citys1 a {
        width: 83px;
        height: 35px;
        display: inline-block;
        background-color: #f5f5f5;
        color: #666;
        margin-left: 6px;
        margin-top: 3px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
        font-size: 13px;
        overflow: hidden;
    }

    ._citys1 a:hover {
        color: #fff;
        background-color: #56b4f8;
    }

    .AreaS {
        background-color: #56b4f8 !important;
        color: #fff !important;
    }


    .my_checkbox__inner {
        border: none;
    }

    .my_checkbox__label {
        padding-left: 5px;
    }

    .my_checkbox {
        margin-right: 15px;
    }
    .el-collapse-item__header{
        heigh:40px;
    }
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
        margin-bottom: 5px;
    }
    .el-input--small .el-input__inner,.el-input--small .el-textarea__inner{
        width: 95%;
    }

</style>

<style scoped>


    ol, ul{
        margin: 0;
        margin-bottom: 5px;
        padding: 4px;
        list-style: none;
        border:1px solid #3b67a07a;
        border-radius: 5px;
        margin-left: 5%;
        width: 90%;

    }


</style>