<template>
  <div>
    <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
      top="2vh"
    >
      <div class="n-list">
        <div class="item" v-for="(item, index) in tableDatas" :key="index" :class="{ on: currentIndex == index }"
             @click="checkLine(index)">
          <div class="name">
            {{ item.notifyTypeName }}
          </div>
          <p>{{ item.createDate ? item.createDate.substring(0, 10) : '' }}</p>
        </div>
      </div>
      <div class="n-cont">
        <h2 class="t1">{{ currentRow.notifyTypeName }}</h2>
        <!--          <h3 class="t2">紧急通知</h3>-->
        <p class="time">{{ currentRow.createDate }}</p>
        <div class="c"><p v-html="currentRow.content"></p></div>
      </div>
    </el-dialog>
    <systemNoticeInfoDialog v-if="showSystemNoticeInfoDialog" :visiable.sync="showSystemNoticeInfoDialog"
                            :appendToTop="true" :queryParam="systemNoticeInfoDialogParam"></systemNoticeInfoDialog>
  </div>
</template>

<script>
import systemNoticeInfoDialog from "@base/views/user/system_notice/infoDialog.vue";
import settingConfig from "@/settings";

export default {
  name: 'notifyMessageDialog',
  components: {systemNoticeInfoDialog},
  props: {},
  created() {
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      showDialog: false,
      falseValue: false,
      tableDatas: [],
      currentIndex: 0,
      currentRow: {},
      showSystemNoticeInfoDialog: false,
      systemNoticeInfoDialogParam: {}
    };
  },

  methods: {
    init() {
      this.$http({
        url: USER_PREFIX + '/notify_message/lastUnreadList',
        method: 'post',
        data: {},
        success: res => {
          let rows = res.objx || [];
          if (rows.length > 0) {
            this.tableDatas = rows;
            this.checkLine(0, () => {
              this.showDialog = true;
            });
          } else {
            this.initSystemNoticeInfoDialog();
          }
        }
      });
    },
    handleRead(index, callback) {
      let row = this.tableDatas[index];
      if (row.readed == 0) {
        this.$http({
          url: USER_PREFIX + `/notify_message/read`,
          method: `post`,
          data: [row.id],
          isLoading: true,
          success: res => {
            row.readed = 1;
            callback && callback()
          }
        });
      } else {
        callback && callback()
      }
    },

    dialogClose() {
      this.$emit('update:visiable', false);
    },
    dialogPrimary() {
      // var rows = this.$refs['table-m2'].getTableData().fullData
      // this.$emit("confirm", rows)
      this.$emit('update:visiable', false);
    },
    checkLine(index, callback) {
      this.currentIndex = index;
      let item = this.tableDatas[index];
      this.handleRead(index, () => {
        this.currentIndex = index;
        this.currentRow = item;
        callback && callback();
      })

    },
    initSystemNoticeInfoDialog() {
      if (!settingConfig.systemNoticeAutoTip) return
      let userFlag = this.$store.getters.userFlag
      if (userFlag == 6 || userFlag == 7 || userFlag == 8) return;
      this.$http({
        url: USER_PREFIX + '/system_notice/listPage',
        data: {publish: true, important: true, readed: 0, size: 1},
        method: 'post',
        success: res => {
          this.systemNotices = res.objx && res.objx.records ? res.objx.records : [];
          let rows = res?.objx?.records || []
          if (rows.length > 0) {
            this.systemNoticeInfoDialogParam = {publish: true, important: true, readed: 0};
            this.showSystemNoticeInfoDialog = true;
          }
        }
      });
    }
  }
};
</script>

<style></style>
