<template>
  <div class="app-container">

    <div v-show="showSearch" class="search-form">
      <el-form ref="searchForm" :model="queryParams" inline :label-width="'100px'">
        <el-form-item :label="$t('ec.notice.title')" prop="title">
          <el-input v-model="queryParams.title" type="text" :placeholder="$t('ec.notice.title')" />
        </el-form-item>
        <el-form-item :label="$t('ec.notice.content')" prop="content">
          <el-input v-model="queryParams.content" type="text" :placeholder="$t('ec.notice.content')" />
        </el-form-item>
        <el-form-item :label="$t('ec.notice.status')" prop="editStatus">
          <ec-select v-model="queryParams.editStatus" clearable dict-type="editStatus" />
        </el-form-item>
        <el-form-item class="searchItem" :label-width="'50px'">
          <el-button type="primary" @click="handleSearch">{{ $t('ec.table.query') }}</el-button>
          <el-button type="default" @click="handleReset">{{ $t('ec.table.reset') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxe-grid
      ref="vxe"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      class="vxe-table-element"
      :loading="loading"
      :start-index="(page.currentPage - 1) * page.pageSize"
      :pager-config="page"
      :columns="columns"
      :data="tableData"
      :toolbar="tableToolbar"
      @page-change="handlePageChange"
    >
      <template v-slot:toolbar_btns>
        <el-button type="primary" @click="add()">{{ $t('ec.notice.sendNotice') }}</el-button>
<!--        <el-button type="primary" @click="addInternal()">{{ $t('ec.notice.sendInternal') }}</el-button>-->
        <el-button type="danger" :disabled="!oneMore" @click="remove()">{{ $t('ec.table.delete') }}</el-button>
<!--        <el-button @click="getData">{{ $t('ec.table.refresh') }}</el-button>-->
      </template>
      <template v-slot:messageType="{row}">
        <ec-select v-model="row.type" dict-type="noticeType" readonly />
      </template>
      <template v-slot:editStatus="{row}">
        <el-tag v-if="row.editStatus === 'sent'" type="success">
          <span>{{ $dictUtils.getDictLabel('editStatus', row.editStatus, '') }}</span>
        </el-tag>
        <el-tag v-else type="info">
          <span>{{ $dictUtils.getDictLabel('editStatus', row.editStatus, '') }}</span>
        </el-tag>
      </template>
      <template v-slot:operation="{row}">
        <el-button v-if="row.editStatus === 'draft'" size="mini" type="primary" @click="edit(row.id)">{{ $t('ec.table.edit') }}</el-button>
        <el-button v-else size="mini" type="success" @click="detail(row.id)">{{ $t('ec.table.detail') }}</el-button>
        <el-button size="mini" type="danger" @click="remove(row.id)">{{ $t('ec.table.del') }}</el-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
import mixin from 'ecip-web/utils/common-mixin'
import { getData, remove, sendNoticeById } from 'ecip-web/api/vue/notice/noticeApi'

export default {
  name: 'ModulesSystemSysrNoticeView',
  components: {},
  mixins: [...mixin],
  data() {
    return {
      messageTypeList: [],
      oneMore: true, //  工具栏删除按钮是否禁用，当选中条数为0的时候禁用
      onlyOne: true, // 工具栏编辑按钮是否禁用，只有当且仅当选择一条记录的时候才可编辑
      selections: [],
      tableToolbar: {
        id: 'modules.system.sysrNoticeView-toolbar',
        // buttons: [
        //   { code: 'add', name: this.$t('ec.table.add'), status: 'primary' },
        //   { code: 'remove', name: this.$t('ec.table.delete') },
        //   { code: 'search', name: this.$t('ec.table.search') },
        //   { code: 'reset', name: this.$t('ec.table.refresh') }
        // ],
        custom: true,
        slots: {
          buttons: 'toolbar_btns'
        },
        export: true, // 导出按钮
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      showSearch: true,
      loading: false,
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 200, 500],
        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total'],
        perfect: true
      },
      tableData: [],
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { title: 'ec.notice.type', key: 'type', field: 'type', width: 100, showOverflow: true, slots: { default: 'messageType' }},
        { title: 'ec.notice.sendWay', key: 'sendWayText', field: 'sendWayText', align: 'center', width: 80, showOverflow: true },
        { title: 'ec.notice.sender', key: 'userName', field: 'userName', width: 100, showOverflow: true },
        { title: 'ec.notice.title', key: 'title', field: 'title', width: 120, showOverflow: true },
        { title: 'ec.notice.content', key: 'content', field: 'content', minWidth: 500, showOverflow: true },
        { title: 'ec.notice.sendTime', key: 'sendTime', field: 'sendTime', align: 'center', width: 170, showOverflow: true },
        { title: 'ec.notice.status', key: 'editStatus', field: 'editStatus', width: 70, align: 'center', slots: { default: 'editStatus' }},
        { title: 'ec.table.actions', width: 150, fixed: 'right', align: 'center', slots: { default: 'operation' }}
      ],
      queryParams: {
        title:'',
        content:'',
        editStatus:''
      }
    }
  },
  async created() {
    this.getData()
    /* this.$options.sockets.onmessage = (data) => {
      const message = JSON.parse(data.data)
      if (message && message.code === 'sysrNotice') {
        this.getData()
      }
    }*/
  },
  mounted() {
    this.$watch(this.$refs.vxe.getCheckboxRecords, (newValue, oldValue) => {
      this.selections = newValue
      this.onlyOne = this.selections.length === 1
      this.oneMore = this.selections.length > 0
    })
  },
  methods: {
    // toolbarButtonClickEvent({ code }, event) {
    //   switch (code) {
    //     case 'add':
    //       this.add()
    //       break
    //     case 'remove':
    //       this.remove()
    //       break
    //     case 'search':
    //       this.showSearch = !this.showSearch
    //       break
    //     case 'reset':
    //       this.getData()
    //       break
    //   }
    // },
    getData() {
      this.loading = true
      this.queryParams.sendWay = 1
      getData(Object.assign({}, { size: this.page.pageSize, current: this.page.currentPage }),
        this.queryParams).then(res => {
        const data = res.data
        this.tableData = data.records
        this.page.total = data.total
        this.loading = false
      }).catch(e => {
        this.loading = false
      })
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage
      this.page.pageSize = pageSize
      this.getData()
    },
    add() {
      this.$router.push(`/sysrNoticeAdd`)
    },
    addInternal() {
      this.$router.push(`/addInternal`)
    },
    detail(id) {
      this.$router.push(`/sysrNoticeDetail/${id}`)
    },
    edit(id) {
      this.$router.push(`/sysrNoticeEdit/${id}`)
    },
    send(id) {
      this.$confirm(this.$t('ec.notice.sendAllConfirm'), this.$t('ec.message.prompt'), {
        confirmButtonText: this.$t('ec.message.confirm'),
        cancelButtonText: this.$t('ec.message.cancel'),
        type: 'warning'
      }).then(() => {
        sendNoticeById(id).then(res => {
          this.getData()
          this.$notify.success(this.$t('ec.notice.sendSuccess'))
        })
      }
      )
    },
    remove(id) {
      const deleteIds = []
      if (id) {
        deleteIds.push(id)
      } else {
        this.$refs.vxe.getSelectRecords().forEach(row => {
          const id = row.id
          deleteIds.push(id)
        })
      }
      if (deleteIds.length > 0) {
        this.$confirm(this.$t('ec.message.delConfirm'), this.$t('ec.message.prompt'), {
          confirmButtonText: this.$t('ec.message.confirm'),
          cancelButtonText: this.$t('ec.message.cancel'),
          type: 'warning'
        }).then(() => {
          remove(deleteIds).then(res => {
            this.getData()
            this.$notify.success(this.$t('ec.message.delSuccess'))
          })
        }
        )
      }
    },
    handleSearch() {
      this.getData()
    },
    handleReset() {
      this.$refs['searchForm'].resetFields()
      this.getData()
    }
  }
}
</script>

<style scoped>

</style>
