<template>
    <div>

        <a-row class="header-rw">
            <a-col :span="4" class="title-head-logo">
                <img src="~@/assets/logo.svg" class="logo" alt="logo"></img>
            </a-col>
            <a-col :span="1" class="title-head-divider">
                <div class="divider"></div>
            </a-col>
            <a-col :span="2" class="title-header-tip">商家中心</a-col>
            <a-col :span="15"></a-col>
            <a-col :span="2" class="title-header-tip">
                <a-button type="link" block @click="logout">
                    注销
                </a-button>
            </a-col>
        </a-row>
        <div class="main-container">
            <a-tabs @change="handleChangeTab" type="card">
                <a-tab-pane tab="酒店" :forceRender="true" key="1">
                    <div class="main-list-card">
                        <div class="top-content">
                            <div class="store-list-title">
                                门店列表<a-icon @click="refreshData" class="redo-refresh" type="redo" />
                            </div>
                            <div style="flex:1;height:1px;"></div>
                            <div class="new-store-btn">
                                <a-button type="link" block @click="newHtl">
                                    新建门店
                                </a-button>
                            </div>
                        </div>
                        <!-- 条件搜索 -->
                        <div class="search-wrapper">
                            <a-input-search v-model="keywords" placeholder="姓名/手机/地址" enter-button="查询" size="default"
                                @search="onSearch" />
                        </div>
                        <a-divider>门店列表</a-divider>
                        <div class="store-list-wrapper">
                            <div class="list-items" v-if="list.length > 0">
                                <div class="list-item" v-for="item in list" :key="item.id">
                                    <!-- 图片 -->
                                    <div class="img-hotel no-img" v-if="!item.ewmLogo">暂无照片</div>
                                    <div class="img-hotel" v-else>
                                        <img :src="item.ewmLogo" alt="">
                                    </div>
                                    <div class="right-temp">
                                        <div class="hotel-name"> {{ item.name }} </div>
                                        <div class="hotel-address">{{ item.address }}</div>
                                        <div class="hotel-status">
                                            <div v-if="item.checkStatus == 0" class="wait-check">待审核</div>
                                            <div v-if="item.checkStatus == 1" class="check-success">
                                                <a-button type="link" @click="enter($event, item)">进入管理</a-button>
                                            </div>
                                            <div v-if="item.checkStatus == 2" class="check-faild">审核未通过</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <a-empty v-else />
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

        <j-modal title="新建门店" :width="1000" :visible="visible" @cancel="handleCancel" :mask="true" @ok="frmsubmit"
            :fullscreen="false" draggable class="j-super-query-modal" style="top:5%;max-height: 95%;">
            <new-htl-frm ref="htlFrm" @addSuccess="visible = false">

            </new-htl-frm>
        </j-modal>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import newHtlFrm from './newHotelForm.vue'
import { hotelList } from '../../api/hotel'
export default {
    components: {
        newHtlFrm
    },
    data() {
        return {
            index: 1,
            list: [],
            visible: false,
            pageNo: 1,
            keywords: ''
        }
    },
    mounted() {
        this.getStoreList()
    },
    methods: {
        ...mapActions(["Logout"]),
        getStoreList() {
            hotelList({
                pageNo: this.pageNo,
                pageSize: 20,
                key: this.keywords
            }).then(res => {
                console.log(res)
                if (res.code == 200 && res.result && res.result.records) {
                    this.list = res.result.records
                }
            })
        },
        handleChangeTab() {
            // this.$refs[`editableTable${key}`].resetScrollTop()
        },
        // 搜索事件
        onSearch() {
            this.getStoreList()
        },
        // 刷新门店
        refreshData() {

        },
        // 新建酒店按钮
        newHtl() {
            this.visible = true
        },
        // 模态框取消
        handleCancel() {
            this.visible = false
        },
        frmsubmit() {
            this.$refs.htlFrm.handleSubmit(1)
        },
        // 进入管理
        enter(event, item) {
            localStorage.setItem("storeInfo", JSON.stringify(item))
            this.$router.push({ path: '/' })
        },
        // 注销
        logout() {
            const that = this

            this.$confirm({
                title: '提示',
                content: '真的要注销登录吗 ?',
                onOk() {
                    return that.Logout({}).then(() => {
                        // update-begin author:scott date:20211223 for:【JTC-198】退出登录体验不好
                        //that.$router.push({ path: '/user/login' });
                        window.location.reload()
                        // update-end author:scott date:20211223 for:【JTC-198】退出登录体验不好
                    }).catch(err => {
                        that.$message.error({
                            title: '错误',
                            description: err.message
                        })
                    })
                },
                onCancel() {
                },
            });
        }
    }
}
</script>

<style scoped>
.logo {
    height: 54px !important;
    vertical-align: top !important;

    border-style: none !important;
    margin-top: 5px;
}

.title-head-logo {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: end;
}

.title-head-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-rw {
    height: 64px;
    margin-top: 5px;
    line-height: 64px;
    border-top: 1px solid #CCCCCC88;
    border-bottom: 1px solid #CCCCCC88;
}

.divider {
    width: 1px;
    height: 44px;
    background-color: #CCCCCCCC;
    margin-top: 10px;
}

.title-header-tip {
    color: #888888;
}

.main-container {
    width: 70%;
    margin: 40px auto;
    padding-bottom: 10px;
}

.ant-tabs {
    width: 100% !important;
}

.main-list-card {
    display: flex;
    flex-direction: column;
    width: 98%;
    margin: 0 auto;
    height: 50vh;
    overflow-y: auto;
    border-radius: 5px;
    box-shadow: 0 0 5px 5px #EEEEEECC;
    margin-bottom: 10px;
    overflow: hidden;
}

.ant-tabs .ant-tabs-top-content>.ant-tabs-tabpane,
.ant-tabs .ant-tabs-bottom-content>.ant-tabs-tabpane {
    padding-bottom: 10px !important;
}

.redo-refresh {
    cursor: pointer;
}

.top-content {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

.search-wrapper {
    width: 30%;
    padding: 0 10px;

}

.store-list-wrapper {
    flex: 1;

    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

}

.list-items {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
}

.list-item {
    width: 40%;
    height: 120px;
    margin: 10px 50px;
    display: flex;
    padding: 8px;
    border: 1px solid #CCCCCC88;
    border-radius: 6px;
}

.list-item:hover {
    border: none;
    box-shadow: 0 0 5px 5px #EEEEEECC;
}

.img-hotel {
    width: 45%;
    height: 90%;
    margin-right: 10px;
}

.no-img {
    background-color: #AAAAAA;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

.img-hotel img {
    width: 100%;
    height: auto;
    max-height:100%;
}

.hotel-name {
    color: #666666;
}

.hotel-address {
    display: flex;
    align-items: center;
    color: #aaaaaa;
    flex: 1;
}

.right-temp {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.divi {
    flex: 1;
}

.hotel-status {
    width: 100%;
    text-align: right;
}

.wait-check {
    color: #aaaaaa;
}

.check-faild {
    color: #A00;
}
</style>
