<template>
<div class="flex column">
    <div class="flex common-box max-w">
        <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/serverno.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.name}}</p>
                <span v-if="tasData.type" class="flex span ai-c jc-c fz-20 fw-b">{{tasData.type}}</span>
                <span class="flex ai-c jc-c fz-18 fw-b mt-2">{{tasData.descript}}</span>
            </div>
            <div class="areabox">{{tasData.address}}</div>
        </div>
    </div>
    <div class="flex mt-3 common-box column max-w" v-if="tasData.srcArr1 && tasData.srcArr1.length > 0">
        <div class="flex titlebox ai-c">
            <span></span>
            <div class="fz-24 fw-b">三品一标</div>
        </div>
        <div class="max-w mt-1">
            <div class="flex max-w" v-if="tasData.srcArr1 && tasData.srcArr1.length > 0">
                <div v-for="(item,index) in tasData.srcArr1" class="imgssp mr-1">
                    <img v-if="index != tasData.srcArr1.length - 1 && index < 6" class="imgssp" :src="BaseApi + item" />
                </div>
            </div>
        </div>
    </div>
    <div class="flex mt-3 common-box column max-w">
        <div class="flex titlebox ai-c">
            <span></span>
            <div class="fz-24 fw-b">详情介绍</div>
        </div>
        <div class="mt-2 detailbox">
            <p>单位名称：{{tasData.name}}</p>
            <p>所属区县：{{tasData.county}}</p>
            <p>所属街道：{{tasData.town}}</p>
            <p>所属社区：{{tasData.community}}</p>
            <p>地址：{{tasData.address}}</p>
            <p>联系人：{{tasData.contacts}}</p>
            <p>联系方式：{{tasData.phone}}</p>
            <p>经营状态：{{tasData.businesstype}}</p>
            <p>经营规模：{{tasData.scale}}</p>
            <p>种植（养殖）面积：{{tasData.areas}}</p>
            <p>主要农产品与产量: {{tasData.product}}</p>
            <p>帮扶模式: {{tasData.type}}</p>
            <p>帮扶成效: {{tasData.bfcx}}</p>
            <p>帮扶单位: {{tasData.bfunit}}</p>
            <p>单位简介: {{tasData.descript}}</p>
        </div>
    </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({
        BaseApi: BASE_API,
        tasData: props.lisdata
    });
    watch(
      () => props.lisdata,
      (newVal, oldVal) => {
        data.tasData  = newVal
      }
    );
    const router = useRouter();
    onMounted(() => {
        console.log('tasData', data.tasData)
        if(!props.lisdata){
            router.push({
                path: '/',
                query: {
                    navIndex: 2,
                    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;
}
.imgssp{
    width: 300px;
    height: 300px;
}
.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 .span{
    display: inline-block;
    height: 52px;
    line-height: 52px;
    padding: 0 10px;
    background: #F4F5F9;
    border-radius: 7px;
    color: #0E5EF9;
}
.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;
}
</style>
