<template>
    <view>
        <!-- 自定title -->
        <view v-if="item.appendTitle" class="append-title-style c-flex c-font-big">
            <view>{{ item.appendTitle }}</view>
            <view
                v-if="item.popupOption"
                :class="['add-patient', isMedClinc ? 'c-color-main' : '']"
                @tap="onAdd(item.popupOption)"
            >
                <c-icon
                    :class="[isMedClinc ? 'c-color-main' : 'c-color-default', 'c-gap-right-small']"
                    name="plus"
                    font-size="15px"
                />
                {{ item.popupOption.text }}
            </view>
        </view>
        <view v-if="item.innerTitle && (item.qid === 'diseaseinfo' || item.qid === 'diagnosisInfo' || item.qid === 'disease_name')" class="c-flex textarea-info-inner-title">         
            <view>
                <text :class="['c-inline-block', isMedClinc ? 'c-font-normal c-font-pingfang' : 'c-font-big-less c-color-title c-font-wb']">
                    <text v-if="item.required && requireShow" class="c-color-mall c-gap-right-mini c-inline-block">*</text>{{ item.innerTitle }}
                </text>
                <text
                    v-if="item.innerSubTitle" 
                    :class="[isMedClinc ? 'c-font-normal c-color-gray' : 'c-font-medium-less textarea-innerSubTitle']"
                >{{ item.innerSubTitle }}</text>
            </view>
            <view
                v-if="item.op"
                class="c-color-gray c-font-normal"
                @tap="onAdd(item.popupOption)"
            >
                <text 
                    v-if="isMedClinc" 
                    class="m-icon m-icon-add-solid c-gap-right-small c-color-default"
                    style="font-size: 12px"
                />
                <c-icon
                    v-if="!isMedClinc"
                    name="add-solid"
                    font-size="12px"
                    class="c-gap-right-small c-color-title c-inline-block"
                />
                <text 
                    :style="{'font-size': !isMedClinc ? '.15rem' : '', 'color': !isMedClinc ? '#525252' : ''}"
                    :class="{'c-inline-block': !isMedClinc}"
                >{{ item.op.text }}</text>
            </view>
        </view>
        <view
            class="textarea-wrap c-gap-inner-left-large c-gap-inner-right-large"
            :style="{
                paddingTop: isMedClinc ? '' : '0',
                paddingBottom: isMedClinc ? '' : '0',
            }"
        >
            <view
                v-if="tagSelect && isMedClinc"
                class="tag-select"
            >
                <view
                    :class="{
                        'tag-select__inner--open': tagSelectOpen,
                    }"
                    class="tag-select__inner"
                >
                    <c-tags
                        :options="tagSelect.data"
                        :type="tagSelect.type"
                        :column="(tagSelect.column || 3) * 1"
                        item-height="33px"
                        primary-color="#FD503E"
                        :selected-bold="false"
                        :selected-border="false"
                        background-color-selected="#FFE6E6"
                        border-radius="4px"
                        padding="5px"
                        @itemtap="handleTagSelect"
                    />
                </view>
                <view
                    v-if="tagSelect.data && tagSelect.data.length > 6"
                    class="tag-select__spread c-color-gray c-font-normal c-gap-inner-top-small c-gap-inner-bottom-small"
                    @tap="onTagSelectSpread"
                >
                    <view>{{ moreText }}</view>
                    <c-icon
                        class="c-gap-left-small"
                        :name="tagSelectOpen ? 'up' : 'down'"
                        font-size="13px"
                    />
                </view>
            </view>
            <!-- 处方开药的tags -->
            <view v-if="tagSelect && !isMedClinc" class="tag-select c-gap-top-middle">
                <view>
                    <view 
                        v-for="(tag, index) in tagSelectDataShow" 
                        :key="index"
                        class="c-inline-block c-gap-right-middle c-gap-bottom-large c-font-normal"
                    >
                        <view :class="['tag-select__item', tag.selected ? 'tag-select__selected' : '']" @tap="handleTagItem(tag, index)">
                            {{ tag.text }}
                        </view>
                    </view>
                    <view 
                        v-if="tagSelect.data && tagSelect.data.length > 6"
                        class="c-inline-block c-gap-right-middle c-gap-bottom-large tag-select__item tag-select__item__icon"
                        @tap="handleIconTap"
                    >
                        <c-icon :font-size="14" :name="tagSelectOpen ? 'shangjiantou' : 'xiajiantou'"/>
                    </view>
                </view>
            </view>
            <view 
                v-if="innerShowTextArea" 
                class="textarea-pad"
                :class="[isMedClinc ? '' : 'c-gap-bottom-large']"
                :style="{
                    'border-radius': borderRadius,
                }"
            >
                <textarea
                    class="textarea-item"
                    :style="{
                        'font-size': fontSize,
                        'color': color,
                    }"
                    :maxlength="item.maxlength * 1 || 200"
                    cursor="-1"
                    :value="value"
                    :placeholder="item.placeHolder || ''" 
                    placeholder-class="textarea-ph"
                    @input="onDataChange($event, item.qid)"
                ></textarea>
            </view>
        </view>
        <!-- 弹窗 -->
        <c-popup
            :show="popupShow"
            :title="popupInfo.title"
            :show-close="popupInfo.showClose"
            :show-close-handler="popupInfo.showCloseHandler"
            :close-icon="popupInfo.closeIcon"
            :show-title-line="popupInfo.showTitleLine"
            :title-style="{color: '#1f1f1f'}"
            :border-radius="popupInfo.borderRadius"
            :close-icon-size="popupInfo.iconSize"
            :min-height="popupInfo.minHeight"
            :z-index="'921'"
            @close="onClose"
            @masktap="onClose"
        >
            <view 
                v-if="popupInfo.content && popupInfo.content.type 
                    && popupInfo.content.type === 'diseaseHistory' 
                    && popupInfo.content.list && popupInfo.content.list.length > 0"
                class="history-disease-wrap"
                :style="{
                    'padding-top': popupPaddingTop,
                }"
            >
                <view 
                    v-for="(o,i) in popupInfo.content.list"
                    :key="i"
                    class="history-disease-wrap-item"
                    :style="{
                        'margin': popupItemMargin,
                        'border-radius': popupItemBorderRadius,
                        'height': popupItemHeight,
                        'line-height': popupItemLineHeight,
                        'font-size': popupItemFontSize,
                        'color': popupItemColor,
                        'backgorund': popupItemBackgorund,
                    }"
                    @tap="onItemTap(item.qid, o)"
                >
                    {{ o.preText }}{{ o.text }}
                </view>
            </view>
        </c-popup>
    </view>
</template>

<script>
/**
* @file text-area输入
* @author huanghongwei
* @categories 患者信息收集text-area输入
* @tags [component]
*/
/* global getCurrentPages swan */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import CTags from '@baidu/med-ui/components/Tags/Tags';
export default {
    config: {
        component: true
    },
    props: {
        /**
        * item:textarea的相关参数
        * maxlength：最大长度
        * placeHolder: 占位
        */
        item: {
            type: Object,
            default() {
                return {};
            }
        },
        isMedClinc: {
            type: Boolean,
            default: true
        },
        requireShow: {
            type: Boolean,
            default: false
        },
        // TextArea的圆角大小
        borderRadius: {
            type: String,
            default: '.05rem'
        },
        fontSize: {
            type: String
        },
        color: {
            type: String
        },
        popupPaddingTop: {
            type: String,
            default: '.15rem'
        },
        popupItemMargin: {
            type: String,
            default: '0 10px 10px 0'
        },
        popupItemBorderRadius: {
            type: String,
            default: '6px'
        },
        popupItemHeight: {
            type: String,
            default: '34px'
        },
        popupItemLineHeight: {
            type: String,
            default: '34px'
        },
        popupItemFontSize: {
            type: String,
            default: '14px'
        },
        popupItemColor: {
            type: String,
            default: '#333'
        },
        popupItemBackgorund: {
            type: String,
            default: '#333'
        }
    },
    data() {
        return {
            value: '',
            popupShow: false,
            popupInfo: {},
            tagSelect: '',
            tagSelectOpen: false,
            innerShowTextArea: true,
            moreText: '展开',
            tagSelectDataShow: null,
        };
    },
    components: {
        CPopup,
        CIcon,
        CTags
    },
    lifetimes: {
        attached() {
            this.value = this.item.defaultValue;
            this.tagSelect = this.item.tagSelect;
            this.tagSelectDataShow = this.tagSelect.data.slice(0, 6);
        }
    },
    created() {
        this.innerShowTextArea = this.isMedClinc;
        if (this.item.defaultValue) {
            this.innerShowTextArea = true;
        }
    },
    methods: {
        onDataChange(e, qid) {
            this.value = e.detail.value;
            /**
             * 数据更改
             */
            this.emitDataChange(qid);
        },
        emitDataChange(qid = this.item.qid) {
            let value = this.value;
            if (this.tagSelect && Array.isArray(this.tagSelect.data)) {
                let selectedValue = [];
                // this.tagSelect.data.map(item => item.text !== '其他' && item.selected && selectedValue.push(item.text));
                this.tagSelect.data.map(item => {
                    if (item.text === '其他' && !item.selected) {
                        value = '';
                    }
                    if (item.text !== '其他' && item.selected) {
                        selectedValue.push(item.text);
                    }
                });
                if (selectedValue.length) {
                    // this.selectedPlaceholder = `已选中：${selectedValue.join('、')}`; // 已选中文字提示
                    value = selectedValue.join(';') + (selectedValue.includes(value) ? '' : value && `;${value}`);
                }
            }
            this.addLocalStorage('selectedText', value);
            /**
             * 数据更改通知外部
             */
            this.$emit('datachange', qid, value);
        },
        onAdd(o) {
            this.popupInfo = o.popup;
            this.popupShow = true;
        },
        onClose() {
            this.popupShow = false;
        },
        onItemTap(qid, o) {
            this.value = o.text;
            this.tagSelectOpen = true;
            this.moreText = '收起';
            
            // 如果是处方购药逻辑
            if (!this.isMedClinc) {
                // 历史主诉疾病点击，谈起输入框，展开，选中其他
                this.innerShowTextArea = true;
                this.$set(this.tagSelect.data[this.tagSelect.data.length - 1], 'selected', true);
            }

            this.onClose();
            /**
             * 数据更改
             */
            this.emitDataChange(qid);
        },
        handleTagSelect(obj) {

            if (obj.option.text === '其他' && !this.isMedClinc) {
                this.innerShowTextArea = obj.option.selected ? false : true;
            }

            let options = JSON.parse(JSON.stringify(this.tagSelect.data));
            if (options[obj.optionIndex].selected) {
                options[obj.optionIndex].selected = false;
                // this.$set(this.tagSelect.data[obj.optionIndex], 'selected', false);
            }
            else {
                options[obj.optionIndex].selected = true;
                // this.$set(this.tagSelect.data[obj.optionIndex], 'selected', true);
            }
            this.$set(this.tagSelect, 'data', options);
            /**
             * 数据更改
             */
            this.emitDataChange();
        },
        onTagSelectSpread() {
            this.tagSelectOpen = !this.tagSelectOpen;
            this.moreText = this.tagSelectOpen ? '收起' : '展开';
        },
        addLocalStorage(key, value) {
            if (process.env.MARS_ENV === 'h5') {
                window.localStorage.setItem(key, value);
            }
            if (process.env.MARS_ENV === 'swan') {
                swan.setStorageSync(key, value);
            }
        },
        // 处方药信息登记
        handleTagItem(obj, index) {
            if (obj.text === '其他' && !this.isMedClinc) {
                this.innerShowTextArea = obj.selected ? false : true;
            }
            let options = JSON.parse(JSON.stringify(this.tagSelect.data));
            if (options[index].selected) {
                options[index].selected = false;
            }
            else {
                options[index].selected = true;
            }
            this.$set(this.tagSelect, 'data', options);
            if (!this.tagSelectOpen) {
                this.tagSelectDataShow = this.tagSelect.data.slice(0, 6);
            } else {
                this.tagSelectDataShow = this.tagSelect.data;
            }
            this.emitDataChange();
        },
        handleIconTap() {
            if (!this.tagSelectOpen) {
                this.tagSelectOpen = true;
                this.tagSelectDataShow = this.tagSelect.data;
            } else {
                this.tagSelectOpen = false;
                this.tagSelectDataShow = this.tagSelect.data.slice(0, 6);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.textarea-margin {
    margin: 0 17px;
}
.append-title-style {
    margin: 15px 17px 10px;
}
.textarea-wrap {
    background: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
    padding: 15px 12px;
}
.textarea-innerSubTitle {
    color: #b8b8b8;
}
.tag-select {
    // margin-bottom: -.1rem;
    &__inner {
        max-height: 80px;
        overflow: hidden;
        &--open {
            max-height: none;
        }
    }
    &__spread {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    &__item {
        background: #F5F5F5;
        padding: .03rem .1rem;
        border-radius: .15rem;
        color: #525252;
        max-width: 1.2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &__icon {
            height: .28rem;
            box-sizing: border-box;
        }
    }
    &__selected {
        color: #FD503F;
        background: rgba(253,80,62,0.15);
        font-family: PingFangSC-Medium;
    }
}
.textarea-pad {
    background: #F5F5F5;
    overflow: hidden;
    border-radius: .05rem;
}
.textarea-item {
    margin: 15px 12px;
    width: calc(100% - 24px);
    height: 40px;
    outline: none;
    border: none;
    background: #F5F5F5;
    resize:none;
    border-radius: .05rem;
}
.textarea-ph {
    font-size: 14px;
    line-height: 19px;
    color: #B8B8B8;
    font-family: PingFangSC-Regular;
    letter-spacing: 0;
}
textarea::-webkit-input-placeholder {
    color: #B8B8B8;
    font-size: 14px;
    line-height: 19px;
}
.c-flex {
    display: flex;
    justify-content: space-between;
}
.add-patient {
    color: #00C8C8;
    font-family: PingFang-SC-Regular;
    font-size: 14px;
}
.history-disease-wrap {
    max-height: 500px;
    overflow: auto;
    padding: 15px 0 5px;
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &-item {
        max-width: 100%;
        padding: 0 15px;
        margin: 0 10px 10px 0;
        background: #F6F6F6;
        color: #333333;
        border-radius: 6px;
        height: 34px;
        line-height: 34px;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.textarea-info-inner-title {
    color: #1f1f1f;
    padding: .12rem .12rem 0 .12rem;
    margin-bottom: .05rem;
}
.c-font-pingfang {
    font-family: PingFangSC-Medium;
}
</style>
