<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="text-white p-t-25 p-l-25 p-r-25" style="background-image: radial-gradient(rgb(182, 3, 17), rgb(118, 0, 12));">
                        <div class="row" style="max-width: 650px; margin: 0px auto;">
                            <div class="col">
                                <div class="row m-b-25">
                                    <div class="col text-center">
                                        <h4 class="text-warning no-margin">2022年农历新春前夕仓库运作通知</h4>
                                        <h4 class="text-warning no-margin">Chinese New Year Shipping Memo 2022</h4>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <p class="no-margin">尊敬的顾客,</p>
                                        <p class="m-b-15">Dear Valued Customers,</p>
                                        <p class="no-margin">为确保您的货物在华人农历新年前收到， 务必提前通知您的供应商安排在以下日期前把货物送到仓库:</p>
                                        <p>To ensure your goods received before the Chinese New Year Holidays, we advised the customer to inform their suppliers to arrange their goods earlier beforehand to the schedule below:</p>
                                    </div>
                                </div>
                                <div class="row m-t-10">
                                    <div class="col">
                                        <div class="tg-wrap"><table class="tg">
                                            <thead>
                                            <tr>
                                                <th class="tg-2bkf" colspan="2">仓库 WAREHOUSE</th>
                                                <th class="tg-2bkf">入仓日期 RECEIVED DATE</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td class="tg-2bkf" rowspan="2">广州<br>GUANGHZOU<br></td>
                                                <td class="tg-2bkf">西马<br>WEST MALAYSIA</td>
                                                <td class="tg-2bkf">25/12/2021</td>
                                            </tr>
                                            <tr>
                                                <td class="tg-2bkf">东马<br>EAST MALAYSIA</td>
                                                <td class="tg-2bkf">11/12/2021</td>
                                            </tr>
                                            <tr v-if="expanded">
                                                <td class="tg-2bkf" rowspan="2">义乌<br>YIWU</td>
                                                <td class="tg-2bkf">西马<br>WEST MALAYSIA</td>
                                                <td class="tg-2bkf">18/12/2021</td>
                                            </tr>
                                            <tr v-if="expanded">
                                                <td class="tg-2bkf">东马<br>EAST MALAYSIA</td>
                                                <td class="tg-2bkf">04/12/2021</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="row m-t-15" v-if="expanded">
                                    <div class="col">
                                        <div class="row m-b-20">
                                            <div class="col">
                                                <p class="no-margin">我们建议客户尽早安排送货到中国仓库，以确保货物在恶劣天气、运输延误、海关检查等情况下准时到达目的地。</p>
                                                <p>Customers are advised to arrange delivery to China warehouse as soon as possible to ensure goods reach their destination on time due to the events of Bad weather, Shipping delay, Custom inspection and etc.</p>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col">
                                                <h6 class="text-warning no-margin bold">仓库运营日期</h6>
                                                <h6 class="text-warning no-margin bold">Warehouse Operation Date</h6>
                                            </div>
                                        </div>
                                        <div class="row m-t-15 m-b-15">
                                            <div class="col">
                                                <div class="tg-wrap"><table class="tg">
                                                    <thead>
                                                    <tr>
                                                        <th class="tg-2bkf">仓库<br>WAREHOUSE</th>
                                                        <th class="tg-2bkf">仓库截止收货日期<br>LAST DAY RECEIVE GOODS</th>
                                                        <th class="tg-2bkf">仓库復工日期<br>RESUME OPERATION DATE</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    <tr>
                                                        <td class="tg-2bkf" rowspan="2">义乌<br>YIWU</td>
                                                        <td class="tg-2bkf" rowspan="2">18/01/2022</td>
                                                        <td class="tg-2bkf" rowspan="2">16/02/2022</td>
                                                    </tr>
                                                    <tr>
                                                    </tr>
                                                    <tr>
                                                        <td class="tg-2bkf" rowspan="2">广州<br>GUANGHZOU</td>
                                                        <td class="tg-2bkf" rowspan="2">18/01/2022</td>
                                                        <td class="tg-2bkf" rowspan="2">12/02/2022</td>
                                                    </tr>
                                                    <tr>
                                                    </tr>
                                                    </tbody>
                                                </table></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: -1px;">
                <div class="col text-center">
                    <div class="btn btn-block btn-danger bg-danger-darker no-border p-t-10 p-b-10" @click="expanded = !expanded"><i class="fa m-r-10" :class="[{'fa-angle-double-down': !expanded}, {'fa-angle-double-up': expanded}]"></i> Click To view {{expanded ? 'less' : 'more'}} details <i class="fa m-l-10" :class="[{'fa-angle-double-down': !expanded}, {'fa-angle-double-up': expanded}]"></i></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                expanded: false
            }
        }
    }
</script>
<style scoped>
    .tg  {border-collapse:collapse;border-spacing:0; width: 650px; margin: 0px auto; }
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
        overflow:hidden;padding:8px 20px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
        font-weight:normal;overflow:hidden;padding:8px 20px;word-break:normal;}
    .tg .tg-2bkf{background-color:#76000c;border-color:#ffffff;color:#ffffff;text-align:center;vertical-align:middle}
    @media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}
</style>