<template>
  <section class="AppCentralTaskDV">
    <!--    <ai-dv-background :src="bgImage"/>-->
    <div class="coreTask">
      <div class="leftBox">
        <div class="boxTitle">{{ coreTaskData.titleText }}</div>
        <dv-scroll-board v-if="refresh" :config="coreTaskData"/>
      </div>
    </div>
  </section>
</template>

<script>
import {scrollBoard} from '@jiaminghi/data-view'
import bgImage from '../assets/centralTask/bg.png'
import Vue from "vue";

Vue.use(scrollBoard)
export default {
  name: "AppCentralTaskDV",
  label: "数据大屏-重点工作",
  props: {
    nav: {default: () => ({})}
  },
  inject: {
    dv: {default: ""}
  },
  computed: {
    coreTaskData() {
      return {
        headerHeight: 52,
        header: ['基层组织建设', "社区治理", "便民服务效能", "城市管理"],
        headerBGC: 'rgba(0, 113, 255, 0.5)',
        oddRowBGC: "rgba(5, 65, 139, 0.5)",
        evenRowBGC: "rgba(5, 65, 139, 0.5)",
        waitTime: 6000,
        align: ["center", "start", "center", "center"],
        rowNum: 5,
        ...this.nav.data,
      }
    },
  },
  data() {
    return {bgImage, refresh: true}
  },
  watch: {
    nav: {
      deep: true,
      handler() {
        this.refresh = false
        this.$nextTick(() => this.refresh = true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.AppCentralTaskDV {
  height: 100%;
  padding: 0 0 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .coreTask {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 53px;
    margin-top: 56px;

    .leftBox {
      width: 100%;
      height: 100%;
      background-image: url("../assets/centralTask/box.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 40px 42px;
      box-sizing: border-box;
    }
  }

  .boxTitle {
    height: 68px;
    width: 534px;
    background-image: url("../assets/centralTask/titleBox.png");
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    color: #71F8FF;
    transform: translateY(-32px);
    line-height: 68px;
  }

  ::v-deep .dv-scroll-board {
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 6px;
    overflow: hidden;

    .header {
      color: #9FDBFB;
      font-size: 20px;

      .header-item {
        text-align: center;
        border: 1px solid #054596;
      }
    }

    .row-item {
      color: #68F0FC;
      font-size: 18px;
      overflow: hidden;

      .ceil {
        border: 1px solid #054596;
        border-top: none;
        position: relative;
        line-height: 30px;
        white-space: normal;
        padding: 20px;
      }
    }
  }
}
</style>
