<template>
   <a-drawer :title="drawerTitle" placement="right" width="100%" :visible="isVisible" @close="closeDrawer" style="margin: 10px;">
    <template #extra>
      <!-- <a-button type="primary" @click="saveDataAndClose" :disabled="!curTask||!curTpl" style="margin-right: 10px;">分配并关闭</a-button> -->
      <a-button type="primary" @click="saveData" :disabled="!curTask||!curTpl"  style="margin-right: 60px;">分配用户</a-button>
      <a-button type="primary" @click="clearAllocUser" :disabled="!curTask||!curTpl" tyle="margin-right: 10px;">清除分配</a-button>
      <a-button @click="closeDrawer" style="margin-left: 20px;">关闭</a-button>
    </template>
    <a-layout  style="height:85vh">
      <a-layout-sider width="500" :style="{ backgroundColor: '#fff', overflow: 'hidden',margin:'10px 0px 10px 10px' }">
        <Tpl ref ="refTpl" @callback="callBackTpl"/>
      </a-layout-sider>
      <a-layout-content>
        <div style="height:83vh;padding: 10px">
          <a-row :gutter="10">
            <a-col :span="12">
              <a-card title="请选择任务项" :bordered="false" style="height:83vh;">
                <TplItem ref="refTplItem"></TplItem>
              </a-card>
            </a-col>
            <a-col :span="12">
              <a-card title="请选择填写人" :bordered="false" style="height:83vh;">
               <UserList ref="refUserList" @callback="userCallBack"></UserList>
              </a-card>
            </a-col>

          </a-row>
        </div>
      </a-layout-content>      
    </a-layout>
   </a-drawer>
</template>
<script lang="ts" setup>
  
  import { ref, nextTick } from 'vue';
  import Tpl from '../../components/Tpl.vue';
  import TplItem from './TplItem.vue';
  import UserList from './UserList.vue';

  import { saveOrUpdateBatch } from '../../alloc/BaosongTaskAlloc.api';
  import { VXETable } from 'vxe-table';
  const emit = defineEmits(['callback']);


  const isVisible = ref(false)
  const refTpl = ref()
  const refTplItem = ref()
  const refUserList = ref()
  const drawerTitle= ref();

  const curTask = ref()
  const curTpl = ref()



  function closeDrawer() {
    isVisible.value = false
    emit("callback")
  }


  function setIniData(task) {
    drawerTitle.value="任务分配【"+task.name+"】"
    curTask.value = task
    isVisible.value = true
    nextTick(async () => {
      await refTplItem.value.setCurTaskHaveAllocUser(task)
      await refTpl.value.setData(task.tp);
      await refUserList.value.setData()
    });
  }

  function callBackTpl(Tpl) {
    curTpl.value = Tpl;
    refTplItem.value.setData(Tpl)
  }

  async function saveData() {
    let allocObj = {taskid:curTask.value?.id};
    allocObj["tplid"] = curTpl.value?.id;
    allocObj["itemids"]  = await refTplItem.value.getSelectIds();
    const user =refUserList.value.getSelUser();
    allocObj["fillUser"]= user?.id
    if(!allocObj["fillUser"]) {
      VXETable.modal.message({ content: '请选择用户', status: 'warning' });
      return false ;
    }
    if(allocObj["itemids"].length==0) {
      VXETable.modal.message({ content: '请选择任务', status: 'warning' });
      return false ;
    }
    await saveOrUpdateBatch(allocObj)
    await refTplItem.value.clearSelect()
    await refUserList.value.clearSelect()
    emit("callback")
    return true 
  }

  async function saveDataAndClose(){
    let ret = await saveData();
    if(ret) {
      closeDrawer();
    }
  }

  async function userCallBack(user){
    await refTplItem.value.setSelUser(user);
  }

  async function clearAllocUser() {
    let allocObj = {taskid:curTask.value?.id};
    allocObj["tplid"] = curTpl.value?.id;
    allocObj["itemids"]  = await refTplItem.value.getSelectIds();
    if(allocObj["itemids"]&& allocObj["itemids"].length>0) {
      await saveOrUpdateBatch(allocObj)
      await refTplItem.value.clearSelect()
      await refUserList.value.clearSelect()
      await refTplItem.value.setCurTaskHaveAllocUser(curTask.value)
      await refTplItem.value.setData(Tpl)
    } else {
      VXETable.modal.message({ content: '请选择记录', status: 'warning' });
      return false ;
    }
  }

  defineExpose({
    setIniData,
  });



</script>

<style scoped></style>
