<template>
  <div class="artwork-dialog">
    <div id="checkModalBox"></div>
    <a-modal
      class="artwork-dialog"
      v-model:visible="props.joinUserVisible"
      @ok="handleOk"
      @cancel="handleOk"
      :getContainer="getContainer"
    >
      <template #title> <div class="title">画作列表</div></template>
      <template #closeIcon>
        <img src="@/assets/image/approval/close.png"
      /></template>
      <div class="pending-table">
        <a-select
          class="selectCla"
          v-model:value="state.checkDept"
          style="width: 120px"
          placeholder="请选择部门"
          :fieldNames="{
            label: 'Name',
            value: 'Name',
          }"
          @change="selectDept"
          :options="state.giveDepOpt"
        ></a-select>
        <a-select
          class="selectCla"
          v-model:value="state.checkJob"
          style="width: 120px; margin-left: 10px"
          placeholder="请选择岗位"
          :fieldNames="{
            label: 'Name',
            value: 'Name',
          }"
          @change="selectJob"
          :options="state.giveJobOpt"
        ></a-select>
        <div class="tags">
          <!-- <span style="margin-left: 15px" v-for="item in state.JoinUsers"
            ><close-circle-outlined @click="closeUserTag(item)" />{{
              item.Name
            }}</span
          > -->
        </div>
        <a-checkbox-group
          class="user-tags"
          style="color: #7650df; margin-top: 20px"
          v-model:value="state.selectUserIDList"
          name="checkboxgroup"
          @change="selectUser"
          :options="state.userList"
        />
      </div>
      <template #footer
        ><div class="button-group">
          <a-button
            class="save-btn"
            style="background-color: #646364"
            @click="reset"
            >重选</a-button
          >
          <div class="right-footer">
            <a-button class="save-btn" @click="addArt">确认</a-button>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  watch,
  onMounted,
  defineProps,
  defineEmits,
  getCurrentInstance,
  nextTick,
} from "vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import {
  processError,
  processSuccess,
  processWarning,
} from "@/utils/helper/message";
const props = defineProps({
  joinUserVisible: {
    type: Boolean,
    default: false,
  },
});
const approvalStatus = ref(0);
const currentInstance = getCurrentInstance();
const { $request } = currentInstance.appContext.config.globalProperties;
// 弹窗标题
const title = ref("");
// 弹窗类型
const type = ref(1);
const emit = defineEmits("checkModalBox");
// 改变modal根节点 解决打开后出现padding
const getContainer = () => {
  return document.getElementById("checkModalBox");
};

const state = reactive({
  userList: [],
  apiUserList: [],
  selectUserIDList: [],
  JoinUsers: [],
  NickName: "",
  giveDepOpt: [],
  checkJob: null,
  giveJobOpt: [],
  checkDept: null,
  givePerOpt: [],
});
const selectDept = (value, selectedOptions) => {
  state.checkJob = null;
  state.giveJobOpt = selectedOptions.Children;
};
const selectJob = (value, selectedOptions) => {
  state.userList = [];
  //   state.selectUserIDList = selectedOptions.Children;
  state.apiUserList = selectedOptions.Children;
  selectedOptions.Children.forEach((v) => {
    state.userList.push({ label: v.Name, value: v.ID });
  });
  console.log(state.apiUserList, 22231);
};
// 获取部门人员
const getDeptUserList = () => {
  $request.HTTP.approval
    .getdepartmentList({ IsDepartment: 1 })
    .then((res) => {
      if (res.status === 0) {
        state.giveDepOpt = res.data;
      }
    })
    .catch((e) => {});
};
// 选中人物
const selectUser = (val) => {
  console.log(val);
  let temp = [];
  val.forEach((s1) => {
    state.apiUserList.forEach((s2) => {
      if (s1 === s2.ID) {
        temp.push({ UserID: s2.ID, Name: s2.Name });
      }
    });
  });
  console.log(temp, 2);
  state.JoinUsers = temp;
};
// 重选
const reset = () => {
  state.JoinUsers = [];
  state.checkJob = null;
  state.checkDept = null;
  state.apiUserList = [];
  state.selectUserIDList = [];
  state.userList = [];
};
const addArt = () => {
  processSuccess("添加成功");
  //   state.apiUserList = [];
  //   state.userList = [];
  console.log(state.JoinUsers, 123123);
  emit("joinHandleOk", state.JoinUsers);
};

// 分配人关闭
const closeUserTag = (tag) => {
  const id = JSON.parse(JSON.stringify(tag.UserID));
  const tags = state.selectUserIDList.filter((item) => item != id);
  const rows = state.JoinUsers.filter((item) => item.UserID != id);
  nextTick(() => {
    state.selectUserIDList = tags;
    state.JoinUsers = rows;
  });
};
// const getUserList = () => {
//   $request.HTTP.common
//     .supperList({ NickName: state.NickName })
//     .then((res) => {
//       if (res.status == 0) {
//         res.data.Data.forEach((v) => {
//           state.userList.push({ label: v.NickName, value: v.ID });
//         });
//         state.apiUserList = res.data.Data;
//       } else {
//         message.error(res.msg);
//       }
//     })
//     .catch((e) => {
//       message.error(e.response.data.msg || "操作失败，请稍后再试");
//     });
// };
const handleOk = (e) => {
  //   state.apiUserList = [];
  //   state.userList = [];
  emit("joinHandleOk", state.JoinUsers);
};
watch(
  () => props.joinUserVisible,
  (newValue, oldValue) => {
    if (newValue) {
      getDeptUserList();
    }
  }
);
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  margin: 0;
  color: $theme-primary;
}
.action-btn {
  background: $theme-primary;
  border-radius: 12px;
  cursor: pointer;
  color: #ffff;
}
:deep(.ant-table-thead > tr > th) {
  background: #dfd7f2 !important;
  border-bottom: 1px solid #dfd7f2;
  font-weight: bolder !important;
  color: $basic-black !important;
}

:deep(.ant-checkbox-wrapper) {
  color: #7650df;
}
.selectCla {
  border-radius: 20px;

  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border-radius: 20px;
  }
  :deep(.ant-select-selector) {
    background-color: #978bf2;
  }
  :deep(.ant-select-selection-placeholder) {
    color: #fff;
  }
}
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
  background-color: #7650df;
  border-color: #7650df;
}

:deep(.ant-table) {
  border-radius: 20px;
  overflow: hidden;
  color: $basic-black;
}
.tags {
  background-color: #e3dfea;
  color: #7650df;
}
.button-group {
  display: flex;
  justify-content: flex-end;

  .save-btn {
    margin-right: 20px;
    width: 153px;
    border-radius: 20px;
    background: $theme-primary;
    color: #ffff;
  }
  .act-btn {
    width: 113px;
    border-radius: 20px;
    background: #8b8b8bff;
    color: #ffff;
  }
}
</style>
<style lang="scss">
.artwork-dialog {
  width: 1300px !important;
  .ant-modal-body {
    height: 650px !important;
  }
}
</style>
