<template>
  <el-card class="box-card" shadow="hover" id="todo-card">
    <div slot="header">
      <span style="border-left: 3px solid #338de3ff; padding-left: 6px"
        >待办事项</span
      >
      <i class="el-icon-more" style="float: right; font-size: 20px"></i>
    </div>

    <div>
      <Table :height="tableHeight" :loading="loading" size="small" :data="/^\/system/.test(this.$route.path) ? example : list" :columns="table"></Table>

      <div ref="todo-page" style="display: flex; justify-content: center; margin: 10px 0">
        <Page :total="/^\/system/.test(this.$route.path) ? example.length : total"
              size="small"
              show-elevator
              show-total
              @on-change="e => {
                select.page = e;
                getNotices();
              }"/>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getNotice, readNotice } from '@/api/dashboard/notice'
import ElementResize from 'element-resize-detector'

export default {
  name: "card2",
  layout: {
    x: 4,
    y: 0,
    w: 6,
    h: 4,
    i: "2",
    name: "待办事项",
  },
  data() {
    return {
      example:[
        {
          type: 1,
          content: "示例1",
          created_at:this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          read_count: true
        },
        {
          type: 2,
          content: "示例2",
          created_at:this.$moment().format("YYYY-MM-DD HH:mm:ss"),
          read_count: false
        }
      ],
      select:{
        page: 1,
        page_size: 10
      },
      tableHeight: 120,
      loading: false,
      list: [],
      total: 0,
      table: [
        {
          type: "index",
          title: "序号",
          align: "center",
          width: 64
        },
        {
          title: "类型",
          align: "center",
          width: 100,
          render: (h, { row }) => {
            return h("span", {}, row.type === 1 ? "合同流程" : "付款计划");
          },
        },
        {
          title: "内容",
          key: "content",
          align: "left",
          ellipsis: true,
          tooltip: true,
          minWidth: 120
        },
        {
          title: "下发时间",
          key: "created_at",
          width: 180,
          align: "center"
        },
        {
          title: "状态",
          key: "read_count",
          width: 120,
          render: (h, { row }) => {
            return row.read_count
              ? h(
                  "el-link",
                  {
                    props: {
                      type: "success",
                      underline: false,
                    },
                  },
                  "已读"
                )
              : h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                      ghost: true
                    },
                    on: {
                      ['click']:e => {
                        if(/^\/system/.test(this.$route.path)) return

                        readNotice({
                          id: row.id
                        }).then(res => {
                          this.$message({
                            type: 'success',
                            message: '已读'
                          })
                          this.getNotices()
                        })
                      }
                    }
                  },
                  "未读"
                );
          },
        },
      ],
    };
  },
  methods: {
    async getNotices() {
      if(/^\/system/.test(this.$route.path)) return
      try{
        this.loading = true
        const res = await getNotice(this.select,true);
        this.list = res.data;
        this.total = res.total;
        this.loading = false
      }catch (e) {
        this.loading = false
      }
    },

    init() {
      let cardDom = document.getElementById('todo-card');
      let cardTitleH = 58;
      let page = this.$refs['todo-page']
      const elementResize = ElementResize({
        strategy:'scroll'
      })
      elementResize.listenTo(cardDom,ele => {
        this.tableHeight = cardDom.getBoundingClientRect().height - 40 - cardTitleH - page.getBoundingClientRect().height
      })
    }
  },
  computed: {},
  created() {
    this.getNotices();
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped lang="scss"></style>
