<template>
  <div class="koi-flex">
    <KoiCard>
      <!-- 表格头部按钮 -->
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button icon="Plus" plain type="primary">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="delete" plain type="danger" :disabled="multiple">批量删除</el-button>
        </el-col>
        <KoiToolbar v-model:showSearch="showSearch" @refreshTable="getList"></KoiToolbar>
      </el-row>

      <div class="h-20px"></div>
      <el-table
        v-loading="loading"
        :data="tableList"
        :header-cell-style="{ background: '#f1f1f1' }"
        border
        empty-text="暂时没有数据哟"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" label="编号" prop="recordId" show-overflow-tooltip width="100px" />
        <el-table-column align="center" label="品牌代码" prop="brandCode" show-overflow-tooltip width="120px" />
        <el-table-column align="center" label="品牌名称" prop="brand" show-overflow-tooltip />
        <el-table-column align="center" label="品牌简称" prop="shortName" show-overflow-tooltip width="120px" />
        <el-table-column align="center" label="描述" prop="description" show-overflow-tooltip />
<!--        <el-table-column align="center" label="容值" prop="capacitance" show-overflow-tooltip width="100px" />-->
<!--        <el-table-column align="center" label="精度" prop="tolerance" show-overflow-tooltip width="100px" />-->
<!--        <el-table-column align="center" label="额定电压" prop="voltage" show-overflow-tooltip width="100px" />-->
<!--        <el-table-column align="center" label="温度系数" prop="tempCoef" show-overflow-tooltip width="120px" />-->
        <el-table-column align="center" label="原始参数" prop="argument" show-overflow-tooltip />
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-tooltip content="删除" placement="top">
              <el-button circle icon="Delete" plain type="danger"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="h-20px"></div>
      <!-- 分页 -->
      <Pagination :getList="getList" :queryParams="queryParams" :total="total"/>

    </KoiCard>
  </div>
</template>

<script setup name="brandList">
import {reactive, ref, toRefs} from "vue";

const tableList = ref([
  {
    recordId: '001',
    brandCode: 'KEM001',
    brand: 'KEMET',
    shortName: 'KEM',
    description: 'KEMET电子元件制造商',
    capacitance: '12pF',
    tolerance: '±5%',
    voltage: '50V',
    tempCoef: 'C0G',
    argument: 'C0201C0G120K500NTA'
  },
  {
    recordId: '002',
    brandCode: 'MUR001',
    brand: 'Murata',
    shortName: 'MUR',
    description: '村田制作所',
    capacitance: '0.1µF',
    tolerance: '±20%',
    voltage: '50V',
    tempCoef: 'X7R',
    argument: 'GRM155X7R104M50AC'
  },
  {
    recordId: '003',
    brandCode: 'SAM001',
    brand: 'Samsung',
    shortName: 'SAM',
    description: '三星电子元件',
    capacitance: '1µF',
    tolerance: '±10%',
    voltage: '25V',
    tempCoef: 'X5R',
    argument: 'CL05A105KA5NNNC'
  }
])
const data = reactive({
  loading: false,
  total: 3,
  queryParams: {

  }
})
const { loading, total, queryParams } = toRefs(data)

const getList = () => {

}

const resetSearch = () => {

}

const ids = ref([]); // 选择数组
const multiple = ref(true); // 非多个禁用
/** 是否多选 */
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.recordId);
  multiple.value = !selection.length; // 多选
};
</script>

<style scoped lang="scss">

</style>
