<template>
    <view>
        <view class="department-sel" @tap="onBtnTap">
            <img
                v-if="item.leftIcon"
                :src="item.leftIcon"
                class="department-sel-img c-gap-right"
            >
            <view class="department-sel-info">
                <view v-if="item.title" class="department-sel-title">
                    {{ hasChange ? '您已更换为' : item.title }}
                </view>
                <view v-if="item.department" class="department-sel-sel">
                    {{ department }}
                </view>
            </view>
            <view
                v-if="item.btn"
                class="department-sel-btn c-gap-left"
                :style="{
                    'color': item.btn.color || '#555555',
                    'background': item.btn.background || '#F8F8F8',
                }"
            >
                {{ item.btn.text }}
            </view>
        </view>
        <c-popup
            :show="popupShow"
            :title="item.popupInfo.title"
            :show-close="popupParams.showClose"
            :show-close-handler="popupParams.showCloseHandler"
            :close-icon="popupParams.closeIcon"
            :show-title-line="popupParams.showTitleLine"
            :row-tile="popupParams.rowTile"
            stop-scroll-through
            :z-index="'922'"
            @close="onClose"
            @masktap="onClose"
        >
            <c-cascader
                stop-scroll-through
                max-height="calc(70vh - 50px)"
                :default-value="item.popupInfo.defaultValue"
                :options="item.popupInfo.options"
                :column="2"
                :column-width-ratio="[1, 1]"
                primary-color="#00C8C8"
                @lastcolumnitemtap="handleLastColumnItemTap"
            />
        </c-popup>
    </view>
</template>

<script>
/**
 * @file 更换科室卡片
 * @author huanghongwei
 * @categories 业务组件
 * @tags [component]
 */
import Popup from '@baidu/med-ui/components/Popup/Popup';
import Cascader from '@baidu/med-ui/components/Cascader/Cascader';
import {request} from '../../utils/request';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件的数据
         */
        item: Object
    },
    data() {
        return {
            popupShow: false,
            popupParams: {// 弹窗参数
                showClose: true,
                showCloseHandler: false,
                showTitleLine: true,
                closeIcon: 'close-circle',
                rowTile: true
            },
            department: '',
            hasChange: false
        };
    },
    created() {
        this.department = this.item.department;
    },
    methods: {
        onClose() {
            this.popupShow = false;
        },
        onBtnTap() {
            // 购药问诊弹窗在外面控制
            if (this.item.updateUrl) {
                /**
                * 传递数据
                */
                this.$emit('onUpdate', this.item);
            }
            else {
                this.popupShow = true;
            }
        },
        handleLastColumnItemTap(obj) {
            const department = obj.option.value;
            if (department === this.department) {
                return;
            }
            if (this.item.callbackurl) {
                this.onRequest(department);
            }
            else {
                /**
                * 数据改变
                */
                this.$emit('onChange', obj.option);
            }
        },
        onRequest(department) {
            this.$api.showLoading({
                mask: true,
                title: '为您更换中...'
            });
            request({
                url: this.item.callbackurl,
                data: {
                    department
                }
            }).then(res => {
                this.$api.hideLoading();
                this.department = department;
                this.hasChange = true;
                // 修改科室
                if (res.data && res.data.msgList) {
                    /**
                    * 回复
                    */
                    this.$emit('questionReply', res.data);
                }
                this.onClose();
            });
        }
    },
    components: {
        'CPopup': Popup,
        'CCascader': Cascader
    }
};
</script>
<style lang="less" scoped>
    .department-sel {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        &-img {
            flex-shrink: 0;
            height: 44px;
            width: 44px;
        }
        &-info {
            width: calc(100% - 124px);
            font-size: 14px;
        }
        &-title {
            color: #333333;
        }
        &-sel {
            width: 100%;
            color: #00C8C8;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        &-btn {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            height: 28px;
            padding: 0 12px;
            font-size: 13px;
            border-radius: 14px;
        }
    }
</style>


