<template>
  <lay-container style="padding: 20px">
    <lay-row :space="10">
      <lay-col :md="24">
        <lay-card>
          <div style="padding: 10px">
            <span style="font-size: 18px;vertical-align: center;margin-right: 20px">年度考评自动公示</span>
          </div>

          <lay-table :page="page" height="600px" size="lg" @change="changePage" :columns="columns"
            :data-source="dataSource">
            <!-- <template v-slot:content="{ data }">
          <div v-html="data.content"></div>
        </template> -->
            <template v-slot:status="{ data }">
              <span v-if="data.status == 1">已发布</span>
              <span v-if="data.status == 0">已隐藏</span>
            </template>
            <template v-slot:operator="{ data }">
              <lay-space size="lg">
                <span style="color: #00A394;cursor: pointer" @click="viewDetail(data)">下载公示</span>
              </lay-space>
            </template>
          </lay-table>
        </lay-card>
      </lay-col>
    </lay-row>
  </lay-container>
</template>

<script setup lang="ts">
import {
  educationList,
  userYearData,
  automaticPublicity
} from '../../api/module/home'
import { ref, onMounted, reactive, watch, toRaw } from 'vue'
import { layer } from '@layui/layer-vue'
import { useUserStore } from '@/store/user'
const userStore = useUserStore()
import dayjs from "dayjs";
import { baseURL } from '@/api/http'
const searchAccount = ref()
// 列表数据
const dataSource = ref([]);

const viewDetail = (data: any) => {
  console.log(data)
  window.open(baseURL+"/api/backend/automatic_publicity/dailyexport?id="+data.id + '&token=' + userStore.token, '_blank')
}

// 修改分页参数定义
const page = reactive({
  current: 1,
  limit: 10,
  total: 1
});


onMounted(() => {
  getNoticeList()
});


const getNoticeList = () => {
  automaticPublicity({}).then((res: any) => {
    if (res.code == 1) {
      dataSource.value = res.data;
    } else {
      layer.msg(res.msg, { icon: 2 })
    }
  })
}

const columns = [
  {
    title: "年度",
    width: "180px",
    key: "niandu",
    align: 'center'
  },
  {
    title: "考评项目",
    width: "180px",
    key: "title",
    align: 'center'
  },
  {
    title: "考评人数",
    width: "180px",
    key: "kaopingrenshu",
    align: 'center'
  },
  {
    title: "已考评人数",
    width: "180px",
    key: "yikaopingrenshu",
    align: 'center'
  },
  {
    title: '操作',
    width: '120px',
    customSlot: 'operator',
    key: 'operator',
    align: 'center',
    fixed: 'right'
  }
]

</script>
<style scoped>
:deep(.w-e-text-container) {
  min-height: 400px !important;
}

:deep(.w-e-toolbar) {
  border: 1px solid #ddd !important;
  border-bottom: none !important;
}

:deep(.w-e-text-container) {
  border: 1px solid #ddd !important;
  border-top: none !important;
}

:deep(.ql-editor) {
  height: 300px;
  width: 100%;
}

:deep(.layui-input-block) {
  max-width: 85%;
}

:deep(.detail-content) {
  padding: 10px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* 添加视频自适应样式 */
:deep(.detail-content video) {
  max-width: 100%;
  height: auto;
}

:deep(.detail-content iframe) {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>