<template>
    <div>
        <div class="rec_card_title">为你推荐</div>
        <div class="rec_card_line"></div>
        <div class="rec_card" @click="Go">
            <img :src="list[0].picList ? list[0].picList[0].url : null" />
            <div class="rec_card_name">{{ list[0].name }}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'recommendToU2',
    data() {
        return {
            query: { size: 1, page: 1, dataType: { id: 0 } },
            url: '/product/all',
            list: [{ picList: [{ url: '' }] }]
        };
    },
    props: ['type', 'dataType'],
    methods: {
        Go() {
            this.$router.push({ name: 'resourceRelease', query: { id: list[0].id, type: this.type } });
        },
        getData() {
            if (!this.type) return;
            if (this.type === 1) {
                this.url = '/product/all';
            } else if (this.type === 2) {
                this.url = '/artProduct/all';
            } else if (this.type === 3) {
                this.url = '/tresource/all';
            }
            if (!this.url) return;
            this.query.dataType.id = this.dataType;
            this.$http
                .get(this.url, this.query)
                .then(res => {
                    this.list = res.content;
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        }
    },
    created() {
        this.getData();
    }
};
</script>
<style lang="less" scoped>
.rec_card_title {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}
.rec_card_line {
    width: 180px;
    height: 1px;
    background: #f2f3f5;
    margin: 7px 0 16px;
}
.rec_card {
    border: 1px solid #f5f7fa;
    margin-bottom: 16px;
    img {
        width: 180px;
        height: 180px;
    }

    .rec_card_name {
        height: 44px;
        line-height: 44px;
        padding-left: 12px;
        font-size: 14px;
    }
}
</style>
