<template>
  <Container backBtn logoutBtn @handleBack="backPrev">
    <template #main>
      <view class="page-wrap">
        <view class="content-card">
          <!-- 标题+右上角按钮 -->
          <view class="top-row">
            <view class="title">{{ info.title }}</view>
            <view class="btn-take" @click="goScanCard">立即取号</view>
          </view>
          <!-- 部门信息 -->
          <view class="dept-text">部门：{{ info.dept }}</view>
          <!-- 办事详情正文 -->
          <view class="desc-text">{{ info.content }}</view>
        </view>
      </view>
    </template>
  </Container>
</template>

<script>
import Container from '@/components/container/container.vue'
import { getItemDetail, takeNumber } from '@/api/ticket.js'

export default {
  components: {
    Container
  },
  data() {
    return {
      itemId: '',
      info: {
        title: '',
        dept: '',
        content: ''
      }
    }
  },
  computed: {
    idcard() {
      return uni.getStorageSync('idcard') || ''
    }
  },
  onLoad(options) {
    this.itemId = options.id || ''
    if (this.itemId) {
      this.fetchDetail(this.itemId)
    }
  },
  methods: {
    // 返回上一页
    backPrev() {
      uni.navigateBack()
    },

    // 查询事项详情
    async fetchDetail(id) {
      try {
        const res = await getItemDetail({ id })
        if (res.success && res.data) {
          const d = res.data
          this.info.title = d.itemName || ''
          this.info.dept = d.deptName || ''
          this.info.content = d.guideContent || ''
        }
      } catch (e) {
        console.error('获取事项详情失败', e)
      }
    },

    // 立即取号
    async goScanCard() {
      if (!this.idcard) {
        uni.showToast({
          title: '请先刷身份证',
          icon: 'none'
        })
        return
      }
      try {
        const res = await takeNumber({
          applicantIdCard: this.idcard,
          itemId: this.itemId
        })
        if (res.success) {
          uni.showToast({
            title: '取号成功',
            icon: 'none'
          })
        }
      } catch (e) {
        console.error('取号失败', e)
      }
    }
  }
}
</script>

<style scoped>
.page-wrap {
  width: 100%;
  height: 100%;
  padding: 15vh 5vw 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.content-card {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 5vh;
  padding: 3vh 5vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.top-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1vh;
}

.title {
  font-size: 2vw;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  width: 75%;
}

.btn-take {
  background-color: #367bfa;
  color: #fff;
  font-size: 2vw;
  padding: 1.5vh 4vw;
  border-radius: 999px;
}

.dept-text {
  font-size: 2vw;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 3vh;
}

.desc-text {
  font-size: 2vw;
  color: rgba(51, 51, 51, 1);
  line-height: 1.8;
}
</style>
