<template>
 <div >
<!--   <baseTitle title="年度计划" style="margin-left: -15px;margin-bottom: -2px"></baseTitle>-->
   <fvSearchForm :searchConfig="searchConfig" @search="search" style="margin-left: 16px;margin-bottom: -18px"></fvSearchForm>
   <fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
 </div>
</template>

<script setup lang="jsx">
import {deletePlan} from "@/api/project-demand/summary";
import {ElMessageBox, ElNotification} from "element-plus";

const tableIns = ref()
const router = useRouter()
const route = useRoute()
const searchConfig = ref([
  {
    label: '年度计划名称',
    prop: 'annualPlanName',
    component: 'el-input',
    props: {
      placeholder: '请输入年度计划名称',
      clearable: true
    },
  }
])
const tableConfig = reactive({
  columns: [
    // {
    //   type: 'selection',
    //   prop: 'selection'
    // },
    {
      prop: 'index',
      type: 'index',
      label: '序号',
      align: 'center',
      width:85,
      index: index => {
        return (tableIns.value.getQuery().pageNum - 1) * tableIns.value.getQuery().pageSize + index + 1
      }
    },
    {
      prop: 'annualPlanName',
      label: '年度计划名称',
      align: 'center'
    },
    {
      prop: 'createTime',
      label: '创建时间',
      align: 'center'
    },
    {
      prop: 'oper',
      label: '操作',
      align: 'center',
      fixed: 'right',
      showOverflowTooltip: false,
      currentRender: ({row, index}) => {
        let perm = ['annual:plan:del']
        return (
            <div style={{width: '100%'}}>
              <el-button
                  type='primary'
                  onClick={() => handleDetail(row)}
                  link
              >
                详情
              </el-button>
              <el-button
                  type='danger'
                  v-perm={perm}
                  onClick={() => handleDelete(row)}
                  link
              >
                删除
              </el-button>
            </div>
        )
      }
    }
  ],
  api: '/workflow/annual/plan/list',
  params: {},
})
const headBtnClick = (key) => {
  switch (key) {
    case 'add':
      handleAdd()
      break;
  }
}
const search = (val) => {
  let obj = {...val}
  tableConfig.params = obj
  tableIns.value.refresh()
}

const handleDetail = (row) => {
  router.push({
    name: 'Plan/detail',
    query: {
      annualPlanId: row.annualPlanId,
    }
  })
}
const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该条数据吗?', '确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    deletePlan(row.annualPlanId).then(res => {
      console.log(res)
      ElNotification({
        title: '提示',
        message: res.msg,
        type: res.code === 1000 ? 'success' : 'error'
      })
      if (res.code === 1000){
        tableIns.value.refresh()
      }
    })
  }).catch(() => {
  })
}
</script>

<style scoped lang="scss">
:deep(.el-table__header) {
  .is-leaf:first-child {
    .cell {
      margin-left: -25px !important;
    }
  }
}

:deep(.el-table__body) {
  .el-table__cell:first-child {
    .cell {
      margin-left: -13px !important;
    }
  }
}
</style>

