<template>
  <view>
    <hs-page-head-information title="365天后截止在线开票，届时请前往物业管理处索取发票!" />
    <cc-scroll-loading :meta="metaData">
      <view>
        <view
          v-for="(i, index) in list"
          :key="`item_${index}`"
          :class="`invoice_item ${i.checked ? 'invoice_item_active' : ''}`"
        >
          <view class="invoice_item_head" @click="i.checked = !i.checked">
            <view class="name"> 深圳市领壹 <text>默认</text></view>
            <uni-icons
              type="checkbox-filled"
              v-if="i.checked"
              size="20"
              color="#2A7EFB"
            ></uni-icons>
            <uni-icons type="circle" size="20" v-else color="#666"></uni-icons>
          </view>
          <view class="invoice_item_foot">
            <view class="type"> 企业 </view>
            <view class="group_btn">
              <view class="btn delete_btn" @click="handleDeleteClick"> 删除 </view>
              <view class="btn" @click="handleToPage"> 编辑 </view>
            </view>
          </view>
        </view>
      </view>
    </cc-scroll-loading>
    <hs-footer
      btnParimaryName="开发票"
      btnOtherName="添加发票抬头"
      btnOtherShow
      @handleOtherClick="handleToPage()"
      @handleParmaryClick="handleInvoice()"
    />
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const metaData = { current_page: 1, last_page: 1, per_page: 10, total: 1 }
const list = ref([{ checked: false }])
const handleToPage = () => {
  uni.navigateTo({
    url: '/ME/me_invoice/add/index'
  })
}

const handleInvoice = () => {
  if (list?.value[0]?.checked) {
    uni.showModal({
      title: '提示',
      content: '当前项目暂未开放！',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
  } else {
    uni.showToast({
      title: '请选择发票抬头',
      icon: 'none'
    })
  }
}

const handleDeleteClick = () => {
  uni.showModal({
    title: '提示',
    content: '演示发票抬头不能删除！',
    showCancel: false,
    confirmColor: '#0082FA',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}
</script>
<style lang="scss">
@import './style.scss';
</style>
