<template>
  <div class="form-container" :class="{'task-form': instId}">
    <div class="form-content">
      <el-row
        v-if="!isMobile"
        class="form-top-row"
        :class="{'hide-top': !instId && !isShowHelp}"
      >
        <el-col :span="12" class="top-left" :class="{'is-hide': !instId}">
          <div
              class="status-wrap"
              :style="{ '--statusBg': getCurrentStatusColorOrText('color') }"
            >
              <span class="status-icon"></span>
              <span class="status-text">
                {{ getCurrentStatusColorOrText('text') }}
              </span>
          </div>
          <div class="top-info-item">
            <span class="top-label">流程编号</span>
            <span class="top-value">{{ processInfo.id }}</span>
          </div>
          <div class="top-info-item">
            <span class="top-label">发起人</span>
            <span class="top-value">{{ processInfo.creator }}</span>
          </div>
          <div class="top-info-item">
            <span class="top-label">发起时间</span>
            <span class="top-value">{{ processInfo.updateTime }}</span>
          </div>
        </el-col>
        <el-col :span="12" class="top-right">
          <span v-if="isShowHelp" class="help" @click="preview">
            <ht-icon name="help"></ht-icon>
            帮助
          </span>
          <div
            v-if="mergencyConfig && mergencyConfig.conf.length > 0"
            class="emergency-status"
          >
            <span class="label">紧急状态:</span>
            <ht-radio
              v-if="mergencyConfig.right === 'w'"
              v-model="mergencyConfig.value"
              :options="mergencyConfig.conf"
              :props="{key: 'state', value: 'name'}"
            ></ht-radio>
            <span v-else :class="mergencyStatusColor[mergencyConfig.value]">
              {{ mergencyStatusMap[mergencyConfig.value] }}
            </span>
          </div>
        </el-col>
      </el-row>
      <h2
        v-if="!isMobile"
        class="form-top-title"
        :class="{'task-subject': instId}"
      >
        {{ instId ? processInfo.subject : processName }}
      </h2>
      <div v-if="isMobile" class="mobile-form__container">
        <ul class="form-top">
          <li class="top-info-item">
            <span class="top-label">流程编号:</span>
            <span class="top-value">{{ processInfo.id }}</span>
          </li>
          <li class="top-info-item">
            <span class="top-label">发起人:</span>
            <span class="top-value">{{ processInfo.creator }}</span>
          </li>
          <li class="top-info-item">
            <span class="top-label">发起时间:</span>
            <span class="top-value">{{ processInfo.updateTime }}</span>
          </li>
          <li>
            <span v-if="isShowHelp" class="help" @click="preview">
              <ht-icon name="help"></ht-icon>
              帮助
            </span>
          </li>
          <li
            v-if="mergencyConfig && mergencyConfig.conf.length > 0"
            class="emergency-status"
          >
            <span class="label">紧急状态:</span>
            <ht-radio
              v-if="mergencyConfig.right === 'w'"
              v-model="mergencyConfig.value"
              :options="mergencyConfig.conf"
              :props="{key: 'state', value: 'name'}"
            ></ht-radio>
            <span v-else :class="mergencyStatusColor[mergencyConfig.value]">
              {{ mergencyStatusMap[mergencyConfig.value] }}
            </span>
          </li>
        </ul>
        <h2
          class="form-top-title mobile-title"
          :class="{'task-subject': instId}"
          :style="{'--statusBg': getCurrentStatusColorOrText('color')}"
        >
          {{ instId ? processInfo.subject : processName }}
          <span class="status-icon"></span>
          <i class="status-text">
            {{ getCurrentStatusColorOrText('text') }}
          </i>
        </h2>
        <ht-online-form
          ref="flowOnlineForm"
          :html="innerHtml"
          :data="data"
          :permission="permission"
          :mobile-mode="isMobile"
          :instId="instId"
        />
      </div>
      <ht-online-form
        v-else-if="formType == 'INNER' && !isMobile"
        ref="flowOnlineForm"
        class="online-form"
        :html="innerHtml"
        :data="data"
        :permission="permission"
        :is-view="isView"
        :instId="instId"
      />
      <iframe
        v-else-if="formType == 'FRAME'"
        name="flowFrameForm"
        :src="frameUrl"
      ></iframe>
    </div>
  </div>
</template>
<script>
  import flow from '@/api/flow'
  import req from '@/request.js'

  import {mapState} from 'vuex'
  const STATUS_COLOR = {
    draft: { color: '#708192', text: '待提交' }, //待提交
    running: { color: '#409EFF', text: '审批中' },
    end: { color: '#BFBFBF', text: '已归档' },
    manualend: { color: '#C1AD9A', text: '已结束' },
    backToStart: { color: '#E55555', text: '被驳回' },
    back: { color: '#E55555', text: '被驳回' },
    revoke: { color: '#FFAE44', text: '已撤回' },
    revokeToStart: { color: '#FFAE44', text: '已撤回' },
  }
  const MERGENCY_STATUS_MAP = {
    1: '非常紧急',
    2: '比较紧急',
    3: '一般',
  }
  const MERGENCY_STATUS_COLOR = {
    1: 'red-color',
    2: 'yellow-color',
  }
  export default {
    name: 'BusinessForm',
    props: {
      instId: {
        type: String,
        default: '',
      },
      instStatus: {
        type: String,
        default: '',
      },
      frameSaveDataTimeOut: {
        type: Number,
        default: 10,
      },
      isView: {
        type: Boolean,
        default: false,
      },
      isMobile: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        form: null,
        data: null,
        permission: null,
        formType: 'INNER',
        innerHtml: null,
        frameUrl: null,
        frameRoger: null,
        frameCancelTimeout: null,
        frameSaveDataPromise: null,
        processInfo: {},
        statusColorMap: STATUS_COLOR,
        mergencyConfig: null,
        mergencyStatusMap: MERGENCY_STATUS_MAP,
        mergencyStatusColor: MERGENCY_STATUS_COLOR,
        isShowHelp: false,
        processName: '',
        defId: '',
      }
    },
    computed: {
      ...mapState('login', ['currentUser']),
      headers() {
        return {Authorization: `Bearer ${this.currentUser.token}`}
      },
    },
    watch: {
      form: function (newVal) {
        if (newVal) {
          this.formType = newVal.type
          if (this.formType == 'INNER') {
            this.innerHtml = newVal.formHtml
          } else if (this.formType == 'FRAME') {
            this.frameUrl = newVal.formValue
          }
        }
      },
      urgentStateValue(val) {
        const urgentStateValue = localStorage.getItem('urgentStateValue')
        if (urgentStateValue) {
          const savaData = {...JSON.parse(urgentStateValue), new: val}
          localStorage.setItem('urgentStateValue', JSON.stringify(savaData))
        }
      },
      mergencyConfig: {
        handler(config) {
          const urgentStateValue = localStorage.getItem('urgentStateValue')
          if (urgentStateValue) {
            const savaData = {
              ...JSON.parse(urgentStateValue),
              new: config.value,
            }
            localStorage.setItem('urgentStateValue', JSON.stringify(savaData))
          }
        },
        deep: true,
      },
    },
    created() {
      window.addEventListener('message', this.handleFrameMessage)
      if (this.instId) {
        this.getProcessInfoByInstId()
        this.getFormDetailByInstId()
      }
      this.getEmergencyStatusConf()
      this.defId && this.getProcessTitleByDefId()
    },
    beforeDestroy() {
      window.removeEventListener('message', this.handleFrameMessage)
    },
    methods: {
      saveFormData() {
        let data = {
          data: Base64.encode(JSON.stringify(this.data)),
          proInstId: this.instId,
          expression: '',
        }
        this.$confirm('确认修改表单数据?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
        })
          .then(() => {
            req
              .post(
                window.context.bpmRunTime + '/runtime/instance/v1/saveFormData',
                data
              )
              .then((res) => {
                if (res.data.state) {
                  this.$message.success(res.data.message);
                    this.getFormDetailByInstId();
                }
              })
          })
          .finally(() => {})
      },
      getEmergencyStatusConf() {
        const params = {
          defId: this.defId,
          instId: this.instId,
          taskId: this.$route.query.taskId,
        }
        flow.getUrgentStateConf(params).then((data) => {
          if (data.conf) {
            try {
              data.conf = JSON.parse(data.conf)
            } catch (error) {
              data.conf = eval('(' + data.conf + ')')
            }
            localStorage.setItem(
              'urgentStateValue',
              JSON.stringify({old: data.value})
            )
            if (!data.value) {
              if (data.conf) {
                data.conf.map((item) => {
                  if (item.default) {
                    data.value = item.state
                  }
                })
              }
            }
            this.mergencyConfig = data
          } else {
            localStorage.removeItem('urgentStateValue')
          }
        })
      },
      getProcessTitleByDefId() {
        flow.getProcessTitle(this.defId).then((res) => {
          if (res.state) {
            this.processName = res.value.name
          }
        })
      },
      getFormDetailByInstId() {
        const query = {
          instId: this.instId,
          myApplication: true,
          isDefAuthorize: 'true'
        }
        flow.getInstFormAndBO(query).then(({data}) => {
          if (data.state) {
            this.data = data.value.data
            this.form = data.value.form
            this.permission = data.value.permission
              ? JSON.parse(data.value.permission)
              : null
          }
        })
      },
      getData(verify) {
        if (this.formType == 'INNER') {
          return this.$refs.flowOnlineForm.getData(verify)
        } else if (this.formType == 'FRAME') {
          const frm = this.getFrameFormElement()
          // 发送保存数据的消息
          frm.contentWindow.postMessage('saveData', '*')
          this.frameRoger = false
          this.frameCancelTimeout = false
          // 1.未收到roger消息，认为url表单未引入hotent.helper.js文件
          const rogerJudge = new Promise((resolve, reject) => {
            setTimeout(() => {
              if (this.frameRoger === false) {
                this.$message.error(
                  `当前URL表单没有回复保存数据的消息，可能没有引入hotent.helper.js文件。`
                )
                reject()
              }
            }, 200)
          })
          // 2.超时未返回saveData消息
          const timeoutJudge = new Promise((resolve, reject) => {
            setTimeout(() => {
              if (this.frameCancelTimeout === false) {
                this.$message.error(
                  `当前URL表单保存数据超时，超时时间为：${this.frameSaveDataTimeOut}秒。`
                )
                reject()
              }
            }, this.frameSaveDataTimeOut * 1000)
          })

          // 3.接受到保存完数据的消息后resolve
          const receiveData = new Promise(
            (resolve) => (this.frameSaveDataPromise = resolve)
          )

          return Promise.race([rogerJudge, timeoutJudge, receiveData]).finally(
            () => {
              this.frameRoger = null
              this.frameCancelTimeout = null
              this.frameSaveDataPromise = null
            }
          )
        } else {
          throw `不识别的表单类型${this.formType}`
        }
      },
      getFrameFormElement() {
        const frm = document.querySelectorAll("[name='flowFrameForm']")[0]
        if (!frm) {
          this.$message.error('当前URL表单加载不正确。')
        }
        return frm
      },
      // 处理iframe表单发送过来的消息
      handleFrameMessage(e) {
        if (!e || !e.data || !e.data.type || e.data.type.startsWith('webpack')) {
          return
        }
        const frm = this.getFrameFormElement()
        switch (e.data.type) {
          //调整iframe的高度
          case 'height': {
            frm.style.visibility = 'hidden'
            // 提前还原高度
            frm.setAttribute('height', 'auto')
            setTimeout(function () {
              frm.setAttribute('height', e.data.height)
              frm.style.visibility = 'visible'
              frm.dispatchEvent(new Event('mouseover'))
            }, 0)
            break
          }
          //获取到frame表单传过来的流程变量数据
          case 'saveData': {
            if (e.data.state && this.frameSaveDataPromise) {
              const iframeData = {
                businessKey: e.data.businessKey,
                sysCode: e.data.sysCode,
              }
              if (e.data.vars) {
                iframeData.vars = e.data.vars
              }
              this.$emit('update:data', iframeData)
              this.frameSaveDataPromise()
            }
            break
          }
          //表示frame表单收到了保存表单数据的消息
          case 'roger':
            this.frameRoger = true
            break
          //frame表单取消超时判断
          case 'cancelTimeout':
            this.frameCancelTimeout = true
            break
        }
      },
      getProcessInfoByInstId() {
        flow.getProcessInfo(this.instId).then((res) => {
          this.processInfo = res.data
        })
      },
      getCurrentStatusColorOrText(type) {
        const currentStatus = this.processInfo.status || this.instStatus
        return STATUS_COLOR[currentStatus][type]
      },
    },
  }
</script>
<style lang="scss" scoped>
  $top-title-bg: #f5f6f8;
  $top-label-color: #b7b7b7;
  $top-value-color: #656565;
  $base-dark-title-color: #333;
  $base-font-size-large: 20px;
  $base-color-yellow: #ffa200;
  $base-padding: 20px;
  @mixin status-bg {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3OCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDc4IDYwIj4NCiAgPHBhdGggaWQ9IuWNsOeroCIgZD0iTTM3LjM3Miw0MGwuODIxLS44MTNhMTUuNTg2LDE1LjU4NiwwLDAsMC0xLjM1Mi0uODYxLjY3NS42NzUsMCwwLDAtLjQzNSwwYy0uMDQ5LjA0OC0uMTQ1LjMzNS0uMDQ5LjQzYTEuMTM1LDEuMTM1LDAsMCwwLC40ODQuMTkxLDcuNTA4LDcuNTA4LDAsMCwxLDEuMDE0LjE5MWMtLjcyNS41NzMtLjkxOC41MjYtMS41NDYuMWEzLjExNywzLjExNywwLDAsMC0xLjUtLjcxNyw2LjUxNiw2LjUxNiwwLDAsMS0xLjc4Ny0uOTU2Yy0xLjgzNS0xLjA1Mi0zLjY3MS0yLjEtNS41NTQtMy4xMDgtMS45MzEtMS4xLTMuODY0LTIuMTUxLTUuOC0zLjNsLjY3Ni0uOTA4LTEuNzg3LTFjLS4xLjYyMi0uMSwxLC42MjcuODEzYTIuNzYxLDIuNzYxLDAsMCwxLDEuMDE0LjI4N2MtLjcyNS4zMzUtMS4xMTEuNDc4LTEuNjQyLjA0OGExMC43NiwxMC43NiwwLDAsMC0xLjY0Mi0uODYxYy0xLjIwNy0uNjctMi4zNjYtMS4zMzgtMy41NzQtMi4wMDhMOS4yNjMsMjQuMDgzYTIuMjcyLDIuMjcyLDAsMCwxLS43MjUtLjYyMmMtLjMzOC0uNDMtLjQ4My0uODYxLjE0NS0xLC4xNDUtMS4zODYsMS4xNTktMi4yNDcsMS41NDYtMy4zOTVsLjYyNy4xOTJjLjA0OS0uMDQ4LjA0OS0uMS4xLS4xNDRsLS41OC0uNTI2LjY3Ni0uMTkxYTMuNSwzLjUsMCwwLDEsLjI5LTFsMS41OTQtMi44NjhjMS41OTQtMi44MjEsMy4yMzUtNS42NDEsNC44My04LjQxNC4xOTMtLjI4Ny4yOS0uNzY1LjYyNy0uNTI2YTIuNTEsMi41MSwwLDAsMSwuMTkzLS44MTJjLjM4Ni0uNzY1LjgyMS0xLjQ4MiwxLjIwNy0yLjIuMTQ1LS4zMzUuMjQyLS43NjUuNzczLS43NjUuMSwwLC4yNDEtLjMzNS4yOS0uNTI2UzIwLjcxLjg1LDIwLjgwNi43NTRhMi4wNjEsMi4wNjEsMCwwLDEsLjc3My0uNjY5Yy4xOTMtLjEuNDgzLjE0NC43NzMuMjM5LjEuMDQ4LjE5My4yMzkuMjkuMjg3LDEuMTU5LjUyNiwyLjMxOCwxLjA1MiwzLjU3NCwxLjYyNmwtLjQ4My40NzhhLjIxMi4yMTIsMCwwLDEsLjE0NS4wNDhjLjg2OS0uMzgyLDEuNTQ1LjE0NCwyLjEyNS42MjIuOTE3LjY3LDEuOTgsMS4wNTIsMi45LDEuNjI2YTMuNDksMy40OSwwLDAsMCwuNDM1LjI4N2MtLjE0NS4zMzUtLjg2OC40NzgtLjMzOC45NTYuMTkzLS4yMzguMzg2LS42NjkuNTc5LS43MTcuMjktLjA0OC41NzkuMjg3LjkxOC40M0wzNi44NDEsOC40YzIuOCwxLjYyNiw1LjYsMy4yNTEsOC40NTIsNC44MjguNTguMzM1LDEuMjU2LjU3MywxLjk4MS45MDgtLjMzOC4zMzUtLjk2Ni40My0uNDgzLjkwOGEzLjU2LDMuNTYsMCwwLDEsLjUzMS0uNjIxYy4xNDUtLjEuNDM0LDAsLjYyNy4xLDIuMzE4LDEuMzM4LDQuNjM3LDIuNjc3LDYuOTA2LDMuOTY4czQuNTg5LDIuNTgyLDYuODEsMy44NzJjLjUzMS4zMzUsMS4wMTQuODEzLDEuNTQ2LDEuMTQ3LjM4Ni4yMzkuOTY2LjIzOSwxLjMuNTI2LjkxOC43NjUsMi4xMjUsMS4wNTEsMy4wOTIsMS43MjEsMS4wNjIuNjY5LDIuMTczLDEuMjQzLDMuMjM1LDEuODY0LjQzNC4yMzkuOTE4LjUyNi44MjEsMS4xNDctLjA0OS4yODctLjEuNTczLS4xOTMuOTU3LTEuNzg3LTEuMTQ4LTMuNjIzLTEuODE2LTUuMDcyLTMuMTU2bC4xLS4xNDNjLS4xOTQuMDQ4LS4zODcuMTQzLS40ODMuMDQ4TDYzLjY5NCwyNC45YTYuOTcsNi45NywwLDAsMC0xLjA2My0uMzM0Yy00LjEtMi4yLTguMjU4LTQuNTg5LTEyLjQxMi02Ljk4YTEuNjI5LDEuNjI5LDAsMCwxLS43NzMtMS4xYzAtLjQzLS4xOTMtLjUyNi0uNDgzLS42NjlhNC43OSw0Ljc5LDAsMCwxLS44MjEtLjUyNmMtLjMzOC0uMjg3LS41MzEtLjE0NC0uNjc2LjIzOC4zMzguNDMxLDEuMjA3LjI4NywxLjE1OSwxLjI0My0uMzM4LS4xOTEtLjUzMS0uMjg3LS43NzMtLjQzLTQuMzk1LTIuNTgxLTguODM4LTUuMTE1LTEzLjIzMy03LjY0OS0uMzg2LS4yMzgtLjgyMS0uNjIxLS44Ny0xLS4xNDUtLjk1Ny0xLjA2My0uOTU3LTEuNTk0LTEuMzg2LS4wNDgtLjA0OC0uMjkuMS0uNDgzLjE5MS4zMzguNDc5LDEuMTU5LjM4MywxLjE1OSwxLjJMMjIuMDE0LDEuNTE5YTcuMTc4LDcuMTc4LDAsMCwwLS40MzQuNjY5cS0xLjk1MywzLjQzNC0zLjk2MSw2LjgzNmE1LjQ3Niw1LjQ3NiwwLDAsMS0uOTE4Ljk1NmMuMTQ1LjUyNi0uMSwxLjEtMS4wNjMsMi4zLS4xOTItLjEtLjQzNC0uMTQ0LS42NzYtLjIzOWwtLjEuMWMuMTQ1LjIzOS4zMzguNDMuNDgzLjcxNy0xLjExMSwxLjkxMy0yLjIyMiwzLjgyNS0zLjI4NSw1LjczN3EtMS4xMDUsMS44ODgtMi4xMjUsMy44MjRhLjc1NC43NTQsMCwwLDAsLjI0Mi41NzNsOS44NTMsNS41OTRjNC4yLDIuNDM5LDguNDUyLDQuODI5LDEyLjY1NCw3LjMxNS4yNDIuMTQ0LjM4Ni40My42MjguNTczLjQzNC4yNC45MTguMzM1LDEuMy41MjZMNTQuMDM0LDQ4LjAzNGMyLjUxMSwxLjQzNCw1LjAyMywyLjgyMSw3LjQ4Niw0LjI1NS0uMTQ1LjYyMi4zODcsMS4xNDcuNzczLjk1NmEuOTgzLjk4MywwLDAsMSwuOTY2LjE0NGMyLjksMS42MjUsNS43NDgsMy4yNTEsOC42NDYsNC44NzZsLjYyNy4zODMsMy4wOTItNS4zNTRjMS4wMTQtMS43NjksMS45OC0zLjQ5LDMuMDQyLTUuMjU5czIuMTc0LTMuMzk1LDMuMTg4LTUuMTYzYy45NjYtMS43MjEsMS44MzUtMy40OSwyLjY1Ni01LjExNi0uMTkzLS40NzgtLjI5LS45MDgtLjQ4My0xLjMzOC0uMTQ1LS4zODItLjE0NS0uOTA4LS44MjEtLjgxMi0uMSwwLS4xOTMtLjE5MS0uMjktLjI4N2wtLjE0NS0uMDQ4Yy4yNDIuMjg3LjUzMS41NzMuODIxLjg2MS0uMzg2LjMzNS0uNjc2LjMzNS0xLjA2My0uMS0uMTQ1LS4xOTEtLjQ4Mi0uMTkxLS43MjQtLjI4Ny0xLjI1Ni0uNzY1LTIuNDYzLTEuNTMtMy43MTktMi4yNDctLjI0Mi0uMTQ0LS41MzEtLjE5MS0uNzczLS4zMzUtLjg3LS41MjYtMS42OS0xLjEtMi41MTEtMS42NzMtLjA0OS4wNDgtLjE0NS4xLS4xOTMuMTQzLS4wNDktLjEtLjE5My0uMTkxLS4xNDUtLjIzOCwwLS40MzEuMDQ5LS44NjEuMS0xLjQzNHExLjksMS4wNDUsMy43NjcsMi4xNTFjMS41Ljg2MSwyLjk0NiwxLjc2OSw0LjM5NCwyLjYyOS4zMzguMTkxLjcyNS4yODcsMS4wNjMuNDc4LjQzNS4yODcsMS4xNTkuNDMuNzczLDEuMTk1bC4yOS4xOTEuMTkzLS43MTcsMS4wMTQuODYxLS41MzEuMzgzLjEuMzM1Yy4xNDUtLjE0NC4zMzgtLjI4Ny41MzEtLjQ3OWEzLjk3NCwzLjk3NCwwLDAsMSwuMS42MjIuMzcxLjM3MSwwLDAsMS0uMTkzLjA0OGMtLjEtLjA0OC0uMTkzLS4xNDQtLjI5LS4xOTEtLjA0OS4xLS4wNDkuMjM5LS4xLjMzNSwwLC4yMzguMS41MjYsMCwuNzE3LS44NjgsMS41NzgtMS44MzUsMy4yLTIuNzUzLDQuNzgxbC0uNzI1LS4xOTFjLjUzMS45MDgtLjEsMS41My0uNDM0LDIuMTUxLTEuOTMyLDMuNDktMy45MTMsNi45OC01Ljg5MywxMC40Ny0uNjc2LDEuMjQzLTEuNDQ5LDIuNDM4LTIuMTI1LDMuNjMzLS40ODMuODEzLS42NzYuODYxLTEuNTQ1LjQzLTIuMTc0LTEuMTQ3LTQuNC0yLjI0Ny02LjU2OS0zLjQ0MkM2MS44MSw1NC4yLDU4LjA0Myw1Miw1NC4yMjgsNDkuOGMtMS45ODEtMS4xNDgtNC4wMDktMi4yNDctNS45ODktMy40NDItMS40NDktLjg2MS0yLjktMS43NjktNC40LTIuNTgycS0yLjEtMS4yMTQtNC4yNS0yLjM0M0ExOS41NzQsMTkuNTc0LDAsMCwwLDM3LjM3MSw0MFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04LjI0OSAtMC4wNjMpIiBmaWxsPSIjYjhiOGI4Ii8+DQo8L3N2Zz4NCg==);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    background-color: var(--statusBg);
    transform: rotate(-15deg);
  }
  .form-container {
    background: #fff;
    padding: 32px;
    padding-top: 0;
    min-height: 300px;
    height: calc(100% - 40px);
    overflow: auto;
    .mobile-form__container {
      background: url('../../assets/img/mobile-android.png') no-repeat center
        center;
      background-size: calc(100% + 36px) calc(100% + 60px);
      width: 360px;
      height: 720px;
      padding: 16px;
      overflow: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -180px;
      margin-top: -400px;
      border: 20px solid transparent;
      border-width: 30px 20px 36px 20px;

      scrollbar-width: 0;
      -ms-overflow-style: none;
      &::-webkit-scrollbar {
        width: 0;
      }
      .form-top {
        list-style: none;
        padding-left: 24px;
      }
      .top-info-item {
        padding-bottom: 20px;
        .top-label {
          display: inline-block;
          width: 80px;
          text-align: right;
          color: $top-label-color;
        }
        .top-value {
          color: $top-value-color;
          padding-left: 10px;
        }
      }
      .form-top-title {
        .status-icon {
          top: -48px;
        }
        .status-text {
          top: -46px;
          right: 53px;
        }
      }
    }
    iframe[name='flowFrameForm'] {
      min-height: 300px;
      width: 100%;
      border: 0px;
    }
    .form-top-title {
      text-align: center;
      color: $base-dark-title-color;
      font-size: 24px;
      margin: 10px 0;
      height: 56px;
      line-height: 56px;
      position: relative;
      .status-icon {
        @include status-bg;
        position: absolute;
        display: inline-block;
        width: 78px;
        height: 60px;
        right: 44px;
        top: 3px;
      }
      .status-text {
        position: absolute;
        right: 53px;
        transform: rotate(15deg);
        top: 4px;
        color: var(--statusBg);
        font-size: $base-font-size-large;
        font-weight: 400;
      }
    }
    .form-top-row {
      height: 72px;
      line-height: 72px;
      background: #f9f9f9;
      //border-bottom: 1px solid #dcdee0;
      .is-hide {
        visibility: hidden;
      }
      .top-left {
        padding: 0 24px;
        display: flex;
        .top-info-item {
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          justify-content: center;
          line-height:2;
          &:not(:last-child) {
            padding-right: 40px;
          }
        }
      }
      .top-right {
        display: flex;
        justify-content: flex-end;
        .help {
          cursor: pointer;
          margin-top: 2px;
          color: $base-dark-title-color;
          ::v-deep.fa-icon {
            vertical-align: -0.1em;
          }
        }
        .emergency-status {
          margin-left: 32px;
          .label {
            color: $base-dark-title-color;
          }
          ::v-deep {
            .inputs {
              width: 284px;
              white-space: nowrap;
              margin-left: 10px;
              .el-radio {
                top: 2px;
                color: $base-dark-title-color;
                &:first-child {
                  color: $base-color-red;
                }
                &:nth-child(2) {
                  color: $base-color-yellow;
                }
              }
            }
          }
        }
      }
      .top-info-item {
        .top-label {
          color: $top-label-color;
        }
        .top-value {
          color: $top-value-color;
         // padding-left: 10px;
        }
      }
    }
    .hide-top {
      display: none;
    }
    ::v-deep {
      .el-row--flex.is-align-top {
        align-items: unset;
      }
    }
  }
  .task-form {
    .form-content {
      .online-form {
        padding-bottom: $base-padding;
        ::v-deep {
          .opinion-span {
            white-space: pre-line;
            line-height: 1em;
          }
        }
      }
    }
  }
  ::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;
        }
      }
    }
  }
  .status-wrap {
      position: relative;
      margin-right: 56px;
      height: 56px;
      margin-top: 8px;
      .status-icon {
        mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI1NiIgdmlld0JveD0iMCAwIDY0IDU2Ij4NCiAgPHBhdGggaWQ9IuWNsOeroCIgZD0iTS0zNzQxLjYsMzgyLjFsLTkuNzI1LTE1LjMyNGEyLjg4NCwyLjg4NCwwLDAsMC0zLjk2NS0uODlsLTQ4LjUzMiwzMC42ODRhMi44NzUsMi44NzUsMCwwLDAtLjg5MywzLjk1NWw5LjcyNSwxNS4zMjZhMi44ODIsMi44ODIsMCwwLDAsMy45NjEuODg3bDQ4LjUzNC0zMC42ODJBMi44NjQsMi44NjQsMCwwLDAtMzc0MS42LDM4Mi4xWm0tMS45MzcsMi4zMDgtNDguNTM0LDMwLjY4NmEuOTEzLjkxMywwLDAsMS0xLjI2MS0uMjg0bC05LjcyNS0xNS4zMjZhLjkxNC45MTQsMCwwLDEsLjI4Ni0xLjI2M2w0OC41MzYtMzAuNjg0YS45MTIuOTEyLDAsMCwxLDEuMjYuMjg2bDkuNzI5LDE1LjMyNkEuOTI4LjkyOCwwLDAsMS0zNzQzLjUzNCwzODQuNFptLTQxLjgzOC05LjcyNC44MDYsMS45MzIsMS4wNDQtMS44MTMsMi4wODYtLjE2OC0xLjQwNi0xLjU1NC40NzktMi4wMzItMS45MDcuODU3LTEuNzkxLTEuMDgzLjIyNywyLjA4MS0xLjU4OSwxLjM1NFptMTIuMzU3LTUuNzUxLTEtMS44MzktLjg0OSwxLjkxNS0yLjA2Mi4zOTMsMS41NTcsMS40LS4yNjksMi4wNzQsMS44MTYtMS4wNDksMS44OTQuOS0uNDM3LTIuMDQ5LDEuNDM2LTEuNTItMi4wODMtLjIxOFptMTguODQxLDMwLjgwOS0xLjY1OS0xLjI3NC0uMDA3LDIuMDg5LTEuNzMzLDEuMTc0LDIsLjY1OC41ODgsMi4wMDYsMS4yMzctMS42ODgsMi4wOTQuMDU5LTEuMjI5LTEuNy43MDktMS45NjFabS02Ljc3Miw4LjMyOS0uNzkxLTEuOTM4LTEuMDYyLDEuODA2LTIuMDg0LjE1MSwxLjM5MiwxLjU2MS0uNSwyLjAzLDEuOTE4LS44MzcsMS43ODQsMS4xMDgtLjIxLTIuMDgzLDEuNTg5LTEuMzUyWm0tMTIuNDA1LDUuNjY0Ljk5MywxLjg0Ny44NjYtMS45MDksMi4wNjItLjM2OC0xLjU0Ny0xLjQxLjI4NC0yLjA3Mi0xLjgyMywxLjAzLTEuODg0LS45MTEuNDIsMi4wNDUtMS40NTcsMS41MTRabS0xOC41ODMtMzAuOTU0LDEuNjUsMS4yOTUuMDI0LTIuMDkxLDEuNzQtMS4xNjgtMS45ODQtLjY3MS0uNTczLTIuMDE1LTEuMjUyLDEuNjc3LTIuMDk0LS4wNzYsMS4yMTIsMS43MDUtLjcyMywxLjk2NlptLTcuMzY4LDkuMDI3YTI2LjAyNiwyNi4wMjYsMCwwLDEsMTIuMTEyLTIyLjY3NCwyNi4xNCwyNi4xNCwwLDAsMSwyNS43MDgtMS4yNDJsMS45MTQtMS4yMWEyNy45LDI3LjksMCwwLDAtNy41MjYtMi44NjQsMjguMDQsMjguMDQsMCwwLDAtMTAuNzQyLS4zMSwyNy44MjEsMjcuODIxLDAsMCwwLTEwLjQsMy45NzIsMjcuOSwyNy45LDAsMCwwLTguMDQxLDcuNjkyLDI3Ljg1OCwyNy44NTgsMCwwLDAtNC4zMjQsOS44MjUsMjcuNzUxLDI3Ljc1MSwwLDAsMC0uNjIyLDguMDE5Wm01Mi4xMTktMS4zNTNhMjUuOTkxLDI1Ljk5MSwwLDAsMS0xMi4xLDIyLjY3MiwyNi4xMjMsMjYuMTIzLDAsMCwxLTI1LjcwNywxLjI0NGwtMS45MTgsMS4yMTJhMjguMDMxLDI4LjAzMSwwLDAsMCw3LjUyOSwyLjg2MiwyNy45NTksMjcuOTU5LDAsMCwwLDEwLjc0Mi4zMSwyNy44LDI3LjgsMCwwLDAsMTAuNC0zLjk3LDI3Ljk0NiwyNy45NDYsMCwwLDAsOC4wNDMtNy42OSwyNy45ODYsMjcuOTg2LDAsMCwwLDQuMzE0LTkuODI0LDI3LjcyMSwyNy43MjEsMCwwLDAsLjYyLTguMDIzWm0tMzQuMjE5LTEyLjE5M2ExNS4xNzgsMTUuMTc4LDAsMCwxLDcuMi0yLjMyNWwyLjk2Mi0xLjg3MmExNy4xNDUsMTcuMTQ1LDAsMCwwLTExLjIxNSwyLjU1NCwxNy4wNzQsMTcuMDc0LDAsMCwwLTcuMSw5LjAyN2wyLjk2LTEuODcxYTE1LjEzOCwxNS4xMzgsMCwwLDEsNS4xOS01LjUxMlptMTYuMzI2LDI1LjczOGExNS4xMzMsMTUuMTMzLDAsMCwxLTcuMiwyLjMyOWwtMi45NiwxLjg3MmExNy4xNDYsMTcuMTQ2LDAsMCwwLDExLjIxMy0yLjU1NiwxNy4wNTQsMTcuMDU0LDAsMCwwLDcuMS05LjAyN2wtMi45NTgsMS44NzVBMTUuMTczLDE1LjE3MywwLDAsMS0zNzY1LjA3NSw0MDMuOTk1Wm0tMjEuODI5LTQuMTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzODA1LjE1MiAtMzYzLjEyNykiLz4NCjwvc3ZnPg0K);
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        background-color: var(--statusBg);
        display: inline-block;
        width: 64px;
        height: 56px;
      }
      .status-text {
        position: absolute;
        left: 10px;
        transform: rotate(-30deg);
        top: -15px;
        color: var(--statusBg);
        font-size: 14px;
        user-select: none;
        display: block;
        width: 64px;
        font-style: normal;
      }
    }
</style>
