<template>
  <eagle-scheme :list="schemeList" :option="{ auto: false }">
    <!-- <div slot="action-bar" slot-scope="{ handleNew }">
      <el-button type="warn" @click="handleNew">新增</el-button>
    </div> -->
    <el-button slot="action-button" type="success" plain size="small">启用</el-button>
    <el-button slot="action-button" type="danger" plain size="small">禁用</el-button>
    <el-table-column type="selection" width="50" align="center"></el-table-column>
    <template #table-status="{ setDialog }">
      <el-table-column prop="status" label="激活状态" min-width="120">
        <el-tag @click="setDialog({ title: 'Status模式', type: 'dialog-status' })" slot-scope="{ row: { status } }" :type="status === 'active' ? 'success' : 'danger'">{{ status === 'active' ? '激活' : '禁用' }}</el-tag>
      </el-table-column>
    </template>
    <template #search-status="{ model }">
      <eagle-select v-model="model.status" :dataSource="dataSource"></eagle-select>
    </template>
    <template #form-group-setting >
      <div style="padding: 10px 0px;margin-bottom: 30px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
        <span>哎哟 - 设置 - 不错哦</span>
        <el-button size="mini" type="primary">这是一个按钮</el-button>
      </div>
    </template>
    <template #form-item-status="{ model }">
      <el-input-number v-model="model.status"></el-input-number>
    </template>
    <template #view-item-code="{ model }">
      <el-input disabled :value="model.code"></el-input>
    </template>
    <!-- <template #dialog-view="{ row }">
      <div>这是一个自定义弹出框内容</div>
      <div>{{ row }}</div>
    </template> -->
    <template #dialog-status>
      <div>这是Status的内容</div>
    </template>
    <!-- 自定义按钮组 -->
    <!-- <el-table-column slot="table-operation" prop="$operation" label="操作" min-width="140">
      <el-tag>自定义按钮组</el-tag>
    </el-table-column> -->
    <!-- 在操作按钮组前加上新的按钮 -->
    <!-- <template slot="table-operation-btn">
      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
    </template> -->
    <!-- 在操作按钮组后追加新的按钮 -->
    <!-- <template slot="table-operation-btn-append">
      <el-button class="eagle-scheme__table-btn" type="text" title="启用">启用</el-button>
      <el-button class="eagle-scheme__table-btn" type="text" title="禁用">禁用</el-button>
    </template> -->
  </eagle-scheme>
</template>

<script>
export default {
  data() {
    return {
      schemeList: [
        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }],
          exclude: 'search', group: { label: '设置', key: 'setting', tip: { content: '哇哦', placement: 'left' } }, tip: '编码为数字' },
        { type: 'el-input', key: 'type', label: '类型', group: { label: '设置', key: 'setting', icon: 'edit' }, formScheme: { tip: '类型随便填' } },
        { type: 'el-input-number', key: 'sort', label: '排序', include: ['form', 'table'], sortable: true },
        { type: 'el-input', key: 'status', label: '状态', group: { label: '信息', key: 'info', icon: 'info' }, formScheme: { label: '状态码' } },
      ],
      dataSource: [
        { label: '选项A', value: 'A' },
        { label: '选项B', value: 'B' },
      ],
    }
  },
}
</script>