<template>
  <el-dialog
    v-model="dialogVisible"
    :title="'价格调整详情'"
    width="90%"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <div class="detail-container">
      <div class="detail-content" v-if="itemList.length > 0">
        <el-table :data="itemList" style="width: 100%" size="small" border>
          <!-- 挂号调价单特殊显示 -->
          <el-table-column  label="科室" align="center" prop="orgName"  v-if="categoryType.includes('挂号调价')"/>
          <el-table-column
            label="号源"
            align="center"
            prop="name"
            v-if="categoryType.includes('挂号调价')"
          />
          <el-table-column label="项目名称" align="center" prop="itemName" v-else />
          <el-table-column label="当前进货价" align="center" prop="originBuyingPrice">
            <template #default="scope">
              <el-tag type="danger" size="small">
                {{ scope.row.originBuyingPrice ? scope.row.originBuyingPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="调后进货价" align="center" prop="newBuyingPrice">
            <template #default="scope">
              <el-tag type="success" size="small">
                {{ scope.row.newBuyingPrice ? scope.row.newBuyingPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="当前零售价" align="center" prop="originRetailPrice">
            <template #default="scope">
              <el-tag type="danger" size="small">
                {{ scope.row.originRetailPrice ? scope.row.originRetailPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="调后零售价" align="center" prop="newRetailPrice">
            <template #default="scope">
              <el-tag type="success" size="small">
                {{ scope.row.newRetailPrice ? scope.row.newRetailPrice + ' 元' : '-' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="进货价盈负差" align="center" prop="differenceBuyingPrice">
            <template #default="scope">
              {{ scope.row.differenceBuyingPrice ? scope.row.differenceBuyingPrice + ' 元' : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="影响库存数量" align="center" prop="itemQuantity">
            <template #default="scope">
              {{ scope.row.itemQuantity ? scope.row.itemQuantity + (scope.row.label || '') : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="调后零售价盈负差" align="center" prop="differenceRetailPrice">
            <template #default="scope">
              {{ scope.row.differenceRetailPrice ? scope.row.differenceRetailPrice + ' 元' : '-' }}
            </template>
          </el-table-column>
          <el-table-column label="调价原因" align="center" prop="reason" />
        </el-table>
        <div class="creator-info">
          <span class="creator-label">制单人：{{ props.createName || '-' }}</span>
        </div>
      </div>
      <div v-else class="empty-tip">暂无调价项目数据</div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { number } from 'echarts';
import { ref, computed, watch, toRaw, isProxy } from 'vue';

// 定义props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  detailData: {
    type: [Array, Object],
    default: () => [],
  },

  categoryType: {
    type: String,
    default: '',
  },
  createName: {
    type: String,
    default: '',
  },
});
// 定义事件
const emit = defineEmits(['update:visible', 'close']);

// 响应式数据
const dialogVisible = ref(false);

// 计算属性：获取需要显示的数据列表
const itemList = computed(() => {
  const data = props.detailData;
  console.log('data', data);
  return toRaw(data);
});

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
  }
);

// 监听dialogVisible变化
watch(dialogVisible, (newVal) => {
  emit('update:visible', newVal);
});

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false;
  emit('close');
};
</script>

<style scoped>
.detail-container {
  padding: 10px 0;
}

.creator-info {
  text-align: left;
  padding: 10px 0;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}

.creator-label {
  font-size: 14px;
  color: #606266;
}

.empty-tip {
  text-align: center;
  padding: 40px 0;
  color: #999;
}
</style>