<template>
  <BasicLayout>
    <JsQjDetail :qjId="qjId" :dbFlag="dbFlag" v-if="qjId && qjId.length" />
    <!-- 驳回弹窗 -->
    <u-popup
      :show="dlgFlag"
      mode="center"
      :closeOnClickOverlay="false"
      @close="closeDlg"
    >
      <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="closeDlg">取消</u-button>
          <u-button type="primary" @click="handleReject">确定</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="showDlg"
          />
          <u-button
            text="同意"
            class="mr-15 mr-7"
            type="primary"
            @click="submit"
          />
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { jsQjJwcQrApi } from "@/api/base/jsQjApi";
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 dbFlag = ref(false);
const qjId = ref<string>();
const dlgFlag = ref(false);
const rejectReason = ref("");

const submit = async () => {
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    spStatus: "approved",
    spRemark: "同意",
  };
  uni.showLoading({ title: "确认中..." });
  await jsQjJwcQrApi(params);
  uni.hideLoading();
  navigateBack();
};

const showDlg = () => {
  dlgFlag.value = true;
};

const closeDlg = () => {
  dlgFlag.value = false;
};

// 驳回处理
const handleReject = async () => {
  if (!rejectReason.value.trim()) {
    uni.showToast({ title: "请填写驳回意见", icon: "none" });
    return;
  }
  const params = {
    qjId: qjId.value,
    jsId: getJs.id,
    spStatus: "rejected",
    spRemark: rejectReason.value,
  };
  uni.showLoading({ title: "正在驳回..." });
  await jsQjJwcQrApi(params);
  uni.hideLoading();
  closeDlg();
  navigateBack();
};

onLoad((options) => {
  if (options.qjId) {
    qjId.value = options.qjId;
  }
  if (options.dbFlag) {
    dbFlag.value = options.dbFlag === "true";
  }
});
</script>

<style lang="scss" scoped>
.popup-content {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
}

.popup-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: center;
}

.popup-actions {
  margin-top: 20px;
}

.divider {
  height: 1px;
  background-color: #eee;
  margin: 0 15px;
}
</style>
