<template>
  <baseTitle title="基础信息"></baseTitle>
  <fvForm :schema="schema" @getInstance="(e)=>baseForm = e"></fvForm>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane v-for="item in paneList" :label="item.label" :name="item.name">
      <search-files-by-tag @search="search" @upload="upload" :type="item.name==='40'?'40':''"
                           :fileList="fileList" :uploadState="uploadState" v-model:loading="loading"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="jsx">
import {searchFileList} from "@/api/project-manage/attachment.js";
import {ElNotification} from "element-plus";
import {computed, ref} from "vue";
import {getBaseInfoApi} from "@/components/steps/api";

const route = useRoute()
const router = useRouter()
const activeName = ref('50')
const attachment = ref({})
const loading = ref(false)
const uploadState = ref(false)
const fileList = ref([])
const projectId = ref(route.query.id)
const requirementId = ref(route.query.requirementId)
const schema = computed(() => {
  return [
    {
      label: '征集名称',
      prop: 'requirementName',
      colProps: {
        span: 12
      }
    },
    {
      label: '项目名称',
      prop: 'projectName',
      colProps: {
        span: 12
      }
    }
  ]
})
const baseForm = ref()
const paneList = ref([
  {
    label: '需求征集',
    name: '00'
  },
  {
    label: '需求上报',
    name: '10'
  },
  {
    label: '项目立项',
    name: '20'
  },
  {
    label: '项目实施',
    name: '40'
  },
  {
    label: '项目归档',
    name: '50'
  }
])
const getBaseInfo = async () => {
  try {
    const {code, data} = await getBaseInfoApi(route.query.id)
    baseForm.value.setValues(data)
  } catch {
  }
}

getBaseInfo()
const handleClick = (tab) => {
  activeName.value = tab.props.name
  loading.value = true
  search({})
}

const search = async (param) => {
  param.targetId = projectId.value
  param.targetState = activeName.value
  searchFileList(param).then(res => {
    loading.value = false
    changeFileList(res)
  })
}

const changeFileList = (res) => {
  if (res.code === 1000) {
    fileList.value = res.data.fileList
    uploadState.value = res.data.upload
  } else {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: 'error'
    })
  }
}

const upload = () => {
  if (activeName.value === '40') {
    router.push({
      name: 'Implementation/upload',
      query: {
        id: route.query.id,
        type: '40'
      }
    })
  } else {
    router.push({
      name: 'Filing/upload',
      query: {
        id: route.query.id,
        name: activeName.value
      }
    })
  }
}
watchEffect(() => {
  if (requirementId.value === '-1') {
    paneList.value = paneList.value.slice(1)
  }
})
onMounted(() => {
  if (activeName.value === '50') {
    search({})
  }
})
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 15px 0 30px 0;
}

:deep(.el-tabs__nav-scroll) {
  width: 100%;
  display: flex;

  .el-tabs__nav {
    display: flex;
    flex: 1;

    .el-tabs__item {
      flex: 1;
      font-size: 16px;
    }

    .is-active {
      color: black;
      //background-color: #DED0B2;
    }
  }
}
</style>
