<!-- 
    TODO 客户业务 / 产品费率
 -->
<template>
  <el-main class="product-rate-ratio-list">
    <el-form
      class="el-search-form"
      :model="listParm"
      label-width="80px"
      :inline="true"
    >
      <el-form-item class="item-search">
        <BaseSelect
          v-model:modelValue="listParm.productId"
          :options="productRateRatioList.productList"
          placeholder="产品名称"
          clearable
        />
      </el-form-item>
      <el-form-item class="item-search">
        <BaseSelect
          v-model:modelValue="listParm.feeItemId"
          :options="productRateRatioList.feeItemList"
          placeholder="费用类型"
          clearable
        />
      </el-form-item>
      <el-form-item class="item-search">
        <el-select
          v-model="listParm.cycleType"
          clearable
          placeholder="周期"
        >
          <el-option
            v-for="item in productRateRatioList.cycleTypeList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="item-search">
        <el-select
          v-model="listParm.rateRatioState"
          clearable
          placeholder="状态"
        >
          <el-option
            v-for="item in productRateRatioList.stateList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="productRateRatioList.loading"
          :icon="Search"
          @click="searchBtn"
        >
          搜索
        </el-button>
        <el-button
          :loading="productRateRatioList.loading"
          class="reset-btn"
          :icon="RefreshRight"
          @click="resetBtn"
        >
          重置
        </el-button>
        <el-button
          v-permission="['sys:productRateRatio:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table
      :height="tableHeight"
      :data="productRateRatioList.mainList"
      border
      stripe
      row-key="id"
      :expand-row-keys="productRateRatioList.expandedRowKeys"
      class="no-expand-icon"
    >
      <el-table-column
        type="expand"
        width="1"
      >
        <!-- 折叠内容 -->
        <template #default="{ row }">
          <el-table
            v-loading="row.loading"
            :data="row.providerFeeSetList"
            row-key="id"
          >
            <el-table-column :width="42" />
            <el-table-column
              prop="beginDate"
              label="起始时间"
            >
              <template #default="scope">
                {{ timeFiltering(scope.row.beginDate) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="endDate"
              label="结束时间"
            >
              <template #default="scope">
                {{ timeFiltering(scope.row.endDate) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="cycleType"
              label="周期"
            >
              <template #default="scope">
                <div v-if="scope.$index >= 0">
                  {{ dealcycleType(scope.row.cycleType) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="rateRatio"
              label="比例（%）"
            />
            <el-table-column
              prop="rateRatioUpdateStateName"
              label="状态"
            >
              <template #default="scope">
                <el-tag :type="scope.row.rateRatioUpdateState === 0 ? 'success' : 'info'">
                  {{ scope.row.rateRatioUpdateStateName }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="updateDate"
              label="更新时间"
            />
            <!-- v-permission="['sys:customerfeeset:edit']" -->
            <!-- <el-table-column
              label="操作"
              width="150"
            >
              <template #default="scope">
                <el-button
                  type="success"
                  :icon="View"
                  @click="hanleRateRatioGet(scope.row)"
                >
                  获取
                </el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        :width="42"
        :index="999"
      >
        <template #default="scope">
          <div v-if="scope.$index >= 0">
            <div
              v-if="scope.row.id"
              class="cursor define-expand-warp"
              @click="hanleExpandRow(scope.row)"
            >
              <el-button
                v-if="scope.row.loading"
                type="primary"
                link
                :icon="Loading"
              />
              <el-icon
                v-else
                class="define-expand-default"
                :class="{ 'expand-active': productRateRatioList.expandActive === scope.row.id }"
              >
                <ArrowRight />
              </el-icon>
            </div>
            <div v-else />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="productName"
        label="产品名称"
        :show-overflow-tooltip="true"
        :min-width="160"
      />
      <el-table-column
        prop="feeItemName"
        label="费用类型"
        :show-overflow-tooltip="true"
        :width="160"
      />
      <el-table-column
        prop="cycleType"
        label="周期"
        :width="120"
      >
        <template #default="scope">
          <div v-if="scope.$index >= 0">
            {{ dealcycleType(scope.row.cycleType) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="productNameList"
        label="共享产品名称（客户）"
        :show-overflow-tooltip="true"
        :min-width="180"
      />
      <el-table-column
        prop="providerNameList"
        label="共享服务商（成本）"
        :show-overflow-tooltip="true"
        :min-width="180"
      />
      <el-table-column
        prop="rateRatioStateName"
        label="状态"
        :width="80"
      >
        <template #default="scope">
          <el-tag :type="scope.row.rateRatioState === 0 ? 'success' : 'info'">
            {{ scope.row.rateRatioStateName }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="endDate"
        label="创建时间"
      >
        <template #default="scope">
          {{ timeFiltering(scope.row.endDate) }}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="createTime"
        label="创建时间"
        :width="165"
      />
      <el-table-column
        label="操作"
        fixed="right"
        :width="135"
      >
        <template #default="scope">
          <DropDownButtons
            :model-value="scope.row"
            :action-options="actionOptions"
            @click-change="hanleChangeAction"
          >
            <template #islabel="{ item }">
              {{ scope.row.rateRatioState === 0 ? item.islabel : item.label }}
            </template>
          </DropDownButtons>
        </template>
      </el-table-column>
    </el-table>
    <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"
    />
  </el-main>
  <!-- 新增编辑产品费率 -->
  <AddEditProductRateRatio
    ref="addEditProductRateRatioRef"
    :product-list="productList"
    :fee-item-lists="feeItemLists"
    :cycle-typecist="cycleTypecist"
    :all-providers-list="allProvidersList"
    @save-product-rate-ratio="hanleSaveProductRateRatio"
  />
</template>
<script lang="ts" setup name="productRateRatio">
import {
    Search,
    Plus,
    View,
    RefreshRight,
    Loading
} from "@element-plus/icons-vue";
import { useProductRateRatio } from '@/composables/productrateratio/useProductRateRatio';
import useResizeHeight from "@/hooks/useResizeHeight";
import timeFiltering from "@/utils/timeFiltering";
import AddEditProductRateRatio from './AddEditProductRateRatio.vue';
import { BaseFeesetAction } from "@/type/BaseFeesetAction";
import BaseSelect from '@/components/QuerySelect/BaseSelect.vue';
import DropDownButtons from "@/components/DropDownButtons/index.vue";

const {
    listParm,
    productRateRatioList,
    actionOptions,
    searchBtn,
    resetBtn,
    addBtn,
    sizeChange,
    currentChange,
    hanleExpandRow,
    hanleChangeAction,
    hanleSaveProductRateRatio,
    dealcycleType,
    hanleRateRatioGet,
    addEditProductRateRatioRef,
    productList,
    feeItemLists,
    cycleTypecist,
    allProvidersList
} = useProductRateRatio()

// 表格自适应屏幕高度 
const { tableHeight } = useResizeHeight()
</script>
<style lang="scss" scoped>
.product-rate-ratio-list {}
.define-expand-warp {
    width: 100%;
    height: 100%;

    .define-expand-default {
        transition: transform 500ms;

        &.expand-active {
            transform: rotate(90deg);
        }
    }
}

.no-expand-icon :deep(.el-table__expand-icon) {
    display: none;
}
</style>