<template>
  <div v-loading="loading" class="add-block">
    <baseTitle title="需求征集信息录入"></baseTitle>
    <el-form :model="queryParams" inline class="query-form" ref="demandForm">
      <div class="left-info">
        <el-form-item label="名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入子公司编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-select v-model="queryParams.company" placeholder="登录状态" clearable filterable>
            <el-option
                v-for="item in companyOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="征集类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="登录状态" clearable filterable>
            <el-option
                v-for="item in typeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="截止时间" prop="time">
          <el-config-provider>
            <el-date-picker
                v-model="dateValue"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-config-provider>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!--    <fvForm :schema="schame" @getInstance="getInstance" :rules="rules"></fvForm>-->
    <baseTitle title="征集说明"></baseTitle>
    <Tinymce image-url="/notice/file" file-url="/notice/file" v-model:value="instructions" height="300"/>
    <baseTitle title="申请文件"></baseTitle>
    <file-upload @getFile="getFile"/>
    <div class="approval-record">
      <baseTitle title="流程"></baseTitle>
      <process-diagram-viewer v-if="processDiagramViewer"/>
      <!--      <div class="process" id="approvalRecord">-->
      <!--        <process-tree ref="processTree" mode="view" id-name="approvalRecord"/>-->
      <!--      </div>-->
    </div>
    <div class="oper-page-btn">
      <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="jsx">
import {getInitiateInfo} from "@/api/workflow/process-definition.js";
import {useTagsView} from '@/stores/tagsview.js'
import {useAuthStore} from '@/stores/userstore.js'
import {ElLoading, ElMessage, ElNotification} from 'element-plus';
import {getMenuList} from '@/api/system/menuman.js'
import {getWorkflowInfo} from "@/api/project-demand/index.js";
import FileUpload from "../../../components/FileUpload.vue";
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue'
import ProcessTree from '@/views/workflow/process/ProcessTree.vue';
import {useProcessStore} from '@/stores/processStore.js';

const dateValue = ref()
const queryParams = reactive({
  name: '',
  company: '',
  type: '',
})
const processTree = ref()
const processDiagramViewer = ref(false)
const tagsViewStore = useTagsView()
const authStore = useAuthStore()
const route = useRoute()
const demandForm = ref()
const typeOption = ref([])
const companyOption = ref([])
const form = ref(null)
const fileList = ref(null)
const menuTree = ref(null)
const loading = ref(false)
const localData = reactive({
  affiliatedCompany: []
})

const processStore = useProcessStore()
const processInstanceData = ref()
const instructions = ref()
const schame = computed(() => {
  let arr = [
    {
      label: '名称',
      prop: 'roleName',
      component: 'el-input',
      props: {
        placeholder: '请输入名称',
        clearable: true
      }
    },
    {
      label: '所属公司',
      prop: 'subCompanyId',
      component: 'el-tree-select',
      props: {
        placeholder: '请选择所属公司',
        clearable: true,
        filterable: true,
        checkStrictly: true,
        data: localData.affiliatedCompany,
        disabled: route.query.userType == 0 ? true : false
      },
      on: {
        change: async (val) => {
          const {data} = await getDeptOpt({subCompanyId: val})
          localData.departmentIdOpt = data
        }
      }
    },
    {
      label: '征集类型',
      prop: 'subCompanyType',
      component: 'el-tree-select',
      props: {
        placeholder: '请选择征集类型',
        clearable: true,
        filterable: true,
        checkStrictly: true,
        data: localData.affiliatedCompany,
        disabled: route.query.userType == 0 ? true : false
      },
      on: {
        change: async (val) => {
          const {data} = await getDeptOpt({subCompanyId: val})
          localData.departmentIdOpt = data
        }
      }
    },
    {
      label: '截止时间',
      prop: 'dateValue',
      component: 'el-date-picker',
      props: {
        placeholder: '请选择截止时间',
        clearable: true,
        type: 'datetime'
      }
    }
  ]
  return !authStore.roles.includes('superAdmin') ? arr.slice(0, arr.length - 1) : arr
})

const rules = reactive({
  roleName: [{required: true, message: '请输入', trigger: 'change'}],
  subCompanyId: [{required: true, message: '请输入', trigger: 'change'}]
})

//重置功能
const handleReset = () => {
  demandForm.value.resetFields()
  init()
}

const getInstance = (e) => {
  form.value = e
}
const getFile = (val) => {
  console.log('fileList', val)
  fileList.value = val
}
const init = async () => {
  console.log("asdasdasd")
  getWorkflowInfo().then(res => {
    let data = res.data
    console.log('res2', res)
    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(()=>{
      console.log('processDiagramViewer')
      processDiagramViewer.value=true
    })
  })
}
// const getTree = async () => {
//   getInitiateInfo('pronode_46c5e446-b4d1-495e-a97d-40667fa6aa9f').then(res => {
//     console.log('res11', res)
//     // processDefinition.value = res.data;
//     //构建表单及校验规则
//     processStore.setDesign(res.data)
//     nextTick(() => {
//       processTree.value.init()
//     })
//   }).catch(err => {
//     ElMessage.error(err);
//   });
// }
// getTree()
const handleSubmit = async () => {
  // const loading = ElLoading.service({fullscreen: true})
  // const {isValidate} = await form.value.validate()
  // if (!isValidate) return Promise.reject()
  // const values = form.value.getValues()
  // values.menuIds = checkChange()
  // operate(values).then(res => {
  //   ElNotification({
  //     title: route.query.isAdd ? '新增' : '编辑',
  //     message: res.msg,
  //     type: res.code === 1000 ? 'success' : 'error'
  //   })
  //   loading.close()
  //   res.code === 1000 ? tagsViewStore.delViewAndGoView('/system/role') : null
  // }).finally(() => {
  //   loading.close()
  // })
}

const handleBack = () => {
  history.back()
}

watch(localData, (val) => {
  menuTree.value.filter(val.filterText)
})

// onMounted(async () => {
//   loading.value = true
  init()
//   if (route.query.id) {
//     await getInfo()
//   }
//   loading.value = false
// })


</script>

<style lang="scss" scoped>
.add-block {
  //display: flex;
  //justify-content: space-between;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>
