<template>
  <el-dialog
    :title="$t1('公告列表')"
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="falseValue"
    :visible.sync="showDialog"
    :modal="falseValue"
    width="1001px"
    custom-class="dialog-style news-box"
    :destroy-on-close="true"
    @close="dialogClose"
    v-el-drag-dialog
    v-el-dialog-center
  >
    <div class="n-list">
      <div class="item" v-for="(item, index) in page.records" :key="index" :class="{ on: currentIndex == index }"
           @click="checkLine(item, index)">
        <div class="name">
          <em v-if="item.top">{{ $t1('顶') }}</em>
          {{ item.title }}
        </div>
        <p>{{ item.modifyDate ? item.modifyDate.substring(0, 10) : '' }}</p>
      </div>
    </div>
    <div class="n-cont">
      <h2 class="t1">{{ currentRow.title }}</h2>
      <h3 class="t2">{{ currentRow.secondTitle }}</h3>
      <p class="time">{{ currentRow.modifyDate }}</p>
      <div class="c" v-html="currentRow.content || ''"></div>
      <div class="annex">
        <a v-for="(attachment,index) in attachments" :key="index"
           @click="$commonFileUtil.downloadFile(attachment.domain + attachment.url, attachment.name)">
          <i class="el-icon-paperclip"></i>
          {{ attachment.name }}
        </a>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'systemNoticeInfoDialog',
  props: {
    visiable: {
      default: false
    },
    appendToTop: {
      default: false
    },
    param: {
      default: null
    },
    queryParam: {
      default: null
    }
  },
  created() {
  },
  mounted() {
    let that = this;
    if (this.param && this.param.id) {
      this.flag = 1;
    }
    this.queryData(1);
  },
  data() {
    var that = this;
    return {
      showDialog: true,
      falseValue: false,
      selectMulti: true,
      page: {
        current: 1,
        size: 1,
        total: 0,
        records: []
      },
      currentIndex: -1,
      currentRow: {},
      flag: 0,
      attachments: []
    };
  },
  watch: {
    currentRow(val) {
      this.initAttachfo();
    }
  },
  methods: {
    dialogClose() {
      this.$emit('update:visiable', false);
    },
    dialogPrimary() {
      // var rows = this.$refs['table-m2'].getTableData().fullData
      // this.$emit("confirm", rows)
      this.$emit('update:visiable', false);
    },
    queryData(pageNumber) {
      let that = this;
      var url = USER_PREFIX + '/system_notice/listPage';
      this.$http({
        method: 'post',
        url: url,
        data: {
          publish: true,
          current: pageNumber,
          ...this.queryParam
        },
        success: res => {
          let page = res.objx;
          this.page = page;
          if (this.param && this.param.id) {
            let currentRow = this.param;
            let currentIndex = -1;
            page.records.some(function (item, index) {
              if (currentRow.id == item.id) {
                currentIndex = index;
                currentRow = item;
                return true;
              } else {
                return false;
              }
            });
            this.currentRow = currentRow;
            this.currentIndex = currentIndex;
            this.handleRead(this.currentIndex)
          } else {
            this.currentIndex = 0;
            this.currentRow = page.records.length > 0 ? page.records[0] : {};
            this.handleRead(this.currentIndex)
          }
        }
      });
    },
    checkLine(item, index) {
      this.flag = 0;
      this.currentIndex = index;
      this.currentRow = item;
      this.handleRead(index)
    },
    handleRead(index, callback) {
      if(this.page.records.length <= index)return
      let row = this.page.records[index];
      if (row.readed !== 1) {
        this.$http({
          url: USER_PREFIX + `/system_notice/read`,
          method: `post`,
          data: {id: row.id},
          isLoading: true,
          success: res => {
            row.readed = 1;
            callback && callback()
          }
        });
      } else {
        callback && callback()
      }
    },
    initAttachfo() {
      let id = this.currentRow && this.currentRow.id ? this.currentRow.id : '';
      if (id) {
        this.$http({
          url: USER_PREFIX + '/system_notice/getAttachments',
          method: `post`,
          data: {id: id},
          success: res => {
            this.attachments = res.objx || [];
          }
        });
      } else {
        this.attachments = [];
      }
    }
  }
};
</script>

<style></style>
