<template>
    <div class="app-container">
        <van-nav-bar title="购买保险" left-text="返回" left-arrow @click-left="$router.go(-1)" />

        <div style="padding-top: 100px;"></div>

       
            <van-field
                v-model="vehicle_info.license_plate"
                name="device_name"
                label="车牌号"
                placeholder="请输入设备名称"
                readonly 
                clearable
            />
           <van-field
                readonly
                clickable
                name="picker"
                :value="value"
                label="选择保险"
                placeholder="点击选择保险"
                @click="showPicker = true"
                />
                <van-popup v-model="showPicker" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="insureColumns"
                    @confirm="onConfirm"
                    @cancel="showPicker = false"
                />
                </van-popup>
            <van-submit-bar :price="insurePrice" button-text="提交订单" @submit="onSubmit" />

            <!-- <div style="margin: 36px;">
                <van-button round block type="info" size="small" native-type="submit">购买</van-button>
            </div> -->

       
    </div>
</template>

<script>
import Vue from 'vue';

import { Form,Field,Icon,NavBar,Dialog,Button,Popup,Picker,SubmitBar   } from 'vant';

Vue.use(Form);
Vue.use(Field);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Dialog);
Vue.use(Button);
Vue.use(Popup);
Vue.use(Picker);
Vue.use(SubmitBar);
export default {
    data() {
        return {
            userid: '',
            openid: '',
             insureColumns: [
                 {
                     text:'测试1',
                     price:20000,
                     value:'1',
                 },

                 {
                     text:'测试2',
                     price:30000,
                     value:'2',
                 }
             ],
            showPicker: false,
            insurePrice:0,
            value:'',
            insureId: '',
            vehicleId:'',
            imei: '',
            username: '',
            user_no: '',
            vehicle_info: '',
            rules: {
                imei: [
                    { required: true, message: '请输入设备号' },
                ]
            }
        }
    },
    created() {
        this.$http.get("/getInsureOptions").then(res => {
            console.log(res.data.data)
          if (!res.data.success) {
            this.$notify(res.data.message || '获取失败');
            return;
          }

          this.insureColumns = res.data.data || [];

        }).catch(res => {
            this.$notify('出错了');
        });
        this.vehicle_info=this.$route.query.vehicle_info
        this.vehicleId=this.vehicle_info.id
        console.log('buy',this.vehicle_info)
        this.userid = localStorage.getItem('userid');
        this.openid = localStorage.getItem('openid');
    },
    methods: {
        onConfirm(item) {

            this.insureId = item.value;
            this.value = item.text;
            this.insurePrice = item.price;
            this.showPicker = false;
        },
        /**
         * 提交
         */
        onSubmit(values) {
            let postData = {
                vehicle_id: this.vehicleId,
                insure_id: this.insureId,
            }
            if (!postData.vehicle_id) {
                this.$notify('订单异常请重新进入');
                return;
            }
            if (!postData.insure_id) {
                this.$notify('请选择保险');
                return;
            }
            console.log('onsubmit', postData);
            this.$http.post('userByInsure&userid=' + this.userid + '&openid=' + this.openid, JSON.stringify(postData))
                .then(resp => {
                    if (!resp.data.success) {
                        this.$notify(resp.data.message || '提交失败');
                        return;
                    }
                    this.$notify({
                        type: 'success',
                        message: resp.data.message || '提交成功',
                    })
                    // 刷新列表
                    this.$router.replace('devices');
                })
        },
        /**
         * 扫码
         */
        scanCode() {
            let that = this;
            let url = encodeURIComponent(location.href.split('#')[0]);
            // ios 设备只认从公众号菜单首次进入页面的URL
            if (localStorage.getItem('userAgent') == 'ios') {
                let mainUrl = localStorage.getItem('mainUrl');
                url = encodeURIComponent(mainUrl);
            }

            this.$http.get("/getSignaturEtc", { params: { url: url } })
            .then(res => {
                if(!res.data.success){
                    this.$notify( res.data.message);
                    return;
                }
          
                let data = res.data.data;
                    // console.log('resp data',data)
                wx.config({
                    // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    debug: false,
                    // 必填，公众号的唯一标识
                    appId: data.appId,
                    // 必填，生成签名的时间戳
                    timestamp: data.timeStamp,
                    // 必填，生成签名的随机串
                    nonceStr: data.nonceStr,
                    // 必填，签名
                    signature: data.signature,
                    // 必填，需要使用的JS接口列表，所有JS接口列表
                    jsApiList: ['scanQRCode']
                });

                wx.error(function (res) {
                    console.log("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
                });

            })
            .catch(res => {
                console.log(res);
            });


            // 成功时
            wx.ready(function () {

                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: function(res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        console.log("扫描结果："+result);
                        // window.location.href = result;//因为我这边是扫描后有个链接，然后跳转到该页面

                        that.imei = result;
                    },
                    fail: function(e){
                        console.log('scan fail',e)
                    }
                });

            }); 
        }
    }
}
</script>

<style lang="scss" scoped>

</style>