<template>
  <div class="inspection-detail-demo">
    <a-card title="安检详情 Demo" :bordered="false">
      <p class="demo-desc">
        点击下方按钮打开安检结果详情抽屉，默认展示安检 ID 为 <strong>1016038</strong> 的详情。
      </p>
      <a-space>
        <a-button type="primary" @click="openDetail(1016038)">
          <a-icon type="file-search" />
          查看安检详情 (ID: 1016038)
        </a-button>
        <a-input-number
          v-model="customId"
          :min="1"
          placeholder="输入其他安检ID"
          style="width: 180px"
        />
        <a-button @click="openDetail(customId)">
          查看指定安检
        </a-button>
      </a-space>
    </a-card>

    <x-inspection-detail-drawer
      ref="detailDrawer"
      service-name="af-safecheck"
      :is-audited="isAudited"
      @refresh="handleRefresh"
    />
  </div>
</template>

<script>
import XInspectionDetailDrawer from './index.vue'

export default {
  name: 'XInspectionDetailDrawerDemo',
  components: { XInspectionDetailDrawer },
  data () {
    return {
      isAudited: false,
      customId: null
    }
  },
  methods: {
    openDetail (id) {
      if (!id) {
        this.$message.warning('请输入有效的安检 ID')
        return
      }
      this.$refs.detailDrawer.init({ id })
    },
    handleRefresh () {
      this.$message.success('详情已刷新')
    }
  }
}
</script>

<style lang="less" scoped>
.inspection-detail-demo {
  padding: 24px;
}

.demo-desc {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1.6;

  strong {
    color: #1890ff;
  }
}
</style>
