<template>
    <div class="flex common-box">
        <div class="leftbox">
            <div class="imgbox">
                <img class="max-w max-h" v-if="tasData.src" :src="tasData.src" />
                <img class="max-w max-h" v-else src="/public/images/goodsno.png" />
            </div>
            <div class="flex max-w bottomimg" v-if="tasData.srcArr && tasData.srcArr.length > 2">
                <div v-for="(item,index) in tasData.srcArr">
                    <img v-if="index != tasData.srcArr.length - 1 && index > 0 && index < 6" class="imgs" :src="BaseApi + item" />
                </div>
            </div>
        </div>
        <div class="flex labelbox fz-16 column jc-sb">
            <div class="ta-l">
                <p class="mb-2 p ta-l">{{tasData.label}}</p>
                <p class="mb-2 ta-l fz-18">价格：<span class="price fz-18">￥{{tasData.price}}</span></p>
                <p class="mb-2 fz-18 ta-l">合作社名称：{{tasData.name}}</p>
                <p class="mb-2 fz-18 ta-l">规格：<span class="unit fz-16">一{{tasData.unit}}</span></p>
                <p class="mb-3 fz-18 ta-l">数量：<el-input-number v-model="roleInfo.num" :min="1" :max="10000" /> <span class="fz-16">件</span></p>
                <div class="flex mt-3 jc-sb btn-container">
                    <div class="flex btnbox btnbox1 ai-c jc-c">立即购买</div>
                    <div class="flex btnbox btnbox2 ai-c jc-c"><el-icon><ShoppingCart /></el-icon><span class="ml-1">加入购物车</span></div>
                    <div class="flex btnbox btnbox3 ai-c jc-c"><span class="ml-1">收藏商品</span></div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex mt-3 common-box column">
        <div class="flex titlebox ai-c">
            <span></span>
            <div class="fz-24 fw-b">详情介绍</div>
        </div>
        <div class="mt-2 detailbox">
            <p>商品名称：{{tasData.label}}</p>
            <p v-if="tasData.greatName">商品品种：{{tasData.greatName}}</p>
            <p v-if="tasData.value">商品产量：{{tasData.value}}</p>
            <p>商品分类：{{tasData.typeName}}</p>
            <p>联系人：{{tasData.contacts}}</p>
            <p>联系方式：{{tasData.phone}}</p>
            <p>所属县区：{{tasData.county}}</p>
            <p v-if="tasData.town">所属乡镇：{{tasData.town}}</p>
            <p>所属合作社：{{tasData.name}}</p>
            <p>详情介绍：{{tasData.details}}</p>
        </div>
    </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import { BASE_API } from "/public/config/server.js";
export default defineComponent({
  name: "Index",
  components: {},
  props: ["lisdata"],
  setup(props, context) {
    let data = reactive({
        tasData: props.lisdata,
        BaseApi: BASE_API,
        roleInfo:{
            num: 1
        }
    });
    watch(
      () => props.lisdata,
      (newVal, oldVal) => {
        data.tasData  = newVal
      }
    );
    const router = useRouter();
    onMounted(() => {
        if(!props.lisdata){
            router.push({
                path: '/',
                query: {
                    navIndex: 1,
                    type: 1,
                }
            })
        }
    });
    let methods = {};
    return {
      ...methods,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
.common-box {
  background: #ffffff;
  box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 34px 20px;
}
.leftbox{
    width: 663px;
}
.imgbox{
    width: 663px;
    height: 403px;
    padding: 10px;
    border: 1px solid #DEE2E7;
}
.bottomimg{
    height: 100px;
    width: 100%;
    padding: 10px;
}
.bottomimg .imgs{
    width: 120px;
    height: 100px;
    margin-right: 20px;
}
.labelbox{
    width: 666px;
    margin-left: 35px;
}
.labelbox .p{
    margin-top: 30px;
    font-size: 28px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.labelbox .unit{
    padding: 4px 10px;
    border-radius: 3px;
    color: #FE4600;
    border: 1px solid #FE4600;
}
.labelbox .price{
    color: #FE4600;
    font-weight: bold;
}
.areabox{
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}
.titlebox{
    border-bottom: 1px solid #F4F5F9;
    padding-bottom: 20px;
}
.titlebox span{
    width: 4px;
    height: 26px;
    background: #0E5EF9;
    margin-right: 14px;
}
.detailbox{
    text-align: left;
    padding-left: 20px;
}
.detailbox p{
    margin-top: 30px;
}
.btn-container{
    margin-top: 100px;
}
.btnbox{
    width: 30%;
    height: 50px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
}
.btnbox1{
    background: #FEE7D5;
    color: #FE4600;
}
.btnbox2{
    background: #FE4600;
    color: #fff;
}
.btnbox3{
    background: #fff;
    color: #2C3543;
    border: 1px solid #eee;
}
</style>
