<template>
  <a-modal
    class="announcementCustomModal"
    :width="modelStyle.width"
    :visible="visible"
    :bodyStyle="bodyStyle"
    @cancel="handleCancel"
    destroyOnClose
  >
    <template slot="title">
      <a-button icon="fullscreen" class="custom-btn" @click="handleClickToggleFullScreen" />
    </template>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">关闭</a-button>
      <!-- v-if="record.openType==='url'&&record.readFlag!=='1'" -->
      <a-button
        v-if="record.openType==='url'&&record.readFlag!=='1'&&isShowtoHandle"
        type="primary"
        @click="toHandle"
      >去处理</a-button>
    </template>
    <a-card class="daily-article" :loading="loading">
      <a-card-meta
        :title="record.titile"
        :description="'发布人：'+record.sender + ' 发布时间： ' + record.sendTime"
      ></a-card-meta>
      <a-divider />
      <span v-html="record.msgContent" class="article-content"></span>
    </a-card>
    <!--流程表单-->
    <a-modal
      :title="lcModa.title"
      v-model="lcModa.visible"
      :footer="null"
      :maskClosable="false"
      width="100%"
    >
      <component
        :disabled="lcModa.disabled"
        v-if="lcModa.visible"
        :is="lcModa.formComponent"
        :processData="lcModa.processData"
        :isNew="lcModa.isNew"
        @close="lcModa.visible=false,lcModa.disabled = false"
        @getDataList="getDataList"
      ></component>
    </a-modal>
  </a-modal>
</template>

<script>
import { postFormAction } from '@/api/manage'
export default {
  name: 'SysAnnouncementModal',
  components: {},
  data() {
    return {
      title: '通知消息',
      record: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      loading: false,
      bodyStyle: {
        padding: '0',
        height: window.innerHeight * 0.8 + 'px',
        'overflow-y': 'auto'
      },
      modelStyle: {
        width: '60%',
        style: { top: '20px' },
        fullScreen: false
      },
      lcModa: {
        title: '',
        disabled: false,
        visible: false,
        formComponent: null,
        isNew: false
      },
      isShowtoHandle: false,
      r: {}
    }
  },
  created() {},
  methods: {
    getDataList() {
      //
      this.visible = false
    },
    detail(record) {
      this.visible = true
      this.record = record
      //流程消息通过任务节点查询是否需要显示处理按钮
      console.log(111)
      console.log(this.record.openPage)
      if (this.record.openType === 'url' &&this.record.readFlag!=='1'&& this.record.openPage) {
        postFormAction('/actTask/todoGetByTaskId', { taskId: this.record.openPage }).then(res => {
          this.loading = false
          if (res.success) {
            this.data = res.result || []
            if (this.data.length > 0) {
              this.isShowtoHandle = true
              this.r = this.data[0] //流程处理参数
            } else {
              this.isShowtoHandle = false
            }
          }
        })
      }
    },
    handleCancel() {
      this.visible = false
    },
    /** 切换全屏显示 */
    handleClickToggleFullScreen() {
      let mode = !this.modelStyle.fullScreen
      if (mode) {
        this.modelStyle.width = '100%'
        this.modelStyle.style.top = '20px'
      } else {
        this.modelStyle.width = '60%'
        this.modelStyle.style.top = '50px'
      }
      this.modelStyle.fullScreen = mode
    },
    toHandle() {
      if (this.record.openType === 'url' && this.isShowtoHandle && this.r) {
        this.r.operationType = '1' //代办
        if (this.r.routeName.indexOf('外部表单') != -1) {
          //其他项目的表单流程
          alert('调用其他项目页面')
        } else if (this.r.routeName.indexOf('自定义') != -1) {
          //自定义的表单流程
          this.lcModa.disabled = true
          this.lcModa.title = '查看流程业务信息：' + this.r.processName
          let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
          this.lcModa.formComponent = com.component
          this.lcModa.isNew = false
          this.lcModa.processData = this.r
          this.lcModa.visible = true
        } else {
          //固定的表单流程
          this.lcModa.disabled = true
          this.lcModa.title = '查看流程业务信息：' + this.r.processName
          this.lcModa.formComponent = this.getFormComponent(this.r.routeName).component
          this.lcModa.processData = this.r
          this.lcModa.isNew = false
          this.lcModa.visible = true
        }
      } else {
        this.$message.error('已经处理过了，或者需要重新提交')
      }
    }
  }
}
</script>

<style lang="less">
.announcementCustomModal {
  .ant-modal-header {
    border: none;
    display: inline-block;
    position: absolute;
    z-index: 1;
    right: 56px;
    padding: 0;
    .ant-modal-title {
      .custom-btn {
        width: 56px;
        height: 56px;
        border: none;
        box-shadow: none;
      }
    }
  }
  .daily-article {
    border-bottom: 0;
  }
}
</style>
<style scoped lang="less">
.daily-article {
  .article-button {
    font-size: 1.2rem !important;
  }
  .ant-card-body {
    padding: 18px !important;
  }
  .ant-card-head {
    padding: 0 1rem;
  }
  .ant-card-meta {
    margin-bottom: 1rem;
  }
  .article-content {
    p {
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: initial;
      white-space: normal;
      font-size: 0.9rem !important;
      margin-bottom: 0.8rem;
    }
  }
}
</style>
