<template>
  <SysDialog class="bill-main" :title="dialog.title" v-bind="getBindValue" :visible="dialog.visible"
    @onClose="hanleOnClose" @onConfirm="confirm">
    <template #content>
      <!-- 新增/编辑-账单 -->
      <!-- 基础表单 -->
      <el-form ref="addbillMainFormRef" class="el-search-form" :model="state.form" :rules="ruleBillMainForm.rules"
        :inline="true">
        <el-row>
          <el-col :span="4" v-show="state.type === EditType.ADD">
            <el-form-item class="item-form" label="名称" prop="billName">
              <el-input v-model="state.form.billName" placeholder="请输入名称" :disabled="state.type === EditType.EDIT" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item class="inline-flex item-form" label="汇率版本" prop="rateVersionId">
              <el-select v-model="state.form.rateVersionId" style="flex: 1;" placeholder="请选择汇率版本"
                :disabled="state.type === EditType.EDIT || state.type === EditType.SUPPLEMENT" @change="changeRateVersion">
                <el-option v-for="item in billrateList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-button type="primary" ref="buttonRoteVersionRef" :icon="QuestionFilled"
                v-click-outside="onClickRateList" link />
            </el-form-item>
          </el-col>
          <el-col :span="4" v-show="state.type === EditType.EDIT">
            <el-form-item class="item-form" label="单号" prop="waybillNo">
              <el-input v-model="state.queryForm.waybillNo" placeholder="请输入单号" />
            </el-form-item>
          </el-col>
          <el-col :span="4" v-show="state.type === EditType.EDIT">
            <el-form-item class="item-form" label="渠道商">
              <el-select v-model="state.queryForm.channelId" :filterable="true" :filter-method="definFilter" clearable>
                <el-option v-for="item in channelProviderList_" :key="item.value" :label="item.label"
                  :value="item.value" />
              </el-select>
            </el-form-item> 
          </el-col>
          <el-col :span="4" v-show="state.type === EditType.EDIT" class="mr-10">
            <el-form-item class="item-form" label="公司主体">
              <el-input v-model="state.queryForm.enterpriseDominantNameImport" placeholder="公司主体" clearable />
              <!-- <el-select v-model="state.queryForm.enterpriseDominantNameImport" clearable>
                <el-option v-for="item in companyEntityList" :key="item.value" :label="item.label" :value="item.label" />
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="2" v-show="state.type === EditType.EDIT">
            <el-button type="success" :icon="Search" @click="hanleQuery" class="mr-10" :loading="state.queryDisabled"
              plain>
              查询
            </el-button>
          </el-col>
          <el-col :span="2" v-permission="['sys:BillMain:upload']">
            <el-form-item>
              <!-- v-permission="['sys:BillMain:upload']" -->
              <el-upload ref="uploadRef" :multiple="false" :limit="1" :auto-upload="false" :on-change="handleChange"
                accept=".xlsx" :on-exceed="handleExceed" :on-error="handleError" :disabled="state.uploadDisabled">
                <el-button type="primary" :icon="Upload" :loading="state.uploadDisabled" plain>
                  {{ uploadDisabled }}
                </el-button>
                <template #list />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" :icon="Download" @click="hanleExprot" :loading="state.exportDisabled">
              导出模板
            </el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 动态表格表单 -->
      <el-form ref="addbillMainTableFormRef" class="form-bill-main-table" :model="addEditBillMainTable">
        <BaseTable @register="registerTable" @current-change="handleCurrentChange">
          <template #channelName="scope">
            <div v-if="scope.$index >= 0">
              <!-- 判断是否为编辑状态显示 -->
              <div v-if="scope.row.stateEdit">
                <!-- 校验：:prop="`dataSource.${scope.$index}.channelName`" :rules="ruleBillMainForm.channelName" -->
                <el-form-item>
                  <el-input v-model="scope.row.channelName" />
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.channelName }}
              </div>
            </div>
          </template>
          <template #billDate="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-form-item>
                  <el-date-picker v-model="scope.row.billDate" type="date" placeholder="账单日期" format="YYYY/MM/DD" />
                </el-form-item>
              </div>
              <div v-else>
                {{ timeFiltering(scope.row.billDate) }}
              </div>
            </div>
          </template>
          <template #waybillNo="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-form-item>
                  <el-input v-model="scope.row.waybillNo" />
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.waybillNo }}
              </div>
            </div>
          </template>
          <template #billFee="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-form-item>
                  <el-input v-model="scope.row.billFee" v-clear-only-regex="/^\d*\.?\d{0,3}$/" />
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.billFee }}
              </div>
            </div>
          </template>
          <template #enterpriseDominantNameImport="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-form-item>
                  <el-input v-model="scope.row.enterpriseDominantNameImport" />
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.enterpriseDominantNameImport }}
              </div>
            </div>
          </template>
          <template #shareFlag="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-form-item>
                  <el-select v-model="scope.row.shareFlag">
                    <el-option v-for="item in state.equalSharingList" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.shareFlag ? '是' : '否' }}
              </div>
            </div>
          </template>
          <template #currencyCode="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-form-item>
                  <el-select v-model="scope.row.currencyCode">
                    <!-- item.label -->
                    <el-option v-for="item in currencyList" :key="item.value" :label="item.value" :value="item.value" />
                  </el-select>
                </el-form-item>
              </div>
              <div v-else>
                {{ scope.row.currencyCode }}
              </div>
            </div>
          </template>
          <!-- 表格头部插槽 -->
          <!-- <template #header>
            <el-button class="add-columns" type="primary" link @click="hanleAddColumns(EditType.ADD)">
              +
            </el-button>
          </template> -->
          <template #action="scope">
            <div v-if="scope.$index >= 0">
              <div v-if="scope.row.stateEdit">
                <el-button type="primary" link @click="hanleAddColumns(EditType.ADD, scope)">
                  保存
                </el-button>
                <el-button type="danger" link @click="hanleAddColumns(EditType.VIEW, scope)">
                  取消
                </el-button>
              </div>
              <div v-else>
                <el-button type="primary" link @click="hanleAddColumns(EditType.EDIT, scope)">
                  编辑
                </el-button>
                <el-popconfirm title="是否删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="hanleAddColumns(EditType.SUPPLEMENT, scope)">
                  <template #reference>
                    <el-button type="danger" link>
                      删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </template>
        </BaseTable>
        <!-- 分页 -->
        <el-pagination class="page-data" 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" />
      </el-form>
      <!-- 汇率版本 -->
      <el-popover ref="popoverVersionRef" :virtual-ref="buttonRoteVersionRef" width="480" trigger="click" title="汇率列表"
        virtual-triggering>
        <BaseTable @register="registerTableRateVersions" />
      </el-popover>
    </template>
  </SysDialog>
</template> 
<script lang="ts" setup>
import { ref } from 'vue';
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { useAddEditBillMain } from '@/composables/business/billmain/useAddEditBillMain';
import { Upload, Download, QuestionFilled, Search } from '@element-plus/icons-vue';
import { BaseTable, useTable } from '@/components/Table';
import useBillMainTable from '@/composables/business/billmain/useBillMainTable';
import useBillMainModel from '@/composables/business/billmain/useBillMainModel';
import { EditType } from '@/type/BaseEnum';
import { useCurrencyStore } from '@/store/currency';
import { ListIitem } from '@/api/base/BaseDataModel';
import { ClickOutside as vClickOutside } from 'element-plus'
import { useRateVersionList } from '@/composables/business/billmain/useRateversionLis';
import timeFiltering from '@/utils/timeFiltering';
import useDefinFilter from '@/hooks/useDefinFilter';

// 弹框一些配置
const getBindValue = ref<Recordable>({
  // top: "4vh",
  width: 1150,
  height: 545
})

//声明事件/数据
const emit = defineEmits(['saveBillMain']);
const store = useCurrencyStore()
const props = defineProps<{
  channelProviderList: ListIitem[]//渠道商列表
  companyEntityList: ListIitem[]//主体列表
  billrateList: ListIitem[]
}>()

// 自定义select搜索
const { definFilter, typeList: channelProviderList_ } = useDefinFilter(props,'companyEntityList')

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

// 表格
const { addEditBillMainTable, viewBillRateTable } = useBillMainTable()
const [registerTable, methodsTable] = useTable(addEditBillMainTable)

// 基础数据处理
const { ruleBillMainForm } = useBillMainModel(addEditBillMainTable)
// 汇率版本列表
const [registerTableRateVersions] = useTable(viewBillRateTable)
const { show, confirm, hanleOnClose, hanleAddColumns, handleError, handleChange, handleExceed, hanleExprot, changeRateVersion, sizeChange, currentChange, handleCurrentChange, hanleQuery, uploadRef, addbillMainFormRef, addbillMainTableFormRef, uploadDisabled, currencyList, getRateVersionId, listParm, state } = useAddEditBillMain(dialog, onClose, onShow, methodsTable, emit, addEditBillMainTable, store)
// 汇率版本列表
const { onClickRateList, popoverVersionRef, buttonRoteVersionRef } = useRateVersionList(viewBillRateTable, getRateVersionId)

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.bill-main {
  .item-form {
    width: 100%;
    :deep(.el-form-item__label) {
      padding-left: 5px;
    }
  }
}
.el-search-form :deep(.el-upload-list__item) {
  display: none;
}

.form-bill-main-table {
  .add-columns {
    width: 100%;
    display: block;
  }

  .page-data {
    padding-top: 12px;
  }
}

// 动态表格表单校验
.form-bill-main-table {
  .el-form-item {
    margin-bottom: 0;

    :deep(.el-input__inner) {
      height: 23px;
      line-height: 23px;
    }
  }
}
</style>