<template>
    <div class="app-container">
      <els-table
        :btnList="btnList"
        :columns="columns"
        :tableData="tableData"
        @getTableData="getTableData"
        @handlerAdd='handlerAdd'
        :pageSet="pageSet"
        :option="tableOption"
        :tableLoading="tableLoading"
      ></els-table>
        <!-- 新增或编辑弹窗 -->
      <el-dialog
      v-model="dialogVisibleAddOrEdit"
      :title="addOrEditTitle"
      destroy-on-close
      width="650">
        <els-form
        :fieldList="fieldList"
        :formOption="formOption"
        :formLoading="false"
        :form="formData"
        @ok="submit"
        @cancel="cancel"
        @formChange="formChange"
        ></els-form>
    </el-dialog>  
    </div>
  </template>
  
  <script setup name="ShiftManagement">
  import { queryTeamList,shiftAdd,shiftDelete,shiftUpdate} from "@/api/produce/shiftManagement";
  import { init } from './index.jsx'
  const { proxy } = getCurrentInstance();
  const tableLoading = ref(false)
  //新增或编辑弹窗开关
  const dialogVisibleAddOrEdit = ref(false)
  //新增或编辑title
  const addOrEditTitle = ref(null)
  //表单table数据
  const tableData = ref([])
  //表单接口获取数据
const getTableData = () => {
  tableLoading.value = true
  queryTeamList().then(res=>{
    tableData.value = res.data
    tableLoading.value = false
  }).catch((err)=>{
    console.log(err)
  })
}
  //行项目删除
  const onDelete = (row) => {
    proxy.$modal.confirm('确认删除该班次信息吗').then(()=>{
      shiftDelete(row.id).then(res=>{
        getTableData()
        proxy.$modal.msgSuccess("删除成功");
      }).catch((err)=>{
      console.log(err)
      })
    })
  }
  //编辑班次操作
  const onModify = (row) => {
    formData.value = {}
    formData.value.shiftName = row.shiftName
    formData.value.startTime = row.startTimeStr
    formData.value.endTime = row.endTimeStr
    formData.value.id = row.id
    addOrEditTitle.value = '编辑班次'
    dialogVisibleAddOrEdit.value = true
  }
  //新增班次操作
  const handlerAdd = (val) =>{
    formData.value = {}
    addOrEditTitle.value = '新增班次'
    dialogVisibleAddOrEdit.value = true
  }
  //新增或编辑表单提交操作
  const submit = (val) =>{
    if(addOrEditTitle.value =='新增班次'){
      shiftAdd(val.value).then(res=>{
        getTableData()
        dialogVisibleAddOrEdit.value = false
        proxy.$modal.msgSuccess("新增成功");
      }).catch((err)=>{
        console.log(err)
      })
    }else if(addOrEditTitle.value == '编辑班次'){
      val.value.id = formData.value.id
      shiftUpdate(val.value).then(res=>{
        getTableData()
        dialogVisibleAddOrEdit.value = false
        proxy.$modal.msgSuccess("编辑成功");
      }).catch((err)=>{
        console.log(err)
      })
    }

  }
  //新增或编辑表单取消操作
  const cancel = () =>{
    dialogVisibleAddOrEdit.value = false
    console.log('取消')
  }
  //表单选择时触发事件
  const formChange = (val) =>{
    console.log(val)
  }
  getTableData()
  const { 
    btnList,
    columns,
    pageSet,
    tableOption,
    fieldList,
    formOption,
    formData
  } = init({ onDelete, onModify})
  </script>
  
  <style lang="scss" scoped>
  .staffing{
    width: 100%;
    display: flex;
    font-weight: 600;
    font-size: 18px;
    padding-left: 25%;
    padding-right: 25%;
    padding-bottom: 5%;
    justify-content: space-around;
  }
  </style>