<!-- 
  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.billName"
          placeholder="请输入账单名称"
        />
      </el-form-item>
      <el-form-item class="item-search">
        <el-date-picker
          v-model="listParm.billBeginDate"
          type="date"
          format="YYYY/MM/DD"
          placeholder="起始时间"
        />
      </el-form-item>
      <el-form-item class="item-search">
        <el-date-picker
          v-model="listParm.billEndDate"
          type="date"
          format="YYYY/MM/DD"
          placeholder="结束时间"
        />
      </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:BillMain:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格列表 -->
    <BaseTable
      :height="tableHeight"
      @register="registerTable"
    >
      <!-- 账单日期 -->
      <template #billDate="scope">
        {{ timeFiltering(scope.row.billDate) }}
      </template>
      <!-- 汇率版本 -->
      <template #rateVersionId="scope">
        <div
          v-if="scope.$index >= 0"
          class="inline-flex"
        >
          <span>{{ scope.row.rateVersionName }}</span>
          <el-popover
            placement="bottom"
            title="汇率列表"
            :width="480"
            trigger="hover"
          >
            <template #default>
              <!-- 汇率版本 -->
              <el-table
                :data="viewBillRateTable.dataSource"
                border
              >
                <template
                  v-for="item in viewBillRateTable.columns"
                  :key="item.id"
                >
                  <el-table-column
                    :prop="item.prop"
                    :label="item.label"
                  />
                </template>
              </el-table>
            </template>
            <template #reference>
              <el-button
                type="primary"
                :icon="QuestionFilled"
                link
                @mouseenter="hanleSetRateVersionId(scope.row.rateVersionId)"
              />
            </template>
          </el-popover>
          <!-- <el-button
            ref="buttonRoteVersionRef"
            v-click-outside="onClickRateList"
            type="primary"
            :icon="QuestionFilled"
            link
            @click="hanleSetRateVersionId(scope.row.rateVersionId)"
          /> -->
        </div>
      </template>
      <template #action="scope">
        <!-- 下拉框操作栏 -->
        <el-select
          v-model="scope.row.types"
          class="type-actions"
          popper-class="type-actions"
        >
          <el-option
            v-for="item in actionOptions"
            :key="item.value"
            v-permission="item.permissions"
            :label="item.label"
            :value="item.value"
            @click="hanleChangeAction(scope.row)"
          >
            <el-button
              :type="item.type"
              :color="item.color"
              :icon="item.icon"
              class="block"
            >
              {{ item.label }}
            </el-button>
          </el-option>
        </el-select>
        <!-- <el-button
          v-permission="['sys:BillMain:recount']"
          type="success"
          plain
          @click="hanleActionColumns(scope.row)"
        >
          重算
        </el-button>
        <el-button
          v-permission="['sys:BillMain:edit']"
          type="success"
          @click="hanleActionColumns(scope.row, EditType.EDIT)"
        >
          编辑
        </el-button>
        <el-button
          v-permission="['sys:BillMain:delete']"
          type="danger"
          @click="hanleActionColumns(scope.row, EditType.DELETE)"
        >
          删除
        </el-button>
        <el-button
          v-permission="['sys:BillMain:detail']"
          type="primary"
          plain
          @click="hanleActionColumns(scope.row, EditType.VIEW)"
        >
          明细
        </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>
  <!-- 新增编辑弹窗 -->
  <AddEditBillMain
    ref="addEditBillMainRef"
    :company-entity-list="billRateMain.companyEntityList"
    :channel-provider-list="billRateMain.channelProviderList"
    :billrate-list="billRateMain.listBillRate"
    @save-bill-main="hanleSaveBillMain"
  />
  <!-- 重算弹窗 -->
  <AddBillMainRecount
    ref="addBillMainRecountRef"
    :billrate-list="billRateMain.listBillRate"
    @save-recount="hanleSaveRecount"
  />
  <!-- 查看明细账单 -->
  <ViewBillDetail ref="viewBillDetailRef" />
  <!-- 查看账单汇总 -->
  <ViewBillSummary
    ref="viewBillMainRef"
    :channel-provider-list="billRateMain.channelProviderList"
    :month-list="billRateMain.monthList"
    :company-entity-list="billRateMain.companyEntityList"
  />
</template>

<script lang="ts" setup name="billmain">
import { onBeforeMount } from "vue";
import { Search, Plus, RefreshRight, QuestionFilled } from "@element-plus/icons-vue";
import { BaseTable, useTable } from "@/components/Table";
import useBillMainRate from "@/composables/business/billmain/useBillMainRate";
import useBillMainTable from "@/composables/business/billmain/useBillMainTable";
import AddEditBillMain from "./AddEditBillMain.vue";
import AddBillMainRecount from "./AddBillMainRecount.vue";
import ViewBillDetail from "./ViewBillDetail.vue";
import ViewBillSummary from './ViewBillSummary.vue';
import { useCurrencyStore } from '@/store/currency';
import timeFiltering from "@/utils/timeFiltering";
import useResizeHeight from "@/hooks/useResizeHeight";
import { useRateVersionList } from "@/composables/business/billmain/useRateversionLis";
// import { userStore } from '@/store/user';

// 基础数据
const storeCurrency = useCurrencyStore()//币种信息
// const storeUser = userStore()//用户信息
const { billMainTableList, viewBillRateTable } = useBillMainTable();

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

// 新增编辑
const {
  addBtn,
  searchBtn,
  resetBtn,
  sizeChange,
  currentChange,
  hanleActionColumns,
  hanleSaveBillMain,
  hanleSaveRecount,
  hanleChangeAction,
  hanleSetRateVersionId,
  listParm,
  addEditBillMainRef,
  addBillMainRecountRef,
  viewBillDetailRef,
  viewBillMainRef,
  billRateMain,
  actionOptions, 
  getRateVersionId
} = useBillMainRate(billMainTableList);

onBeforeMount(() => {
  storeCurrency.addCurrencyList() 
})

// 汇率版本列表
useRateVersionList(viewBillRateTable, getRateVersionId)

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

</script>

<style lang="scss" scoped>
.type-actions {
  width: 110px;
  margin-right: 10px;

  .el-select-dropdown__wrap {
    .el-select-dropdown__item {
      padding: 0;
    }
  }

  .block {
    width: 100%;
    color: #fff;
  }
}
</style>