<template>
  <div class="contradiction-div">
    <div class="search-div">
      <Form :model="dataParam" :label-width="60">
          <Row :gutter="20">
            <Col span="6">
              <FormItem label="标题：" style="margin-bottom: 15px;">
                <Input v-model="searchInfo.title" placeholder="请输入标题" />
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="状态：" style="margin-bottom: 15px;">
                <i-select clearable style="width: 100%;" placeholder="任务状态" v-model="searchInfo.publish_status">
                  <i-option value="0">待发布</i-option>
                  <i-option value="1">已发布</i-option>
                  <i-option value="2">撤销</i-option>
                </i-select>
              </FormItem>
            </Col>
            <Col span="12">
              <Button type="primary" @click="searchData" style="margin-left: 10px;">查询</Button>
              <Button type="primary" @click="reset" style="margin-left: 10px;">重置</Button>
              <Button type="primary" v-if="user_level=== '2'" @click="add" style="margin-left: 10px;">新增</Button>
            </Col>
          </Row>
      </Form>
    </div>
    <Table stripe :columns="columns" :data="dataList">
      <template slot-scope="{ row, index }" slot="action">
        <div class="flex-div">
          <Button type="primary" v-if="row.publish_status === 0 && user_level=== '2'" class="mr5" @click="updateNoticeStatus(row, 1)">发布</Button>
          <Button type="warning" v-if="row.publish_status === 1 && user_level=== '2'" class="mr5" @click="updateNoticeStatus(row, 2)">撤销</Button>
          <Button type="info" class="mr5"  @click="showNotice(row)">查看</Button>
          <Button type="success" :disabled="row.publish_status === 0 && user_level=== '2'" class="mr5" @click="editNotice(row)">修改</Button>
          <Button type="error" :disabled="row.publish_status === 0 &&user_level=== '2'" class="mr5" @click="deleteNotice(row)">删除</Button>
        </div>
      </template>
      <template slot-scope="{ row, index }" slot="publish_status">
        <div class="flex-div">
          <span>{{row.publish_status === 0 ? '草稿' : row.publish_status === 1 ? '已发布' : row.publish_status === 2 ? '已撤销' : ''}}</span>
        </div>
      </template>
    </Table>
    <Page class="page_style"  :total="params.totalRecord" :current="params.pageNo"
            :page-size="params.pageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
  </div>
</template>
<script>
import { selectListPage, deleteNotice, updateNotice } from '@/api/contradiction.js'
export default {
  name: 'register',
  data () {
    return {
      searchInfo: {},
      dataParam: {},
      user_level: '',
      columns: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '标题', key: 'title', align: 'center', minWidth: 150 },
        { title: '内容', key: 'context', align: 'center', minWidth: 150, ellipsis: true },
        { title: '部门', key: 'department', align: 'center', minWidth: 150 },
        { title: '时间', key: 'create_time', align: 'center', minWidth: 120 },
        { title: '排序', key: 'sort', align: 'center', minWidth: 100 },
        { title: '状态', slot: 'publish_status', align: 'center', minWidth: 100 },
        { title: '操作', slot: 'action', fixed: 'right', align: 'center', width: '300' }
      ],
      dataList: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
    }
  },
  mounted () {
    this.user_level = this.$store.state.user.severUserInfo.company_grade
    this.getList()
  },
  methods: {
    showNotice (row) {
      this.$router.push({
        path: '/noticeEdit',
        query: {
          id: row.id,
          isReadOnly: true
        }
      })
    },
    editNotice (row) {
      this.$router.push({
        path: '/noticeEdit',
        query: {
          id: row.id
        }
      })
    },
    updateNoticeStatus (row, status) {
      let str = status === 1 ? '发布' : '撤销'
      this.$Modal.confirm({
        title: '确认' + str + '此通知吗？',
        content: '请仔细核对后再操作',
        onOk: () => {
          updateNotice({ id: row.id, publish_status: status }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
              this.getList()
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
        }
      })
    },
    deleteNotice (row) {
      this.$Modal.confirm({
        title: '确认删除此通知吗？',
        content: '请仔细核对后再操作',
        onOk: () => {
          deleteNotice({ id: row.id }).then(res => {
            if (res.data.errcode === 0) {
              this.$Message.success('操作成功')
              this.getList()
            } else {
              this.$Message.error(res.data.errmsg)
            }
          })
        }
      })
    },
    add () {
      this.$router.push('/noticeEdit')
    },
    reset () {
      this.searchInfo = {}
      this.params = {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      }
      this.getList()
    },
    stripHtml (html) {
      var tempDiv = document.createElement('div')
      tempDiv.innerHTML = html
      return tempDiv.innerText || tempDiv.textContent || ''
    },
    getList () {
      selectListPage({ ...this.params, ...this.searchInfo }).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.dataList.forEach(item => {
            item.context = this.stripHtml(item.context)
          })
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getList()
    },
    searchData () {
      this.params.pageNo = 1
      this.getList()
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  }
}
</script>
<style scoped lang="less">
  .contradiction-div {
    padding: 10px;
    .search-div {
      width: 100%;
      padding: 15px 30px 0px 15px;
      border: 1px solid skyblue;
      background-color: azure;
      margin-bottom: 15px;
    }
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .mt8 {
    margin-top: 8px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .mr5 {
    margin-right: 5px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .flex-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .circle-div1 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: red;
  }
  .circle-div2 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: orange;
  }
  .circle-div3 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: green;
  }
  .show-more {
    margin-top: 5px;
    cursor: pointer;
  }
</style>
