<template>
  <DeviceApplyDetail
    v-if="showType === '设备申请'"
    :refObj="refObj"
  ></DeviceApplyDetail>
  <div class="form-container" v-else>
    <AbilityApplication
      :refObj="refObj"
      v-if="showType === '能力申请'"
    ></AbilityApplication>
    <PutOnTheShelf
      :refObj="refObj"
      v-else-if="showType === '能力上架'"
    ></PutOnTheShelf>
    <OffTheShelf
      :refObj="refObj"
      v-else-if="showType === '能力下架'"
    ></OffTheShelf>
    <Demand :refObj="refObj" v-else-if="showType === '能力需求'"></Demand>
    <Comment :refObj="refObj" v-else-if="showType === '需求评论'"></Comment>
    <dataResourceApplication
      :refObj="refObj"
      v-else-if="showType === '数据资源申请'"
    ></dataResourceApplication>
    <cloudResources
      :refObj="refObj"
      v-else-if="showType === '云资源'"
    ></cloudResources>
    <OtherApplications :refObj="refObj" v-else></OtherApplications>
    <div v-if="showType !== '云资源'">
      <div class="title">审批详情</div>
      <template v-for="item in dataSource.data" :key="item">
        <div class="oddNumbers">子单号:{{ item[0] }}</div>
        <a-table
          :dataSource="item[1]"
          :columns="dataSourceColumns"
          v-if="showType === '数据资源申请'"
        >
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
          </template>
        </a-table>
        <a-table :dataSource="item[1]" :columns="columns" v-else>
          <template #bodyCell="{ column, text }">
            <template v-if="column.dataIndex === 'name'">
              <a>{{ text }}</a>
            </template>
          </template>
        </a-table>
      </template>
    </div>
  </div>
</template>
<script setup>
  import AbilityApplication from './AbilityApplication.vue'
  import PutOnTheShelf from './PutOnTheShelf .vue'
  import OffTheShelf from './OffTheShelf.vue'
  import Demand from './Demand.vue'
  import Comment from './Comment.vue'
  import dataResourceApplication from './dataResourceApplication.vue'
  import cloudResources from './cloudResources.vue'
  import DeviceApplyDetail from './DeviceApplyDetail.vue'
  import OtherApplications from '@/views/personalCenter/components/OtherApplications '
  import { onMounted, reactive, defineProps, ref } from 'vue'
  import Cookies from 'js-cookie'
  // import { baseURL } from '@/config'
  import qs from 'qs'
  import {
    getApplyForm,
    getTaskHandleDetailInfo,
    getDemandForm,
    nengliziyuanshangjiaapply,
    getTaskVariables,
  } from '@/api/personalCenter'
  import { selectOneDel } from '@/api/home'
  const props = defineProps({
    processDefinitionName: { type: String, default: null },
    businessKey: { type: String, default: null },
    processInstanceId: { type: String, default: null },
    resourceId: { type: String, default: null },
    refObj: { type: Object, default: null },
    showType: { type: String, default: null },
  })
  const refObj = ref({})
  const showType = ref('')
  // eslint-disable-next-line vue/no-setup-props-destructure
  refObj.value = props.refObj
  // eslint-disable-next-line vue/no-setup-props-destructure
  showType.value = props.showType
  //流转详情
  const dataSource = reactive({ data: [] })
  console.log('refObj------------>', refObj)

  // console.log(props.refObj, '---------------------------------------')

  const downloadFile = (path, name) => {
    const xhr = new XMLHttpRequest()
    xhr.open('get', path)
    xhr.responseType = 'blob'
    xhr.send()
    xhr.onload = function () {
      if (this.status === 200 || this.status === 304) {
        // 如果是IE10及以上，不支持download属性，采用msSaveOrOpenBlob方法，但是IE10以下也不支持msSaveOrOpenBlob
        if ('msSaveOrOpenBlob' in navigator) {
          navigator.msSaveOrOpenBlob(this.response, name)
          return
        }
        // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
        // const url = URL.createObjectURL(blob);
        const url = URL.createObjectURL(this.response)
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.download = name
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        URL.revokeObjectURL(url)
      }
    }
  }
  //表单信息
  const formName = reactive({
    user: '',
    phone: '',
    unit: '',
    area: '',
    system: '',
    scene: '',
    basis: '',
    id: '',
  })
  let shifoushizujian = ref('')
  let nameNotShow = ref('')
  let algorithmShow = ref('')
  const dataForm = reactive({ data: {} })
  const columns = [
    {
      title: '任务名称',
      dataIndex: 'activityName',
      key: 'activityName',
      width: '180px',
    },
    {
      title: '处理部门',
      dataIndex: 'assigneeDeptName',
      key: 'assigneeDeptName',
      width: '180px',
    },
    {
      title: '处理人',
      dataIndex: 'assigneeName',
      key: 'assigneeName',
      width: '180px',
    },
    {
      title: '任务开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: '180px',
    },
    {
      title: '任务结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
      width: '180px',
    },
    {
      title: '审核意见',
      dataIndex: 'comment',
      key: 'comment',
      width: '180px',
    },
    {
      title: '任务时长',
      dataIndex: 'duration',
      key: 'duration',
      width: '180px',
    },
  ]
  const dataSourceColumns = [
    {
      title: '操作',
      dataIndex: 'cz',
      key: 'cz',
      width: '180px',
    },
    {
      title: '处理用户',
      dataIndex: 'czyh',
      key: 'czyh',
      width: '180px',
    },
    {
      title: '处理时间',
      dataIndex: 'clsj',
      key: 'clsj',
      width: '180px',
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      width: '180px',
    },
  ]
  const getInfo = () => {
    console.log(props.processInstanceId, '============================')
    if (props.processDefinitionName == '能力申请') {
      // getTaskVariables({ taskId: props.processInstanceId }).then((res) => {
      //   console.log('获取数据====================>', res.data.data)
      // })
    }
    if (props.processDefinitionName == '能力申请流程') {
      getApplyForm(props.businessKey).then((res) => {
        const { data } = res.data
        console.log(data)
        formName.user = data.user
        formName.phone = data.phone
        formName.unit = data.unit
        formName.area = data.area
        formName.system = data.system
        formName.scene = data.scene
        formName.enclosure = data.enclosure
        formName.basis = data.basis
      })
    }
    if (props.processDefinitionName == '能力需求申请') {
      getDemandForm(props.businessKey).then((res) => {
        const { data } = res.data
        console.log(data)
        formName.applyUserName = data.applyUserName
        formName.applyUserPhone = data.applyUserPhone
        formName.applyUserDeptName = data.applyUserDeptName
        formName.detailsField = data.detailsField
        formName.demandDetails = data.demandDetails
        formName.detailsType = data.detailsType
        formName.demandSubject = data.demandSubject
        formName.enclosure = data.enclosure
      })
    }
    if (props.processDefinitionName == '能力资源上架') {
      // debugger
      nengliziyuanshangjiaapply(props.businessKey).then((res) => {
        // const { data } = res.data
        dataForm.data = res.data.data.resourceDTO
        if (res.data.data.resourceDTO.type == '应用资源') {
          shifoushizujian.value = true
        } else {
          shifoushizujian.value = false
          console.log(res.data.data.resourceDTO)
          res.data.data.resourceDTO.infoList.forEach((val) => {
            console.log(val, '111111111111111111111111')
            if (val.attrValue === '智能算法') {
              nameNotShow.value = true
              algorithmShow.value = false
              console.log(nameNotShow.value, algorithmShow.value, 'wowowo')
            }
          })
        }
        console.log('222222222222', dataForm.data)
      })
    }
    if (props.processDefinitionName == '能力资源下架') {
      // debugger
      selectOneDel(props.resourceId).then((res) => {
        // const { data } = res.data
        dataForm.data = res.data.data
      })
    }
  }

  const getLiuZhuanInfo = () => {
    const params = qs.stringify({
      processInstanceId: props.processInstanceId,
    })
    getTaskHandleDetailInfo(params).then((res) => {
      let arr = []
      res.data.data.forEach((item) => {
        arr.push(item)
      })
      dataSource.data.push([props.processInstanceId, arr])
    })
  }

  onMounted(() => {
    // getInfo()
    if (props.refObj.resourceApplication) {
      dataSource.data = []
      for (const key in props.refObj.resourceApplication) {
        if (props.refObj.resourceApplication[key].length > 0) {
          props.refObj.resourceApplication[key].map((item) => {
            dataSource.data.push([item.instanceId, item.taskHandleDetailInfo])
          })
        }
      }
    } else {
      getLiuZhuanInfo()
    }
  })

  const getResourceURL = () => {
    console.log('111111111111111111111111111111', Cookies.get('token'))
    const params = qs.stringify({
      token: Cookies.get('token'),
      // processInstanceId: this.dataForm.processInstanceId
      processInstanceId: props.processInstanceId,
    })
    return `${window.SITE_CONFIG.apiURL}/act/his/getInstImage?${params}`
  }
</script>

<style scoped lang="less">
  .form-container {
    height: 6rem;
    overflow-y: scroll;
    padding: 20px 20px 30px 20px;

    .title {
      font-size: 18px;
      color: #000;
      font-weight: bold;
      margin-bottom: 20px;
      padding-left: 10px;
      margin-top: 10px;
      border-left: 6px #0058e1 solid;
    }
  }

  :deep(.ant-table-thead) > tr > .ant-table-cell {
    background: #0087ff;
    color: #fff;
    border: none;
    text-align: center;
    font-size: 16px;
  }

  :deep(.ant-table-tbody) > tr > .ant-table-cell:nth-child(5) {
    // width: 110px;
    // display: inline-block;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
  }

  .oddNumbers {
    margin-bottom: 0.05rem;
  }
</style>
