<template>
  <el-card id="todo-card" class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <SvgIcon style="color: #3171f4;width: 22px;height: 22px;" icon-class="notice" />
      <span
        style="padding-left: 15px"
      >待办事项</span>
      <i class="el-icon-more" style="margin-left: auto; font-size: 20px" />
    </div>

    <div style="position: relative;height: 100%;width: 100%;">
      <div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;">
        <Table
          :show-header="false"
          :height="tableHeight"
          :loading="loading"
          size="small"
          :data="/^\/system/.test(this.$route.path) ? example : list"
          :columns="table"
        />
      </div>
    </div>
  </el-card>
</template>

<script>
import SvgIcon from '@/components/SvgIcon/index.vue'
import ElementResize from 'element-resize-detector'

export default {
  name: 'Card2',
  components: {
    SvgIcon
  },
  layout: {
    x: 4,
    y: 0,
    w: 6,
    h: 4,
    i: '2',
    name: '待办事项'
  },
  data() {
    return {
      window: {
        width: 0,
        height: 0,
        top: 0,
        left: 0
      },
      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: 46
        },
        {
          title: '收件时间',
          key: 'created_at',
          width: 160,
          align: 'center',
          render: (h, { row }) => {
            return h('span', { style: { color: '#4d8bdc' }}, this.$moment(row.created_at).format('YYYY-MM-DD HH:mm:ss'))
          }
        },
        {
          title: '内容',
          key: 'title',
          align: 'left',
          ellipsis: true,
          tooltip: true,
          minWidth: 200
        },
        {
          title: '查看',
          key: 'show',
          width: 180,
          render: (h, { row }) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'default',
                    size: 'small'
                  },
                  style: {
                    background: '#f0f3fa',
                    color: '#333',
                    border: '1px solid #dae1f0',
                    fontSize: '13px'
                  },
                  on: {
                    'click': (_) => {
                      if (row.from_type === 'contract') {
                        this.$router.push({
                          path: '/contract/contract/contractList',
                          query: {
                            keyword: /\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
                          }
                        })
                      } else {
                        window.open(
                          `${process.env.VUE_APP_OUT_OLD}/flow/view/${row.id}?auth_token=${this.$store.getters.oa_token}`,
                          'edit',
                          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
                        )
                      }
                    }
                  }
                },
                '查看'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    'margin-left': '6px',
                    fontSize: '13px'
                  },
                  on: {
                    'click': (_) => {
                      if (row.from_type === 'contract') {
                        const toUrl = this.$router.resolve({
                          path: '/contract/contract/contractList',
                          query: {
                            keyword: /\[(.*?)\]/.exec(row.title) ? /\[(.*?)\]/.exec(row.title)[1] : ''
                          }
                        })
                        window.open(
                          toUrl.href,
                          'edit',
                          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
                        )
                      } else {
                        window.open(
                          `${process.env.VUE_APP_OUT_OLD}/flow/deal/${row.id}?auth_token=${this.$store.getters.oa_token}`,
                          'edit',
                          `top=${this.window.top},left=${this.window.left},width=${this.window.width},height=${this.window.height},location=0`
                        )
                      }
                    }
                  }
                },
                '办理'
              )
            ])
          }
        }
        // {
        //   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()
        //                 })
        //               }
        //             }
        //           },
        //           "未读"
        //         );
        //   },
        // },
      ]
    }
  },
  computed: {},
  created() {
    this.window.width = screen.availWidth * 0.95
    this.window.height = screen.availHeight * 0.95
    this.window.top = (window.screen.height - 30 - this.window.height) / 2
    this.window.left = (window.screen.width - 10 - this.window.width) / 2
    this.getNotices()
  },
  mounted() {
    this.init()
  },
  methods: {
    async getNotices() {
      if (/^\/system/.test(this.$route.path)) return
      try {
        this.loading = true
        this.list = []
        this.total = 0
        this.loading = false
      } catch (e) {
        this.loading = false
      }
    },

    init() {
      const cardDom = document.getElementById('todo-card')
      const cardTitleH = 58
      const elementResize = ElementResize({
        strategy: 'scroll'
      })
      elementResize.listenTo(cardDom, (ele) => {
        this.tableHeight =
          cardDom.getBoundingClientRect().height -
          40 -
          cardTitleH
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  width: 100%;
  height: calc(100% - 58px);
}
::v-deep .ivu-table th,::v-deep .ivu-table td {
  border-bottom-style: dashed;
}
.clearfix {
  display: flex;
  align-items: center;
}
</style>
