<template>
    <div class="page">

        <el-button class="backBtn" size="small" @click="$router.back()">返回上一级</el-button>
        <el-tabs v-model="tabs">
            <el-tab-pane label="设计问卷" name="1">
                <div style="width: 800px;margin: 100px auto;" v-show="step">
                    <el-form :model="titleForm" :rules="titleRules" ref="titleForm">
                        <el-form-item label="问卷名称：" prop="title" label-width="125px">
                            <el-input placeholder="请输入问卷名称" v-model="titleForm.title"></el-input>
                        </el-form-item>
                        <el-form-item label="问卷说明：" label-width="125px">
                            <el-input type="textarea" placeholder="请输入问卷说明（不超过1000个汉字）" maxlength="1000"
                                v-model="titleForm.remark"></el-input>
                        </el-form-item>
                        <div style="text-align: center;">
                            <el-button size="small" @click="$router.back()">取消</el-button>
                            <el-button type="primary" size="small" @click="createForm('titleForm')">立即创建</el-button>
                        </div>
                    </el-form>
                </div>
                <div v-show="!step">
                    <fc-designer style="height: 79vh;" ref="designer">
                        <template slot="handle">
                            <ElButton style="margin-left: 10px;" icon="el-icon-upload" type="primary" size="small"
                                @click="issueBtn" round>问卷发布
                            </ElButton>
                            <ElButton icon="el-icon-view" type="success" size="small" @click="showDrawer" round>手机模拟预览
                            </ElButton>
                        </template>
                    </fc-designer>
                </div>

                <!-- <div class="tool">
                        <el-row>
                            <el-button icon="el-icon-download" type="primary" size="small" @click="getFormJson()"
                                round>生成表单JSON</el-button>
                            <el-button icon="el-icon-download" type="success" size="small" @click="getFormOption()"
                                round>生成表单配置</el-button>
                            <el-button icon="el-icon-upload" type="primary" size="small" @click="showDrawer"
                                round>移动端预览</el-button>
                        </el-row>
                    </div> -->

                <el-drawer :visible.sync="drawer" title="预览">
                    <div class="showPhone">
                        <div class="phone">
                            <div class="phoneContent">
                                <form-create :rule="Frule" :option="Fopthion" @submit="onSubmit">
                                </form-create>
                            </div>
                        </div>
                    </div>
                </el-drawer>

                <el-dialog title="问卷发布" :visible.sync="issueDialog" width="30%" top="25vh">
                    <el-form :model="issueForm" :rules="issueRules" ref="issueForm">
                        <el-form-item label="问卷封面：" label-width="125px">
                            <div style="display: flex;align-items: center;">
                                <img style="width:80px; height: 50px; margin-right: 10px;cursor: pointer;"
                                    v-for="(i, j) in issueForm.cover" :key="j" :src="i" alt=""
                                    :class="selImg == j ? 'selImg' : ''" @click="selImg = j">
                            </div>
                            <!-- <el-input v-model="issueForm.cover" autocomplete="off"></el-input> -->
                        </el-form-item>
                        <el-form-item label="反馈期限：" label-width="125px" prop="time">
                            <el-date-picker v-model="issueForm.time" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="邀请人员：" label-width="125px">
                            <el-button size="small" type="success" @click="treeDialog = 1">选择人员</el-button>

                        </el-form-item>
                        <div style="text-align: center;">
                            <el-button size="small" @click="issueDialog = false">取消</el-button>
                            <el-button type="primary" size="small" @click="issueFormBtn('issueForm')">发布</el-button>
                        </div>
                    </el-form>
                </el-dialog>

                <el-dialog title="人员选择" :visible.sync="treeDialog">
                    <div class="treeDialog">
                        <el-tree class="treeCss" :data="treeData" node-key="id" :props="defaultProps"
                            @node-click="handleNodeClick"></el-tree>
                        <div class="treeCss" style="margin-left: 10px;">
                            <div style="margin-top: 3px;">
                                {{ cityOptions.length > 0 ? '请选择人员' : '请选择部门' }}
                            </div>
                            <!-- <el-checkbox v-show="cityOptions.length > 0" :indeterminate="isIndeterminate"
                                v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> -->
                            <el-checkbox-group v-model="checkedCities">
                                <el-checkbox v-for="i in cityOptions" :label="i.staffId" :key="i">{{ i.staffName
                                }}</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div style="text-align: center;margin-top: 10px;">
                        <el-button size="small" @click="checkedCities = []">重置</el-button>
                        <el-button size="small" type="primary" @click="subUser">确定</el-button>
                    </div>
                </el-dialog>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import formCreate from "@form-create/element-ui";
import moment from 'moment'
function formType(val) {
    // (1.单项选择,2.多项选择,3.文本框,4.多项文本框,5.文字,6.上传附件)
    switch (val) {
        case "radio":
            return 1
            break;
        case 'checkbox':
            return 2
            break;
        case 'input':
            return 3
            break;
        case 'span':
            return 5
            break;
        case 'upload':
            return 6
            break;
        default:
            break;
    }
}
function formatNum(val) {
    if (val) return 1
    else return 0
}
export default {

    data() {
        return {
            step: 1,
            tabs: '1',
            titleForm: {
                title: '',
                remark: ''
            },
            titleRules: {
                title: [
                    { required: true, message: '请输入问卷名称', trigger: 'blur' },
                ]
            },
            drawer: 0,
            Frule: [],
            Fopthion: '',
            issueDialog: false,
            selImg: 0,
            issueForm: {
                id: '',
                title: '',
                cover: [
                    'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26101.svg',
                    'http://sy.scsmile.cn/YX-JXgl/v1.0/HT/images/%E6%96%B0%E5%A2%9E%E5%8F%8D%E9%A6%88_%E7%AC%AC3%E6%AD%A5_/u26102.svg',
                ],

            },
            issueRules: {
                time: [
                    { required: true, message: '请输入选择反馈期限', trigger: 'blur' },
                ]
            },
            treeData: [],
            defaultProps: {
                label: 'label',
                children: 'children'
            },
            treeDialog: 0,

            checkAll: false,
            cityOptions: [],
            checkedCities: [],
            isIndeterminate: true
        }
    },
    mounted() {
        this.getDeptData()
    },
    methods: {
        handleCheckAllChange(val) {
            console.log(val)
            this.checkedCities = val ? this.cityOptions : [];
            this.isIndeterminate = false;
        },
        subUser() {
            console.log(this.checkedCities)
        },
        handleNodeClick(data) {
            if (data.personList) {
                this.cityOptions = data.personList
                // console.log(this.cityOptions)
            }
        },
        //获取部门数据
        getDeptData() {
            this.$post('/staff/list', { page: 1, size: -1 }).then(res => {
                let arr = res.dict.deptPerson[0].children
                this.treeData = arr
            })
        },
        //创建问卷
        createForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.step = 0;
                    this.formConfiguration()
                }
            });
        },
        //问卷发布
        issueBtn() {
            this.Frule = formCreate.parseJson(this.getFormJson())
            this.Fopthion = formCreate.parseJson(this.getFormOption())
            // console.log(this.Frule)
            //判断是否配置了表单
            if (this.Frule.length > 1) {
                this.issueDialog = true
            } else {
                this.$message({
                    message: '请配置问卷内容后发布',
                    type: 'warning'
                });
            }
        },
        //预览生成按钮的输出
        onSubmit(formData) {
            console.log(formData)
        },
        //展示移动端效果
        showDrawer() {
            this.drawer = 1
            this.Frule = formCreate.parseJson(this.getFormJson())
            this.Fopthion = formCreate.parseJson(this.getFormOption())
        },
        getFormJson() {
            //FcDesigner 生成的`JSON`
            const FcDesignerRule = this.$refs.designer.getRule();
            // console.log(FcDesignerRule)
            return JSON.stringify(FcDesignerRule)
        },
        getFormOption() {
            //FcDesigner 生成的`options`
            const FcDesignerOptions = this.$refs.designer.getOption();
            // console.log(FcDesignerOptions)
            return JSON.stringify(FcDesignerOptions)
        },
        issueFormBtn(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.issueForm)
                    this.Frule.forEach(i => {
                        i.remark = i.field
                        i.questionType = formType(i.type)
                        i.require = formatNum(i.$required)
                        i.content = i.info || ''
                        if (formType(i.type) == 1 || formType(i.type) == 2) {
                            i.options.forEach(j => {
                                j.content = j.value
                                j.remark = j.label
                            })
                        }
                        if (formType(i.type) == 1 || formType(i.type) == 2) {
                            i.feedbackOptionList = i.options
                        }

                    })
                    let sub = {
                        id: '',
                        ...this.titleForm,
                        feedbackTimeStart: this.issueForm.time[0],
                        feedbackTimeEnd: this.issueForm.time[1],
                        inviteNum: '',
                        formContent: JSON.stringify(this.Frule),
                        ruleContent: JSON.stringify(this.Fopthion),
                        feedbackQuestionList: [
                            ...this.Frule
                        ]
                    }
                    console.log(sub)
                    this.$post('/feedback/save', sub).then(res => {
                        console.log(res)
                        if (res.code == 1) {
                            this.$message.success('新增表单成功');
                        }
                        setTimeout(() => {
                            this.$router.back()
                        }, 1000);
                    })
                }
            });

        },
        formConfiguration() {
            //配置表单基础样式以及按钮展示
            const option = {
                "form": {
                    "labelPosition": "top",
                    "size": "mini",
                    "labelWidth": "20%",
                    "hideRequiredAsterisk": false,
                    "showMessage": true,
                    "inlineMessage": false
                },
                "submitBtn": true,
                "resetBtn": false,
            }
            this.$refs.designer.setOption(option)
            //移除组件大类
            this.$refs.designer.removeMenu('layout',)
            //移除对应组件
            this.$refs.designer.removeMenuItem('el-transfer')
            this.$refs.designer.removeMenuItem('el-alert')
            this.$refs.designer.removeMenuItem("colorPicker")
            this.$refs.designer.removeMenuItem("cascader")
            this.$refs.designer.removeMenuItem("rate")
            this.$refs.designer.removeMenuItem("slider")
            this.$refs.designer.removeMenuItem("datePicker")
            this.$refs.designer.removeMenuItem("timePicker")
            this.$refs.designer.removeMenuItem("switch")
            this.$refs.designer.removeMenuItem("tree")
            this.$refs.designer.removeMenuItem("inputNumber")
            this.$refs.designer.removeMenuItem("select")
            this.$refs.designer.removeMenuItem("fc-editor")
            this.$refs.designer.removeMenuItem("el-button")
            this.$refs.designer.removeMenuItem("el-divider")
            // 配置组件生成规则---直接配置显示在页面上
            const rule = [{
                "type": "span",
                "title": this.titleForm.title,
                "native": false,
                "children": [this.titleForm.remark],
                "_fc_drag_tag": "span",
                "hidden": false,
                "display": true
            }]
            this.$refs.designer.setRule(rule)
        }
    }
}
</script>

<style lang="less" scoped>
.treeDialog {
    // border: 1px solid;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .treeCss {
        width: 50%;
        height: 500px;
        overflow: auto;
    }

    /* 侧边滚动条 */
    .treeCss::-webkit-scrollbar {
        width: 3px;
    }

    /* 滚动条上的滚动滑块 */
    .treeCss::-webkit-scrollbar-thumb {
        background: #CCCCCC;
        border-radius: 4px;
    }

    /* 滚动条轨道 */
    .treeCss::-webkit-scrollbar-track {
        background: #EEEEEE;
        border-radius: 4px;
    }
}

.selImg {
    border: 2px solid #1a7af8;
}

/deep/.el-textarea__inner {
    height: 300px;
}

/deep/._fc-m-tools {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/deep/._fc-l-title {
    text-align: center;
    margin-bottom: 10px;
}

/deep/._fc-l-item {
    width: 100%;
    border: 1px solid #1a7af8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 4px;

    ._fc-l-icon {
        width: 40%;
        text-align: right;
        color: #1a7af8;
    }


    ._fc-l-name {
        width: 50%;
        text-align: left;
        color: #1a7af8;
    }
}

/deep/._fc-l-item:hover ._fc-l-name {
    color: #FFF;
}

/deep/._fc-l-item:hover ._fc-l-icon {
    color: #FFF;
}

.showPhone {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .phone {
        width: 378px;
        height: 770px;
        background: url('../../../assets/images/phone.png') no-repeat;
        position: relative;

        .phoneContent {
            // border: 1px solid;
            position: absolute;
            top: 95px;
            left: 25px;
            width: 86.5%;
            height: 75%;
            box-sizing: border-box;
            padding: 20px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        /* 侧边滚动条 */
        .phoneContent::-webkit-scrollbar {
            width: 3px;
        }

        /* 滚动条上的滚动滑块 */
        .phoneContent::-webkit-scrollbar-thumb {
            background: #CCCCCC;
            border-radius: 4px;
        }

        /* 滚动条轨道 */
        .phoneContent::-webkit-scrollbar-track {
            background: #EEEEEE;
            border-radius: 4px;
        }
    }
}

.backBtn {
    position: absolute;
    right: 20px;
    z-index: 99;
}

.tool {
    margin-top: 20px;
    text-align: center;
}

/* 侧边滚动条 */
/deep/.el-aside::-webkit-scrollbar {
    width: 3px;
}

/* 滚动条上的滚动滑块 */
/deep/.el-aside::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

/* 滚动条轨道 */
/deep/.el-aside::-webkit-scrollbar-track {
    background: #EEEEEE;
    border-radius: 4px;
}

/* 侧边滚动条 */
/deep/.el-main::-webkit-scrollbar {
    width: 3px;
}

/* 滚动条上的滚动滑块 */
/deep/.el-main::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

/* 滚动条轨道 */
/deep/.el-main::-webkit-scrollbar-track {
    background: #EEEEEE;
    border-radius: 4px;
}

/* 侧边滚动条 */
/deep/._fc-m-drag::-webkit-scrollbar {
    width: 3px;
}

/* 滚动条上的滚动滑块 */
/deep/._fc-m-drag::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 4px;
}

/* 滚动条轨道 */
/deep/._fc-m-drag::-webkit-scrollbar-track {
    background: #EEEEEE;
    border-radius: 4px;
}
</style>