<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="dialogVisibleStaffing"
    title="人员配置"
    width="650">
    <div class="staffing">
     <span>
      <span class="attribute attributeLeft">班组：</span><span class="attribute attributeRight"> {{oneTableData.teamName}}</span></span>
     <span>
      <span class="attribute attributeLeft">班组长：</span> <span class="attribute attributeRight">{{oneTableData.teamLeaderName}}</span> </span>
    </div>
    <div>
      <el-transfer
      v-model="staffingSelectedValue"
      filterable
      :titles="['待选列表', '已选列表']"
      :filter-method="filterMethod"
      filter-placeholder="请输入关键词"
      :data="staffingBigArr"/>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisibleStaffing = false">取消</el-button>
        <el-button type="primary" @click="staffingConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
<!-- 新增或编辑弹窗 -->
  <el-dialog
     v-model="dialogVisibleAddOrEdit"
     :title="addOrEditTitle"
     destroy-on-close
     width="400">
       <els-form
       :fieldList="fieldList"
       :formOption="formOption"
       :formLoading="feedFormLoading"
       :form="formData"
       @ok="submit"
       @cancel="cancel"
       ></els-form>
  </el-dialog>  
  </div>
</template>
<script setup name="TeamManagement">
import { init } from './index.jsx'
import { queryTeamList,teamAdd,queryTeamUserList,queryUserList,deleteTeam,update,staffingAdd} from "@/api/produce/teamManagement";
const { proxy } = getCurrentInstance();
const tableLoading = ref(false)
const feedFormLoading = ref(false)
// 人员配置弹窗开关
const dialogVisibleStaffing = ref(false)
//新增或编辑弹窗开关
const dialogVisibleAddOrEdit = ref(false)
//人员配置（人员名单）
let staffingBigArr = reactive([])
//人员配置（选定的值）
const staffingSelectedValue= ref([])
//班组长的下拉选项值
const teamLeaderNameList = ref([])
//表单table数据
const tableData = ref([])
//拿到列表某一行的数据参数
const oneTableData = ref({})
//新增或编辑title
const addOrEditTitle = ref(null)
//编辑时获取的参数
const formData = ref({})
//表单接口获取数据
const getTableData = () => {
  tableLoading.value = true
  queryTeamList().then(res=>{
    tableData.value = res.data
    tableLoading.value = false
  }).catch((err)=>{
    console.log(err)
  })
}
// 行项目删除
const onDelete = (row) => {
  if(row.isMember){
    proxy.$modal.msgWarning("该班组名下存在成员，无法进行删除");
  }else{
    proxy.$modal.confirm('确认删除该班组信息吗').then(()=>{
    deleteTeam(row.id).then(res=>{
    getTableData()
    proxy.$modal.msgSuccess("删除成功");
    }).catch(err=>{
      console.log(err)
    })
  })
  }

}
// 人员配置按钮
const onStaffing = (row) => {
  oneTableData.value = row
  queryUserList({sfTeamId:row.id}).then(res=>{
    res.data.unCheckList.forEach(item=>{
      item.label = item.nickName + ' (' + item.userName + ')'
      item.key = item.userId
    })
    let list = []
    res.data.checkList.forEach(item=>{
      list.push(item.userId)
    })
    staffingBigArr = res.data.unCheckList
    staffingSelectedValue.value = list
    dialogVisibleStaffing.value = true
  }).catch(err=>{
    console.log(err)
  })
}
// 人员配置操作确认
const staffingConfirm = () =>{
  let data = {
    list:[],
    teamId:oneTableData.value.id
  }
  staffingSelectedValue.value.forEach(item=>{
   data.list.push({sysUserId:item})
  })
  staffingAdd(data).then(res=>{
    getTableData()
    dialogVisibleStaffing.value = false
    proxy.$modal.msgSuccess("人员配置成功");
  }).catch(err=>{
    console.log(err)
  })
}
// 编辑操作
const onModify = (row) => {
  addOrEditTitle.value = '编辑班组'
  formData.value.teamName = row.teamName//班组
  formData.value.teamLeaderId = row.teamLeaderId//班组长id
  formData.value.teamLeaderName = row.teamLeaderName//班组长名字
  formData.value.deptId = row.deptId//部门
  formData.value.id = row.id//行id
  dialogVisibleAddOrEdit.value = true
}
//新增按钮弹窗操作
const handlerAdd = () =>{
  addOrEditTitle.value = '新增班组'
  dialogVisibleAddOrEdit.value = true
}
//调取班组长人员名单
const apiQueryTeamUserList = () =>{
    queryTeamUserList().then(res=>{
    res.data.unCheckList.forEach(item => {
      item.value = item.userId
      item.label = item.nickName
    });
    teamLeaderNameList.value = res.data.unCheckList
  }).catch((err)=>{
    console.log(err)
  })
}
//新增或编辑表单提交操作
const submit = (val) =>{
  feedFormLoading.value = true
  if(addOrEditTitle.value == '新增班组'){
    let teamAddData = {
    teamName:val.value.teamName, //班组
    teamLeaderId:val.value.teamLeaderId,//班组长id
    teamLeaderName:val.value.teamLeaderIdName,//班组长名字
    deptId:val.value.deptId //部门
  }
   teamAdd(teamAddData).then(res=>{
     feedFormLoading.value = false
     getTableData()
     dialogVisibleAddOrEdit.value = false
     proxy.$modal.msgSuccess("新增成功");
   }).catch((err)=>{
     feedFormLoading.value = false
     console.log(err)
     
   })
  } else if(addOrEditTitle.value == '编辑班组'){
    let updateData = {
    teamName:val.value.teamName, //班组
    teamLeaderId:val.value.teamLeaderId,//班组长id
    teamLeaderName:val.value.teamLeaderIdName,//班组长名字
    deptId:val.value.deptId, //部门
    id:formData.value.id //行id
  }
    update(updateData).then(res=>{
     feedFormLoading.value = false
      getTableData()
      dialogVisibleAddOrEdit.value = false
      proxy.$modal.msgSuccess("编辑成功");
    }).catch((err)=>{
     feedFormLoading.value = false
     console.log(err)
   })
  }
}
//新增或编辑表单取消操作
const cancel = () =>{
  dialogVisibleAddOrEdit.value = false
  formData.value = {}
}
getTableData() //调用表单列表
apiQueryTeamUserList()  //调取班组长人员名单
const { 
  btnList,
  columns,
  pageSet,
  tableOption,
  fieldList,
  formOption,
} = init({ onDelete, onStaffing, onModify, teamLeaderNameList })
</script>

<style lang="scss" scoped>
.staffing{
  width: 92%;
  font-size: 14px;
  color: black;
  background: #E6EFFC;
  padding: 8px 16px 8px 16px;
  margin-bottom: 20px;
  .attribute{
    display: inline-block;
  }
  .attributeLeft{
    margin-left: 3%;
  }
  .attributeRight{
    color: #005AE0;
  }
}
</style>