<template>
  <view class="container" style="paddingBottom:1rpx;">
    <u-navbar
      leftIconSize="40rpx"
      leftIconColor="#333333"
      title="银行基础信息管理"
    >
    </u-navbar>
    <view class="section">
      <view class="section-title">{{ title }}</view>
      <view class="form-view">
        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="180rpx"
          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
          <u-form-item label="银行全称" prop="bankName" required>
            <u--input v-model="form.bankName" placeholder="请填写银行全称"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="银行简称" prop="bankShortName" required>
            <u--input v-model="form.bankShortName" placeholder="请填写银行简称"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="银行类型" required prop="bankTypeName" @click="handleShowBankType">
            <view class="input-with-arrow">
              <u--input v-model="form.bankTypeName" readonly disabledColor="#ffffff" placeholder="请选择银行类型"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="信用卡多账户合并出账" prop="multiAccountConsolidatedName" required @click="handleShowAccounting">
            <view class="input-with-arrow">
              <u--input v-model="form.multiAccountConsolidatedName" readonly disabledColor="#ffffff" placeholder="请选择信用卡多账户合并出账"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
              <text class="arrow-icon">▼</text>
            </view>
          </u-form-item>
          <u-form-item label="英文简称" prop="englishShortName">
            <u--input v-model="form.englishShortName" placeholder="请填写英文简称"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="归属省份" prop="province">
            <u--input v-model="form.province" placeholder="请填写归属省份"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="归属城市" prop="city">
            <u--input v-model="form.city" placeholder="请填写归属城市"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="统一社会信用代码" prop="unifiedCreditCode">
            <u--input v-model="form.unifiedCreditCode" placeholder="请填写统一社会信用代码"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="排序" prop="orderNum">
            <u--input v-model.number="form.orderNum" type="number" placeholder="请填写排序"
              inputAlign="left" :customStyle="inputBaseStyle"></u--input>
          </u-form-item>
          <u-form-item label="备注" prop="remark" labelPosition="top">
            <u--textarea v-model="form.remark" placeholder="请填写备注" autoHeight inputAlign="left" count
              maxlength="20000" style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;"></u--textarea>
          </u-form-item>
        </u--form>
        <view class="form-btn">
          <u-button type="primary" text="提交" @click="submit"></u-button>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"></u-toast>
    <u-picker itemHeight="88" :show="showBankType" :columns="bankTypeList" keyName="dictLabel" @cancel="handleBankTypeCancel"
      @confirm="handleBankTypeConfirm"></u-picker>
    <u-picker itemHeight="88" :show="showAccounting" :columns="accountingList" keyName="dictLabel" @cancel="handleAccountingCancel"
      @confirm="handleAccountingConfirm"></u-picker>
  </view>
</template>

<script setup>
import { getBankBaseInfo, addBankBaseInfo, updateBankBaseInfo } from '@/api/invest/bankBaseInfo'
import { getDicts } from '@/api/system/dict/data.js'
const { proxy } = getCurrentInstance()
import { onLoad } from "@dcloudio/uni-app";
import { reactive, toRefs, ref, getCurrentInstance } from "vue";

const showBankType = ref(false)
const showAccounting = ref(false)
const title = ref("银行基础信息管理")
const bankTypeList = ref([])
const accountingList = ref([])
const inputBaseStyle = {
  background: '#ffffff',
  border: '2rpx solid #dcdfe6',
  borderRadius: '8rpx',
  padding: '0 24rpx',
  height: '68rpx',
  width: '100%',
  boxSizing: 'border-box'
}


const data = reactive({
  form: {
    id: null,
    bankName: null,
    bankShortName: null,
    bankType: null,
    bankTypeName: null,
    englishShortName: null,
    province: null,
    city: null,
    unifiedCreditCode: null,
    multiAccountConsolidated: '0',
    multiAccountConsolidatedName: null,
    orderNum: 0,
    remark: null
  },
  rules: {
    bankName: [{ type: 'string', required: true, message: '银行全称不能为空', trigger: ['change', 'blur'] }],
    bankShortName: [{ type: 'string', required: true, message: '银行简称不能为空', trigger: ['change', 'blur'] }],
    bankTypeName: [{ type: 'string', required: true, message: '银行类型不能为空', trigger: ['change', 'blur'] }],
    multiAccountConsolidatedName: [{ type: 'string', required: true, message: '信用卡多账户合并出账不能为空', trigger: ['change', 'blur'] }]
  }
})

const { form, rules } = toRefs(data)

onLoad((option) => {
  form.value.id = option.id
  if (form.value.id != null) {
    title.value = "银行基础信息管理-修改"
  } else {
    title.value = "银行基础信息管理-新增"
  }
  getDict()
})

function getDict() {
  // 银行类型
  getDicts('bank_type').then(res => {
    bankTypeList.value = [res.data]
  })
  // 是否合并出账
  getDicts('is_accounting').then(res => {
    accountingList.value = [res.data]
  })
  
  if (form.value.id != null) {
    getBankBaseInfo(form.value.id).then(res => {
      form.value = res.data
      
      // 银行类型
      getDicts('bank_type').then(result => {
        form.value.bankTypeName = dictStr(form.value.bankType, result.data)
      })
      
      // 是否合并出账
      getDicts('is_accounting').then(result => {
        form.value.multiAccountConsolidatedName = dictStr(form.value.multiAccountConsolidated, result.data)
      })
    })
  }
}

function dictStr(val, arr) {
  let str = ''
  arr.map(item => {
    if (item.dictValue === val) {
      str = item.dictLabel
    }
  })
  return str
}

function handleShowBankType() {
  if (bankTypeList.value[0].length === 0) {
    proxy.$refs['uToast'].show({
      message: '银行类型为空', type: 'warning'
    })
  } else {
    showBankType.value = true
  }
}

function handleBankTypeConfirm(e) {
  form.value.bankTypeName = e.value[0].dictLabel
  form.value.bankType = e.value[0].dictValue
  showBankType.value = false
}

function handleBankTypeCancel() {
  showBankType.value = false
}

function handleShowAccounting() {
  if (accountingList.value[0].length === 0) {
    proxy.$refs['uToast'].show({
      message: '信用卡多账户合并出账为空', type: 'warning'
    })
  } else {
    showAccounting.value = true
  }
}

function handleAccountingConfirm(e) {
  form.value.multiAccountConsolidatedName = e.value[0].dictLabel
  form.value.multiAccountConsolidated = e.value[0].dictValue
  showAccounting.value = false
}

function handleAccountingCancel() {
  showAccounting.value = false
}

function submit() {
  proxy.$refs['uForm'].validate().then(() => {
    if (form.value.id != null) {
      updateBankBaseInfo(form.value).then(res => {
        proxy.$refs['uToast'].show({
          message: '修改成功', complete() {
            uni.navigateBack()
          }
        })
      })
    } else {
      addBankBaseInfo(form.value).then(res => {
        proxy.$refs['uToast'].show({
          message: '新增成功', complete() {
            uni.navigateBack()
          }
        })
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.section {
  margin: 24rpx;
  padding: 0;
  background-color: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .section-title {
    padding: 16rpx 24rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    line-height: 1.2;
    font-size: 28rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    
    &::before {
      content: '';
      width: 6rpx;
      height: 28rpx;
      background: #ffffff;
      border-radius: 3rpx;
      margin-right: 12rpx;
    }
  }

  .form-view {
    padding: 24rpx;

        .input-with-arrow {
      position: relative;
      width: 100%;

      .arrow-icon {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        color: #c0c4cc;
        font-size: 20rpx;
        pointer-events: none;
        z-index: 10;
      }
    }

    .form-btn {
      padding-top: 16rpx;
    }
  }
}
</style>

<style lang="scss">
.form-btn .u-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: none !important;
  border-radius: 24rpx !important;
  height: 80rpx !important;
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
}

.form-btn .u-button__text {
  font-size: 30rpx !important;
  font-weight: 500 !important;
  letter-spacing: 2rpx !important;
}
</style>
