<template>
  <div>
    <el-table :data="notices"
              ref="table"
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" >
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column prop="title" label="内容">
        <template #default="{ row }">
          <div v-if="row.remark" v-html="row.remark"></div>
          <div v-else><a>{{ row.title }}</a></div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="220" label="下发时间" prop="created_at"></el-table-column>
      <el-table-column header-align="center" align="left" width="240" label="操作">
        <template #default="{ row }">
          <el-button size="mini" type="primary" icon="el-icon-coordinate" @click="read(row)">设为已读</el-button>
          <el-button v-if="hasDataUrl(row)" size="mini" type="primary" icon="el-icon-edit-outline" @click="handle(row)">办理</el-button>
        </template>
      </el-table-column>
    </el-table>

<!--    <div style="padding: 10px;">-->
<!--      <el-pagination-->
<!--          @current-change="e => {-->
<!--            select.page = e;-->
<!--            getUsers();-->
<!--          }"-->
<!--          :current-page.sync="select.page"-->
<!--          :page-size="select.page_size"-->
<!--          layout="prev, pager, next, jumper"-->
<!--          :total="total">-->
<!--      </el-pagination>-->
<!--    </div>-->
  </div>
</template>

<script setup>
import { ipcRenderer } from "electron";
import { useUserStore } from "@/store/user";
import { useNoticeStore } from "@/store/notice";
import { ref, reactive, computed, onMounted, nextTick, onUpdated } from 'vue';
import { readNotice, readOaNotice } from "@/api/notice";
import { useRouter } from "@/hooks/use-router"

const $router = useRouter()
const userStore = useUserStore()
const noticeStore = useNoticeStore()
const total = ref(0)
const notices = computed(() => noticeStore.notice['notice'])
const loading = ref(false)
const table = ref(null)

const read = (row) => {
  if (row.hasOwnProperty("remark")) {
    readOaNotice({
      id: row.id
    })
  } else {
    readNotice({
      id: row.id
    })
  }
}
const toContract = (row) => {
  $router.push("/contract/index")
  ipcRenderer.invoke("exec-admin-view-js", `window.$router.push('/contract/contract/contractList')`)
}

const handle = row => {
  if (row.hasOwnProperty("remark")) {
    let doc = document.createRange().createContextualFragment(row.remark)?.querySelector("a")
    if (doc) {
      let uri = doc.getAttribute("data-url")
      console.log(`${uri}?auth_token=${userStore.authToken}`)
      window.open(`${uri}?auth_token=${userStore.authToken}`, '_blank');
    }
  } else {
    switch (row.type) {
      case 1:
        $router.push("/contract/index")
        ipcRenderer.invoke("exec-admin-view-js", `window.$router.push('/contract/${row.contract.is_purchase ? 'contract/contractList' : 'contractAll' }?contractId=${row.contract_id}')`)
        break;
      case 2:
        $router.push("/contract/index")
        ipcRenderer.invoke("exec-admin-view-js", `window.$router.push('/contract/contract/contractList?contractId=${row.contract_id}')`)
        break;
      case 3:
        $router.push("/contract/index")
        ipcRenderer.invoke("exec-admin-view-js", `window.$router.push('/contract/away?awayId=${row.contract_id}')`)
        break;
    }
  }
}
const hasDataUrl = computed(() => {
  return function (row) {
    return (row.remark && /data-url/g.test(row.remark)) || row.hasOwnProperty("title")
  }
})
</script>

<style scoped lang="scss">
a {
  color: #2b86c5;
}
</style>
