<template>
    <!-- 年班级 -->
    <cell-box class="cell-box" :class="{ empty: radio || !formItem.value.length }">
        <div class="cell weui-cell weui-cell_access contcats">
            <span class="label">
                <slot></slot>
            </span>
            <span class="placeholder vux-cell-box" @click="visible = true">{{
                checkbox ? listItem.placeholder : formItem.value || listItem.placeholder
            }}</span>
            <div class="weui-cell__ft"></div>
        </div>

        <div class="list" v-if="checkbox && formItem.value.length">
            <span class="tag" v-for="(item, index) in formItem.value" :key="index">
                {{ item }}
                <x-icon type="ios-close-empty" size="30" @click="del(index)"></x-icon>
            </span>
        </div>

        <div v-transfer-dom>
            <popup-picker
                v-model="checked"
                :show.sync="visible"
                :show-cell="false"
                :data="list"
                :columns="columns[listItem.option.type]"
                ref="picker"
                @on-change="change"
                v-if="radio"
            ></popup-picker>
            <popup v-model="visible" :class="{ 'class-checkbox': classCheckbox }" v-else>
                <div class="checklist multiple" v-if="listItem.option.type === 1">
                    <div class="grade">
                        <div
                            class="item"
                            :class="{ active: gradeIndex === index }"
                            v-for="(item, index) in gradeList"
                            :key="index"
                            @click="selectGrade(item, index)"
                        >{{ item.name }}</div>
                    </div>
                    <checklist
                        class="class"
                        v-model="checked"
                        :options="classList.map(item => ({ key: item.value, value: item.name }))"
                        @on-change="change"
                    ></checklist>
                </div>
                <checklist
                    class="checklist"
                    v-model="checked"
                    :options="list.map(item => ({ key: item.value, value: item.name }))"
                    @on-change="change"
                    v-else
                ></checklist>
                <div class="close">
                    <x-button plain type="primary" @click.native="visible = false">关闭</x-button>
                </div>
            </popup>
        </div>
    </cell-box>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import { TransferDom, CellBox, PopupPicker, Popup, Checklist, XButton } from 'vux'
export default {
    name: 'FormGradeClass',
    mixins: [common],
    directives: { TransferDom },
    components: { CellBox, PopupPicker, Popup, Checklist, XButton },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        const { value } = this.listItem.option
        const radio = this.listItem.verify.type === 'radio'
        const checkbox = this.listItem.verify.type === 'checkbox'
        return {
            list: [],
            gradeIndex: 0,
            gradeList: [],
            classList: [],
            checked: radio ? (value ? [value] : []) : value,
            columns: { 1: 2, 2: 1 }, // 弹窗列数，1 年班级 2 列，2 年级 1 列
            radio,
            checkbox,
            classCheckbox: this.listItem.option.type === 1 && checkbox,
            visible: false,
            ready: false
        }
    },
    created () {
        this.init()
        this.verifyInit()
    },
    mounted () {
        this.$nextTick(() => {
            this.ready = true
        })
    },
    methods: {
        init () {
            this.$api.commonApi.getGradeClass().then(res => {
                if (res.data.Status) {
                    // 转一维数组: name: fullname, value: id, parent(子)
                    const dataList = []
                    const loop = (list, parent = '', deep = false) => {
                        list.forEach(item => {
                            dataList.push({ name: item.fullname, value: item.id, parent })
                            if (deep) loop(item.children, item.id)
                        })
                    }
                    loop(res.data.Data, '', this.listItem.option.type === 1) // type: 1 班级 2 年级
                    this.list = dataList
                    if (this.classCheckbox) {
                        this.gradeList = res.data.Data.map(item => ({ name: item.fullname, value: item.id }))
                        this.selectGrade(this.gradeList[0], 0)
                    }
                    if (this.radio && this.listItem.option.type === 1 && this.checked.length) {
                        const grade = this.list.find(item => item.value === this.checked[0])
                        if (grade) this.checked.unshift(grade.parent)
                    }
                }
            })
        },
        // 选择年级
        selectGrade (item, index) {
            this.gradeIndex = index
            this.classList = this.list.filter(n => n.parent === item.value)
        },
        // 同步 value
        change (checked) {
            if (this.radio) {
                const inputValue = this.$refs.picker.getNameValues()
                this.formItem.value = this.listItem.option.type === 1 ? inputValue.split(' ')[1] : inputValue
            } else if (this.list.length) {
                const map = value => this.list.find(item => item.value === value).name
                this.formItem.value = checked.map(map)
            }
            this.clearValidate()
        },
        // 多选删除
        del (index) {
            this.checked.splice(index, 1)
            this.formItem.value.splice(index, 1)
        },
        // 校验初始化
        verifyInit () {
            const rules = []
            const { required } = this.listItem.verify
            if (required) rules.push(this.required(this.listItem.title))
            if (rules.length) this.validator = new this.Schema({ value: rules })
        },
        // 校验
        verify () {
            return this.validate({ value: this.formItem.value })
        }
    }
}
</script>

<style lang="less" scoped>
.weui-cell__ft {
    display: none;
}

.cell-box {
    display: block;
    padding-top: 0;
    padding-left: 0;
    &.empty {
        padding-bottom: 0 !important;
    }
}

.cell {
    justify-content: space-between;
    margin-right: -15px;
    .placeholder {
        padding-right: 13px;
        color: #999;
        &::before {
            display: none;
        }
        &::after {
            right: 0;
        }
    }
}

.list {
    display: flex;
    flex-flow: wrap;
    margin-top: -5px;
    padding-left: 15px;
    .tag {
        margin-top: 5px;
        margin-right: 10px;
        font-size: 14px;
        height: 32px;
        padding: 0 10px;
        line-height: 30px;
        color: #409eff;
        background-color: #ecf5ff;
        border: 1px solid #d9ecff;
        border-radius: 4px;
        white-space: nowrap;
        .vux-x-icon {
            vertical-align: top;
            fill: #409eff;
            margin-left: -5px;
            margin-right: -10px;
        }
    }
}

.multiple {
    height: 100%;
    display: flex;
    box-sizing: border-box;
    .grade {
        width: 120px;
        flex-shrink: 0;
        font-size: 16px;
        overflow-y: auto;
        text-align: center;
        .item {
            padding: 10px 5px 11px;
            &.active {
                background-color: #fff;
            }
        }
    }
    .class {
        flex-grow: 1;
        overflow-y: auto;
        background-color: #fff;
    }
}

.vux-cell-box::before {
    display: none;
}
.vux-popup-dialog {
    max-height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    &.class-checkbox {
        height: calc(100% - 100px) !important;
    }
    .checklist {
        flex-grow: 1;
        overflow-y: auto;
    }
}
.close {
    flex-shrink: 0;
    padding: 10px 15px;
    .weui-btn {
        padding: 0;
        line-height: 32px;
    }
}
</style>
