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

    <div class="btn-group">
      <div class="pull-right" style="margin-right: 50px">
        <el-button type="default" @click="returnBack">{{ $t('ec.dialog.close') }}</el-button>
      </div>
    </div>
    <el-form ref="form" :model="formItem" :label-width="'100px'">
      <el-form-item
        :label="$t('ec.notice.title')"
        prop="title"
      >
        <el-input v-model="formItem.title" type="text" :placeholder="$t('ec.notice.title')" />
      </el-form-item>
      <el-form-item
        v-if="parseInt(formItem.sendWay) === 1"
        :label="$t('ec.notice.type')"
        prop="type"
      >
        <ec-select v-model="formItem.type" readonly :placeholder="$t('ec.notice.type')" dict-type="noticeType" />
      </el-form-item>
      <el-form-item
        :label="$t('ec.notice.sendWay')"
        prop="sendWayText"
      >
        <el-input v-model="formItem.sendWayText" readonly type="text" :placeholder="$t('ec.notice.sendWay')" />
      </el-form-item>
      <el-form-item
        :label="$t('ec.notice.sendTime')"
        prop="sendTime"
      >
        <el-input v-model="formItem.sendTime" readonly type="text" :placeholder="$t('ec.notice.sendTime')" />
      </el-form-item>
      <el-form-item
        :label="$t('ec.notice.content')"
        prop="content"
      >
        <el-input
          v-model="formItem.content"
          type="textarea"
          readonly
          :rows="5"
          :placeholder="$t('ec.notice.content')"
        />
      </el-form-item>
    </el-form>

    <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"
      @toolbar-button-click="toolbarButtonClickEvent"
      @page-change="handlePageChange"
    >
      <template v-slot:readStatus="{row}">
        <div>
          <el-tag v-if="row.readStatus === 'read'" type="success">
            <span>{{ $dictUtils.getDictLabel('readStatus', row.readStatus, '') }}</span>
          </el-tag>
          <el-tag v-else type="info">
            <span>{{ $dictUtils.getDictLabel('readStatus', row.readStatus, '') }}</span>
          </el-tag>
        </div>
      </template>
    </vxe-grid>

  </div>
</template>
<script>
import mixin from 'ecip-web/utils/common-mixin'
import { getDetail, remove, sendNoticeById, getById as getNoticeById } from 'ecip-web/api/vue/notice/noticeApi'

export default {
  name: 'ModulesSystemSysrNoticeFormDetail',
  components: {},
  mixins: [...mixin],
  data() {
    return {
      formItem: {
        user: {}
      },
      tableToolbar: {
        id: 'modules.system.sysrNoticeView-toolbar',
        buttons: [
          // { code: 'reback', name: '返回' }
        ],
        export: true, // 导出按钮
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      showSearch: false,
      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: [
        /* { title: '发送人', key: 'noticeName', field: 'noticeName', minWidth: 100, showOverflow: true }, */
        { title: 'ec.notice.receiver', key: 'userName', field: 'userName', minWidth: 100, showOverflow: true },
        { title: 'ec.notice.readTime', key: 'readTime', field: 'readTime', minWidth: 100, showOverflow: true },
        { title: 'ec.notice.status', key: 'readStatus', field: 'readStatus', minWidth: 100, showOverflow: true, slots: { default: 'readStatus' }}
      ],
      queryParams: {
      }
    }
  },
  created() {
    this.getData()
    /* this.$options.sockets.onmessage = (data) => {
      const message = JSON.parse(data.data)
      if (message && message.code === 'sysrNotice') {
        this.getData()
      }
    }*/
  },
  methods: {
    toolbarButtonClickEvent({ code }, event) {
      if (code === 'reback') {
        this.returnBack()
      }
    },
    getData() {
      this.loading = true
      this.queryParams.noticeId = this.$route.params.id
      getNoticeById(this.queryParams.noticeId).then(res => {
        this.formItem = res.data
      })
      getDetail(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
      })
    },
    getDetail() {
      this.loading = true
      getDetail(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.getDetail()
    },
    add() {
      this.$router.push(`/sysrNoticeAdd`)
    },
    detail(id) {
      this.$router.push(`/sysrNoticeEdit/${id}`)
    },
    edit(id) {
      this.$router.push(`/sysrNoticeDetail/${id}`)
    },
    send(id) {
      this.$confirm(this.$t('ec.notice.sendAllConfirm'), this.$t('ec.message.prompt'), {
        confirmButtonText: this.$t('ec.notice.confirm'),
        cancelButtonText: this.$t('ec.notice.cancel'),
        type: 'warning'
      }).then(() => {
        sendNoticeById(id).then(res => {
          this.getDetail()
          this.$notify.success(this.$t('ec.notice.sendSuccess'))
        })
      }
      )
    },
    returnBack() {
      this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
        if (this.formItem.sendWay.indexOf('5') > -1) {
          this.$router.push(`/sysrInboxView`)
        } else {
          this.$router.push(`/sysrNoticeView`)
        }
      })
    },
    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.getDetail()
            this.$notify.success(this.$t('ec.message.delSuccess'))
          })
        }
        )
      }
    },
    handleSearch() {
      this.getDetail()
    },
    handleReset() {
      this.$refs['searchForm'].resetFields()
      this.getDetail()
    }
  }
}
</script>

<style scoped>

</style>
