<template>
    <view>
        <view class="union-wrap-title">
            <view
                class="union-title"
                :style="titleStyle"
            ><text
                v-if="item.required && requireShow"
                class="c-color-mall c-gap-right-mini c-inline-block"
            >*</text>{{ item.question }}</view>
            <view class="option-wrap">
                <!-- eslint-disable max-len -->
                <view
                    v-for="(option,idx) in item.options"
                    :key="idx"
                    :class="[option.key === unionValue.selValue ? (isMedClinc ? 'c-color-main' : 'c-color-mall') : 'c-color', 'union-option-item',
                             option.key === unionValue.selValue && noSelectedIcon ? 'red-bg' : '']"
                    :style="itemStyle"
                    @tap="onOptionTap(item.qid, option)"
                >
                    {{ option.text }}
                    <image
                        v-if="option.key === unionValue.selValue && !noSelectedIcon"
                        :src="isMedClinc ?
                            'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2568846549,3943030196&fm=179&app=35&f=PNG?w=54&h=54&s=29C5336E4B17A61FB04BBF1E020090CD'
                            : 'https://med-fe.cdn.bcebos.com/specialDisease/other/checkin.png'"
                        class="sel-icon"
                    />
                </view>
                <!-- eslint-enable max-len -->
            </view>
        </view>
        <view v-if="moreinfoShow">
            <view
                v-if="curOption && curOption.moreinfoType
                    && curOption.moreinfoType === 'multiBtn' && curOption.multilBtns.length"
                class="union-btns-wrap"
            >
                <!-- eslint-disable max-len -->
                <view
                    v-for="(btn,index) in curOption.multilBtns"
                    :key="index"
                    :class="(isblue || isMedClinc) ?
                        ['multibtns-blue-item', curOption.defaultValue === btn.key ? 'multibtns-blue-selected' : '', btn.disable ? 'multibtns-blue-disbaled' : ''] :
                        isRed ?
                            ['multibtns-red-item', curOption.defaultValue === btn.key ? 'multibtns-red-selected' : '', btn.disable ? 'multibtns-red-disbaled' : ''] :
                            ['multibtns-item', curOption.defaultValue === btn.key ? 'multibtns-selected' : '', btn.disable ? 'multibtns-disbaled' : '']"
                    @tap="onMultibtnTap(item.qid, btn)"
                >
                    {{ btn.text }}
                </view>
                <!-- eslint-enable max-len -->
            </view>
            <view
                v-else-if="curOption && curOption.moreinfoType
                    && curOption.moreinfoType === 'popup'"
            />
            <view
                v-else
                class="union-more-wrap"
                :style="{
                    'margin-top': textMarginTop,
                    'background': textBackground,
                    'border-radius': textBorderRadius,
                }"
            >
                <textarea
                    class="union-textarea"
                    :maxlength="200"
                    cursor="-1"
                    :value="value"
                    :placeholder="curOption.placeHolder || ''"
                    placeholder-class="union-input-ph"
                    auto-height="true"
                    :style="{
                        color: textColor,
                        background: textBackground,
                        'line-height': textLineHeight
                    }"
                    @input="onDataChange($event, item.qid)"
                ></textarea>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 联动输入
 * @author huanghongwei
 * @categories 业务组件
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件数据
         */
        item: {
            type: Object,
            default() {
                return {};
            }
        },
        /**
         * 标题加粗
         */
        titlebold: {
            type: String,
            default: 'normal'
        },
        /**
         * 是否是在item中的第一个
         */
        index: {
            type: Number,
            default: 1
        },
        /**
         * 是否为开药门诊
         */
        isMedClinc: {
            type: Boolean,
            default: true
        },
        idCard: {
            type: String,
            default: ''
        },
        isblue: {
            type: Boolean,
            default: false
        },
        isRed: {
            type: Boolean,
            default: false
        },
        requireShow: {
            type: Boolean,
            default: false
        },
        titleStyle: {
            type: Object
        },
        itemStyle: {
            type: Object
        },
        // 不展示选中的对勾图标
        noSelectedIcon: {
            type: Boolean,
            default: false
        },
        textMarginTop: {
            type: String,
            default: '10px'
        },
        textBackground: {
            type: String,
            default: '#F8F8F8'
        },
        textBorderRadius: {
            type: String,
            default: '5px'
        },
        textColor: {
            type: String,
            default: ''
        },
        textLineHeight: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            unionValue: {
                selValue: '',
                moreinfo: ''
            },
            value: '',
            moreinfoShow: false,
            curOption: null,
            idcardSex: '-1' // 预存的身份证性别
        };
    },
    lifetimes: {
        attached() {
            this.unionValue.selValue = this.item.defaultValue;
            if (this.item.options && this.item.options.length > 0) {// 默认中的值如果有更多信息，则展现
                for (let i = 0; i < this.item.options.length; i++) {
                    if (this.item.options[i].key === this.item.defaultValue && this.item.options[i].moreinfo) {
                        this.moreinfoShow = true;
                        this.curOption = this.item.options[i];
                        this.value = this.item.options[i].defaultValue || '';
                        if (this.item.options[i].defaultValue) {// 是否妊娠多按钮选项默认选中值
                            this.unionValue.moreinfo = this.item.options[i].defaultValue;
                        }
                    }
                }
            }
            this.idCard && this.updateMulti(this.sexVerify(this.idCard));
        }
    },
    watch: {
        'item.defaultValue'(val) {
            this.unionValue.selValue = val;
        }
    },
    methods: {
        onOptionTap(qid, option) {
            if (option.moreinfo && option.moreinfoType && option.moreinfoType === 'popup') {
                this.curOption = null;
                this.moreinfoShow = false;
                /**
                 * 弹窗表单
                 */
                this.$emit('popupform');
                return;
            }
            if (option.moreinfo) {
                this.curOption = option;
                this.moreinfoShow = true;
                this.unionValue.moreinfo = option.defaultValue || '';
                this.updateMulti(this.idcardSex);
            }
            else {
                this.moreinfoShow = false;
                this.curOption = null;
                this.unionValue.moreinfo = '';
            }
            this.unionValue.selValue = option.key;
            let newvalue = Object.assign({}, this.unionValue);
            /**
             * 数据更改
             */
            this.$emit('unionchange', qid, newvalue);
        },
        onDataChange(e, qid) {
            this.unionValue.moreinfo = e.detail.value;
            let newvalue = Object.assign({}, this.unionValue);
            /**
             * 数据更改
             */
            this.$emit('unionchange', qid, newvalue);
        },
        onMultibtnTap(qid, btn) {
            if (btn.disable) {
                return;
            }
            this.setMulti(qid, btn.key);
        },
        setMulti(qid, key) {
            this.$set(this.curOption, 'defaultValue', key);
            // 多按钮选择
            this.unionValue.moreinfo = key;
            let newvalue = Object.assign({}, this.unionValue);
            /**
             * 数据更改
             */
            this.$emit('unionchange', qid, newvalue);
        },
        checkSetMulti() {
            if (this.moreinfoShow && this.curOption && this.curOption.multilBtns) {
                this.curOption.multilBtns.forEach(btn => {
                    if (this.curOption.defaultValue === btn.key && btn.disable === true) {
                        this.setMulti(this.item.qid, 0);
                    }
                });
            }
        },
        resetMultiBtns() {
            if (this.moreinfoShow && this.curOption && this.curOption.multilBtns) {
                this.curOption.multilBtns.forEach(btn => {
                    this.$set(btn, 'disable', false);
                });
            }
        },
        updateMulti(flag) {
            // flag   1：女   0：男   -1：身份证格式错误
            this.idcardSex = flag;
            if (flag !== '-1') {
                let isReset = 0;
                if (this.moreinfoShow && this.curOption && this.curOption.multilBtns) {
                    this.curOption.multilBtns.forEach(btn => {
                        if (btn.sex.split('').indexOf(flag) === -1) {
                            this.$set(btn, 'disable', true);
                        }
                        else {
                            this.$set(btn, 'disable', false);
                            isReset += 1;
                        }
                    });
                }
                if (isReset === 1) {
                    this.curOption.multilBtns && this.curOption.multilBtns.forEach(btn => {
                        btn.disable === false;
                    });
                }
                this.checkSetMulti();
            }
            else {
                this.resetMultiBtns();
            }
        },
        // 判断性别
        sexVerify(idcard) {
            let flag = '-1';
            let sex;
            let lenstr = idcard;
            let len = lenstr.length;
            if (len === 15 || len === 18) {
                if (len === 15) {
                    sex = lenstr.split('').pop();
                }
                if (len === 18) {
                    sex = lenstr.substring(16, 17);
                }
                flag = sex % 2 === 0 ? '1' : '0';
            }
            return flag;
        }
    }
};
</script>
<style lang="less" scoped>
// .union-wrap {
//     padding: 0 13px 10px;
// }
// .union-wrap-first {
//     padding: 10px 13px;
// }
.red-bg {
    font-family: PingFangSC-Medium;
    background: rgba(253, 80, 62, 0.15) !important;
}

.union-wrap-title {
    font-family: PingFang-SC-Regular;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.union-title {
    font-family: PingFangSC-Medium;
    color: #1f1f1f;
}
// .union-title-bold {
//     font-family: PingFang-SC-Medium;
//     font-size: 17px;
//     color: #333333;
// }

.union-option-item {
    position: relative;
    margin-left: 10px;
    width: 50px;
    height: 30px;
    background: #f8f8f8;
    border-radius: 4px;
    line-height: 30px;
    text-align: center;
}
// .union-option-item-selected {
//     position: relative;
//     margin-left: 10px;
//     width: 50px;
//     height: 30px;
//     background: #F8F8F8;
//     border-radius: 4px;
//     line-height: 30px;
//     text-align: center;
//     color: #00c8c8;
// }
.option-wrap {
    display: flex;
    flex-direction: row;
}

.union-more-wrap {
    margin-top: 10px;
    width: 100%;
    height: 38px;
    background: #f8f8f8;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: scroll;
}

.union-more-wrap-two {
    margin-top: 10px;
    width: 100%;
    height: 70px;
    background: #f8f8f8;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.union-textarea {
    width: calc(100% - 22px);
    height: 15px;
    outline: none;
    border: none;
    background: #f8f8f8;
    font-size: 14px;
    // color: #00c8c8;
    resize: none;
    max-height: 32px;
}

.union-textarea-two {
    width: calc(100% - 22px);
    min-height: 40px;
    max-height: 40px;
    outline: none;
    border: none;
    background: #f8f8f8;
    resize: none;
}

.union-input-ph {
    font-size: 14px;
    line-height: 15px;
    color: #b8b8b8;
    font-family: PingFangSC-Regular;
    letter-spacing: 0;
}

textarea::-webkit-input-placeholder {
    color: #b8b8b8;
    font-size: 14px;
}

.selected-color {
    color: #00c8c8;
}

.sel-icon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
}

.union-btns-wrap {
    margin-top: 10px;
    display: flex;
}

.multibtns-blue-item {
    flex: 1;
    border: 0;
    border-radius: 4px;
    background: #f0f0f0;
    height: 30px;
    font-size: 14px;
    color: #444;
    text-align: center;
    line-height: 30px;
    margin-left: 8px;

    &:nth-child(1) {
        margin-left: 0;
    }
}

.multibtns-red-item {
    flex: 1;
    border: 1px solid #f5f5f5;
    border-radius: .09rem;
    background: #f5f5f5;
    height: .36rem;
    font-size: .16rem;
    color: #1f1f1f;
    text-align: center;
    line-height: .36rem;
    margin-left: .08rem;

    &:nth-child(1) {
        margin-left: 0;
    }
}

.multibtns-item {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    height: 30px;
    font-size: 14px;
    color: #555;
    text-align: center;
    line-height: 30px;
    margin-left: 8px;

    &:nth-child(1) {
        margin-left: 0;
    }
}

.multibtns-selected {
    border: 1px solid #fd503e;
}

.multibtns-blue-selected {
    color: #17bebb;
    background: #e0f7f8;
}

.multibtns-red-selected {
    background: #ffeded;
    color: #fd503e;
    border: 1px solid #fd503e;
}

.multibtns-red-disbaled {
    background: #ccc;
}

.multibtns-blue-disbaled {
    color: #b8b8b8;
}

.multibtns-disbaled {
    background: #ccc;
}
</style>
