<template>
    <el-main>
      <!-- 搜索栏 -->
      <el-form
        class="el-search-form"
        :model="listParm"
        label-width="80px"
        :inline="true"
        size="mini"
      >
        <el-form-item class="item-search">
          <el-input
            v-model="listParm.feeSetName"
            placeholder="请输入费用名称"
          />     
        </el-form-item>
        <el-form-item>
          <el-button
            :icon="Search"
            @click="searchBtn"
          >
            搜索
          </el-button>
          <el-button
            style="color: #FF7670;"
            :icon="Close"
            @click="resetBtn"
          >
            重置
          </el-button>
          <el-button
          v-permission="['sys:customerfeeset:add']"
          type="primary"
          :icon="Plus"
          @click="addBtn"
        >
          新增
        </el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :height="tableHeight"
        :data="customerFeeSetList.list"
        stripe
      >     
        <el-table-column
          prop="feeSetName"
          label="名称"
        />
        <el-table-column
          prop="groupName"
          label="分组"
        />
        <el-table-column
          prop="orgName"
          label="机构名称"
        />    
        <el-table-column
          prop="customerName"
          label="客户"
        /> 

        <el-table-column
          prop="feeSetTypeName"
          label="类型名称"
        /> 

        <el-table-column
          prop="beginDate"
          label="生效起始时间"
        /> 
        
        <el-table-column
          prop="endDate"
          label="生效结束时间"
        /> 

        <el-table-column
          prop="remark"
          label="备注"
        /> 
        

        <el-table-column
          prop="createUserName"
          label="创建人"
        /> 
        <el-table-column
          prop="createTime"
          label="创建时间"
        /> 
        <el-table-column
        label="操作"
        width="350"
      >
        <template #default="scope">
          <el-button
            v-permission="['sys:customerfeeset:edit']"
            type="primary"
            size="mini"
            :icon="Edit"
            @click="editBtn(scope.row)"
          >
            编辑
          </el-button>       
          <el-button
            v-permission="['sys:customerfeeset:delete']"
            type="danger"
            size="mini"
            :icon="Delete"
            @click="deleteBtn(scope.row.id)"
          >
            删除
          </el-button>
        </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>
 <!-- 新增、编辑弹框 
    :productSelectList="productSelectList.list"
    :groupSelectList="groupSelectList.list"
    :orgSelectList="orgSelectList.list"
    :customerSelectList="customerSelectList.list"
    :feeSetTypeSelectList="feeSetTypeSelectList.list"
-->
 <AddandEditCustomerFeeSet
    ref="adCustomerFeeSetRef"
    :productSelectList="productSelectList.list"
    :groupSelectList="groupSelectList.list"
    :customerSelectList="customerSelectList.list"
    :feeSetTypeSelectList="feeSetTypeSelectList.list"
    :orgSelectList="orgSelectList.list"
    @save="save"
  />

  </template>
   <script setup lang="ts">
   import { ref, onMounted, nextTick } from 'vue';
   import { Search, Edit, Plus, Setting, Close, Delete } from '@element-plus/icons-vue';
   import userCustomerFeeSetTable from  '@/composables/customerfeeset/useCustomerFeeSetTable';
   import useCustomerFeeSet from '@/composables/customerfeeset/useCustomerFeeSet';
   import AddandEditCustomerFeeSet from './AddandEditCustomerFeeSet.vue';
   
   //表格的高度
   const tableHeight = ref(0);
   //表格列表
   const { listParm, customerFeeSetList, getCustomerFeeSetList, sizeChange, currentChange, searchBtn, resetBtn,productSelectList,groupSelectList,orgSelectList,customerSelectList,feeSetTypeSelectList } = userCustomerFeeSetTable()
   //新增、编辑
    const { addBtn, editBtn, deleteBtn, adCustomerFeeSetRef,save} = useCustomerFeeSet(getCustomerFeeSetList)
   onMounted(() => {
       nextTick(() => {
           tableHeight.value = window.innerHeight - 223
       })
   })
   </script>
   
   <style lang="scss">
   .el-search-form {
     width: 100%;
     // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
     .item-search { 
       margin-right: 8px;
     }   
   }
   </style>