<template>
  <div class="total-wrpaper">
    <div class="tool-wrapper">
      <el-button type="primary" @click="addDialogShow">新增</el-button>
      <el-button :disabled="isEditable" type="warning" @click="editAdvices">编辑</el-button>
      <el-button :disabled="isDeleteable" type="danger" @click="deleteAdvices">删除</el-button>
    </div>
    <div class="table-wrapper">
      <el-table
        :data="tableData"
        style="width:100%;"
        border
        v-loading="isLoadingAdvice"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="title"
          label="标题"
          width="780"
        />
        <el-table-column
          prop="depart"
          label="发布人"
        />
        <el-table-column
          prop="time"
          label="发布时间"
        />
      </el-table>
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="curPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalColumn"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getNotice, postNotice, putNotice, deleteNotice} from '@/api/opeAdvice.js'
export default {
  data() {
    return {
      tableData: [
      ],
      inputDate: '',
      keyword: '',
      publishPerson: '',
      multipleSelection: [],
      isEditable: true,
      isDeleteable: true,
      // 增加对话框的显示
      addDialogFormVisible: false,
      // form
      formInfo: {
        title: '',
        depart: '',
        time: '',
        content: ''
      },
      // 经发局列表
      departList: [
        {
          value: '经发局（应急局）',
          label: '经发局（应急局）'
        },
        {
          value: '建设局',
          label: '建设局'
        },
        {
          value: '市场监督管理局',
          label: '市场监督管理局'
        },
        {
          value: '生态环境局',
          label: '生态环境局'
        },
        {
          value: '商务局',
          label: '商务局'
        }
      ],
      // 规则
      /*
        title: '',
        depart: '',
        time: '',
        content: ''
      */
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        depart: [
          {
            required: true,
            message: '请选择经管部门',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择发布时间',
            trigger: 'change'
          }
        ],
        content: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur'
          }
        ]
      },
      currentPage: 1,
      curPageSize: 10,
      totalColumn: 40,
      isLoadingAdvice: false
    }
  },
  mounted() {
    this.initAllNotices()
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.isEditable = true
      this.isDeleteable = true
      if (this.multipleSelection.length === 1) {
        this.isEditable = false
      }
      if (this.multipleSelection.length > 0) {
        this.isDeleteable = false
      }
    },
    // 显示增加对话框
    addDialogShow() {
      // this.formInfo.title = ''
      // this.formInfo.depart = ''
      // this.formInfo.time = ''
      // this.formInfo.content = ''
      // this.addDialogFormVisible = true
      this.$router.push({
        path: '/train/advice/addadvice'
      })
    },
    // 发布通知通告
    publishAdvice() {
      this.$refs['addform'].validate((valid) => {
        if (valid) {
          // 发布
        } else {
          this.$message.error('请输入信息')
        }
      })
    },
    // 编辑通知通告
    editAdvices() {
      // console.log(this.multipleSelection, '当前选择的通知通告')
      // console.log(this.$store.advice.curAdviceItem, 'this.$store.advice.curAdviceItem')
      this.$store.dispatch('setAdviceItem', this.multipleSelection[0]).then(() => {
        this.$router.push({
          path: '/train/advice/editadvice'
        })
      })
    },
    // 删除通知通告
    deleteAdvices() {
      deleteNotice(this.multipleSelection.map(item => item.noticeId))
      .then(res => {
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.initAllNotices()
      }, () => {
        this.$message.error('删除失败')
      })
    },
    // 搜索通知通告
    searchAdvice() {
      //
    },
    handleSizeChange(val) {
      // 每页多少条
      this.curPageSize = val
      this.initAllNotices()
    },
    handleCurrentChange(val) {
      // 当前是多少页
      this.currentPage = val
      this.initAllNotices()
    },
    initAllNotices() {
      this.isLoadingAdvice = true
      getNotice({
        page: this.currentPage - 1,
        size: this.curPageSize,
        sort: 'noticeId,desc'
      }).then(res => {
        console.log(res, 'getNotice initALlNotices')
        res.content.forEach(item => {
          item.title = item.noticeTitle
          item.depart = item.noticePublisher
          item.time = item.updateTime
          item.content = item.noticeContent
        })
        this.tableData = [...res.content]
        this.totalColumn = res.totalElements
        this.isLoadingAdvice = false
      }).catch(() => {
        this.isLoadingAdvice = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .total-wrpaper {
    margin: 30px auto;
    width: 80%;
    box-shadow: 0 0 9px 1px #eee;
    border-radius: 20px;
    padding: 20px;
    .tool-wrapper {
      width: 80%;
      margin: 30px auto;
      box-shadow: 0 0 9px 1px #eee;
      border-radius: 10px;
      padding: 10px;
    }
    .law-search-wrapper {
      width: 80%;
      margin: 30px auto;
      box-shadow: 0 0 9px 1px #eee;
      border-radius: 10px;
      padding: 10px;
    }
    .table-wrapper {
      width: 80%;
      margin: 30px auto;
      box-shadow: 0 0 9px 1px #eee;
      border-radius: 15px;
      padding: 15px;
    }
  }
</style>
