<template>
    <div class="siteDetails">
        <mt-header title="网点详情">
            <div @click="goBack" slot="left">
                <mt-button icon="back"></mt-button>
            </div>
        </mt-header>
        <div class="siteDetailInfo">
            <div class="siteName">{{siteDetail.netName}}</div>
            <div>
                <label style="font-size: 15px">距离：{{siteDetail.distance}}km</label>
                <label style="margin-left: 20px;font-size: 15px">类型：{{siteDetail.netTypeName}}</label>
            </div>
            <div class="ui-flex justify-center center" style="line-height: 29px;margin-top: 5px">
                地址：<label @click="clickAddress" class="btns">{{siteDetail.netAddress}}</label>
                <div class="cell">
                    <img src="../assets/img/mark.png" style="width: 24px;height: 24px"/>
                </div>
            </div>
            <div class="ui-flex justify-center center" style="margin-top: 5px">
                联系电话：<label @click="clickPhone" class="btns">
                    <a :href="`tel:${siteDetail.netPhone}`">{{siteDetail.netPhone}}</a></label>
                <div class="cell"><img src="../assets/img/phone.png" style="width: 16px;height: 20px"/></div>
            </div>
        </div>
        <div style="padding:0 20px;font-size: 15px">该网点当前可领取的药具</div>
        <div class="content-list">
            <div
                    :infinite-scroll-disabled="loading"
                    class="list-data"
                    infinite-scroll-distance="10"
                    v-infinite-scroll="loadMore"

            >
                <div :key="item.id"
                     class="content-item ui-flex justify-center center"
                     v-for="item in stockInfo"
                >
                    <div class="cell">
                        <img :src="item.imgUrl" alt="" onerror="this.src='../assets/img/no_picture.jpg';this.onerror=null"/>
                    </div>

                    <div class="tradeInfo">
                        <div class="tradeName">{{item.medicineName}}</div>
                        <div style="margin-top: 5px"><label
                                style="float: left;margin-bottom: 0">数量：{{item.unit}}</label><label
                                style="float: right;margin-right: 15px;margin-bottom: 0">规格：{{item.specs}}</label>
                            <div style="clear: both"></div>
                        </div>
                        <div style="margin-top: 5px">有效期至：{{item.expireDate}}</div>
                        <div style="margin-top: 5px">生产厂家：{{item.factoryName}}</div>
                    </div>
                    <div style="clear: both"></div>

                </div>
            </div>
        </div>
        <div v-if="noDataShow">
            <NoData></NoData>
        </div>
    </div>
</template>

<script>

    import {getStockInfo} from "../utils/api";
    import NoData from "./component/noData";
    import {Indicator} from 'mint-ui';
    import {MessageBox} from 'mint-ui';
    import no_picture from "../assets/img/no_picture.jpg"

    export default {
        name: "siteDetails",
        components: {NoData},
        data() {
            return {
                siteDetail: {},
                loading: false,
                relationId: '',
                stockInfo: [],
                loadText: '加载中...',
                noDataShow: false,
                param: {
                    pageIndex: 0,
                    pageSize: 10
                },
                no_picture,
            }
        },
        created() {
            /*发请求通过this.$route.query.id*/
            this.siteDetail = JSON.parse(this.$route.query.info)
            this.relationId = this.siteDetail.id
            // this.getMedicalInfoList()
        },
        methods: {
            loadMore() {
                this.loading = true
                this.param.pageIndex += 1
                this.getMedicalInfoList()
            },
            getMedicalInfoList(callBack) {
                Indicator.open();
                let par = {
                    relationId: this.relationId,
                    ...this.param
                }
                getStockInfo(par).then(({data}) => {
                    const {dataList = []} = data.data
                    this.stockInfo = this.stockInfo.concat(dataList)
                    if (this.stockInfo.length == 0) {
                        this.noDataShow = true
                    } else {
                        this.noDataShow = false
                    }
                    if (data.data && data.data.length < this.param.pageSize) {
                        this.loadText = '暂无更多数据'
                    } else {
                        this.loading = false
                    }
                    Indicator.close();
                    callBack && callBack()
                }).finally(() => {
                    this.loading = false
                })
            },
            clickAddress() {
                let info = this.siteDetail
                // const {nowLocal = []} = info
                /*  if (nowLocal.length > 0) {
                      window.location.href = `https://uri.amap.com/navigation?from=${nowLocal[0]},${nowLocal[1]},我的位置&to=${info.netLongitude},${info.netLatitude},${info.netAddress}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`
                  } else {*/
                window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`
                /*}*/
                // window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&callnative=1&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0`
                // window.location.href=`https://uri.amap.com/marker?position=${info.netLongitude}, ${info.netLatitude}&name=${info.netAddress}`
                // window.location.href = `http://api.map.baidu.com/marker?location=${info.netLatitude}, ${info.netLongitude}&title=终点'&content=${info.netAddress}&output=html&src=webapp.baidu.openAPIdemo`
                /*                var u = navigator.userAgent;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                    // window.location.href=`https://uri.amap.com/marker?position=${info.netLongitude}, ${info.netLatitude}&name=${info.netAddress}`;
                    window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&callnative=1&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1`
                    //这个是安卓操作系统
                    // window.location.href="androidamap://viewMap?sourceApplication=amap&poiname="+info.netName+"&lat="+info.netLatitude+"&lon="+info.netLongitude+"&dev=0";
                    //判断是否切出浏览器
                      setTimeout(function(){
                          let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
                          if(typeof hidden =="undefined" || hidden ==false){
                              //应用宝下载地址
                              MessageBox('提示', '请下载高德地图进行导航')
                          }
                      }, 2500);
                }
                if (isIOS) {
                    // window.location.href=`https://uri.amap.com/marker?position=${info.netLongitude}, ${info.netLatitude}&name=${info.netAddress}`;
                    window.location.href = `https://uri.amap.com/navigation?to=${info.netLongitude},${info.netLatitude},${info.netAddress}&callnative=1&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1`

                    //这个是ios操作系统
                    // window.location.href="iosamap://viewMap?sourceApplication=amap&poiname="+info.netName+"&lat="+info.netLatitude+"&lon="+info.netLongitude+"&dev=0"
                    //判断是否切出浏览器
                    setTimeout(function(){
                        let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden ||window.document.webkitHidden
                        if(typeof hidden =="undefined" || hidden ==false){
                            //应用宝下载地址
                            MessageBox('提示', '请下载高德地图进行导航')
                        }
                    }, 2500);
                }*/
                /* this.$router.push({path: '/navigation', query: {Lng: Lng, Lat: Lat}})*/
            },
            clickPhone() {
                console.log(456);
            },
            goBack() {
                window.history.go(-1)
            },
            getDistance(latFrom, lngFrom, latTo, lngTo) {
                var rad = function (d) {//计算角度
                    return d * Math.PI / 180.0;
                }
                var EARTH_RADIUS = 6378136.49;
                var radLatFrom = rad(latFrom);
                var radLatTo = rad(latTo);
                var a = radLatFrom - radLatTo;
                var b = rad(lngFrom) - rad(lngTo);
                var distance = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLatFrom) * Math.cos(radLatTo) * Math.pow(Math.sin(b / 2), 2)));
                distance = distance * EARTH_RADIUS;
                distance = Math.round(distance * 10000) / 10000;
                return parseFloat(distance.toFixed(0));
            },
        },
        beforeDestroy() {
            this.relationId = ''
            this.stockInfo = []
        }
    }
</script>

<style scoped>
    .siteDetailInfo {
        font-size: 15px;
        padding: 10px 20px;
        border-top: 1px solid #F5F6F8;
        border-bottom: 5px solid #F5F6F8;
    }

    .siteName {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 10px;
    }

    .btns {
        color: #00CA9D;
        /*background-color: #FFFFFF;*/
        border: 0px none;
        margin-top: 2px;
        margin-right: 5px;
        padding: 0;
        font-family: "宋体";
        font-size: 15px;
    }

    .btns:focus {
        outline: none;
    }

    .ui-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {
        box-sizing: border-box
    }

    .ui-flex.justify-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
    }

    .ui-flex.center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center
    }

    .content-list {
        width: 100%;
        height: calc(100% - 185px);
    }

    .content-item {
        padding: 10px 10px 0 20px;
        border-bottom: 5px solid #F5F6F8;
        height: 150px;
    }

    .content-item:first-child {
        padding-top: 0;
    }

    .content-item img {
        width: 85px;
        max-height: 100px;
        float: left;
        display: inline-block;
        vertical-align: middle;
    }

    .tradeName {
        font-size: 14px;
    }

    .tradeInfo {
        float: left;
        width: calc(100% - 90px);
        padding-left: 10px;
    }

    .list-data {
        /*height: calc(100% - 40px);*/
        max-height: calc(100vh - 200px);
        overflow-y: auto;
    }
</style>
