<template>
  <baseTitle title="需求征集信息"  style="margin-left: 30px"></baseTitle>
  <collection-detail :formData="collectData.formData" :data="collectData" type="singleDetail"
                     :fileListShow="fileListShow"
                     :processViewer="processViewer" :loading="loading" v-model:value="auditOpinion"/>
  <div class="oper-page-btn" v-if="collectData.formData?.report">
    <el-button color="#DED0B2" @click="handleDemandReport">需求上报</el-button>
  </div>
  <opinion v-if="collectData.taskId" :formData="formData" :taskId="collectData.taskId" :taskUserOptionList="collectData.taskUserOptionList"
           v-model:value="auditOpinion"></opinion>
</template>

<script setup lang="jsx">
import {useProcessStore} from '@/stores/processStore.js'
import {getInfo} from "@/api/project-demand/index.js";
import {ElNotification} from "element-plus";
import {useTagsView} from '@/stores/tagsview.js'
import {getFundOption} from "@/api/special-fund";
import {getSubCompOpt} from "@/api/user/user";
import {matterTree} from "@/utils/matterTree";

const tagsViewStore = useTagsView()
const router = useRouter()
const route = useRoute()
const form = ref();
const loading = ref(false)
const processStore = useProcessStore()
const specialFundOption = ref([])
const processInstanceData = ref({})
const fileListShow = ref("READ")
const showTable = ref(false)
const auditOpinion = ref('')
const processViewer = ref(false)
const processTree = ref()
const collectData = ref([])
const formData = ref({})
const companyOption = ref([])
const companyNameArray = ref([])
const handleDemandReport = () => {
  router.push({
    name: 'Summary/add',
    query: {
      id: collectData.value.formData.requirementId
    }
  })
}
const getFundOptions = async () => {
  const res = await getFundOption()
  specialFundOption.value = res.data
}

const getCompanyOption = async () => {
  const res = await getSubCompOpt()
  companyOption.value = res.data
}
const getCompanyOptionItem = (val) => {
  if (val !== undefined) {
    val.forEach(item => {
      matterTree(companyNameArray.value, companyOption.value, item)
    })
  }
  return companyNameArray.value
}
const init = async () => {
  if (!route.query.id) return;
  await getFundOptions()
  await getCompanyOption()
  getInfo(route.query.id).then(res => {
    if (res.code !== 1000) {
      ElNotification({
        title: '提示',
        message: res.msg,
        type: 'error'
      })
    }
    loading.value = false
    let data = res.data
    if (data.formData.companyIds[0] == -1) {
      data.formData.companyIds = ['所有公司']
    } else {
      data.formData.companyIds = getCompanyOptionItem(data.formData.companyIds)
    }
    collectData.value = data
    formData.value = data.formData;
    if (data.formData.specialFund) {
      specialFundOption.value.forEach(item => {
        if (data.formData.specialFund == item.value) {
          data.formData.specialFund = item.label
        }
      })
    }
    processInstanceData.value = data
    processStore.setDesign(data)
    processStore.runningList.value = data.runningList;
    processStore.endList.value = data.endList;
    processStore.noTakeList.value = data.noTakeList;
    processStore.refuseList.value = data.refuseList;
    processStore.passList.value = data.passList;
    nextTick(() => {
      processViewer.value = true
      showTable.value = true
      if (data.formPermMap && data.formPermMap["fileList"]) {
        fileListShow.value = data.formPermMap["fileList"].perm
      }
    })
  })
}
onMounted(async () => {
  loading.value = true
  await init()
})
</script>

<style lang="scss" scoped>
:deep(.el-empty__description) {
  margin-top: 0;
}

:deep(.el-table--fit ) {
  height: 160px !important;
}

.detail-block {
  overflow: hidden;
  padding-right: 10px;

  //.info {
  //  display: flex;
  //  flex-wrap: wrap;
  //
  //  > div {
  //    width: 350px;
  //    margin-bottom: 15px;
  //    margin-right: 10px;
  //
  //    > span:first-child {
  //      color: black;
  //      font-size: 16px;
  //      font-weight: bold;
  //    }
  //  }
  //}

  //.approval-record {
  //  padding-bottom: 30px;
  //
  //  .process {
  //    position: relative;
  //  }
  //}
}

</style>
