import {Component, Vue, Watch} from 'vue-property-decorator';
import Utils from '@/extend/Utils';
import Http from '@/extend/Http';
import router from '@/router';
import {MessageBox, Message} from 'element-ui';

const serviceChargeData: any = [
    {
    monthly: '月付：50元/月', seasonal: '季付：135元/季', halfYearly: '半年付：240元/半年', yearly: '年付：300元/年',
},
    {
    monthly: '月付：75元/月', seasonal: '季付：202.5元/季', halfYearly: '半年付：360元/半年', yearly: '年付：450元/年',
}
];

@Component({})
export default class Social extends Vue {

    public data: any = {
        is_fund: 0,
        is_discounts: false,
        social_calc: null,
        service_calc: 0,
        fund_calc: 0,
        shouxu:0,
        subtotal_calc: 0,
        total_calc: 0,
        social_basic: {pension: 3400, fund: 3400},
        social_type: null,
        social_name:'',
        service_charge: null,
        discountList:'',
        // value:'',
        discount:0,
        freedom:0,
        hubie:'',
        month:'',
        mobile:'',
        citycode:'',
        cityname:'',
        sheng:'',
        shi:'',
        code:'11',
        codes:'1101',
        couponSelected:'',
        sociallist:[{id: 1, name: "本地城镇"}, {id: 2, name: "本地农村"}, {id: 3, name: "外埠城镇"}, {id: 4, name: "外埠农村"}],
        // 附加费用 残保金
        append_cost: [],
        // 是否是城镇户口 true-是城镇
        is_town: true,
        // 社保缴纳额度最小值显示
        // pensionMin: localStorage.getItem('pensionMin') || 3613,
    };

     private service_charge_type: string = 'monthly';

    async created() {
        let resisorder = await Http.getInstance().getIsOrder();
        if(resisorder.data.is_order == 1){
            MessageBox.alert( '您有未支付订单，请先支付或取消未支付订单', '温馨提示', {
                dangerouslyUseHTMLString: true,
                confirmButtonText: '确定',
            }).then(action =>{
                this.$router.push('/order/list')
            }).catch(() => {
                this.$router.push('/index')
            });
        }
        this.data.mobile = localStorage.getItem('mobile')
        this.data.citycode = localStorage.getItem('citycode')
        this.data.cityname = localStorage.getItem('cityname')
        this.data.is_town = localStorage.getItem('is_town')
        let res = await Http.getInstance().getProvinceList();
        this.data.sheng = res.data.prolist
        this.data.shi = res.data.citylist
        if(!localStorage.getItem('access_token')){
            router.replace('/login')
        }
        let params = Utils.getInstance().getParams(location.href);
        this.data.is_fund = Number(params.is_fund);
        this.data.social_type = localStorage.getItem('social_type');
        this.data.hubie = localStorage.getItem('social_name');
        if (this.data.social_type != null) {
            let res = await Http.getInstance().socialLimit({
                socialType: this.data.social_type,
                code: this.data.citycode
            });
            this.data.social_basic = res.data;
            console.log('缴费明细', res);
            // this.data.social_type = this.data.social_type - 1;

            localStorage.setItem('pensionMin', this.data.social_basic.pension[0])
        }
        
        this.data.service_charge = serviceChargeData[this.data.is_fund];
        this.getIsFund()
    }
    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
        }
    }
    open() {
        // @ts-ignore
        MessageBox.alert('<a href="tel:' + Http.PHONE + '">' + Http.PHONE + '</a><p>手机号同步微信</p>', '请联系客服', {
            dangerouslyUseHTMLString: true,
            confirmButtonText: "拨打" ,
        }).then(action =>{
            window.location.href = 'tel://' +Http.PHONE;
        });
    }

    async updated() {
        if (this.data.social_calc == null) {
            this.calcBill();
        }
    }

    async saveInfo(event: any) {
        if(this.data.codes == ''){
            alert('请选择代缴城市')
            return false
        }
        let form = event.target.form;
        if (form.checkValidity() === false) {
            form.classList.add('was-validated');
            event.preventDefault();
            event.stopPropagation();
            return false;
        }
        let res = await Http.getInstance().saveBase(Utils.getInstance().serialize(form));
        // @ts-ignore
        this.data.social_type = res.data.social_type;
        this.data.social_name = res.data.social_name;
        this.data.citycode = res.data.city_code;
        this.data.cityname = res.data.city_name;
        this.data.service_charge = serviceChargeData[this.data.is_fund];
        localStorage.setItem('social_type', this.data.social_type);
        localStorage.setItem('social_name', this.data.social_name);
        localStorage.setItem('service_charge', this.data.service_charge);
        localStorage.setItem('access_token', res.data.access_token);
        localStorage.setItem('refresh_token', res.data.refresh_token);
        localStorage.setItem('citycode', res.data.city_code);
        localStorage.setItem('cityname', res.data.city_name);

         res = await Http.getInstance().socialLimit({
            socialType: this.data.social_type,
            code: this.data.codes
        });
        this.data.social_basic = res.data;
        return false;
    }

    async calcBill(event?: any) {
        let form = event ? event.target.form : document.getElementById('social-detail');
        // console.log('form.checkValidity()', form.checkValidity());
        if (form.checkValidity() === false) {
            form.classList.add('was-validated');
            return false;
        }
        // console.log('from', form)
        let res = await Http.getInstance().calcBill(Utils.getInstance().serialize(form));
        console.log('五险一金', res);
        this.data.social_calc = res.data.social;
        this.data.service_calc = res.data.service;
        this.data.discount = res.data.discount;
        this.data.freedom = res.data.freedom;
        this.data.fund_calc = res.data.fund;
        this.data.subtotal_calc = res.data.subtotal;
        this.data.total_calc = res.data.total;
        this.data.is_discounts = res.data.discounts;
        this.data.month = res.data.month;
        this.data.append_cost = res.data.append_cost
        let ress = await Http.getInstance().getDiscountListt();
        if(ress.data.length == 0){
            this.data.discountList=  [{id: 0, money: "暂无优惠券"}]
        }else{
            this.data.discountList = ress.data;
        }
    }

    async saveOrder(event: any) {
        let date = new Date();
        let seperator1 = "-";
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let strDate = date.getDate();
        if (strDate > 28 ) {
            if(this.data.is_fund == 0){
                MessageBox.alert('当月社保缴纳时间为1-29日，目前只能为您代缴下个月的社保，如需缴纳本月社保，请联系客服。', '溫馨提示', {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: true,
                    confirmButtonText: "联系客服" ,
                    cancelButtonText: '继续缴费',
                }).then(action =>{
                    window.location.href = 'tel://' +Http.PHONE;
                });
            }else {
                MessageBox.alert('当月社保/公积金缴纳时间为1-29日，目前只能为您代缴下个月的社保/公积金，如需缴纳本月社保/公积金，请联系客服。', '溫馨提示', {
                    dangerouslyUseHTMLString: true,
                    showCancelButton: true,
                    confirmButtonText: "联系客服" ,
                    cancelButtonText: '继续缴费',
                }).then(action =>{
                    window.location.href = 'tel://' +Http.PHONE;
                });
            }
        }
        let form = event.target.form;
        if (form.checkValidity() === false) {
            form.classList.add('was-validated');
            event.preventDefault();
            event.stopPropagation();
            return false;
        }
        let res = await Http.getInstance().saveOrder(Utils.getInstance().serialize(form));
        localStorage.setItem('order_paying', JSON.stringify(res.data));
        router.replace({
            name: 'opayment',
            params: {
                order_sn: res.data.order_sn,
                type: '1'
            }
        });
    }

    // 监听，防止用户从微信快捷菜单点击进来
    getIsFund() {
        let path = window.location.href
        // console.log('path', path, this.data.is_town);
        if (path.indexOf('/social?is_fund=0') > -1 && this.data.is_town == 'true') {
            this.$router.push('/index')
            Message({
                message: '城镇户口只能交五险一金，不能交社保',
                type: 'warning'
            });
        }
        
    }
    // 微信快捷进入，登陆之后才可进入
    @Watch('$route', {immediate: true}) async isUserInfo(newVal: any, oldVal: any) {
        if(localStorage.getItem('access_token')){
            let res = await Http.getInstance().userinfo();
            console.log('token', res);
            localStorage.setItem("social_type", res.data.social_type);
        }
        let result = await Http.getInstance().userinfo();
        console.log('result',result);
        if (result && result.data) {
            localStorage.setItem("realname", result.data.realname);
            localStorage.setItem("id_card", result.data.id_card);
        }
        // 真实姓名
        const realname = localStorage.getItem('realname')
        const social_type = localStorage.getItem('social_type')
        const id_card = localStorage.getItem('id_card')
        console.log('realname1', realname);
        console.log('social_type', social_type);
        console.log('id_card', id_card);
        // console.log('newVal.path', newVal.path);
        if (newVal.path === '/social' && realname == 'null' || social_type == 'null' || id_card == '') {
            this.$router.replace('/user/info')
            // 提示
            Message({
              message: '请填写个人信息',
              type: 'warning'
            })
        }
    }

    // 监听社保缴纳额度是否有变化
    // @Watch('data.social_basic.pension') changSocalBasic(newVal: any) {
    //     console.log('社保缴纳额度', newVal);
    //     if (newVal[0] != '') {
    //         this.data.isPensionMin = false
    //     }
    // }
}