<template>
    <div class="position-message" @click="openPosition">
        <div class="d-flex justify-content-between align-items-center">
            <span class="d-flex align-items-center">
                <span class="title">{{ title }}</span>
                <span
                    v-for="item in tags"
                    :key="item.title"
                    :style="{ 'background-color': item.color }"
                    class="tag"
                    >{{ item.title }}</span
                >
            </span>
            <span class="salary">{{ salary }}</span>
        </div>
        <div class="summary">
            <span v-for="item in summary" :key="item">{{ item }}</span>
        </div>
        <div class="msg-content" v-html="positionBody"></div>
        <div class="msg-tail d-flex justify-content-between">
            <span v-for="item in tail" :key="item" class="text-truncate">{{
                item
            }}</span>
        </div>
    </div>
</template>

<script lang="ts">
    import { CustomerServiceEvent, MessageEvent } from "@/customer-service/event";
    import { PositionMessage } from "@/customer-service/xim/models/chat";
    import { Component } from "vue-property-decorator";
    import BaseMessage from "./index";

    @Component({ components: {} })
    export default class Index extends BaseMessage {
        private get positionData() {
            return this.messageBody.msg as PositionMessage;
        }

        private get title() {
            return this.positionData.title;
        }

        private get tags() {
            return this.positionData.tags;
        }

        private get salary() {
            return this.positionData.salary;
        }

        private get positionBody() {
            return this.positionData.post_require;
        }

        private get summary() {
            return [
                this.positionData.address,
                this.positionData.education_require,
                this.positionData.recruit_count,
            ];
        }

        private get tail() {
            return [
                this.positionData.company_name,
                this.positionData.business_scope,
            ];
        }

        private openPosition() {
            CustomerServiceEvent.open(
                this,
                MessageEvent.PositionMessage,
                this.positionData.post_id
            );
        }
    }
</script>

<style lang="less" scoped>
    .position-message {
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        max-width: 300px;
        cursor: pointer;
    }

    .title {
        font-size: 16px;
        font-weight: 500;
    }

    .tag {
        border-radius: 4px;
        padding: 0 2px;
        margin-left: 10px;
        color: #fff;
        font-size: 12px;
    }

    .salary {
        color: #e87005;
        margin-left: 50px;
    }

    .summary {
        border-bottom: 1px solid #f0f0f0;
        margin: 6px -10px 10px -10px;
        font-size: 12px;
        color: #999;
        padding: 0 10px 8px 10px;

        span + span {
            margin-left: 20px;
        }
    }

    .msg-content {
        line-height: 1.4;
    }

    .msg-tail {
        margin: 15px -10px 0 -10px;
        padding: 10px 10px 0 10px;
        border-top: 1px solid #f0f0f0;

        span {
            max-width: 200px;
        }
    }
</style>