<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="查看商品"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->


    <!--  内容开始  -->
    <div class="main">
      <van-field readonly label="产品名称" v-model="product.productName" input-align="right" placeholder="无" />
      <van-field readonly label="产品类型" v-model="product.productType" input-align="right" placeholder="无" />
      <van-field readonly label="简介" type="textarea" autosize v-model="product.productLink" input-align="right" placeholder="无" />
      <van-field label="图片" :border="false" input-align="right" readonly />
      <div style="padding: 0 4% 2vh;">
        <van-uploader v-model="product.mainImgList" :show-upload="false" :deletable="false" />
      </div>
    </div>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {productGet} from "@/api/agriculturalTrusteeship";
  export default {
    name: "agriculturalTrusteeshipShopDetail",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false,
        product:{}
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
        productGet(this.$route.query.id).then(response => {
          if (response.data.mainImg){
            response.data.mainImgList = [];
            var attachement = response.data.mainImg.split( "," );
            attachement.forEach(responseAttach=>{
              response.data.mainImgList.push({
                url:'/api' + responseAttach,
                isImage: true
              });
            })
          }
          var that = this ;
          that.product = response.data;
        });
      },
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  background: #F6F6F6;
  min-height: 100vh;
}
.main{
  width: 92%;
  margin: 0 auto;
  margin-top: 2vh;
  border-radius: 10PX;
  overflow: hidden;
  background-color: #FFF;
}
  .main_btn{
    display: flex;
    justify-content: space-around;
    padding: 4vh 0;
    p{
      font-size: .4rem;
      width: 35%;
      text-align: center;
      padding: 10PX 0;
      border-radius: 5rem;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      &:nth-child(1){
        background: #334281;
        color: #ffffff;
      }
      &:nth-child(2){
        background: #D1D5E4;
        color: #334281;
      }
    }
  }
</style>
