<template>
  <div>
    <template v-if="(viewType === '3' || viewType === '4') && openType==='draftBox'">
      <Modal v-model="showModal" :mask-closable="false" :closable="true" width="1200"
             v-draggable="options" @on-cancel="cancel">
        <component :is="zjName" :busId="busId" :taskId="taskId" :busData="busData" :type="type"></component>
        <template #footer>
          <Button @click="cancel">关闭</Button>
        </template>
      </Modal>
    </template>
    <template v-if="viewType === '3' && openType==='details'">
      <component :is="zjName" :busId="busId" :taskId="taskId" :busData="busData" :type="type"
                 @cancel="cancel"></component>
    </template>
  </div>
</template>
<script>
  let $this
  import { getToken } from '../bc-libs/token-util'

  export default {
    name: 'commonComponent',
    components: {},
    props: {
      show: Boolean,
      value: Object,
      openType: {//打开类型 快捷操作或详情
        type: String,
        default: 'details',
      },
    },
    data () {
      return {
        showModal: true,
        busId: null,
        taskId: null,
        type: null,
        viewType: '3',
        viewUrl: null,
        busData: null,
        zjName: null,
        nowDateStr: '',
        options: {
          trigger: '.ivu-modal-header',
          body: '.ivu-modal',
          recover: true
        }
      }
    },
    methods: {
      cancel (type) {
        this.showModal = false;
        this.$emit('update:show', false)
        //如果需要刷新,就触发
        if (type === 'refresh') {
          this.$emit('reload-data')
        }
      },
      openView () {//打开展示页面
        //组件弹出形式
        if (this.viewType === '3' && this.viewUrl) {
          this.zjName = () => import(/* @vite-ignore */ `@/view/${this.viewUrl}.vue`)
        }
        //菜单路由形式
        else if (this.viewType === '1' && this.viewUrl) {
          //将参数存在localStorage中,跳转后的页面直接获取
          this.$router.push({
            name: this.viewUrl,
            params: {
              taskId: this.taskId, busId: this.busId, type: this.type,
              busData: this.busData
            },
          })
        }
        //页面跳转形式
        else if (this.viewType === '2' && this.viewUrl) {
          //将参数拼接在url中,然后跳转过去.
          window.open(this.viewUrl + '?token=' + getToken() +
            '&taskId=' + this.taskId + '&busId=' + this.busId + '&type=' + this.type
            + '&busData=' + JSON.stringify(this.busData), '_blank')
        }
      },
    },
    mounted () {
      $this = this
    },
    created () {
      if (!this.zjName && this.viewUrl) {
        this.zjName = () => import(/* @vite-ignore */ `@/view/${this.viewUrl}.vue`)
      }
    },
    watch: {
      value: {
        immediate: true,
        handler: function () {
          //赋值
          this.taskId = this.value.taskId ? this.value.taskId : ''
          this.busId = this.value.busId ? this.value.busId : ''
          this.type = this.value.type ? this.value.type : ''
          this.busData = this.value.busData ? this.value.busData : ''
          //如果打开类型是快捷操作,那除了类型为4(与详情地址相同)之外,都是按照自己的url来展示
          if (this.openType === 'draftBox' && this.value.draftBoxUrlType !== '4') {
            this.viewUrl = this.value.draftBoxUrl ? this.value.draftBoxUrl : ''
            this.viewType = this.value.draftBoxUrlType ? this.value.draftBoxUrlType : '3'//默认是组件弹出
          } else {
            this.viewUrl = this.value.busUrl ? this.value.busUrl : ''
            this.viewType = this.value.busUrlType ? this.value.busUrlType : '3'//默认是组件弹出
          }
          //根据openType的不同,呈现的效果也不同
          this.openView()

        }
      },
      show: {
        immediate: true,
        handler: function () {
          //赋值
          this.showModal = this.show
        }
      },
    }
  }
</script>

<style>
  .my-modal-parent .ivu-modal-mask {
    z-index: 1001;
  }

  .my-modal {
    z-index: 1002
  }
</style>
