import { companyWalletTest, companyWalletRow, comBoTest, comBoRow } from '../api/userType'
import preferencesUtils from '../utils/preferences'
import { getCompanyWallet, getBean , getComboList, beanType } from '../api/user'
import { promptAction } from '@kit.ArkUI';
import { AxiosResponse } from '@ohos/axios'
import NavHeader from '../components/NavHeader'
let companyId = preferencesUtils.get('XF_COMPANY_ID', '') as number

@Entry
@Component
struct EditUser {
  @State isShowCode: boolean = false
  @State walletData: companyWalletRow | null = null
  // 套餐列表
  @State comBoList: comBoRow[] = []
  @State beanProportion: string = ''
  @State isSelect: boolean = false
  @State selectComBo: number = 0
  // 获取套餐列表
  getComBoList = async () => {
    const comBoRes: AxiosResponse<comBoTest> = await getComboList({pageNum: 1, pageSize: 100, state: '1'})
    this.comBoList = comBoRes.data.rows
  }
  // 获取报告豆余额
  getWalletInfo = async () => {
    const walletInfo: AxiosResponse<companyWalletTest> = await getCompanyWallet({pageNum: 1, pageSize: 10, companyId: Number(companyId)})
    this.walletData = walletInfo.data.rows[0]
  }

  // 获取报告豆比例
  getBeanProportion = async () => {
    const BeanInfo: AxiosResponse<beanType> = await getBean()
    this.beanProportion = BeanInfo.data.msg
  }
  onPageShow(): void {
    this.getWalletInfo()
    this.getComBoList()
    this.getBeanProportion()
  }
  build() {
    Column(){
      NavHeader({title: '充值'})
      Column(){
        Column(){
          Row(){
            Row(){
              Text('报告豆比例')
            }.width(90)
            Text(this.beanProportion).layoutWeight(1).padding({top: 10, bottom: 10})
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Row(){
            Row(){
              Text('报告豆余额')
            }.width(90)
            Text(this.walletData?.bean.toString()).layoutWeight(1).padding({top: 10, bottom: 10})
          }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Column({space: 10}){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('充值金额 选择一下充值套餐')
            }
            Flex({wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }){
              ForEach(this.comBoList, (item: comBoRow, index: number) => {
                Column({space: 10}){
                  Text(`充${item.comboPrice}送${item.bean}`).fontSize(14).fontWeight(600)
                    .fontColor(this.selectComBo == index ? '#4abe84' : '#000')
                  Text(`得${(item.comboPrice + item.bean) * 10}豆`).fontSize(12).fontColor('#999')
                }.width('30%').height(60).borderWidth(1).borderRadius(4).justifyContent(FlexAlign.Center)
                .borderColor(this.selectComBo == index ? '#4abe84' : '#000')
                .onClick(() => {
                  this.selectComBo = index
                })
              })
            }

            Row(){
              Text('支付方式').margin({right: 20})
              Row({space: 5}){
                Image($r('app.media.wx_pay')).width('14')
                Text('微信支付')
              }
            }
          }.alignItems(HorizontalAlign.Start).border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          Column({ space: 10 }){
            Row(){
              Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
                .select(this.isSelect)
                .selectedColor(0x39a2db)
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .onChange((value: boolean) => {
                  this.isSelect = value
                })
              Text('我已了解且同意本次充值')
            }
            Text('1、充值根据当前比例兑换报告豆（比如说：选择的套餐是充100送10，当前兑换比例是1:1.5，则最终获得的报告豆为(100+10)×1.5=165）；\n' +
              '2、充值后不可退款，可开具增值税普通发票；\n' +
              '3、本次充值非广西消防救援总队接收，由消防维保助手服务商接收；\n' +
              '4、公司账户充值报告豆，公司名下所有成员共享使用报告豆；\n' +
              '5、充值完成后，7个工作日内系统将以开票信息开具订单金额的增值税普通发票（电子版），可在【订单查询】页面进行下载。').fontSize(12).fontColor('#606266')
              .lineHeight(20).backgroundColor('#eee').padding(10)
          }.alignItems(HorizontalAlign.Start).padding({top: 10, bottom: 10})
        }.backgroundColor('#fff').width('100%').padding({left: 5, right: 5}).borderRadius(10)
      }.padding(10).margin({bottom: 20, top: 10}).width('100%').layoutWeight(1).backgroundColor('#fff')
      Row({ space: 10}){
        Text('提交').borderRadius(5).layoutWeight(1).height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(async () => {
            if(this.isSelect) {
              promptAction.showToast({
                message: '支付成功'
              })
            } else {
              promptAction.showToast({
                message: '请先阅读并同意本次支付'
              })
            }
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}