<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-form inline size="mini">
      <el-form-item label="设备：">
        <el-select v-model="form.deviceId" filterable placeholder="请选择设备" clearable>
          <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="文章状态：">
        <el-select v-model="form.status" placeholder="请选择文章状态" clearable>
          <el-option v-for="item in disabledOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
        <el-button type="primary" icon="el-icon-plus" plain @click="getDetail()"
          v-hasPermi="['device:article:add']">新增</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="getDelete(deleteList)"
          :disabled="deleteList.length > 0 ? false : true" v-hasPermi="['device:article:delete']">
          批量删除
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="文章标题" prop="title" align="center" />
      <el-table-column label="设备" prop="linkDevice" align="center" :formatter="devFormatter"
        show-overflow-tooltip />
      <el-table-column label="文章状态" prop="status" align="center" :formatter="statusFormatter" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['device:article:edit']">
            编辑
          </el-button>
          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['device:article:delete']">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { list, remove } from '@/api/device/article'
import { devMixin, disabledMixin } from '@/mixin/index'
export default {
  name: 'Article',
  mixins: [devMixin, disabledMixin],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10
      },
      // 列表
      tableData: [],
      total: 0,
      // 批量删除
      deleteList: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      this.loading = true
      list(this.form).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.loading = false
        }
      })
    },
    // 搜索
    getSearch() {
      this.form.pageNum = 1
      this.getList()
    },
    // 重置
    getRefresh() {
      this.form = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    // 新增 / 编辑
    getDetail(id) {
      this.$router.push({
        path: `/device/article/detail`,
        query: {
          id: id
        }
      })
    },
    // 多选
    handleSelectionChange(val) {
      this.deleteList = val
    },
    // 删除
    getDelete(row) {
      let title = ''
      let ids = ''
      if (row.length > 0) {
        title = '批量删除'
        row.map(i => {
          ids += i.id + ','
        })
        if (ids.length > 0) {
          ids = ids.substr(0, ids.length - 1)
        }
      } else {
        title = `删除${row.title}`
        ids = row.id
      }
      this.$confirm(`是否${title}?`, '提示', {
        type: 'warning'
      }).then(() => {
        remove({
          ids: ids
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.getList()
          }
        })
      }).catch(() => { })
    },

    // 字典翻译
    devFormatter(row) {
      return row.linkDevice ? row.linkDevice.split(',').map(i => this.selectDictLabel(this.devOptions, i)).join(',') : ''
    },
    statusFormatter(row) {
      return this.selectDictLabel(this.disabledOptions, row.status)
    }
  }
}
</script>