<template>
  <div v-loading="loading">
    <el-form :model="formData" ref="form" class="query-form" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="分摊名称" prop="shareName">
            <el-input v-model="formData.shareName" placeholder="请输入分摊名称" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分摊月份" prop="apportionmentMonth">
            <el-date-picker
                v-model="formData.apportionmentMonth"
                type="month"
                format="YYYY-MM"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="projectId" label="项目名称" width="180">
        <template #default="scope">
          <el-select v-model="scope.row.projectId" placeholder="请选择项目名称" clearable>
            <el-option
                v-for="item in nameOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="researchPersonnel" label="研发人员" width="180">
        <template #default="scope">
          <el-select v-model="scope.row.researchPersonnel" placeholder="请选择研发人员" clearable>
            <el-option
                v-for="item in researchOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="wagesPayable" label="应发工资">
        <template #default="scope">
          <el-input v-model="scope.row.wagesPayable" placeholder="请输入应发工资" clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="performance" label="绩效">
        <template #default="scope">
          <el-input v-model="scope.row.performance" placeholder="请输入绩效" clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="reserveFund" label="公积金">
        <template #default="scope">
          <el-input v-model="scope.row.reserveFund" placeholder="请输入公积金" clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="socialSecurity" label="社保">
        <template #default="scope">
          <el-input v-model="scope.row.socialSecurity" placeholder="请输入社保" clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="annuity" label="年金">
        <template #default="scope">
          <el-input v-model="scope.row.annuity" placeholder="请输入年金" clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="workday" label="工作日(天)">
        <template #default="scope">
          <el-input v-model="scope.row.workday" placeholder="请输入工作日" clearable>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="researchDuration" label="研发时长(天)">
        <template #default="scope">
          <el-input v-model="scope.row.researchDuration" placeholder="请输入研发时长" clearable>
          </el-input>
        </template>
      </el-table-column>
      <!--    <el-table-column prop="time" label="时间">-->
      <!--      <template #default="scope">-->
      <!--        <el-input v-model="scope.row.time" placeholder="请输入时间" clearable>-->
      <!--        </el-input>-->
      <!--      </template>-->
      <!--    </el-table-column>-->
<!--      <el-table-column prop="subtotal" label="小计">-->
<!--        <template #default="scope">-->
<!--          <el-input v-model="scope.row.subtotal" placeholder="请输入小计" clearable>-->
<!--          </el-input>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column prop="oper" label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleCopy(scope.row)" link style="font-size: 18px">复制</el-button>
          <el-button type="primary" @click="handleDelete(scope.$index)" link style="font-size: 18px">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width:100%;text-align: center;padding: 10px">
      <el-button type="primary" @click="handleAdd" link style="font-size: 18px">添加一行</el-button>
    </div>
    <div class="approval-record">
      <baseTitle title="流程"></baseTitle>
      <process-diagram-viewer mode="view" v-if="processDiagramViewer"/>
    </div>
    <div class="oper-page-btn">
      <el-button color="#DED0B2" @click="handleSubmit(form)">提交</el-button>
      <el-button @click="handleBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="jsx">
import {ElNotification} from "element-plus";
import {useTagsView} from '@/stores/tagsview.js'
import {addAllocation, getAllocationDetail,getAllocationProcess} from "@/api/expense-manage";
import {useProcessStore} from '@/stores/processStore.js';
import ProcessDiagramViewer from '@/views/workflow/common/ProcessDiagramViewer.vue';

const rules = reactive({
  shareName: [{required: true, message: '请输入分摊名称', trigger: 'blur'}],
  apportionmentMonth: [{required: true, message: '请选择月份', trigger: 'blur'}]
})
const processStore = useProcessStore()
const processInstanceData = ref()
const processDiagramViewer = ref(false)
const loading = ref(false)
const route = useRoute()
const router = useRouter()
const tagsViewStore = useTagsView()
const formData = ref({})
const form = ref()
const nameOptions = ref([
  {
    label: "某项目",
    value: '42'
  }
])
const researchOptions = ref([
  {
    label: "某人员",
    value: '1'
  }
])
const tableData = ref([
  {
    projectId: '',
    projectName: '',
    researchPersonnel: '',
    wagesPayable: '',
    performance: '',
    reserveFund: '',
    socialSecurity: '',
    annuity: '',
    workday: '',
    researchDuration: '',
    // subtotal: '',
  }
])
const handleAdd = () => {
  let row = {
    projectId: '',
    projectName: '',
    researchPersonnel: '',
    wagesPayable: '',
    performance: '',
    reserveFund: '',
    socialSecurity: '',
    annuity: '',
    workday: '',
    researchDuration: '',
    // subtotal: '',
  }
  tableData.value.push(row)
}
const handleCopy = (row) => {
  tableData.value.push(row)
}
const handleDelete = (index) => {
  tableData.value.splice(index, 1)
}
const handleSubmit = (instance) => {
  if (!instance) return
  instance.validate(async (valid) => {
    if (!valid) return
    let params = {
      ...formData.value,
      usrAllocations: tableData.value,
      deploymentId: processInstanceData.value.deploymentId,
    }
    const {code, msg} = await addAllocation(params)
    ElNotification({
      title: '提示',
      message: msg,
      type: code === 1000 ? 'success' : 'error'
    })
    if (code === 1000) {
      tagsViewStore.delVisitedViews(router.currentRoute.value.path)
      router.push({
        name: 'Expense/share'
      })
    }
  })
}
const getDetailInfo = async () => {
  getAllocationDetail(12).then(res => {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
      formData.value = res.data.formData
      loading.value = false
    }
  })
}
const init = async () => {
  processDiagramViewer.value = false
  getAllocationProcess().then(res => {
    ElNotification({
      title: '提示',
      message: res.msg,
      type: res.code === 1000 ? 'success' : 'error'
    })
    if (res.code === 1000) {
      let data = res.data
      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(() => {
        processDiagramViewer.value = true
      })
    }
  })
}
const handleBack = () => {
  history.back()
}
onMounted(async () => {
  await init()
  if (route.query.id) {
    loading.value = true
    await getDetailInfo()
  }
})
</script>
