<!-- 融合服务--组合能力 -->
<template>
    <div class="content-box">
        <div class="title">
            {{ title }}
        </div>
        <div class="no-data loading-box" v-loading="loading" v-if="loading">
        </div>
        <div v-if="!loading">
            <div v-for="(item, index) in dataInfo" :key="index">
                <el-form-item label="能力类别" prop="">
                    <el-select v-model="item.type" placeholder="请选择能力类别"
                        @change="(data) => filterSelect(data, item)" :disabled="disabledType">
                        <el-option v-for="val in typeOptions" :key="val.value" :label="val.value" :value="val.value">
                        </el-option>
                    </el-select>
                    <el-select style="margin-left: 20px" v-model="item.resourceId" placeholder="请选择能力"
                        :disabled="disabledType">
                        <el-option v-for="val in item.abilityOptions" :key="val.id" :label="val.name" :value="val.id">
                        </el-option>
                    </el-select>
                    <el-button style="margin-left:10px" @click="deleteItem(dataInfo, index)" type="danger" size="small"
                        v-if="!disabledType && dataInfo.length > 1">删除
                    </el-button>
                    <el-button style="margin-left:10px" size="small"
                        v-if="!disabledType && index == dataInfo.length - 1" @click="addItem(dataInfo, 0)"
                        type="primary">添加
                    </el-button>
                </el-form-item>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        dataForm: {
            type: Object,
            default: () => { }
        },
        title: {
            type: String,
            default: '组合能力'
        },
        // 是否可编辑
        disabledType: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            typeOptions: [
                {
                    value: '',
                },
                {
                    value: '数据资源',
                },
                {
                    value: '组件服务',
                },
                {
                    value: '应用资源',
                },
                {
                    value: '基础设施',
                },
                {
                    value: '知识库',
                },
            ],
            dataInfo: [],
            abilityArray: [],
            abilityArrayCopy: [],
            loading: false,
        }
    },
    watch: {
        dataInfo: {
            handler(newVal) {
                this.dataInfo = newVal;
                let arr = newVal.map((v, index) => {
                    return {
                        sequence: index,
                        resourceId: v.resourceId,
                    }
                })
                this.$emit('update', {
                    title: this.title,
                    list: arr
                })
            },
            deep: true,
            immediate: true,
        },
    },
    mounted() {
    },
    methods: {
        async getDataInfo(dataForm) {
            await this.getAbility()
            let arr = []
            let attrValue = dataForm.fuseResourceList || []
            if (attrValue.length > 0) {
                attrValue.map(v => {
                    let _obj = {
                        type: v.resource && v.resource.type,
                        resourceId: v.resourceId,
                    }
                    this.filterSelect(v.resource && v.resource.type, _obj)
                    arr.push(_obj)
                })
            } else {
                arr = []
                arr.push({
                    type: "",
                    resourceId: "",
                    abilityOptions: []
                })
            }
            this.dataInfo = arr;
            this.$nextTick(() => {
                console.log(999, this.dataInfo)
            })
        },
        // 新增
        addItem(list) {
            list.push({
                type: "",
                resourceId: "",
                abilityOptions: []
            })
        },
        // 删除
        deleteItem(list, index) {
            list.splice(index, 1)
        },
        // 获取能力
        getAbility() {
            return new Promise((resolve, reject) => {
                this.loading = true;
                this.$http.get(`/resource/list`, {}).then(({ data: res }) => {
                    this.loading = false;
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.abilityArray = res.data || []
                    this.abilityArrayCopy = res.data || []
                    resolve(res)
                }).catch((err) => {
                    this.loading = false;
                    this.$message.error(err)
                    reject(err)
                })
            })
        },
        filterSelect(type, item) {
            let arr = this.abilityArrayCopy.filter(v => v.type == type)
            let selectArray = this.dataInfo.map(v => v.resourceId) || [];
            // 过滤掉已选的
            item.abilityOptions = arr.filter(v => !selectArray.includes(v.id))
        },
    }
}
</script>
<style lang="scss" scoped>
.content-box {
    margin-bottom: 20px;

    .title {
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 10px;
    }
}

.loading-box {
    width: 100%;
    height: 100px;
}
</style>