<template>
    <c-popup
        row-tile
        show-title-line
        :show="show"
        :z-index="'921'"
        :show-close="true"
        :show-close-handler="false"
        max-height="77.3%"
        height="77.3%"
        :title="title"
        border-radius="12px"
        close-icon="close-circle"
        class="rule-popup"
        stop-scroll-through
        @close="handlePopupClose"
        @masktap="handlePopupClose"
    >
        <view class="border"/>
        <c-cascader
            primary-color="#FF6050"
            max-height="auto"
            :default-value="cityObj.defaultValue"
            :column="2"
            :options="cityObj.options"
            @lastcolumnitemtap="filterChange"
        />
    </c-popup>
</template>

<script>
/**
 * @file 更多门店popup
 * @author mayifan02@baidu.com
 * @categories 业务组件
 * @tags [component]
*/

/* global Page swan  getApp */
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CCascader from '@baidu/med-ui/components/Cascader/Cascader';

export default {
    config: {
        navigationStyle: 'custom',
        component: true
    },
    components: {
        CPopup,
        CCascader
    },
    props: {
        /**
         * 是否显示
         */
        show: {
            'type': Boolean,
            'default': false
        },
        /**
         * 城市
         */
        cityObj: {
            'type': Object,
            'default': () => {
                return {};
            }
        },
        /**
         * 标题
         */
        title: {
            'type': String,
            'default': ''
        },
        /**
         * log
         */
        extra: {
            'type': Object,
            'default': () => {
                return {};
            }
        }

    },
    data() {
        return {
            screenHeight: 0,
            maxHeight: 0
        };
    },
    methods: {
        handlePopupClose() {
            /**
             * 关闭弹窗
             *
             * @event close
             */
            this.$emit('onPopupShow', 'address', false);
        },
        filterChange(e) {
            /**
             * filterChange
             * @event close
             */
            this.$emit('cityFilterChange', e);
        }
    }
};
</script>
<style lang="less" scoped>
.qa-popup {
    display: flex;
    flex-direction: column;
    height: calc(100% - 28px);
    &-head {
        width: calc(100% - 34px);
        height: 28px;
        position: absolute;
        top: 0;
        background: #fff;
        padding: 0 17px;
        z-index: 922;
        .close-wrapper {
            width: 24px;
            height: 24px;
            float: right;
        }
    }
    &-topline {
        position: relative;
        width: 100%;
        height: 4px;
        padding-top: 5px;
        &::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            display: inline-block;
            width: 33px;
            height: 4px;
            background: #EEE;
            border-radius: 3px;
        }
    }
    &-title {
        text-align: center;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #333333;
        margin-top: 20px;
        padding-left: 24px;
    }
    .scroll-view {
        height: 100%;
        max-height: 537px;
    }
}
.qa-item-wrapper {
    height: 100%;
}
.qa-item {
    margin-bottom: 24px;
}
.qa-text {
    margin-bottom: 12px;
    font-family: PingFangSC-Medium;
}
.qa-detail {
    color: #555;
}
.detail-wrap {
    display: flex;
}
.qa-img-wrap {
    display: inline-block;
    width: 28vw;
    height: 19vw;
    margin-right: 8px;
}
.qa-img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-size: cover;
}
.border {
    position: relative;
}
</style>
