<!-- 
  TODO 客户业务 / 汇兑-界面
 -->
<template>
  <el-main class="exchangeconvert-list">
    <el-form
      ref="exchangeConvertFormRef"
      :model="exchangeConvertForm"
      inline
      label-width="80px"
      class="exchange-convert"
    >
      <el-row>
        <el-col
          :sm="24"
          :lg="12"
        >
          <el-form-item
            prop="customerId"
            label="客户"
            class="item"
          >
            <BaseSelect
              v-model:modelValue="exchangeConvertForm.customerId"
              :options="customertList"
              placeholder="客户"
              class="item"
            />
          </el-form-item>
        </el-col>
        <el-col
          :sm="24"
          :lg="12"
        >
          <el-form-item
            prop="currencyCode"
            label="原货币"
            class="item"
          >
            <BaseSelect
              v-model:modelValue="exchangeConvertForm.currencyCode"
              :options="currencyList"
              placeholder="原货币"
              class="item"
              @change="changeExchangeRate"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col
          :sm="24"
          :lg="12"
        >
          <el-form-item
            prop="feeAmount"
            label="金额"
            class="item"
          >
            <el-input
              v-model="exchangeConvertForm.feeAmount"
              v-clear-only-regex="/^\d*\.?\d{0,3}$/"
              placeholder="金额"
            />
          </el-form-item>
        </el-col>
        <el-col
          :sm="24"
          :lg="12"
        >
          <el-form-item
            prop="exchangeRate"
            label="汇率"
            class="item"
          >
            <el-input
              v-model="exchangeConvertForm.exchangeRate"
              placeholder="汇率"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col 
          :sm="24"
          :lg="12"
        >
          <el-form-item
            prop="orgId"
            label="分公司"
            class="item"
          >
            <BaseSelect
              v-model:modelValue="exchangeConvertForm.orgId"
              :filterable="false"
              :options="branchCompanyCustomers"
              placeholder="分公司"
              class="item"
            />
          </el-form-item>
        </el-col>
        <el-col 
          :sm="24"
          :lg="12"
        >
          <el-form-item
            prop="remark"
            label="备注"
            class="item"
          >
            <el-input
              v-model="exchangeConvertForm.remark"
              placeholder="备注"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="center">
        <el-button
          v-permission="['sys:userMoneyDetail:exchangeConvert']"
          type="primary"
          :loading="exchangeConvertState.submitLoading"
          @click="hanleSave"
        >
          汇兑
        </el-button>
        <el-button
          type="danger"
          :loading="exchangeConvertState.submitLoading"
          @click="hanleReset"
        >
          重置
        </el-button>
      </div>
    </el-form>
  </el-main>
</template>
<script lang="ts" setup name="exchangeConvert">
import { useExchangeConvert } from '@/composables/exchangeConvert/useExchangeConvert';
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';

const { 
    exchangeConvertFormRef, 
    exchangeConvertForm,
    exchangeConvertState,
    hanleSave,
    hanleReset,
    changeExchangeRate,
    customertList, 
    currencyList, 
    branchCompanyCustomers
} = useExchangeConvert()
</script>
<style lang="scss" scoped>
.exchange-convert {
    width: 50%;
    .center {
        margin-top: 20px;
        text-align: center;
    }
    .item {
      width: 100%;
    }
}
</style>