<template>
  <div v-loading="loading">
    <baseTitle title="需求征集信息录入"></baseTitle>
    <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="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 {useTagsView} from '@/stores/tagsview.js'
import {useAuthStore} from '@/stores/userstore.js'
import {ElLoading, ElNotification} from 'element-plus';
import {getMenuList} from '@/api/system/menuman.js'
import {getRoleDetail, operate, getTemRoleOption} from "@/api/role/role";
import FileUpload from "../../../components/FileUpload.vue";

const tagsViewStore = useTagsView()
const authStore = useAuthStore()
const route = useRoute()
const form = ref(null)
const fileList = ref(null)
const menuTree = ref(null)
const loading = ref(false)
const localData = reactive({
  affiliatedCompany: []
})
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 getInstance = (e) => {
  form.value = e
}
const getFile=(val)=>{
  console.log('fileList', val)
  fileList.value=val
}
const init = async () => {
  form.value.setValues({state: '1', template: false})
  const res = await getTemRoleOption()
  localData.tempRoleOpt = res.data
  const {data} = await getMenuList()
  localData.menuData = data
}

const getInfo = async () => {
  if (!route.query.id) return
  const {data} = await getRoleDetail(route.query.id)
  data.menuIds.forEach(key => {
    menuTree.value.setChecked(key, true, false)
  })
  form.value.setValues(data)
}

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
  await init()
  if (route.query.id) {
    await getInfo()
  }
  loading.value = false
})
</script>

<style lang="scss" scoped>

</style>
