<template>
  <div class="app-container">
    <!-- 组合按钮 -->
    <el-button-group class="m-b-20 m-r-20">
      <el-button type="danger" icon="el-icon-delete" @click="deleteMessage(countSelIdArr($refs.myTable.selection))">删除
      </el-button>
    </el-button-group>
    <!-- 用户select选项 -->
    <el-button-group class="m-b-20">
      <SelectionShopId v-model="form.shop_id" :allSel="true" />
    </el-button-group>

    <!-- 公告列表 -->
    <el-table class="w-100" ref="myTable"
      :data="messageListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
      <!-- 多选框 -->
      <el-table-column type="selection" width="55" />

      <!-- 公告标题 -->
      <el-table-column prop="tit" label="标题" min-width="120" show-overflow-tooltip />

      <!-- 公告内容 -->
      <el-table-column prop="message" label="内容" min-width="200" show-overflow-tooltip />

      <!-- 添加人 -->
      <el-table-column prop="admin_uname" label="发布人" min-width="100" />

      <!-- 接收人 -->
      <el-table-column prop="by_admin_uname" label="接收人" min-width="100" />

      <!-- 添加时间 -->
      <el-table-column prop="add_time" label="发布时间" min-width="150">
        <template slot-scope="scope">
          {{ parseTime(scope.row.add_time) }}
        </template>
      </el-table-column>

      <!-- 结束时间 -->
      <el-table-column prop="end_time" label="截止时间" min-width="150">
        <template slot-scope="scope">
          {{ parseTime(scope.row.end_time) }}
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" width="220" fixed="right">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="danger" icon="el-icon-delete" @click="deleteMessage([scope.row.id])">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
      :total="messageListArr.length">
    </el-pagination>

  </div>
</template>

<script>
import { parseTime, countSelIdArr } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'
import { getAllMessageList, delMessage } from '@/utils/api/table'

export default {
  name: 'Admin',
  data () {
    return {
      pageSize: 8, // 每页显示记录条数
      currentPage: 1, // 当前页
      form: {
        shop_id: ''
      },
      messageList: []
    }
  },
  components: {
    SelectionShopId
  },
  computed: {
    // 获取公告列表
    messageListArr () {
      if (this.form.shop_id !== '') {
        return this.messageList.filter((item) => item.shop_id === this.form.shop_id)
      } else {
        return this.messageList
      }
    }
  },
  created () {
    this.getAllMessageList()
  },
  methods: {
    countSelIdArr,
    parseTime,
    // 获取公告列表
    async getAllMessageList () {
      const res = await getAllMessageList()
      if (res.data.status === 1) {
        this.messageList = res.data.messageList
      } else {
        this.$message.error(res.msg)
      }
    },
    // 删除指定公告
    deleteMessage (idArr) {
      if (!idArr || idArr.length === 0) {
        this.$message.error('未勾选记录')
      } else {
        this.$confirm('请谨慎操作，确认删除这些公告？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delMessage(idArr).then(res => {
            if (res.data.status === 1) {
              this.$message.success(res.data.msg)
              this.getAllMessageList() // 刷新列表
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }).catch(() => {
          this.$message.info('取消操作')
        })
      }
    }

  }
}

</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";
</style>
