<template>
  <div class="form-container">
    <!-- <div class="form-preview__header">
      <ht-h3 inline>表单预览</ht-h3>
      <div class="header-right">
        <ht-switch
          v-model="validate"
          active-text="校验表单"
          inactive-text="不校验表单"
        />
        <el-button type="primary" @click="handleShowData">表单数据</el-button>
      </div>
    </div>
    <ht-divider /> -->
    <ht-online-form
      ref="flowOnlineForm"
      :html="innerHtml"
      :data="data"
      :permission="permission"
    />
    <el-dialog
      class="data-show__dialog"
      :visible.sync="dataShow"
      title="表单数据"
    >
      <codemirror v-model="dataStr" :options="dataStyle"></codemirror>
      <el-footer>
        <el-button type="primary" size="small" @click="handleCopyData">
          复制
        </el-button>
        <el-button size="small" @click="dataShow = false">关闭</el-button>
      </el-footer>
    </el-dialog>
  </div>
</template>
<script>
  import { previewDesignVue, getMainFormByAlias } from '@/api/form.js'
  import { Base64 } from 'js-base64'
  import { codemirror } from 'vue-codemirror'
  import 'codemirror/mode/javascript/javascript'

  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/base16-light.css'
  import { locale } from 'moment'
  export default {
    name: 'FormPreview',
    components: {
      codemirror,
    },
    props: {
      formId: {
        type: String,
        default: '',
      },
      formKey: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        innerHtml: null,
        data: null,
        permission: null,
        validate: false,
        dataShow: false,
        dataStyle: {
          value: '',
          mode: 'javascript',
          readOnly: true,
          smartIndent: true,
          tabSize: 4,
          theme: 'base16-light',
          lineNumbers: true,
          line: true,
        },
      }
    },
    computed: {
      dataStr: {
        get() {
          return JSON.stringify(this.data, null, '\t')
        },
        set(val) {},
      },
    },
    mounted() {
      this.getFormById()
      let _this = this
      window.addEventListener('message', (e) => {
        if (e.data && e.data == 'form_data_request') {
          //表单数据传递给父页面
          window.parent.postMessage({ formData: _this.data }, '*')
        }
      })
    },
    methods: {
      async getFormById() {
        let formId = this.formId
        if (this.formKey) {
          let data = await getMainFormByAlias(this.formKey)
          formId = data.id
        }
        if (!formId) {
          return
        }
        previewDesignVue(formId).then((resp) => {
          const { bpmForm, data, permission } = resp
          this.innerHtml = bpmForm.formHtml
          let formData = this.getQueryParamsFormData()
          if (formData && formData != '{}') {
            this.data = JSON.parse(formData)
          } else {
            this.data = data
          }
          // this.data = data
          this.permission = permission
          bpmForm.diyJs && this.handlerJs(bpmForm.diyJs)
          //表单数据传递给父页面
          //window.parent.postMessage({ formData: data }, '*')
        })
      },
      getQueryParamsFormData() {
        let formData = ''
        const polUrls = window.location.href.split('?')
        if (polUrls[1]) {
          const arr = polUrls[1].split('&')
          if (arr) {
            arr.forEach((item) => {
              let temp = item.split('=')
              if (temp[0] == 'formData') {
                formData = temp[1]
                formData = Base64.decode(decodeURIComponent(formData))
                formData = formData.substr(0, formData.lastIndexOf('}') + 1)
                return
              }
            })
          }
        }
        return formData
      },
      handlerJs(diyJs) {
        const currentUser = this.$store.state.user
        let data = this.data
        let _this = this
        const $ = require('jquery')
        eval(diyJs)
      },
      handleShowData() {
        this.$refs.flowOnlineForm.getData(this.validate).then((resp) => {
          resp && (this.dataShow = true)
        })
      },
      handleCopyData() {
        this.$copyText(this.dataStr).then(() => {
          this.$message.success('复制成功')
          this.dataShow = false
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .form-container {
    background: #fff;
    padding: 20px;
    min-height: 300px;
    height: calc(100% - 40px);
    overflow-y: auto;
    .form-preview__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    ::v-deep .el-main {
      .formT_box {
        .form-table {
          width: 100%;
          .sub-table-header {
            th {
              border: 1px solid #f3f5f7;
              padding: 15px;
              background-color: #fafafa;
            }
          }
          tbody tr td {
            padding: 10px 0;
            border: 1px solid #f3f5f7;
            // text-align: center;
          }
        }
      }
    }
    ::v-deep {
      .el-table {
        .file-upload-container {
          display: inline-block;
        }
        .file-list__wrap .file-item {
          width: 100%;
          .file__name {
            text-align: left;
          }
        }
      }
    }
  }
  .data-show__dialog ::v-deep {
    .el-dialog__body {
      padding: 20px;

      .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
</style>