<template>
  <div>
    <el-form
      ref="dataFormRef"
      :model="form"
      :rules="dataRules"
      label-width="120px"
      v-loading="loading"
      :disabled="operType === 'view'"
    >
      <el-row :gutter="24">
        <el-col :span="12" class="mb20" v-if="!hiddenFields.projectName">
          <el-form-item label="采购项目名称" prop="projectName">
            <el-input v-model="form.projectName" placeholder="请输入采购项目名称" :disabled="disabledFields.projectName" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.projectType">
          <el-form-item label="项目类别" prop="projectType">
            <el-select v-model="form.projectType" placeholder="请选择" :disabled="disabledFields.projectType" clearable style="width: 100%">
              <el-option label="货物" value="A" />
              <el-option label="工程" value="B" />
              <el-option label="服务" value="C" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20" v-if="!hiddenFields.projectContent">
          <el-form-item label="采购内容" prop="projectContent">
            <el-input v-model="form.projectContent" type="textarea" :rows="3" placeholder="请输入采购内容" :disabled="disabledFields.projectContent" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.applyDate">
          <el-form-item label="填报日期" prop="applyDate">
            <el-date-picker
              v-model="form.applyDate"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              :disabled="disabledFields.applyDate"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.fundSource">
          <el-form-item label="资金来源" prop="fundSource">
            <el-input v-model="form.fundSource" placeholder="资金来源" :disabled="disabledFields.fundSource" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.budget">
          <el-form-item label="预算金额(元)" prop="budget">
            <el-input-number v-model="form.budget" :min="0" :precision="2" :disabled="disabledFields.budget" style="width: 100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.isCentralized">
          <el-form-item label="是否集采" prop="isCentralized">
            <el-select v-model="form.isCentralized" placeholder="请选择" :disabled="disabledFields.isCentralized" clearable style="width: 100%">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.isSpecial">
          <el-form-item label="是否特殊情况" prop="isSpecial">
            <el-select v-model="form.isSpecial" placeholder="请选择" :disabled="disabledFields.isSpecial" clearable style="width: 100%">
              <el-option label="否" value="0" />
              <el-option label="紧急" value="1" />
              <el-option label="单一" value="2" />
              <el-option label="进口" value="3" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.purchaseMode">
          <el-form-item label="采购形式" prop="purchaseMode">
            <el-input v-model="form.purchaseMode" placeholder="采购形式" :disabled="disabledFields.purchaseMode" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20" v-if="!hiddenFields.purchaseType">
          <el-form-item label="采购方式" prop="purchaseType">
            <el-input v-model="form.purchaseType" placeholder="采购方式" :disabled="disabledFields.purchaseType" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20" v-if="!hiddenFields.remark">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注" :disabled="disabledFields.remark" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-if="data.submitBtn">
      <footer class="el-dialog__footer">
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm" :disabled="loading">提交</el-button>
        </span>
      </footer>
    </template>
    <template v-else>
      <footer class="el-dialog__footer">
        <span class="dialog-footer" />
      </footer>
    </template>
  </div>
</template>

<script setup lang="ts" name="PurchaseApplyFlow">
  import { useMessage } from '/@/hooks/message'
  import * as purchaseApply from '/@/api/order/purchase-apply'
  import * as orderVue from '/@/api/order/order-key-vue'
  import { handleCustomFormPerm, handleFormPrint } from '/@/flow/utils/form-perm'
  import { deepClone } from '/@/utils/other'
  import { initCustomFormMethods } from '/@/views/order/index'

  const emits = defineEmits(['handleJob'])

  const dataFormRef = ref()
  const loading = ref(false)
  const operType = ref<'view' | 'flow'>('flow')

  const props = defineProps({
    currJob: { type: Object, default: null },
    currElTab: { type: Object, default: () => ({}) }
  })

  const form = reactive<Record<string, any>>({
    id: null,
    code: '',
    flowKey: 'PURCHASE_APPLY',
    flowInstId: null,
    purchaseNo: '',
    projectName: '',
    projectType: '',
    projectContent: '',
    applyDate: '',
    fundSource: '',
    budget: null,
    isCentralized: '',
    isSpecial: '',
    purchaseMode: '',
    purchaseSchool: '',
    purchaseType: '',
    categoryCode: '',
    fileIds: [],
    remark: '',
    runJobId: '',
    flowVarUser: null
  })

  const dataRules = ref({
    projectContent: [{ required: true, message: '请输入采购内容', trigger: 'blur' }],
    budget: [{ required: true, message: '请输入预算金额', trigger: 'blur' }]
  })

  const fieldsPerm = {
    projectName: false,
    projectType: false,
    projectContent: false,
    applyDate: false,
    fundSource: false,
    budget: false,
    isCentralized: false,
    isSpecial: false,
    purchaseMode: false,
    purchaseType: false,
    remark: false
  }
  const hiddenFields = reactive({ ...fieldsPerm })
  const disabledFields = reactive(deepClone(fieldsPerm))

  const data = reactive({
    submitBtn: true,
    elTab: null as any
  })

  const methods = initCustomFormMethods(data, disabledFields, operType)

  function initJobData() {
    if (props.currJob?.orderId) handleGetObj(props.currJob.orderId)
  }

  function handleGetObj(id: string | number) {
    purchaseApply.getObj(id).then(async (resp: any) => {
      const formData = resp?.data ?? {}
      Object.assign(form, formData)
      form.runJobId = props.currJob?.id ?? ''
      await initFormPermPrint()
    })
  }

  async function initFormPermPrint() {
    const elTab = orderVue.currElTabIsExist(props.currJob, props.currElTab?.id)
    const res = await handleCustomFormPerm(props, hiddenFields, disabledFields, elTab)
    await orderVue.currElTabIsView(methods, props.currJob, props.currElTab?.id, submitForm, res?.callback)
    await handleFormPrint(form, elTab?.type, elTab?.id, '1')
    data.elTab = elTab
  }

  async function submitForm() {
    try {
      loading.value = true
      await purchaseApply.putObj(form)
      orderVue.currElTabIsSave(props.currJob, props.currElTab?.id, true, emits)
      useMessage().success(form.id ? '修改成功' : '保存成功')
    } catch (err: any) {
      useMessage().error(err?.msg ?? '操作失败')
    } finally {
      loading.value = false
    }
  }

  watch(
    () => props.currJob?.id,
    () => { initJobData() }
  )

  onMounted(() => {
    initJobData()
  })
</script>

<style lang="scss" scoped>
  .el-dialog__footer {
    text-align: center;
    .dialog-footer {
      text-align: center;
    }
  }
</style>
