<template>
  <SysDialog
    class="formula-modle"
    :title="dialog.title"
    :width="getBindValue.width"
    :height="getBindValue.height"
    :visible="dialog.visible"
    @onClose="hanleOnClose"
    @onConfirm="confirm"
  >
    <template #content>
      <!-- 新增/编辑-账单 -->
      <!-- 基础表单 -->
      <el-form
        ref="addbillrateFormRef"
        class="el-addbillrate-form"
        :model="state.form"
        :rules="state.rules"
        :inline="true"
        label-width="80px"
      >
        <el-row>
          <el-col :span="9">
            <el-form-item
              class="item-search"
              label="名称："
              prop="titleName"
            >
              <el-input
                v-model="state.form.titleName"
                placeholder="请输入名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              class="item-search"
              label="时间："
              prop="date"
            >
              <el-date-picker
                v-model="state.form.date"
                type="daterange"
                :picker-options="pickerOptions"
                start-placeholder="生效时间"
                end-placeholder="失效时间"
              />
              <!-- :disabled-date="disabledDate" 注释过去时间不能选择 -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 动态表格表单 -->
      <el-form
        ref="ruleFormBillMainTableRef"
        class="form-bill-main-table"
        :model="addEditBillRateTable"
      >
        <BaseTable @register="registerTable">
          <template #currencyCode="scope">
            <el-form-item
              v-if="scope.$index >= 0"
              :prop="`dataSource.${scope.$index}.currencyCode`"
              :rules="ruleBillRateForm.currencyCode"
            >
              <template v-if="scope.row.currencyCode">
                <el-select
                  v-model="scope.row.currencyCode"
                  filterable
                >
                  <el-option
                    v-for="item in filterNewsList(scope.row.currencyCode)"
                    :key="item.value"
                    :label="`${item.value}(${item.label})`"
                    :value="item.value"
                  />
                </el-select>
              </template>
              <template v-else>
                <el-select
                  v-model="scope.row.currencyCode"
                  filterable
                >
                  <el-option
                    v-for="item in newSourceLists"
                    :key="item.value"
                    :label="`${item.value}(${item.label})`"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-form-item>
          </template>
          <template #currencyRate="scope">
            <el-form-item
              v-if="scope.$index >= 0"
              :prop="`dataSource.${scope.$index}.currencyRate`"
              :rules="ruleBillRateForm.currencyRate"
            >
              <el-input
                v-model="scope.row.currencyRate"
                v-clear-only-regex="/^\d*\.?\d{0,6}$/"
              />
            </el-form-item>
          </template>
          <!-- 表格头部插槽 -->
          <template #header-action>
            <el-button
              type="primary"
              class="add-columns"
              :icon="Plus"
              link
              @click="hanleAddColumns(EditType.ADD)"
            />
          </template>
          <template #action="scope">
            <el-button
              type="danger"
              link
              :icon="Minus"
              @click="hanleAddColumns(EditType.DELETE, scope)"
            />
          </template>
        </BaseTable>
      </el-form>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { BaseTable, useTable } from '@/components/Table';
import { EditType } from '@/type/BaseEnum';
import useAddEditBillRate from '@/composables/business/billrate/useAddEditBillRate';
import useBillRateModel from '@/composables/business/billrate/useBillRateModel';
import { useCurrencyStore } from '@/store/currency';
import useAddEditBillRateTable from '@/composables/business/billrate/useAddEditBillRateTable';
import { useFilterTypeList } from '@/hooks/useFilterTypeList';
import { Plus, Minus } from "@element-plus/icons-vue";

// 弹框一些配置
const getBindValue = ref<Recordable>({
  width: 600,
  height: 0
})

//声明事件
const emit = defineEmits(['saveBillRate']);

//弹框属性
const { dialog, onClose, onShow } = useDialog()

// 初始化公用数据
const store = useCurrencyStore()
const { addEditBillRateTable } = useAddEditBillRateTable()
// 表格数据
const [registerTable, methodsTable] = useTable(addEditBillRateTable)

// 基础数据处理
const { show, confirm, hanleOnClose, hanleAddColumns, disabledDate, pickerOptions, addbillrateFormRef, ruleFormBillMainTableRef, currencyList, state } = useAddEditBillRate(dialog, onClose, onShow, methodsTable, emit,addEditBillRateTable,store)
const { ruleBillRateForm } = useBillRateModel(addEditBillRateTable)
//处理币种类型数据 
const { newSourceLists, filterNewsList } = useFilterTypeList(addEditBillRateTable, 'currencyCode', currencyList, 'value')
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>
  
<style lang="scss" scoped>
.el-addbillrate-form {
  .item-search {
    width: 100%;
  }
}

.form-bill-main-table {
  .add-columns {
    width: 100%;
    display: block;
  }
}
// 表格表单校验隐藏
// .form-bill-main-table {
//   .el-form-item {
//     margin-bottom: 0;
//   }
// }
</style>