<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 条件区 -->
      <search @search="reload"/>
      <ele-pro-table ref="table" :columns="columns" :datasource="datasource">
        <template v-slot:toolbar>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="handleAddOrEdit('add','')">
            新建
          </el-button>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">

          <el-link
            type="primary"
            :underline="false"
            icon="el-icon-edit"
            @click="handleAddOrEdit('update',row)">
            编辑
          </el-link>
          <el-popconfirm
            class="ele-action"
            title="确定要删除此数据吗？"
            @confirm="deleteCategory(row)">
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">删除</el-link>
            </template>
          </el-popconfirm>
        </template>
        <template v-slot:status="{row}">
          <el-tag v-if="row.status" type="success">{{ '启用' }}</el-tag>
          <el-tag v-else type="danger">{{ '禁用' }}</el-tag>

        </template>
      </ele-pro-table>
    </el-card>
    <!--新增、修改-->
    <add-or-edit-dialog v-if="addOrEditDialogFlag" :addOrEditDialogFlag.sync="addOrEditDialogFlag"
                        ref="addOrEditDialogRef" @done="reload"></add-or-edit-dialog>
  </div>
</template>
<script>

import search from './index-search.vue';
import {notifyTemplateDeleteAPI, notifyTemplatePageAPI} from "@/api/notifyManage";
import addOrEditDialog from "@/views/notifyManage/templateManage/components/addOrEditDialog.vue";

export default {
  components: {addOrEditDialog, search},
  data() {
    return {
      addOrEditDialogFlag: false,
      columns: [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'code',
          label: '模板编码',
          minWidth: '120',
          align: "center",
        },
        {
          prop: 'name',
          label: '模板名称',
          minWidth: '120',
          align: "center",
        },


        {
          prop: 'content',
          label: '模板内容',
          minWidth: '150',
        },
        {
          prop: 'nickname',
          label: '默认发送人',
          width: '100',
          align: "center",
        },
        {
          prop: 'status',
          label: '状态',
          width: '80',
          align: "center",
          slot:"status",
          // formatter: (_row, _column, cellValue) => {
          //   return _row.status ? '启用' : '禁用';
          // }
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '120',
          align: "center",
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: '170',
          align: "center",
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 150,
          align: 'center',
          slot: 'action',
          fixed: 'right'
        }
      ],
      searchForm: {},
      tableData: [],
      size: 10,
      page: 1,
      total: 0
    };
  },
  methods: {
    //新增或修改模板
    handleAddOrEdit(type, row) {
      this.addOrEditDialogFlag = true
      this.$nextTick(() => {
        this.$refs.addOrEditDialogRef.init(type, row)
      })
    },
    reload(params) {
      console.log(params,'=======');
      this.$refs.table.reload({pageNum: 1, where: params});
    },
    async deleteCategory({id}) {
      await notifyTemplateDeleteAPI([id]);
      this.$refs.table.reload();
    },
    datasource({page, where, limit,...row}) {
      console.log(page, where, limit,row);
      return notifyTemplatePageAPI({
        ...where,
        pageNum: page,
        size: limit
      });
    },
    reset() {
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  background: #f0f3f3;
  min-height: calc(100vh - 84px);
}

.zw-page-table {
  background: #ffffff;
  padding-top: 20px;
}

.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

.table {
  width: 100%;
  margin-top: 10px;
}
</style>
