<!-- 
    TODO 成本管理 / 汇率
 -->
<template>
  <div class="p-4">
    <!-- 搜索栏 -->
    <el-form
      class="el-search-form"
      :model="listParm"
      label-width="80px"
      :inline="true"
    >
      <!-- <el-form-item class="item-search">
        <el-input
          v-model="listParm.titleName"
          placeholder="请输入汇率名称"
        />
      </el-form-item> -->
      <el-form-item class="item-search">
        <el-input
          v-model="listParm.titleName"
          placeholder="请输入汇率名称"
        />
      </el-form-item>
      <el-form-item class="item-search">
        <el-select
          v-model="listParm.currencyCode"
          placeholder="请选择币种"
          :clearable="true"
        >
          <el-option
            v-for="item in currencyList"
            :key="item.value"
            :label="`${item.value}(${item.label})`"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          style="color: #ff7670"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:BillRate:add']"
          type="primary"
          :icon="Plus" 
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格列表 -->
    <BaseTable
      :height="tableHeight"
      @register="registerTable"
    >
      <template #action="scope">
        <el-button
          v-permission="['sys:BillRate:edit']"
          type="success"
          :icon="Edit"
          @click="hanleActionColumns(EditType.EDIT, scope.row)"
        >
          编辑
        </el-button>
        <el-button
          v-permission="['sys:BillRate:delete']"
          type="danger"
          :icon="Delete"
          @click="hanleActionColumns(EditType.DELETE, scope.row)"
        >
          删除
        </el-button>
      </template>
    </BaseTable>
    <!-- 分页 -->
    <el-pagination
      v-model:current-page="listParm.pageNum"
      :page-sizes="[10, 20, 40, 80, 100]"
      :page-size="listParm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listParm.total"
      background
      @size-change="sizeChange"
      @current-change="currentChange"
    />
  </div>
  <AddEditBillRate
    ref="addEditBillRateRef"
    @save-bill-rate="saveBillRate" 
  />
</template>

<script lang="ts" setup name="billrate">
import { ref, nextTick, onBeforeMount, onMounted } from 'vue';
import {
  Search,
  Plus,
  RefreshRight,
  Edit,
  Delete
} from "@element-plus/icons-vue";
import useBillRateTable from '@/composables/business/billrate/useBillRateTable';
import { BaseTable, useTable } from '@/components/Table';
import AddEditBillRate from './AddEditBillRate.vue';
import { EditType } from '@/type/BaseEnum';
import { useCurrencyStore } from '@/store/currency';
import useResizeHeight from '@/hooks/useResizeHeight';

// 基础数据
const store = useCurrencyStore()

const { searchBtn, resetBtn, sizeChange, currentChange, addBtn, saveBillRate, hanleActionColumns, listParm, billRateTableList, addEditBillRateRef, currencyList } = useBillRateTable(store)

// 表格数据
const [registerTable] = useTable(billRateTableList)


// 表格自适应屏幕高度
const { tableHeight } = useResizeHeight()
</script>