<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="filter-container">
      <el-input
        v-model="searchParams.search_name"
        placeholder="消息标题"
        class="filter-item filter-input"
      />
      <el-button
        type="primary"
        icon="el-icon-search"
        class="filter-item"
        @click="searchParams.page_index = 1;getMesaage()"
      >
        搜索
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-edit"
        class="filter-item"
        @click="addSyatem"
      >
        添加
      </el-button>
    </div>

    <el-table
      :data="table"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        type="index"
        :index="indexMethod"
        width="70"
        label="编号"
        align="center"
      />
      <el-table-column
        prop="title"
        align="center"
        label="标题"
        width="200"
      />
      <el-table-column
        prop="author"
        align="center"
        label="作者"
        width="150"
      >
        <template
          slot-scope="{ row }"
        >
          {{ row.author ? row.author : '官方' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="contents"
        align="center"
        label="内容"
      >
        <template
          slot-scope="{ row }"
        >
          <p style="text-align:left;margin: 0;">
            <span>{{ row.contents.length > 40 ? `${row.contents.slice(0,40)}` : row.contents }}</span>
            <el-button
              v-if="row.contents.length > 40"
              type="text"
              @click="handleSeeInfo(row)"
            >
              ...查看详情
            </el-button>
          </p>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        align="center"
        label="发布时间"
        width="200"
      />
      <el-table-column
        prop="is_top"
        align="center"
        label="是否置顶"
        width="150"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag :type="row.is_top === 1 ? 'success' : 'info'">{{ row.is_top === 1 ? '已置顶' : '未置顶' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="disabled"
        align="center"
        label="状态"
        width="150"
      >
        <template
          slot-scope="{ row }"
        >
          <el-tag :type="row.disabled === 0 ? 'success' : 'danger'">{{ row.disabled === 0 ? '正常' : '已禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="230"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          <el-button
            type="text"
            @click="handleEdit(row)"
          >
            修改
          </el-button>
          <el-button
            type="text"
            @click="handleDelete(row)"
          >
            删除
          </el-button>
          <el-button
            type="text"
            @click="handleSetTop(row)"
          >
            {{ row.is_top === 1 ? '取消置顶' : '置顶' }}
          </el-button>
          <el-button
            type="text"
            @click="handleDisable(row)"
          >
            {{ row.disabled === 0 ? '禁用' : '启用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="searchParams.page_size"
      :page="searchParams.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
    <el-dialog
      :title="visible.type === 'add' ? '添加系统公告' : '修改系统公告'"
      :visible.sync="visible.form"
      top="50px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="messageForm"
        :model="messageForm"
        :rules="messageRule"
        label-width="60px"
      >
        <el-form-item label="名称:" prop="title">
          <el-input
            v-model="messageForm.title"
            style="width:350px"
          />
        </el-form-item>
        <el-form-item label="作者:">
          <el-input
            v-model="messageForm.author"
            style="width:350px"
          />
        </el-form-item>
        <el-form-item label="内容:" prop="contents">
          <el-input
            v-model="messageForm.contents"
            type="textarea"
            placeholder="请输入内容"
            maxlength="300"
            rows="5"
            show-word-limit
          />
        </el-form-item>
        <el-form-item>
          <el-button
            size="small"
            @click="handleCancel"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleSubmit"
          >
            {{ visible.type === 'add' ? '添加' : '修改' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 公告详情 -->
    <el-drawer
      title="公告详情"
      :visible.sync="visible.info"
      direction="rtl"
    >
      <div class="app-container messageInfo">
        <p>{{ info.title }}</p>
        <p class="time">{{ info.created_at }}</p>
        <p class="contents">{{ info.contents }}</p>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// api
import {
  getMesaage,
  deleteMesaage,
  topMesaage,
  disableMesaage,
  editMesaage,
  addMesaage
} from '@/api/message/message'

export default {
  data() {
    return {
      searchParams: {
        search_name: '',
        page_size: 20,
        page_index: 1
      },
      table: [],
      tableTotal: 0,
      messageForm: {
        id: '',
        title: '',
        author: '',
        contents: ''
      },
      visible: {
        form: false,
        type: 'add',
        info: false
      },
      info: {
        title: '',
        contents: '',
        created_at: ''
      },
      messageRule: {
        title: [
          { required: true, message: '请输入公告名称', trigger: 'blur' }
        ],
        contents: [
          { required: true, message: '请输入公告内容', trigger: 'blur' }
        ]
      },
      loadingFull: false
    }
  },
  created() {
    this.getMesaage()
  },
  methods: {
    // 获取消息公告
    async getMesaage() {
      this.loadingFull = true
      try {
        const { page_size, page_index, search_name } = this.searchParams
        const res = await getMesaage({
          page_size,
          page_index,
          search_name
        })
        const { message, code } = res
        if (code === 200) {
          const { data } = res
          const { list, total } = data
          this.table = list
          this.tableTotal = total
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`删除社区文章失败${e}`)
      }
      this.loadingFull = false
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.searchParams.page_size = limit
      this.searchParams.page_index = page
      this.getMesaage()
    },
    // 删除公告
    handleDelete(row) {
      const { id } = row
      this.$confirm('确认删除这条公告吗?', '删除公告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteMesaage(id)
      })
    },
    // 删除
    async deleteMesaage(id) {
      const res = await deleteMesaage({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getMesaage()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`删除消息公告失败${e}`)
      }
    },
    // 置顶
    handleSetTop(row) {
      const { id } = row
      const msg = row.is_top && row.is_top === 0 ? '取消置顶' : '置顶'
      this.$confirm(`确认${msg}这条公告吗?`, `${msg}公告`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.topMesaage(id)
      })
    },
    // 置顶
    async topMesaage(id) {
      const res = await topMesaage({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getMesaage()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`置顶消息公告失败${e}`)
      }
    },
    // 禁用启用
    handleDisable(row) {
      const { id } = row
      const msg = row.disabled && row.disabled === 0 ? '禁用' : '启用'
      this.$confirm(`确认${msg}这条公告吗?`, `${msg}公告`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.disableMesaage(id)
      })
    },
    // 禁用启用
    async disableMesaage(id) {
      const res = await disableMesaage({ id })
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.getMesaage()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`禁用启用消息公告失败${e}`)
      }
    },
    // 修改
    handleEdit(row) {
      this.visible.type = 'edit'
      this.visible.form = true
      const { id, title, author, contents } = row
      this.messageForm.id = id
      this.messageForm.title = title
      this.messageForm.author = author
      this.messageForm.contents = contents
    },
    // 查看详情
    handleSeeInfo(row) {
      const { title, contents, created_at } = row
      this.info.title = title
      this.info.contents = contents
      this.info.created_at = created_at
      this.visible.info = true
    },
    // 添加显示
    addSyatem() {
      this.visible.type = 'add'
      this.visible.form = true
    },
    // 取消显示
    handleCancel() {
      this.$refs.messageForm.resetFields()
      this.visible.form = false
      this.messageForm.id = ''
      this.messageForm.title = ''
      this.messageForm.author = ''
      this.messageForm.contents = ''
    },
    // 提交
    handleSubmit() {
      this.$refs.messageForm.validate((valid) => {
        if (valid) {
          const { id, title, author, contents } = this.messageForm
          if (this.visible.type === 'add') {
            this.addMesaage({
              title,
              author,
              contents
            })
          } else {
            this.editMesaage({
              id,
              title,
              author,
              contents
            })
          }
        } else {
          return false
        }
      })
    },
    // 添加
    async addMesaage(data) {
      const res = await addMesaage(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleCancel()
          this.getMesaage()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`添加消息公告失败${e}`)
      }
    },
    // 修改
    async editMesaage(data) {
      const res = await editMesaage(data)
      try {
        const { message, code } = res
        if (code === 200) {
          this.$message.success(message)
          this.handleCancel()
          this.getMesaage()
        } else {
          this.$message.error(message)
        }
      } catch (e) {
        console.log(`修改消息公告失败${e}`)
      }
    },
    // 编号
    indexMethod(index) {
      const { page_index, page_size } = this.searchParams
      index += (page_index - 1) * page_size + 1
      return index
    }
  }
}
</script>

<style lang="scss" scoped>
  .messageInfo{
    p{
      line-height: 35px;
    }
    .contents, .time{
      font-size: 14px;
    }
  }
</style>
