<template>
    <view class="form-row c-gap-top-large">
        <view class="c-color-title c-font-normal form-select-title">
            <view class="need-tip">*</view>{{ form.title }}</view>
        <view>
            <!-- 省市 -->
            <view v-if="form.type === 'multiSelect'">
                <picker
                    class="form-select"
                    mode="multiSelector"
                    :value="data.columnData"
                    :range="areaData"
                    range-key="name"
                    :title="form.msg"
                    @columnchange="multiColumnChange"
                    @change="multiSelectChange($event, formIndex)"
                    @cancel="selectCancel"
                >
                    <view 
                        :class="['form-select-text', form.value ? 'c-color-normal' : 'c-color-gray']"
                        @tap="selectTap"
                    >
                        {{ data.value || data.placeholder }}
                        <c-icon
                            name="right"
                            font-size="14px"
                            class="form-select-arrow c-color-gray"
                        />
                    </view>
                </picker>
            </view>
            <!-- radio选择框 -->
            <view 
                v-if="data.type == 'radio'"
                class="form-radio-wrap c-font-normal"
            >
                <view 
                    v-for="(radioItem, radioIndex) in data.list"
                    :key="radioIndex"
                    :class="['form-radio', data.value === radioItem.value ? 'form-radio-selected' : 'form-radio-default']"
                    @tap.stop="radioChange($event, formIndex, radioItem)"
                >
                    {{ radioItem.name }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 表单item
 * @author  zhangqian51@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
/* eslint-disable */
/* global Page swan  getApp */
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import * as Log from '@utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CIcon
    },
    props: {
        /* form */
        form: {
            type: Object,
            default: () => {}
        },
        /* 当前顺序 */
        formIndex: {
            type: Number
        },
        /* 当前顺序 */
        showArea: {
            type: Boolean
        }
    },
    data() {
        return {
            data: {},
            areaData: [],
            address: {}
        };
    },
    watch: {
        showArea(newVal, oldVal) {
            if (!newVal && this.form.type !== 'multiSelect') {
                this.$set(this.data, 'value', '');
            }
        }
    },
    created() {
        this.data = this.form;
        this.data.list = this.form.areaData || this.form.numData || this.form.importData;
        if (this.form && this.form.type === 'multiSelect') {
            this.initOriginData();
        }
    },
    methods: {
        // 初始化地区数据
        initOriginData() {
            let currentData = [];
            let initColumnData = false;
            let initValues = [];
            let data = this.data;
            // 没有列数据
            if (!data.columnData) {
                if (data.value) {
                    // 有初始数据 根据初始数据来设置列数据
                    initColumnData = true;
                    initValues = data.value.split(',');
                }
                // 每项默认设置为第一个
                data.columnData = [];
                for (let i = 0; i < data.columns; i++) {
                    data.columnData.push(0);
                }
            }
            for (let i = 0; i < data.columns; i++) {
                if (i === 0) {
                    currentData[0] = data.areaData.filter((item, j) =>
                        !item.parent || item.parent === 0 || item.parent === '0'
                    );
                }
                else {
                    currentData[i] = data.areaData.filter((item, j) =>
                        item.parent === currentData[i - 1][data.columnData[i - 1]].value
                    );
                }
                if (initColumnData) {
                    // 需要设置列数据
                    let thisColumnData = currentData[i];
                    for (let k = 0; k < thisColumnData.length; k++) {
                        const element = thisColumnData[k];
                        if (element.name === initValues[i]) {
                            data.columnData[i] = k;
                            break;
                        }
                    }
                }
            }
            this.$set(this, 'areaData', currentData);
        },
        // 级联选择器列变换时 更新列数据及级联数据
        multiColumnChange(e, formIndex) {
            let curData = e && e.detail || {};
            let columnData = this.data.columnData;
            columnData.forEach((item, index) => {
                if (index === curData.column) {
                    columnData[curData.column] = curData.value;
                }
                else if (index > curData.column) {
                    // 把被改变选项之后的选项 第一个至为被选中
                    columnData[index] = 0;
                }
            });
            this.$set(this.data, 'columnData', columnData);
            this.initOriginData(formIndex);
        },
        // 级联选择器选择时
        multiSelectChange(e, formIndex) {
            setTimeout(() => {
                let pickerValue = e && e.detail && e.detail.value || [];
                let data = this.data;
                let areaData = this.areaData;
                let value = [];
                let valueCode = [];
                areaData.forEach((item, index) => {
                    value.push(item[pickerValue[index]].name);
                    valueCode.push(item[pickerValue[index]].value);
                });
                this.$set(this.data, 'value', value.join(','));
                if (this.data.inputName === 'address') {
                    this.address = {
                        province: value[0],
                        city: value[1],
                        area: value[2],
                        provinceCode: valueCode[0],
                        cityCode: valueCode[1],
                        areaCode: valueCode[2]
                    };
                    this.$set(this.data, 'address', this.address);
                    this.$emit('updateData', this.data, formIndex);
                }
                Log.send({
                    type: 'b',
                    action: 'multiselect-change',
                    extra: {
                        province: value[0],
                        city: value[1],
                        area: value[2],
                        provinceCode: valueCode[0],
                        cityCode: valueCode[1],
                        areaCode: valueCode[2]
                    }
                });
            }, 0);
        },

        // radio Change
        radioChange(e, formIndex, radioItem) {
            if (!this.showArea) {
                return;
            }
            // 填充数据(直接传文案)
            this.$set(this.data, 'value', radioItem.value);
            this.$emit('updateData', this.data, formIndex);

            // 发送日志
            Log.send({
                type: 'b',
                action: 'radio-change',
                extra: {
                    module: this.data.inputName,
                    value: radioItem.value
                }
            });
        },

        // 取消选择
        selectCancel() {
            // 发送日志
            Log.send({
                type: 'b',
                action: 'close-select'
            });
        },

        // select Tap
        selectTap() {
            Log.send({
                type: 'b',
                action: 'open-select'
            });
        }
        
    }
};
</script>
<style lang="less" scoped>
.form-row {
    /deep/ .roller-item {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space:nowrap !important;
    }
}
.form {
    &-row {
        display: flex;
        justify-content: space-between;
        .need-tip {
            color: #ff6161;
            display: inline-block;
            width: 10px;
        }
    }
    &-select {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        &-text {
            padding-right: .2rem;
            text-align: left;
            box-sizing: border-box;
        }
        &-arrow {
            position: absolute;
            right: -3px;
            top: 0;
            font-weight: bold;
        }
    }
    &-radio {
        display: inline-block;
        padding: 0 .15rem;
        text-align: center;
        color: #fff;
        height: .26rem;
        border-radius: .13rem;
        line-height: .26rem;
        margin-right: .08rem;
        &-selected {
            background: #FD503E;
        }
        &-default {
            background: #E0E0E0;
        }
    }
}
</style>