<template>
    <div class="grade-status">
        <div class="nav">
            <van-icon
                    name="arrow-left"
                    size="20"
                    class="nav-left"
                    @click="handlerBack"
            />
            <span class="nav-title">产品认证信息</span>
        </div>
        <div class="forest-content">
            <span class="name-class">{{brand}}</span>
            <span class="nameSum-class">{{specification}}</span>
           <div class="forest-list">
               <p class="countries">原产国
                   <span class="countries-class">{{productCountry}}</span>
               </p>
               <p class="countries">生产日期
                   <span class="countries-class">{{produceTime}}</span>
               </p>
               <p class="countries">有效期截止
                   <span class="countries-class">{{validTime}}</span>
               </p>
               <p class="countries">企业名称
                   <span class="countries-class">{{companyName}}</span>
               </p>
               <p class="countries" style="height: 37px">企业地址
                   <span class="countries-class">{{companyAddress}}</span>
               </p>
               <p class="countries">企业网址
                   <span class="countries-class">{{companyUrl}}</span>
               </p>
               <p class="countries">货运单号
                   <span class="countries-class">{{trackingNumber}}</span>
               </p>
               <p class="countries" style="height: 53px">物流轨迹查询平台
                   <span class="countries-class">{{logisticsUrl}}</span>
               </p>
               <p class="countries">海关进境备案编号
                   <span class="countries-class">{{recordNumber}}</span>
               </p>
           </div>
        </div>
        <van-popup v-model="sheetShow" round class="popup-class">
            <span class="dialog-class" >{{popupName}}</span>
            <p class="sum-form"><span>{{shaValue1}}</span></p>
            <p class="sha-name" v-if="shaName == '非正品'" style="color: #ee0a24">{{shaName}}</p>
            <p class="sha-name" v-else style="color: #2bee16">{{shaName}}</p>
        </van-popup>
    </div>
</template>

<script>
    import { productInfo,} from "@/api/security";
    export default {
        data() {
            return {
                brand:'西田森NMN 1300mg',
                specification:'60粒/瓶',
                productCountry:'加拿大',
                produceTime:'2021/1/1',
                validTime:'2021/1/1',
                companyName:'日本西田森制药株式会社',
                companyAddress:'东京都千代田区东神田2丁目6番7号608',
                trackingNumber:'741741741741',
                logisticsUrl:'随意随意随意随意随意随意随意随意随意随意随意随意随意随意随意随意随',
                recordNumber:'4646135146813',
                sheetShow: false,
                popupName:'本产品采用区块链技术验证防伪链上数据显示',
                companyUrl:'',
                shaValue:"",
                shaValue1:"",
                shaName:"",
            };
        },
        created() {
            this.stCertList()
        },
        methods: {
            handlerBack() {
                try {
                    this.$bridgeToAppFun.navigateBack();
                } catch {
                    this.$router.go(-1);
                }
            },
            stCertList(){
                this.shaValue = localStorage.getItem("shaValue")
                this.sheetShow = true
                if(this.shaValue.indexOf("非")){
                    this.shaValue1 = this.shaValue.substring(0,this.shaValue.length-4);
                    this.shaName = "非正品";
                }else {
                    this.shaValue1 = this.shaValue.substring(0,this.shaValue.length-3);
                    this.shaName = "正品";
                }
                const params = {
                    shaValue: this.shaValue,
                };
                productInfo(params).then(res => {
                    if (res.code == 0) {
                        this.brand = res.data.brand
                        this.specification = res.data.specification
                        this.productCountry = res.data.productCountry
                        this.produceTime = res.data.produceTime
                        this.validTime = res.data.validTime
                        this.companyName = res.data.companyName
                        this.companyAddress = res.data.companyAddress
                        this.trackingNumber = res.data.trackingNumber
                        this.logisticsUrl = res.data.logisticsUrl
                        this.recordNumber = res.data.recordNumber
                        this.popupName = res.data.popupName
                        this.companyUrl = res.data.companyUrl
                    } else {
                        this.$toast.fail(res.message);
                    }
                });
            },
        }
    };
</script>

<style lang="scss" scoped>
    $white: #ffffff;
    .grade-status {
        width: 100%;
        height: 298px;
        background-image: url("../assets/images/森林状态.png");
        background-size: cover;
        .nav {
            position: relative;
            display: flex;
            align-items: center;
            width: 100%;
            height: 46px;
            color: #fff;
            .nav-left {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 52px;
                height: 100%;
                line-height: 46px;
                text-align: center;
            }
            .nav-title {
                max-width: 60%;
                margin: 0 auto;
                font-weight: bold;
                font-size: 16px;
            }
        }
        .forest-content {
            text-align: center;
            padding-top: 25px;
            width: 345px;
            height: 578px;
            margin-left: 15px;
            background-color: #ffffff;
            .name-class{
                font-size: 18px;
                color: #333333;
            }
            .nameSum-class{
                display: block;
                font-size: 13px;
                color: #666666;
                margin-top: 10px;
            }
        }
        .forest-list{
            margin-top: 40px;
            .countries{
                font-size: 14px;
                color: #666666;
                text-align: left;
                padding-left: 20px;
            }
            .countries-class{
                width: 177px;
                float: right;
                color: #333333;
                margin-right: 20px;
                text-align: right;
            }
        }
        .popup-class{
            width: 315px;
            height: 323px;
            .dialog-class{
                font-size: 17px;
                color: #999999;
                width: 250px;
                text-align: center;
                display:block;
                padding-left: 30px;
                padding-top: 24px;
            }
            .sum-form{
                width: 270px;
                height: 16px;
                padding-top: 10px;
                color: #333333;
                font-size: 18px;
                padding-left: 26px;
                text-align: center;
            }
            .sha-name{
                text-align: center;
                font-size: 30px;
                padding-top: 45px;
            }
        }
    }
</style>
<style lang="scss">
</style>