<template>
    <div>
        <div style="margin-bottom: 10px">
            <p class="studyTime">您已学习： <span>15</span>/50学时</p>
            <Select
                v-model="selDimen"
                style="width: 200px; margin-right: 10px"
                @on-change="selDimens"
                label-in-value
            >
                <Option
                    v-for="(item, index) in dimension"
                    :value="index"
                    :key="index"
                    >{{ item }}</Option
                >
            </Select>
            <Select
                v-model="selEnvi"
                style="width: 200px"
                @on-change="selEnvir"
                label-in-value
            >
                <Option
                    v-for="(item, index) in environment"
                    :value="index"
                    :key="index"
                    >{{ item }}</Option
                >
            </Select>
        </div>

        <Table :columns="allPointCol" :data="showPoint" ref="selection"></Table>
    </div>
</template>

<script>
export default {
    name: "AllPoint",
    data() {
        return {
            allPointCol: [
                {
                    type: "selection",
                    width: 120,
                    align: "center",
                },
                {
                    title: "标号",
                    key: "no",
                    align: "center",
                },
                {
                    title: "能力点名称",
                    key: "point",
                    align: "center",
                },
                {
                    title: "维度",
                    key: "dimension",
                    align: "center",
                },
                {
                    title: "所属环境",
                    key: "environ",
                    align: "center",
                },
            ],
            allPoint: [
                {
                    no: "A1",
                    point: "技术支持的学情分析",
                    dimension: "学情分析",
                    environ: "多媒体教学环境",
                },
                {
                    no: "B3",
                    point: "探究型学习活动设计",
                    dimension: "教学设计",
                    environ: "混合学习环境",
                },
                {
                    no: "A1",
                    point: "技术支持的学情分析",
                    dimension: "学情分析",
                    environ: "多媒体教学环境",
                },
                {
                    no: "B3",
                    point: "探究型学习活动设计",
                    dimension: "教学设计",
                    environ: "混合学习环境",
                },
                {
                    no: "C1",
                    point: "跨学科学习活动设计",
                    dimension: "教学设计",
                    environ: "智慧学习环境",
                },
            ],
            showPoint: [],
            dimension: ["全部维度", "教学设计", "学法指导", "学情分析"], //维度
            selDimen: 0, //选择的维度
            environment: ["全部环境", "混合学习环境", "多媒体教学环境"], //环境
            selEnvi: 0, //选择的环境
        }
    },
    methods: {
        selDimens(value) {
            if (value.value == 0) {
                this.showPoint = this.allPoint
            } else {
                let arr = []
                for (let i in this.allPoint) {
                    if (this.allPoint[i].dimension == value.label) {
                        arr.push(this.allPoint[i])
                    }
                }
                console.log(arr)
                this.showPoint = arr
            }
            console.log(value)
        },
        selEnvir(value) {
            let arr = []
            if (!this.selDimen && !this.selEnvi) {
                this.showPoint = this.allPoint
            } else if (this.selEnvi && !this.selDimen) {
                this.showPoint = []
            }
        },
    },
}
</script>

<style lang="less" scoped>
.studyTime {
    float: right;
    font-size: 17px;

    span {
        font-size: 20px;
        font-weight: bold;
    }
}
</style>