<template>
  <div>
    <Card :bordered="false" :padding="6" class="ivu-mb">
      <template #title>
        <div>
          <Avatar icon="md-apps" style="font-size: 10px" size="small" v-color="'#1890ff'" v-bg-color="'#e6f7ff'" />
          <span class="ivu-pl-8">{{ $t('Front_Label_Notice') }}</span>
        </div>
      </template>
      <view-table style="height: 250px" :height="200" view-code="NoticeModal">
        <template #column="{ row, column, code }">
          <template v-if="code == 'title'">
            <a href="#" @click="show(row)">{{ showData(row, column) }}</a>
          </template>
        </template>
      </view-table>
    </Card>
    <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" :width="800">
      <template #header>
        <div>
          <slot name="header">
            <span class="title">{{ data.title }}</span>
            <span class="description"></span>
          </slot>
        </div>
      </template>
      <div style="margin: 16px; max-height: 500px">
        <div v-html="data.content"></div>
      </div>
      <template #footer>
        <div>
          <Button type="default" custom-icon="fa fa-times" @click="opened = false">{{ $t('Front_Btn_Close') }}</Button>
        </div>
      </template>
    </Modal>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';

  export default {
    name: 'notice-list',
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        opened: false,
        data: {}
      };
    },
    computed: {},
    async mounted() {},
    methods: {
      show(row) {
        this.data = row;
        this.opened = true;
      }
    }
  };
</script>

<style scoped></style>
