<template>
    <div>
        <!-- <div style="padding:20px;background: #fff"> -->
        <!-- <div :class="[(!myReadType)?'form-container':'form-container-not']" ref="formContainer" :style="status_style">
        <span>审批内容</span>
        <div class="urgent_state_div" v-if="urgentStateConf.conf && (urgentStateConf.conf.length >0)">
          <span>紧急状态:</span>
          <span v-if="urgentStateConf.right =='w'">
            <label :style="'color:'+c.color" class="radio-inline" v-for="c in urgentStateConf.conf" :key="c.state">
              <input :value="c.state" type="radio" v-model="urgentStateConf.value" />
              {{c.name}}
            </label>
          </span>
          <span v-if="urgentStateConf.right !='w'">
            <span v-show="c.state == urgentStateConf.value" :style="'color:'+c.color" v-for="c in urgentStateConf.conf"
              :key="c.state">{{c.name}}</span>
          </span>
        </div>
        <div class="urgent_state_div" v-if="formHelpFile && (formHelpFile.length >0)">
          <el-button class="help" icon="el-icon-question" type="text" @click="previewHelpFile">帮助</el-button>
        </div>
      </div> -->
        <div class="form-content">
            <form
                v-if="html && formType == 'INNER'"
                data-vv-scope="custom-form"
            >
                <online-form
                    class="custom-form"
                    :html="html"
                    :data="data"
                    :permission="permission"
                    :isView="isView"
                    :initFillData="initFillData"
                    :flowKey="flowKey"
                    :formId="formId"
                    :isLook="isLook"
                    :key="formComponentKey"
                />
            </form>
            <div
                v-if="htmlSrc && formType == 'FRAME'"
                class="tab-container"
                id="parentDiv"
                :class="startFlow ? 'start-flow' : ''"
            >
                <iframe
                    v-iframetrigger
                    id="frmFrame"
                    name="frmFrame"
                    style="height: 100%; width: 100%; border: 0px"
                    :src="htmlSrc"
                    ref="iframe"
                    @load="sendData()"
                ></iframe>
            </div>
            <!-- </div> -->
            <!-- 预览文件-->
            <FilePreview ref="filePreview" />
        </div>
    </div>
</template>
<script>
import OnlineForm from '@/components/flow/OnlineForm.vue'
import form from '@/api/formContent.js'
import {Message} from 'element-ui'
import {Loading} from 'element-ui'
import FilePreview from '@/components/common/FilePreview.vue'
import req from '@/request.js'
export default {
    name: 'formContent',
    props: [
        'instId',
        'taskId',
        'defId',
        'proInstId',
        'type',
        'readId',
        'readDoneId',
        'myReadType',
        'leaderId',
        'formLoading',
        'task_state',
        'tasks',
        'isLook',
        'copyInstId',
        'startFlow',
        'relationData',
    ],
    data() {
        return {
            buttons: [],
            status_style: '',
            dataInstId: '',
            html: null,
            data: null,
            permission: null,
            isView: true,
            formType: 'INNER',
            htmlSrc: null,
            urgentStateConf: {},
            formHelpFile: '',
            src: '',
            files: [],
            fileId: '',
            fileTree: '',
            formData: '',
            initFillData: false,
            formId: '',
            flowKey: '',
            taskDetailLoading: '',
            topDivHeight: '99px', //空div的高度 用于撑开页面下的div内容
            formKey: '', //表单key
            formComponentKey: new Date().getTime(),
            iframeWin: null,
        }
    },
    watch: {
        tasks: function (newVal, oldVal) {
            if (newVal) {
                this.init()
            }
        },
        urgentStateValue: function (newVal, oldVal) {
            if (window.urgentStateValue) {
                window.urgentStateValue.new = newVal
            }
        },
    },
    created() {
        if (this.isPlmeformPage) {
            this.topDivHeight = 0
        }
        //待办的时候,watch已经监听了tasks,可以不用初始化
        if (!this.taskId) {
            this.init()
        }
        if (this.type == 'request') {
            this.topDivHeight = '20px'
        }
    },
    methods: {
        /**
         * 修改样式
         * @param divheight  最上面div的高度
         */
        updateStyle(divheight) {
            this.topDivHeight = divheight
        },
        previewHelpFile() {
            let obj = {}
            obj.id = this.formHelpFile[0].id
            obj.name = this.formHelpFile[0].name
            obj.size = this.formHelpFile[0].size
            this.$refs.filePreview.preview(obj)
        },
        setInitFillData(isInitFillData) {
            this.initFillData = isInitFillData
        },
        hiddenContent() {
            this.$refs.formContainer.className = 'form-container-not'
        },
        init(updateFormComponent) {
            if (this.task_state == 'FOLLOW') {
                this.status_style = 'padding-top:0px !important;'
            }
            var $ = require('jquery')
            let _me = this
            if (_me.tasks) {
                _me.initFillData = _me.tasks.initFillData
            }
            let readOnly = false
            if (
                _me.tasks &&
                _me.tasks.bpmTask &&
                (_me.tasks.bpmTask.status === 'COMMU' ||
                    _me.tasks.bpmTask.status === 'TRANSFORMEDINQU' ||
                    _me.tasks.bpmTask.status === 'FOLLOW')
            ) {
                readOnly = true
            }

            //获取流程定义key
            _me.getFlowKey()
            let handlerJs = function (rep) {
                const currentUser = _me.$store.state.login.currentUser

                let data = _me.data
                let _this = _me
                if (rep && rep.diyJs) {
                    eval(rep.diyJs)
                }
            }

            let handler = function (rep) {
                //发起流程的时候得到按钮对象
                if (rep.buttons) {
                    _me.buttons = rep.buttons
                }
                if (_me.taskDetailLoading) {
                    _me.taskDetailLoading.close()
                }
                if (_me.myReadType == 'agent') {
                    Message.warning('此流程已被委托,没有审批权')
                }
                if (!rep) {
                    return
                }
                if (JSON.stringify(rep) == '{}') {
                    Message.error('此流程还没有设置全局表单,请先设置全局表单!')
                    return
                }
                if (rep.resultMsg == 'formEmpty' || rep.result == 'formEmpty') {
                    Message.error('此流程还没有设置表单,请先设置表单!')
                    return
                }
                _me.formKey = rep.form.formKey
                //_me.formId=rep.form.formId;
                if (rep.form && rep.form.type == 'FRAME') {
                    _me.htmlSrc = rep.form.formValue
                    console.log(_me.htmlSrc, '_me.htmlSrc ', _me)
                    _me.formType = rep.form.type

                    //表单加载完成发布事件 审批按钮才可以点击
                    _me.$root.$emit('formLoading', false)
                } else {
                    _me.formId = rep.form.formId
                    form.preview(rep.form.formId, handlerJs)
                    if (_me.formData) {
                        _me.data = JSON.parse(Base64.decode(_me.formData))
                    } else {
                        _me.data = rep.data
                    }

                    if (rep.permission) {
                        const permissionObj = JSON.parse(rep.permission)
                        let commonRight = ''
                        //如果是管理端进入，则将页面字段的权限修改为可编辑
                        if (_me.type == 'manage') {
                            commonRight = 'w'
                            //如果是查看实例，也是获取发起流程的表单和权限。只不过所有可见的权限要变成编辑
                        } else if (
                            'request' == _me.type ||
                            _me.myReadType == 'myRequest' ||
                            _me.myReadType == 'delegate' ||
                            _me.myReadType == 'myRead' ||
                            _me.readDoneId ||
                            _me.type == 'read' ||
                            readOnly
                        ) {
                            commonRight = 'r'
                        }
                        if (permissionObj.fields && commonRight) {
                            for (var key in permissionObj.fields) {
                                const bodef = permissionObj.fields[key]
                                if (bodef) {
                                    for (var fname in bodef) {
                                        if (
                                            commonRight == 'w' ||
                                            (commonRight == 'r' &&
                                                bodef[fname] != 'n')
                                        ) {
                                            bodef[fname] = commonRight
                                        }
                                    }
                                }
                                permissionObj.fields[key] = bodef
                            }
                        }
                        if (permissionObj.table && commonRight) {
                            for (var key in permissionObj.table) {
                                const table = permissionObj.table[key]
                                if (table) {
                                    if (commonRight == 'w') {
                                        table['hidden'] = false
                                        table['add'] = true
                                        table['del'] = true
                                    } else if (commonRight == 'r') {
                                        table['add'] = false
                                        table['del'] = false
                                        table['required'] = false
                                        table['edit'] = false
                                    }
                                }
                                permissionObj.table[key] = table
                            }
                        }

                        _me.permission = permissionObj
                    }
                    _me.html = rep.form.formHtml
                    if (rep.form.helpFile) {
                        _me.formHelpFile = JSON.parse(rep.form.helpFile)
                    }
                    if (_me.html.split('ref="next_step_check_').length > 1) {
                        _me.$root.$emit('startFlowBtnChange', false)
                    }
                    //表单加载完成发布事件 审批按钮才可以点击
                    _me.$root.$emit('formLoading', false)
                    if (updateFormComponent) {
                        _me.formComponentKey = new Date().getTime()
                    }
                }
            }
            this.$store
                .dispatch('storeProcess/getUrgentStateConf', {
                    defId: this.defId,
                    instId: this.instId,
                    taskId: this.taskId,
                })
                .then((data) => {
                    if (data.conf) {
                        try {
                            data.conf = JSON.parse(data.conf)
                        } catch (error) {
                            data.conf = eval('(' + data.conf + ')')
                        }
                        window.urgentStateValue = {old: data.value}
                        if (!data.value) {
                            for (let index = 0, c; (c = data.conf[index++]); ) {
                                if (c.default) {
                                    data.value = c.state
                                    break
                                }
                            }
                        }
                        _me.urgentStateConf = data
                    }
                })
            if (
                this.taskId &&
                this.tasks &&
                JSON.stringify(this.tasks) != '{}'
            ) {
                if (
                    !this.tasks.bpmTask &&
                    !this.tasks.state &&
                    this.tasks.message == '此任务已被处理或不存在！'
                ) {
                    _me.$router.push('/v-flow/v-todo')
                    return
                }
                this.taskDetailLoading = Loading.service({
                    fullscreen: true,
                    lock: true,
                    text: '表单数据加载中，请耐心等待...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                }) //开始
                if (this.tasks.bpmTask.bpmnInstId) {
                    form.taskDetail(
                        {taskId: this.taskId, leaderId: this.leaderId},
                        handler
                    )
                } else {
                    form.getInstFormAndBO(
                        this.tasks.bpmTask.procInstId,
                        handler
                    )
                }
            } else if (
                this.taskId &&
                window.location.href.indexOf('/task/' + this.taskId + '/0') !=
                    -1
            ) {
                form.taskDetail(
                    {taskId: this.taskId, leaderId: this.leaderId},
                    handler
                )
                let params = {
                    taskId: this.taskId,
                    leaderId: this.leaderId,
                }
                this.$store.dispatch('storeProcess/taskDetail', params) //获取操作按钮
            } else if (this.instId) {
                if ('start' != this.type) {
                    this.isView = false
                }
                //查看我发起的，也使用发起流程的表单。只不过把编辑和必填权限改成只读
                if ('request' == this.type || 'myRequest' == this.myReadType) {
                    form.getFormAndBO({proInstId: this.instId}, handler)
                } else if ('read' == this.type || this.myReadType) {
                    const this_ = this
                    if (this.readId) {
                        //知会待办
                        //根据待办知会任务主键ID获取任务ID
                        this.$store
                            .dispatch(
                                'storeProcess/getBpmTaskNoticeById',
                                this_.readId
                            )
                            .then((row) => {
                                if (row.taskId) {
                                    //根据任务Id获取审批历史数据（只有一条）
                                    this.$store
                                        .dispatch(
                                            'storeProcess/getTaskKeyByTaskId',
                                            row.taskId
                                        )
                                        .then((res) => {
                                            if (res.formData) {
                                                this_.formData = res.formData
                                            }
                                            let isIncludData = res.formData
                                                ? false
                                                : true
                                            form.getInstFormAndBO(
                                                {
                                                    instId: this_.instId,
                                                    nodeId: res.taskKey,
                                                    includData: isIncludData,
                                                },
                                                handler
                                            )
                                        })
                                } else if (row.nodeId) {
                                    let data = {
                                        nodeId: row.nodeId,
                                        instId: this_.instId,
                                    }
                                    //根据任务节点ID和流程实例ID获取审批历史数据（只有一条）
                                    this.$store
                                        .dispatch(
                                            'storeProcess/getTaskKeyByNodeId',
                                            data
                                        )
                                        .then((res) => {
                                            if (res.formData) {
                                                this_.formData = res.formData
                                            }
                                            let isIncludData = res.formData
                                                ? false
                                                : true
                                            form.getInstFormAndBO(
                                                {
                                                    instId: this_.instId,
                                                    nodeId: res.taskKey,
                                                    includData: isIncludData,
                                                },
                                                handler
                                            )
                                        })
                                } else {
                                    //查看我发起的，也使用发起流程的表单
                                    form.getFormAndBO(
                                        {proInstId: this.instId},
                                        handler
                                    )
                                    // form.getInstFormAndBO(this_.instId, handler);
                                }
                            })
                    } else if (this.readDoneId) {
                        //知会已办
                        //根据已办知会任务主键ID获取任务ID
                        this.$store
                            .dispatch(
                                'storeProcess/getBpmTaskNoticeDoneById',
                                this_.readDoneId
                            )
                            .then((row) => {
                                if (row.taskId) {
                                    //根据任务Id获取审批历史数据（只有一条）
                                    this.$store
                                        .dispatch(
                                            'storeProcess/getTaskKeyByTaskId',
                                            row.taskId
                                        )
                                        .then((res) => {
                                            if (res.formData) {
                                                this_.formData = res.formData
                                            }
                                            let isIncludData = res.formData
                                                ? false
                                                : true
                                            form.getInstFormAndBO(
                                                {
                                                    instId: this_.instId,
                                                    nodeId: res.taskKey,
                                                    includData: isIncludData,
                                                },
                                                handler
                                            )
                                        })
                                } else if (row.taskKey) {
                                    let data = {
                                        nodeId: row.taskKey,
                                        instId: this_.instId,
                                    }
                                    //根据任务节点ID和流程实例ID获取审批历史数据（只有一条）
                                    this.$store
                                        .dispatch(
                                            'storeProcess/getTaskKeyByNodeId',
                                            data
                                        )
                                        .then((res) => {
                                            if (res.formData) {
                                                this_.formData = res.formData
                                            }
                                            let isIncludData = res.formData
                                                ? false
                                                : true
                                            form.getInstFormAndBO(
                                                {
                                                    instId: this_.instId,
                                                    nodeId: res.taskKey,
                                                    includData: isIncludData,
                                                },
                                                handler
                                            )
                                        })
                                } else {
                                    //查看我发起的，也使用发起流程的表单
                                    form.getFormAndBO(
                                        {proInstId: this.instId},
                                        handler
                                    )
                                    // form.getInstFormAndBO(this.instId, handler);
                                }
                            })
                    } else {
                        //查看我发起的，也使用发起流程的表单
                        form.getFormAndBO({proInstId: this.instId}, handler)
                        // form.getInstFormAndBO(this.instId, handler);
                    }
                } else {
                    //查看我发起的，也使用发起流程的表单
                    form.getFormAndBO({proInstId: this.instId}, handler)
                    // form.getInstFormAndBO(this.instId, handler);
                }
            } else if (this.defId) {
                let data = {}
                if (this.proInstId != undefined) {
                    data = {defId: this.defId, proInstId: this.proInstId}
                } else if (this.copyInstId) {
                    data = {defId: this.defId, copyInstId: this.copyInstId}
                } else {
                    data = {defId: this.defId}
                }
                form.getFormAndBO(data, handler)
            }
        },
        sendData() {
            this.$refs.iframe.contentWindow.postMessage({params:this.relationData});
        },
        getFlowKey() {
            if (this.defId || this.instId || this.taskId) {
                let url = '${bpmRunTime}/runtime/instance/v1/getFlowKey'
                if (this.defId) {
                    url = url + '?defId=' + this.defId
                } else if (this.instId) {
                    url = url + '?procInstId=' + this.instId
                } else if (this.taskId) {
                    url = url + '?taskId=' + this.taskId
                }
                let _me = this
                try {
                    _me.$http.get(url, 'json', false).then((resp) => {
                        const rep = resp.data
                        if (rep.state) {
                            _me.flowKey = rep.value
                        }
                    })
                } catch (error) {}
            }
        },
    },
    computed: {
        urgentStateValue: function () {
            return this.urgentStateConf.value
        },
        isPlmeformPage() {
            return this.$route.query.hasOwnProperty('plmeform')
        },
    },
    components: {OnlineForm, FilePreview},
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
@media print {
    .no-print {
        display: none;
    }
    .approve_content {
        padding: 0px !important;
    }
    .form-container-not {
        padding: 0px 0px 10px 0px !important;
    }
}
/deep/.el-form-item {
    margin-bottom: 15px !important;
    margin-top: 10px !important;
    margin-right: 10px !important;
}
/deep/ .form-table {
    width: 100%;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
}

/deep/ .form-table > thead > tr > th,
/deep/ .form-table > tbody > tr > th {
    text-align: right;
    color: #666;
    font-weight: normal;
}

/deep/ .form-table > tbody > tr > th.group-th {
    text-align: left;
    background: #f9f9f9;
    font-weight: bold;
}

/deep/ .form-table > thead > tr.sub-table-header > th {
    text-align: center;
    background: #fafafa;
}

/deep/ .form-table > tbody > tr > th > span,
/deep/ .form-table > thead > tr > th > span {
    color: #f00;
}

/deep/ .form-table > tbody > tr > th,
/deep/ .form-table > tbody > tr > td,
/deep/ .form-table > tfoot > tr > td,
/deep/ .form-table > thead > tr > th {
    border-right: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    padding: 10px;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
}

/deep/ .form-table-noBorder {
    border-top: 0px solid #ebeef5;
    border-left: 0px solid #ebeef5;
}

/deep/ .form-table-noBorder > tbody > tr > th,
/deep/ .form-table-noBorder > tbody > tr > td,
/deep/ .form-table-noBorder > tfoot > tr > td,
/deep/ .form-table-noBorder > thead > tr > th {
    border-right: 0px solid #ebeef5;
    border-bottom: 0px solid #ebeef5;
}

/deep/ .form-table > tfoot > tr > td {
    padding: 5px 10px;
}

.form-container {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
}

.form-container-not {
    border-bottom: 1px solid #ebeef5;
    padding: 30px 0 10px 0;
}

.form-container-not > span {
    border-left: 3px solid $--theme-color;
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    color: #666;
}

.form-container > span {
    border-left: 3px solid $--theme-color;
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    color: #666;
}

.form-content {
    // padding: 11px 0;
}

/deep/ div[aria-invalid='true'] + small,
/deep/ small.error-message {
    display: block;
    margin-top: 8px;
    color: #f56c6c;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.urgent_state_div {
    display: inline-block;
    float: right;
}

.urgent_state_div > span {
    font-weight: bold;
    font-size: 14px;
    color: #666;
    padding-right: 5px;
}

/deep/.el-radio__label {
    padding-left: 5px;
}

/deep/.el-radio__input.is-checked + .el-radio__label {
    color: none !important;
}

/deep/.text-fixed p {
    margin: 0;
    margin-bottom: -2px;
}
.tab-container {
    height: calc(100vh - 146px);
}
.tab-container.start-flow {
    height: calc(100vh - 110px);
}
.brStyle {
    nulldivstyle: #fff;
}
</style>
