<template>
    <el-dialog :visible.sync="visible" fullscreen lock-scroll class="JNPF-full-dialog"
        :show-close="false" :modal="false">
        <div class="main">
            <div class="top">
                <div class="top-title" v-if="visible">
                    <div style="opacity: 0.5;">问卷配置</div> /
                    <div style="font-size: 20px;font-weight: bold;">
                        {{itsmDrawingList[0].__config__.defaultValue}}
                    </div>
                </div>
                <div>
                    <el-button type="primary" @click="saveForm">
                        保存
                    </el-button>
                    <el-button @click="closeDialog">
                        取消
                    </el-button>
                </div>
            </div>
            <div class="content" v-if="showContent">
                <Generator ref="generator" :conf="formData" :modelType="dataForm.type"
                    :webType="dataForm.webType" :dbType="dbType" :formInfo='dataForm'
                    @drawingListChange="drawingListChange" :isQuestionnaire="true"
                    :itsmDrawingList="itsmDrawingList" />
            </div>

        </div>
    </el-dialog>
</template>

<script>

import Generator from './components/Generator/index/Home'
import mixin from '@/mixins/generator/form'

import {
    addBaseQUestionnaire, getQuestionnaireDetail
} from "@/api/governmentCloud/questionnaireInvestigation/questionnaireInvestigation";

import {
    questionnairetopComponents, questionnaireinputComponents, questionnaireselectComponents
} from './components/Generator/index/questionnaireComponentConfig'
import {
    deepClone
} from '@/components/Generator/utils'
export default {
    mixins: [mixin],
    components: { Generator },
    data() {
        return {
            visible: false,
            showContent: false,
            itsmDrawingList: [
                {
                    __config__: {
                        jnpfKey: "question-title",
                        tag: "QuestionnaireInput",
                        tagIcon: "icon-ym icon-ym-generator-input",
                        required: false,
                        noShow: false,
                        isDisplay: true,
                        showLabel: true,
                        tableAlign: "left",
                        tableFixed: "none",
                        layout: "questionTopItem",
                        id: '001',
                        formId: '001',
                        renderKey: "001",
                        span: 24,
                        dragDisabled: false,
                        valueType: null,
                        defaultValue: '默认问卷',
                        parentDefault: null
                    },
                    __vModel__: "title",
                    disabled: false,
                    placeholder: null
                },
                {
                    __config__: {
                        jnpfKey: "question-tip",
                        tag: "QuestionnaireTopTip",
                        tagIcon: "icon-ym icon-ym-generator-input",
                        required: false,
                        noShow: false,
                        isDisplay: true,
                        showLabel: true,
                        tableAlign: "left",
                        tableFixed: "none",
                        layout: "questionTopItem",
                        id: '002',
                        formId: '002',
                        renderKey: "002",
                        span: 24,
                        dragDisabled: false,
                        valueType: null,
                        defaultValue: '为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧!',
                        parentDefault: null
                    },
                    __vModel__: "top-tip",
                    disabled: false,
                    placeholder: null
                }
            ],
            nowList: {
                fields: null
            },
            questionnaireId: null

        }
    },
    created() {
        console.log(this.formData)
    },
    methods: {
        init(id) {
            this.visible = true
            //编辑
            if (id) {
                this.questionnaireId = id
                getQuestionnaireDetail(id).then(res => {
                    if (res.code == 200) {

                        let resData = res.data

                        this.itsmDrawingList.forEach(item => {
                            if (item.__vModel__ == 'title') {
                                item.__config__.defaultValue = resData.topic
                            } else if (item.__vModel__ == 'top-tip') {
                                item.__config__.defaultValue = resData.description
                            }
                        })


                        if (resData.questionnaireTopic) {
                            resData.questionnaireTopic.forEach((item, index) => {
                                let obj = null
                                if (item.type == 'TEXTAREA') {
                                    obj = deepClone(questionnaireinputComponents.find(n => n.__config__.jnpfKey == 'question-textarea'))
                                    obj.__config__.defaultValue = item.content
                                    obj.title = item.title
                                    obj.description = item.description
                                    obj.__config__.required = item.required
                                    obj.describe = item.description
                                    obj.__config__.renderKey = new Date() + index
                                    obj.__config__.formId = 100 + index
                                } else if (item.type == 'RADIO') {
                                    obj = deepClone(questionnaireselectComponents.find(n => n.__config__.jnpfKey == 'question-radio'))
                                    obj.__config__.defaultValue = item.content
                                    obj.title = item.title
                                    obj.description = item.description
                                    obj.__config__.required = item.required
                                    obj.describe = item.description
                                    obj.__config__.renderKey = new Date() + index
                                    obj.__config__.formId = 100 + index
                                    obj.options = []
                                    item.questionnaireOption.forEach((item2, index2) => {
                                        let obj2 = {
                                            id: null,
                                            fullName: null
                                        }
                                        obj2.id = item2.code,
                                            obj2.fullName = item2.optionContent
                                        obj.options.push(obj2)
                                    })
                                } else if (item.type == 'CHECKBOX') {
                                    obj = deepClone(questionnaireselectComponents.find(n => n.__config__.jnpfKey == 'question-checkbox'))
                                    obj.__config__.defaultValue = item.content
                                    obj.title = item.title
                                    obj.description = item.description
                                    obj.__config__.required = item.required
                                    obj.describe = item.description
                                    obj.__config__.renderKey = new Date() + index
                                    obj.__config__.formId = 100 + index
                                    obj.options = []
                                    item.questionnaireOption.forEach((item2, index2) => {
                                        let obj2 = {
                                            id: null,
                                            fullName: null
                                        }
                                        obj2.id = item2.code,
                                            obj2.fullName = item2.optionContent
                                        obj.options.push(obj2)
                                    })
                                }
                                if (obj) this.itsmDrawingList.push(obj)
                            })
                        }
                        this.showContent = true
                    } else {
                        this.$message({
                            type: 'error',
                            message: res.msg,
                            duration: 1500,
                            onClose: () => {
                                this.closeDialog()
                            }
                        })
                    }
                })
            } else {
                this.showContent = true
            }
        },
        getPlaceholder(n) {
            if (['custom-radio', 'custom-checkbox', 'custom-select', 'custom-group', 'custom-datePicker', 'custom-timePicker', 'custom-member'].includes(n.__config__.jnpfKey)) {
                n.placeholder = '请选择' + n.__config__.label
            } else if (['custom-uploadFile'].includes(n.__config__.jnpfKey)) {
                n.placeholder = '请上传' + n.__config__.label
            } else {
                n.placeholder = '请输入' + n.__config__.label
            }
        },
        drawingListChange(list) {
            this.nowList.fields = JSON.parse(JSON.stringify(list))
        },

        //关闭配置页面
        closeDialog() {
            this.$emit("close");
        },
        getType(type) {
            let typeObj = {
                TEXTAREA: 'question-textarea',
                RADIO: 'question-radio',
                CHECKBOX: 'question-checkbox',
            }
            let str = ''
            for (let key in typeObj) {
                if (typeObj[key] == type) {
                    str = key
                }
            }
            return str
        },
        //保存配置
        saveForm() {
            console.log(this.nowList)
            let params = {
                topic: this.nowList.fields[0].__config__.defaultValue,
                description: this.nowList.fields[1].__config__.defaultValue,
                questionnaireTopic: []
            }

            this.nowList.fields.splice(0, 2)
            this.nowList.fields.forEach((field, index) => {
                let obj = {
                    questionNumber: index + 1,
                    type: this.getType(field.__config__.jnpfKey),
                    required: field.__config__.required,
                    title: field.title,
                    description: field.describe,
                }
                if (field.options) {
                    obj.questionnaireOption = field.options

                    obj.questionnaireOption.forEach((item, index) => {
                        item.optionContent = item.fullName
                        item.ordination = index + 1
                        item.code = item.id
                        delete item.fullName
                        delete item.id
                    })

                }
                params.questionnaireTopic.push(obj)
            })


            if (this.questionnaireId) params.id = this.questionnaireId


            addBaseQUestionnaire(params).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '问卷保存成功',
                        type: 'success',
                        duration: 1000,
                        onClose: () => {
                            this.closeDialog()
                        }
                    })
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error',
                        duration: 1000
                    })
                }
            })

        }
    },
}
</script>

<style lang="scss" scoped>
.main {
    background-color: #f0f2f5;
    padding: 0;
    min-height: 100vh;
    .top {
        background-color: #fff;
        width: 100%;
        height: 7%;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .top-title {
            margin-left: 0px;
            display: flex;
            font-size: 18px;
            align-items: center;
            div {
                margin: 0 10px;
            }
        }
    }
    .content {
        padding: 20px;
        width: 100%;
        height: 93%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>