<template>
  <el-dialog
    v-model="dialogVisible"
    title="领取设备结算单"
    width="75%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
  <!--  <div class="title">
        <img src="../../../../../assets/u2855.svg" alt="">
        <span>已领取</span>
    </div> -->
    <el-form :model="formData" label-width="110px" label-position="top">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="借用单编号">
            <el-input v-model="formData.application_no" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="借用人">
            <el-input v-model="formData.emergency_contact" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学号/工号">
            <el-input v-model="userCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="借用性质">
            <el-input v-model="borrowType" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="借出时间">
            <el-input v-model="formData.expected_start_time" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计归还时间">
            <el-input v-model="formData.expected_end_time" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <div style="margin: 16px 0 8px 0; font-weight: bold">借用明细表</div>
      <el-table :data="formData.items" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="device_code" label="设备编号" align="center" />
        <el-table-column prop="device_category_name" label="设备分类" align="center" />
        <el-table-column prop="device_name" label="设备名称" align="center" />
        <el-table-column prop="quantity" label="借用数量" align="center" />
        <el-table-column prop="device_specification" label="规格型号" align="center" />
        <el-table-column prop="device_storage_location" label="存放位置" align="center">
          <template #default="scope">
            {{ scope.row.device_storage_location || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
          <template #default="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
      </el-table>

      <div style="margin: 16px 0 8px 0; font-weight: bold">配件信息</div>
      <el-input v-model="formData.accessory_info" disabled />

      <div style="margin: 16px 0 8px 0; font-weight: bold">备注</div>
      <el-input v-model="formData.remark" type="textarea" disabled />
    </el-form>
   

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" @click="handlePrint">打印</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch, computed } from 'vue';

const props = defineProps<{
  visible: boolean;
  settlementData: any;
  modelValue: any;
}>();

const emit = defineEmits(['update:visible', 'update:modelValue']);

const dialogVisible = ref(false);
const formData = ref<any>({});

watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val;
    if (val) {
      // 优先使用 modelValue，如果没有则使用 settlementData
      formData.value = props.modelValue || props.settlementData || {};
    }
  }
);

watch(
  () => props.modelValue,
  (val) => {
    console.log("val:::",val);
    if (val) {
    /* formData.value.app_user_borrower = val.borrower_info.user_code; */
      formData.value = val;
      
    }
  },
  { immediate: true }
);

const userCode = computed(() => {
  return formData.value?.app_user_borrower || formData.value?.borrower_info?.user_code || '';
});

const borrowType=computed(() => {
  return formData.value?.borrow_type_label || formData.value?.borrow_type || '';
});

const handleClose = () => {
  emit('update:visible', false);
  emit('update:modelValue', formData.value);
};

const handlePrint = () => {
  window.print();
};
</script>

<style scoped>
@media print {
  .el-dialog__footer {
    display: none;
  }
}
.title{
    display: flex;
    justify-content: flex-end;
    position: relative;

}
.title span{
    position: absolute;
    right:10px ;
    bottom: 30%;
    align-self: flex-start;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    transform: rotate(315deg);
    font-family: "Impact Bold", "Impact Normal", "Impact", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 17px;
    color: #F77105;
}

</style> 