<template>
    <div>
        <div class="row" v-if="generalModel != null">
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Mã đơn hàng</div>
                <div class="field-value">{{ generalModel.Code }}</div>
            </div>
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Trạng thái</div>
                <div class="field-value">{{ generalModel.StatusStr }}</div>
            </div>
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">TT vật lý</div>
                <div class="field-value">{{ generalModel.PhysicalStatusStr }}</div>
            </div>
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Khách hàng</div>
                <div class="field-value">
                    <router-link :to="{ name: 'crm-customer-detail', params: { id: generalModel.CustomerId } }"
                        target="_blank">
                        {{ generalModel.CustomerName }}
                    </router-link>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Ngày tạo</div>
                <div class="field-value">{{ generalModel.CreatedTimeDisplay }}</div>
            </div>
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Ngày cập nhật</div>
                <div class="field-value">{{ generalModel.UpdatedTimeDisplay }}</div>
            </div>
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Tuyến</div>
                <div class="field-value">{{ generalModel.RouteName }}</div>
            </div>
            <div class="field col-lg-3 col-md-4 col-sm-6 mb-2">
                <div class="field-label">Phụ trách</div>
                <div class="field-value">{{ generalModel.PicUserName }}</div>
                <div class="field-value"
                    v-if="generalModel.PicUserName == null || generalModel.PicUserName.length == 0">--</div>
            </div>

        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    generalModel: Object
});
</script>

<style scoped>
.field-label {
    font-size: .8rem;
    font-weight: 300;
    color: #000;
}

.field-value {
    font-size: .96rem;
    font-weight: 500;
    color: #000;
}
</style>