<template>
  <el-drawer v-model="open" :title="`申购清单`" :before-close="handleClose" direction="rtl" class="demo-drawer"
    modal-class="el-subscribe-drawer" size="80%">
    <!-- {{ form }} -->
    <div v-loading="loading" class="flex">
      <div class="flex-sub">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建者">{{ form.nickName }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ parseTime(form.createTime) }}</el-descriptions-item>
          <!-- <el-descriptions-item label="申购编号" :span="2">{{ form.applyPurchaseId }}</el-descriptions-item> -->
          <el-descriptions-item label="申领状态" :span="2">
            <div class="flex">
              <dict-tag :options="com_apply_state" :value="form.applyPurchaseState" />
              <!-- <el-link type="primary" class="margin-left">查看审批流程进度</el-link> -->
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="申购说明" :span="2">{{ form.applyPurchaseExplain }}</el-descriptions-item>
        </el-descriptions>
        <el-divider content-position="center">物料管理-物料申购详情信息</el-divider>
        <Index :list="form.applyPurchaseDetailsList" :editable="false" />
      </div>
      <div class="padding-left" style="width:30%;max-width:400px">
        <WfJobList :list="form.wfJobList" />
      </div>
    </div>
    <template #footer>
      <div class="" v-if="applyPurchaseId">
        <el-button plain @click="handleRevoke" v-if="form.applyPurchaseState == 10">撤 回</el-button>
        <el-button plain @click="handleEidt" v-else-if="form.applyPurchaseState == 30||form.applyPurchaseState == 50">编 辑</el-button>
        <!-- <el-button plain @click="handleClose">取 消</el-button>
        <el-button :disabled="loading" type="primary" @click="submitForm">提 交</el-button> -->
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { clearApplyPurchaseDetails, updateApplyPurchaseDetails } from "@/utils/applyPurchaseDetails";
import { getApplyPurchase } from "@/api/applyPurchase/applyPurchase";
import {
  withdrawApply,
} from "@/api/workbench/apply";
import Index from "@/components/ApplyPurchaseDetails/index";
import WfJobList from "@/components/WfJobList/index";
const emit = defineEmits(["update"]);

const { proxy, ctx } = getCurrentInstance();
const { com_apply_state } = proxy.useDict('com_apply_state');

const store = useStore();
const router = useRouter();
const open = ref(false);
const loading = ref(true);

const prop = defineProps({
  applyPurchaseId: {
    type: [Number, String],
    default: null,
  },
});

const { applyPurchaseId } = toRefs(prop);
const data = reactive({
  form: {},
})

const { form } = toRefs(data);


const applyPurchaseNumTotal = computed(() => {
  let total = 0;
  Object.values(store.state.data.applyPurchaseDetails).map((item) => {
    total += item.applyPurchaseNum;
  });
  return total;
});



// 显示弹框
function show() {
  open.value = true;
  loading.value = true;
  nextTick(() => {
    getData()
  })
}

// 关闭按钮
function handleClose() {
  form.value = {}
  open.value = false;
  emit("update", true)
}



function getData() {
  //// console.log(applyPurchaseId.value)
  if (applyPurchaseId.value) {
    getApplyPurchase(applyPurchaseId.value).then(response => {
      form.value = response.data;
      loading.value = false;
    });
  }
}

function handleRevoke() {
  proxy.$modal
    .confirm("是否撤回？")
    .then(() => {
      withdrawApply(form.value.applyPurchaseId).then(() => {
        proxy.$modal.msg("已撤回");
        getData();
        emit("update", true)
      })
    })
    .catch(() => { });
}

function handleEidt() {
  clearApplyPurchaseDetails(false);
  form.value.applyPurchaseDetailsList.map(item => updateApplyPurchaseDetails(item, false))
  router.push("/warehouse/warehouse?showApplyPurchaseDrawerSubmit=true");
  handleClose();
}


defineExpose({
  show,
  handleClose,
});
</script>