<template>
  <div class="noticeDetails">
    <div class="black">
      <div @click="goBack()"><i class="el-icon-back"></i>返回</div>
    </div>
    <div class="left">
      <div class="title">公告类型</div>
      <div
        v-for="(item, index) in this.gglxList"
        :key="index"
        :class="{active: isActive == index + 1}"
        class="tabs"
        @click="clickDiv(item.value)"
      >
        {{ item.name }}
        <i
          class="el-icon-arrow-right
			"
        ></i>
      </div>
    </div>
    <div class="right">
      <div class="title">公告公示</div>
      <div>
        <div
          v-for="(item, index) in this.tableData"
          :key="index"
          class="liBox"
          @click="addDialog(item)"
        >
          <div>
            <div class="dot"></div>
            {{ item.title }}
          </div>
          <span>{{ item.createTime }}</span>
        </div>
      </div>
    </div>

    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="公告详情"
      width="50%"
    >
      <div class="content">
        <span v-html="content"></span>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span> -->
    </el-dialog>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import kzzxMenu from '@/api/examination/kzzxMenu.js'

export default {
  name: 'noticeDetails',
  components: {},
  mixins: [TableMixin],
  data() {
    return {
      gglxList: [], //公告类型
      isActive: '1',
      tableData: [],
      dialogVisible: false,
      querys: [
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'type',
          relation: 'AND',
          value: ''
        },
        {
          group: 'main',
          operation: 'LIKE',
          parentGroup: '',
          property: 'status',
          relation: 'AND',
          value: '0'
        }
      ],
      content: ''
    }
  },
  created() {
    this.querys[0].value = this.isActive
    this.gglxList = dictUtils.getDictItemsFromCache('gglx')
    console.log(this.gglxList)
  },
  methods: {
    loadData(page) {
      if (page) {
        this.queryParam.pageBean.page = page
      }
      this.tableData = []
      this.queryParam.querys = []
      if (this.querys[0].value) {
        this.queryParam.querys.push(this.querys[0])
      }
      if (this.querys[1].value) {
        this.queryParam.querys.push(this.querys[1])
      }
      kzzxMenu.findByPage(this.queryParam, res => {
        this.total = res.total
        this.tableData = res.rows
        this.$set(this.tableData)
      })
    },
    clickDiv(index) {
      this.isActive = index.toString()
      this.querys[0].value = this.isActive
      this.loadData(1)
    },
    handleClose(done) {
      this.dialogVisible = false
    },
    addDialog(val) {
      this.content = val.content
      this.dialogVisible = true
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.noticeDetails {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: #fff;
  display: flex;
  padding: 20px 180px 20px 20px;
  box-sizing: border-box;

  .black {
    width: 150px;

    div {
      font-size: 16px !important;
    }

    i {
      font-size: 16px !important;
    }
  }

  .left {
    width: 25%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .tabs {
      width: 95%;
      margin: 5px 0;
      height: 35px;
      line-height: 35px;
      padding: 0 10px;
      box-sizing: border-box;
      border: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
    }

    .active {
      background-color: #115199;
      color: #fff;
    }
  }

  .right {
    width: 80%;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;

    .liBox {
      padding: 10px 20px;
      box-sizing: border-box;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;

      div {
        display: flex;

        .dot {
          margin: auto;
          margin-right: 10px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #c2cdd7;
        }
      }

      span {
        color: #999;
      }
    }

    .liBox:hover {
      color: #999 !important;
    }
  }

  .title {
    border-left: 3px solid #115199;
    font-weight: bold;
    font-size: 16px;
    color: #115199;
    padding-left: 10px;
  }

  .content {
    overflow-y: auto;
    max-height: 400px;
  }
}
</style>
<!-- noticeDetails -->
