<template>
    <MyDialog v-if="show" v-model="show" width="1000px" height="450px" class="worktrain-dlg">
        <template slot="title">{{title}}</template>
        <div style="display: block;height: 450px;">
        <div class="prj-info-list" v-if="data && JSON.stringify(data) != '{}'">
            <div class="col-1" style="width:400px;display: inline-block;">
                <el-carousel height="400px" v-if="data && data.mainImage && data.mainImage.length > 0">
                    <div style="width: 100%;align-items: center;justify-content: center;height: 400px;margin-top: 10px;">
                        <img :src="$apiPath + data.mainImage" style="width: 400px;height: 350px;">
                    </div>
                </el-carousel>
                <div v-else style="text-align: center;margin-top: 140px;">
                    <img src="images/nodata.png" style="width: 240px;">
                    <div style="text-align: center;">暂无图片</div>
                </div>
            </div>
            <div class="col-2 scroll"
                style="flex-grow: 1;max-height: 450px;min-height:450px;overflow: auto;width: calc(100% - 430px);align-items: center;float:right;margin-top: 10px;">
                <div>
                <template v-if="data.projectName">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">项目名称</span></div>
                    <div class="div-text ">
                        <div>{{ data.projectName }}</div>
                    </div>
                </template>
                <template v-if="data.trainNatureName">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'类型'}}</span></div>
                    <div class="div-text ">
                        <div>{{ data.trainNatureName }}</div>
                    </div>
                </template>
                <template v-if="data.trainTitle">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'标题'}}</span></div>
                    <div class="div-text ">
                        <div>{{ data.trainTitle }}</div>
                    </div>
                </template>
                <template v-if="data.trainParticipants">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">参与人数</span></div>
                    <div class="div-text ">
                        <div>{{ data.trainParticipants +' 人'}}</div>
                    </div>
                </template>
                <template v-if="data.beginDate && data.endDate">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'时间'}}</span></div>
                    <div class="div-text ">
                        <div>{{ data.beginDate }} ~ {{ data.endDate }}</div>
                    </div>
                </template>
                <template v-if="data.trainContent">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'内容'}}</span></div>
                    <div class="div-text ">
                        <div>{{ data.trainContent }}</div>
                    </div>
                </template>
                </div>
            </div>
        </div>
        <div v-else style="text-align: center;padding-top: 150px;min-height: 350px;">
            <img src="images/nodata.png" style="width: 240px;">
            <div style="text-align: center;">暂无数据</div>
        </div>
        </div>
    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog,
    },
    name: 'worktrainDlg',
    data() {
        return {
            title:'',
            TypeTitle:'',
            data: null,
            show: false
        };
    },

    /**项目季度考核目标数据 */
    mounted() {
        this.data = null;
    },

    methods: {
        showDialog(it) {
            this.data = it;
            this.title = it.title;
            this.TypeTitle = it.TypeTitle;
            this.show = true;
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
</style>
<style lang="less">
.my-dialog.worktrain-dlg {
    .popup-project-introduction-min {
        transform: translateY(100px);
    }

    .font-size-tools {
        position: absolute;
        top: 25px;
    }
    .quality-table{
        padding: 0px !important;
    }
    .sp-lbl {
        display: inline-block;
        color: aquamarine;
    }
    .div-text{
        color: #B8C9EE;
        line-height: 30px;
        padding-left: 20px;
    }
    .col-2 img{
        width: 12px;
        height: 12px;
    }
}

</style>