<template>
  <BasicLayout>
    <JsQjDetail :qjId="qjId" :dbFlag="dbFlag" v-if="qjId && qjId.length" />
    <!-- 驳回弹窗 -->
    <u-popup
      :show="bhDlgFlag"
      mode="center"
      :closeOnClickOverlay="false"
      @close="closeBhDlg"
    >
      <view class="popup-content">
        <view class="popup-title">驳回原因</view>
        <u-input
          v-model="rejectReason"
          type="textarea"
          placeholder="请填写驳回原因"
          :autoHeight="true"
          maxlength="200"
        />
        <view class="popup-actions flex-row justify-end mt-4">
          <u-button class="mr-2" @click="closeBhDlg">取消</u-button>
          <u-button type="primary" @click="handleReject">确定</u-button>
        </view>
      </view>
    </u-popup>
    <!-- 转办弹窗 -->
    <u-popup
      :show="zbDlgFlag"
      mode="center"
      :closeOnClickOverlay="false"
      @close="closeZbDlg"
    >
      <view class="popup-content">
        <view class="popup-title">转到教师</view>
        <JsPicker
          @change="changeZbJs"
          :multiple="false"
          :excludeIds="excludeIds"
        />
        <!-- 这里可以扩展选择转办对象等内容 -->
        <view class="popup-actions flex-row justify-end mt-4">
          <u-button class="mr-2" @click="closeZbDlg">取消</u-button>
          <u-button type="primary" @click="handleTransfer">确定</u-button>
        </view>
      </view>
    </u-popup>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="divider"></view>
        <view class="flex-row items-center pb-10 pt-5">
          <u-button
            text="驳回"
            class="ml-15 mr-7"
            :plain="true"
            @click="showBhDlg"
          />
          <u-button text="转办" class="mr-7" :plain="true" @click="showZbDlg" />
          <u-button
            text="同意"
            class="mr-15 mr-7"
            type="primary"
            @click="submit"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { jsQjJwcQrApi, jsQjZbApi } from "@/api/base/jsQjApi";
import JsPicker from "@/pages/components/JsPicker/index.vue";
import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import { navigateBack } from "@/utils/uniapp";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import JsQjDetail from "./components/jsQjDetail.vue";
const { getJs } = useUserStore();
const { setData, getData, getDb } = useDataStore();

const dbFlag = ref(false);

const qjId = ref<string>();

// 驳回弹窗
const bhDlgFlag = ref(false);
const rejectReason = ref("");

// 转办弹窗
const zbDlgFlag = ref(false);
const excludeIds = ref<string[]>([getJs.id]);
const zbJs = ref<any>({});

// 同意处理
const submit = async () => {
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    qrStatus: 2,
    qrYj: "同意",
  };
  uni.showLoading({ title: "审批中..." });
  await jsQjJwcQrApi(params);
  uni.hideLoading();
  navigateBack();
};

// 显示/关闭驳回弹窗
const showBhDlg = () => {
  bhDlgFlag.value = true;
};
const closeBhDlg = () => {
  bhDlgFlag.value = false;
};

// 显示/关闭转办弹窗
const showZbDlg = () => {
  zbDlgFlag.value = true;
};
const closeZbDlg = () => {
  zbDlgFlag.value = false;
};

const changeZbJs = (selected: any) => {
  zbJs.value = selected;
};

// 驳回处理
const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    uni.showToast({ title: "请填写驳回意见", icon: "none" });
    return;
  }
  const params: any = {
    qjId: qjId.value,
    jsId: getJs.id,
    spStatus: 1, // 1为拒绝
    spYj: rejectReason.value,
  };
  uni.showLoading({ title: "正在驳回..." });
  try {
    await jsQjJwcQrApi(params);
    uni.hideLoading();
    uni.showToast({ title: "已驳回", icon: "success" });
    closeBhDlg();
    setTimeout(() => {
      navigateBack();
    }, 500);
  } catch (e) {
    uni.hideLoading();
  }
};

// 转办处理
const handleTransfer = async () => {
  if (!zbJs.value || !zbJs.value.value) {
    uni.showToast({ title: "请填写转办教师", icon: "none" });
    return;
  }
  const params: any = {
    qjId: qjId.value,
    jsId: getJs.id,
    dbId: getDb.id,
    zbJsId: zbJs.value.value,
    zbJsxm: zbJs.value.label,
  };
  uni.showLoading({ title: "正在转办..." });
  try {
    await jsQjZbApi(params);
    uni.hideLoading();
    uni.showToast({ title: "已转办", icon: "success" });
    closeBhDlg();
    setTimeout(() => {
      navigateBack();
    }, 500);
  } catch (e) {
    uni.hideLoading();
  }
};

onLoad(async (data: any) => {
  // 从待办过来的，需要从后端获取数据
  if (data && data.from && data.from == "db") {
    qjId.value = data.id;
    dbFlag.value = true;
    if (getDb.dbZt === "B") {
      setData({ id: data.id });
      let url = "/pages/view/hr/jsQj/detail"; // 使用新路径
      uni.navigateTo({ url });
      return;
    }
  } else {
    qjId.value = getData.id;
    dbFlag.value = false;
  }
});
</script>

<style scoped>
.popup-content {
  width: 80vw;
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px 16px 16px;
}
.popup-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
}
.popup-actions {
  margin-top: 16px;
}
</style>
