<template>
  <baseTitle title="上传费用"></baseTitle>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="projectName" label="项目名称">
      <template #default="scope">
        <el-input v-model="scope.row.projectName" placeholder="请输入项目名称" clearable>
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="time" label="时间" width="250">
      <template #default="scope">
        <el-date-picker
            v-model="scope.row.time"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            placeholder="选择时间"
        >
        </el-date-picker>
      </template>
    </el-table-column>
    <el-table-column prop="projectCost" label="项目费用">
      <template #default="scope">
        <el-input v-model="scope.row.projectCost" placeholder="请输入项目费用" clearable>
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="researchStage" label="研发阶段">
      <template #default="scope">
        <el-input v-model="scope.row.researchStage" placeholder="请选择研发阶段" clearable>
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="digest" label="摘要">
      <template #default="scope">
        <el-input v-model="scope.row.digest" placeholder="请输入摘要" clearable>
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="afterTax" label="税后余额(元)">
      <template #default="scope">
        <el-input v-model="scope.row.afterTax" placeholder="请输入税后余额" clearable>
        </el-input>
      </template>
    </el-table-column>
    <el-table-column prop="oper" label="操作">
      <template #default="scope">
        <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="oper-page-btn">
    <el-button color="#DED0B2" @click="handleSubmit">提交</el-button>
    <el-button @click="handleBack">返回</el-button>
  </div>
</template>

<script setup lang="jsx">
import {ElNotification} from "element-plus";
import {addLedger} from "@/api/project-manage";
import {useTagsView} from '@/stores/tagsview.js'
import {useRoute} from "vue-router";

const route = useRoute()
const tagsViewStore = useTagsView()
const formData = ref({})
const tableData = ref([
  {
    projectId: route.query.id,
    projectName: '',
    time: '',
    projectCost: '',
    researchStage: '',
    digest: '',
    afterTax: ''
  }
])
const handleAdd = () => {
  let row = {
    projectId: route.query.id,
    projectName: '',
    time: '',
    projectCost: '',
    researchStage: '',
    digest: '',
    afterTax: ''
  }
  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 = {}
  console.log('params', tableData.value)
  const res = addLedger(tableData.value)
  ElNotification({
    title: '提示',
    message: res.msg,
    type: res.code === 1000 ? 'success' : 'error'
  })
  if (res.code === 1000) {
    tagsViewStore.delVisitedViews(router.currentRoute.value.path)
     router.push({
      name: 'Implementation'
    })
  }
  // })
}
const handleBack = () => {
  history.back()
}
</script>

