<template>
    <div class="flex common-box">
        <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 labelbox fz-16 column jc-sb">
            <div class="ta-l">
                <p class="mb-2 p ta-l">{{tasData.TypeName}} - {{tasData.name}}</p>
                <span class="flex span ai-c jc-c fz-20 fw-b">{{tasData.name}}</span>
            </div>
            <div class="areabox">{{tasData.countyName}}</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.name}}</p>
            <p>类型：{{tasData.Type1Name}}</p>
            <p>供需类型：{{tasData.TypeName}}</p>
            <p>所属县区：{{tasData.county}}</p>
            <p v-if="tasData.town">所属乡镇：{{tasData.town}}</p>
            <p>所属合作社：{{tasData.owerhzs}}</p>
            <p>详情介绍：{{tasData.details}}</p>
            <p>发布时间：{{tasData.time}}</p>
        </div>
    </div>
</template>
<script>
import { defineComponent, reactive, onMounted, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "Index",
  components: {},
  props: ["lisdata"],
  setup(props, context) {
    let data = reactive({
        tasData: props.lisdata
    });
    watch(
      () => props.lisdata,
      (newVal, oldVal) => {
        data.tasData  = newVal
      }
    );
    const router = useRouter();
    onMounted(() => {
        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;
}
.imgbox{
    width: 663px;
    height: 403px;
    padding: 10px;
    border: 1px solid #DEE2E7;
}
.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>
