<template>
    <view class="c-width">
        {{item.text}}
        <picker
            :mode="item.mode || 'multiSelector'"
            :class="['c-width',
            (item.btnstyle && item.btnstyle === 'oval')?'btn-bottom-picker':'']"
            title="请选择"
            :value="defaultIdx || 0"
            :start="item.start"
            :end="item.end"
            :range="list"
            :range-key="item.key || 'name'"
            :ref="rand"
            :disabled="!isLast || isSelected"
            @change="onChange"
            @columnchange="onColChnage">
            <view v-if="item.btnstyle && item.btnstyle === 'oval'">
                <view
                    v-if="btnShowFlag && isLast"
                    class="c-btn c-im-msg-selectpop-btn-bottom"
                    :style="{
                        'background-color': item.btncolor ? item.btncolor : '#00c8c8'
                    }">点击选择</view>
            </view>
            <view v-else-if="item.btnstyle && item.btnstyle === 'inner'">
                <view
                    class="c-btn c-im-msg-selectpop-btn-bottom c-gap-top"
                    :style="{
                        'background-color': item.btncolor ? item.btncolor : '#00c8c8',
                        'position': 'static',
                        'width': '100%',
                        'left': 0,
                        'margin-left': 0
                    }">点击选择</view>
            </view>
            <view
                v-else
                class="c-btn c-gap-top c-im-msg-selectpop-btn"
                style="width:100%;">点击选择</view>
        </picker>
    </view>
</template>
<script>
/**
* @file 问诊-多列选择
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import {send} from '../../utils/log';
import * as core from '../../utils/core';
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        // 数据对象
        item: {
            'type': Object,
            'default': {}
        },
        // 是否为对话流中最后一条
        isLast: {
            'type': Boolean,
            'default': false
        }
    },
    data() {
        return {
            rand: `picker_${core.rand()}`, // trick解决data中使用id，导致小程序原生id被覆盖的问题
            list: [],
            defaultIdx: [],
            btnShowFlag: false,
            isSelected: false
        };
    },
    lifetimes: {
        attached() {
            if (this.item.mode === 'date') {
                this.initDate();
            }
            else {
                this.initMultiSelector();
            }
            if (process.env.MARS_ENV === 'h5') {
                let timer = setTimeout(() => {
                    // h5处理，延迟800ms自动弹起
                    this.$refs[this.rand].onShow();
                    this.btnShowFlag = true;
                    send({
                        type: 'o',
                        action: 'show_selectpop'
                    });
                    clearTimeout(timer);
                }, 800);
            }
            else {
                let timer = setTimeout(() => {
                    this.btnShowFlag = true;
                    send({
                        type: 'o',
                        action: 'show_selectpop'
                    });
                    clearTimeout(timer);
                }, 400);
            }
        }
    },
    methods: {
        initDate() {
            const now = new Date();
            this.defaultIdx = this.item.defaultIndex || [
                now.getFullYear(),
                now.getMonth(),
                now.getDate()
            ].join('-');
            this.list = [];
        },
        initMultiSelector() {
            this.defaultIdx = (this.item.defaultIndex || '0,0').split(/,/);
            if (this.item.list) {
                let cur = this.item.list;
                let list = [];
                this.defaultIdx.map((defidx, col) => {
                    if (col === 0) {
                        cur = cur;
                    }
                    else {
                        cur = cur[defidx].sub;
                    }
                    list.push(cur);
                });
                this.list = list;
            }
            else if (this.item.column) {
                this.list = this.item.column.map(o => o.list);
            }
        },
        // 选择列值
        onColChnage(info) {
            if (this.item.list) {
                const {
                    column,
                    value
                } = info.detail;
                let next = this.list[column + 1];
                if (next) {
                    this.list.splice(column + 1, 1, this.list[column][value].sub);
                }
            }
        },
        // 选择选项
        onChange(info) {
            let value = '';
            let name = '';
            if (this.item.mode === 'date') {
                value = info.detail.value;
                name = info.detail.value;
            }
            else {
                /* eslint-disable max-len */
                const delimiter = this.item.delimiter != null && this.item.delimiter.length >= 0 ? this.item.delimiter : ',';
                value = info.detail.value.map((v, i) => this.list[i][v].value).join(delimiter);
                name = info.detail.value.map((v, i) => this.list[i][v].name).join(delimiter);
            }
            this.isSelected = true;
            this.btnShowFlag = false;
            // 页面数据请求
            this.$emit('questionReply', {
                callbackUrl: this.item.callbackUrl,
                resetUrl: this.item.resetUrl,
                value: value,
                name: name,
                params: value
            });
            send({
                type: 'b',
                action: 'selectPopChange',
                extra: {
                    value,
                    name
                }
            });
        }
    }
};
</script>
<style lang="less">
.ad {
    position: relative;
}
.ad-icon {
    margin: .04rem .05rem 0 .05rem;
    width: .12rem;
    height: .16rem;
}
.ad-time {
    position: absolute;
    right: -.37rem;
    top: .01rem;
}
.c-im-msg-selectpop-btn-bottom {
    position: fixed;
    bottom: 40px;
    left: 50%;
    margin-left: -55px;
    width: 110px;
    border-radius: 60px;
    font-size: 16px;
    border: none;
    color: #fff;
}
.btn-bottom-picker {
    display: grid;
}
</style>