<template>
    <BoxContent style="min-height: 100%; background: #fff">
        <div class="inspection-content" v-loading="loading">
            <!-- <div class="top">
                <span class="title">{{ this.$t("trials:setting:inspection:module") }}</span>
                <span>{{ this.$t("trials:setting:inspection:optName") }}</span>
            </div> -->
            <el-tree :data="tree" show-checkbox node-key="id" :expand-on-click-node="false" ref="tree">
                <span class="custom-tree-node" slot-scope="{ node }">
                    <span>{{ node.label }}</span>
                    <!-- <span>
                        {{ node.data.optName }}
                    </span> -->
                </span>
            </el-tree>
        </div>
        <div class="btnBox">
            <el-button @click.stop="getCheckedNodes" type="primary"
                v-if="hasPermi(['trials:setting:inspection:update'])" class="btn">
                {{ $t('common:button:save') }}
            </el-button>
        </div>
    </BoxContent>
</template>
<script>
import BoxContent from '@/components/BoxContent'
import {
    getTrialShowInspection,
    setTrialShowInspection
} from '@/api/trials'
export default {
    components: { BoxContent },
    data() {
        return {
            loading: false,
            tree: [
                {
                    id: 1,
                    label: this.$t("trials:setting:inspection:module"),
                    optName: this.$t("trials:setting:inspection:optName"),
                }
            ],
            list: []
        }
    },
    created() {
        this.getTree()
    },
    computed: {
        isEN() {
            return this.$i18n.locale !== 'zh'
        }
    },
    methods: {
        async getCheckedNodes() {
            try {
                this.loading = true
                let ids = this.$refs.tree.getCheckedKeys()
                let list = []
                this.list.forEach(item => {
                    let obj = {
                        FrontAuditConfigId: item.FrontAuditConfigId,
                        isShow: false
                    }
                    if (ids.includes(item.FrontAuditConfigId)) {
                        obj.isShow = true
                    }
                    list.push(obj)
                })
                let data = {
                    TrialId: this.$route.query.trialId,
                    TrialShowInspectionList: list
                }
                let res = await setTrialShowInspection(data)
                if (res.IsSuccess) {
                    this.getTree()
                }
            } catch (err) {
                console.log(err)
            }
        },
        async getTree() {
            try {
                let data = {
                    TrialId: this.$route.query.trialId
                }
                this.loading = true
                let res = await getTrialShowInspection(data);
                this.loading = false
                if (res.IsSuccess) {
                    this.list = this.formatList(res.Result)
                    let { tree, ids } = this.formatTree(res.Result);
                    this.tree = tree
                    this.$nextTick(() => {
                        this.$refs.tree.setCheckedKeys(ids)
                    })
                }
            } catch (err) {
                this.loading = false
                console.log(err)
            }
        },
        formatTree(list) {
            let tree = [], ids = []
            list.forEach(item => {
                let obj = {
                    id: item.FrontAuditConfigId,
                    label: this.isEN ? item.Description : item.DescriptionCN
                }
                if (item.IsShow) {
                    ids.push(item.FrontAuditConfigId)
                }
                if (item.Children && item.Children.length > 0) {
                    obj.children = []
                    item.Children.forEach(it => {
                        let o = {
                            id: it.FrontAuditConfigId,
                            label: this.isEN ? it.Description : it.DescriptionCN
                        }
                        if (it.IsShow) {
                            ids.push(it.FrontAuditConfigId)
                        }
                        obj.children.push(o)
                    })
                }
                tree.push(obj)
            })
            return { tree, ids }
        },
        formatList(list) {
            let arr = []
            list.forEach(item => {
                let obj = {
                    FrontAuditConfigId: item.FrontAuditConfigId,
                    ParentId: item.ParentId
                }
                arr.push(obj)
                if (item.Children && item.Children.length > 0) {
                    item.Children.forEach(it => {
                        let o = {
                            FrontAuditConfigId: it.FrontAuditConfigId,
                            ParentId: it.ParentId
                        }
                        arr.push(o)
                    })
                }
            })
            return arr;
        }
    }

}
</script>
<style lang="scss" scoped>
.inspection-content {
    width: 40%;
    min-height: 500px;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        padding-top: 20px;

        .title {
            width: 70%;
        }

        span {
            display: inline-block;
        }
    }

    .custom-tree-node {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px 0 0;
    }
}

.btnBox {
    width: 40%;
    padding: 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>