<template>
  <div class="app-container">
    <addModal ref="addModel" @success="modalSuccess" />
    <div style="margin-bottom: 20px;">
      <el-input v-model="form.sceneName" placeholder="场景名称" style="width: 256px;" class="filter-item" />
      <el-button class="filter-item" type="primary" style="margin-left: 20px;" icon="el-icon-search" @click="query">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 20px;" type="primary" icon="el-icon-plus" @click="handleCreate">
        添加
      </el-button>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ ((pagination.current - 1) * pagination.pageSize) + (scope.$index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="场景名称">
        <template slot-scope="scope">
          {{ scope.row.sceneName }}
        </template>
      </el-table-column>
      <el-table-column label="场景参数">
        <template slot-scope="scope">
          {{ scope.row.trade }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pagination.total"
      :page.sync="pagination.current"
      :limit.sync="pagination.pageSize"
      :page-sizes="pagination.pageSizeOptions"
      :layout="pagination.layout"
      @pagination="handleSizeChange"
    />
  </div>
</template>

<script>
import AddModal from './modal/AddModal.vue'
import tableMixins from '@/mixins/tableMixins'
import { getList, deleteById } from '@/api/scene'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination, AddModal },
  mixins: [tableMixins],
  data() {
    return {
      form: {}
    }
  },
  methods: {
    initData() {
      this.getTableList()
    },
    // 获取表格数据
    async getTableList() {
      this.tableLoading = true
      try {
        const result = await getList(this.getFilterParams())
        this.setDataList(result.data)
      } catch (e) {
        console.log(e)
      } finally {
        this.tableLoading = false
      }
    },
    // 获取筛选信息
    query() {
      this.clearPageParams()
      this.getTableList()
    },
    // 增加筛选条件
    transformFilterForm() {
      return {
        sceneName: this.form.sceneName || null
      }
    },
    modalSuccess(isEdit) {
      if (!isEdit) {
        this.clearPageParams()
      }
      this.getTableList()
    },
    handleCreate() {
      this.$refs.addModel.open()
    },
    handleUpdate(row) {
      this.$refs.addModel.open(Object.assign({}, row))
    },
    handleDelete(row, index) {
      const that = this
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose: false,
        type: 'warning',
        beforeClose: async(action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            instance.confirmButtonText = '提交中...'
            try {
              await deleteById(row.id)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              that.getTableList()
            } catch (e) {
              // this.$message({
              //   type: 'error',
              //   message: '删除失败!'
              // })
            } finally {
              done()
              setTimeout(() => {
                instance.confirmButtonLoading = false
                instance.cancelButtonLoading = false
              }, 300)
            }
          } else {
            done()
          }
        }
      }).then(() => {}).catch(() => {})
    }
  }
}
</script>
