<template>
  <div class="SilkRoadData">
    <div class="topImg" v-if="width">
      <van-image
        :width="width"
        :height="height"
        @load="load"
        :src="isOnlyDay"
      />
      <span class="days" :style="'font-size:' + fontSizeFunc() + 'px'">{{
        times.join(' 到 ')
      }}</span>
    </div>

    <van-cell-group inset>
      <template #title> </template>
      <div
        class="mainCell"
        style="margin-top: 0.5em"
        v-for="(item, index) in centerList"
        :key="item.centerName + 'c' + index"
      >
        <div class="headTitle" v-text="item.centerName"></div>
        <div class="label">
          <div class="label-left" :style="'font-size:' + fontSizeFunc() + 'px'">
            <van-row>
              <van-col span="9"> 及时实发/应发(件) </van-col>
              <van-col span="9"> 实发/应发(件) </van-col>
              <van-col span="6">传播量(次)</van-col>
            </van-row>
            <van-row>
              <van-col span="9">
                {{ item.publishNum | formmate }} /
                {{ item.taskNum | formmate }}
              </van-col>
              <van-col span="9">
                {{ item.onTimeNum | formmate }} /
                {{ item.taskNum | formmate }}
              </van-col>
              <van-col span="6">{{ item.readNum | formmate }}</van-col>
            </van-row>
            <van-row>
              <van-col span="9">及时完成率</van-col>
              <van-col span="9">完成率</van-col>
            </van-row>
            <van-row>
              <van-col span="9">
                {{ ((item.onTimeNum / item.taskNum).toFixed(2) - 0) * 100 }}%
              </van-col>
              <van-col span="9">
                {{ ((item.publishNum / item.taskNum).toFixed(2) - 0) * 100 }}%
              </van-col>
            </van-row>
          </div>
          <van-button
            style="vertical-align: middle"
            size="small"
            hairline
            plain
            type="primary"
            @click="() => toDetail(item)"
          >
            查看详情
          </van-button>
        </div>
      </div>
    </van-cell-group>
  </div>
</template>

<script>
import { getSilkRoadData } from '@/api/index.js';
import watermark from 'watermark-package';
import report from '../mixin/index.js';
import {
  Image as VanImage,
  CellGroup as VanCellGroup,
  Button as VanButton,
  Col as VanCol,
  Row as VanRow,
} from 'vant';
import 'vant/lib/col/style/index';
import 'vant/lib/row/style/index';
import 'vant/lib/image/style/index';
import 'vant/lib/cell-group/style/index';
import 'vant/lib/button/style/index';

export default {
  name: 'SilkRoadData',
  data() {
    return {
      width: 0,
      height: 0,
      times: [],
      centerList: [],
      isOnlyDay: undefined,
    };
  },
  props: ['type', 'time'],
  mixins: [report],
  watch: {},
  mounted() {},
  computed: {},
  filters: {
    formmate(num) {
      if (isNaN(num)) return 0;
      if (num >= 100000000) return (num / 100000000).toFixed(2) - 0 + '亿';
      if (num >= 10000) return (num / 10000).toFixed(2) - 0 + '万';
      return num.toFixed(0) - 0;
    },
  },
  methods: {
    init() {
      watermark.setWaterMark({
        w_texts: ['陕西视听大数据'],
        w_options: {
          w_opacity: '0.1',
        },
      });
      // this.$route.params.date --> default 日期可选  orther  根据传入日期
      this.width = document.body.clientWidth;
      console.log(this.width / 20);
      this.height = (this.width / 16) * 9;
      let times = (this.$route.params.time || '').split('+');
      if (times.length > 1 && times[0] === times[1]) times = [times[0]];
      this.times = times;
      this.title =
        document.title + (this.times.length > 1 ? '累计报表' : '日报表');
      document.title = this.title;
      //   console.log(window.matchMedia('(prefers-color-scheme: dark)'));
      if (this.times.length > 1)
        this.isOnlyDay = require('@/assets/image/2023slcw.jpg');
      else this.isOnlyDay = require('@/assets/image/2023slcw-day.jpg');
      getSilkRoadData({
        start: this.times[0],
        end: this.times.length > 1 ? this.times[1] : this.times[0],
      }).then(r => {
        this.centerList = r || [];
      });
    },
    load(e) {
      if (!e.path || !e.path.length) return;
      const ele = e.path[0];
      this.height = this.width * (ele.naturalHeight / ele.naturalWidth);
    },
    toDetail(item) {
      this.$router.push({
        path: `/SilkRoadDetail/${item.centerName}/${this.$route.params.time}?auto=${this.$route.query.auto}`,
      });
    },
    fontSizeFunc() {
      let size = this.width / 30;
      if (size > 18) return 18;
      if (size < 12) return 12;
      return size;
    },
  },
  beforeUnmount() {},
  components: {
    VanCol,
    VanRow,
    VanImage,
    VanButton,
    VanCellGroup,
  },
};
</script>

<style scoped>
.SilkRoadData {
  width: 100%;
  height: 100%;
  font-size: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #eee;
  box-sizing: border-box;
  padding-bottom: 0.5em;
}

.SilkRoadData .mainCell {
  padding: 0.5em;
  font-weight: 500;
}

.SilkRoadData .headTitle {
  padding: 0 0 0.5em 0;
}

.SilkRoadData .label {
  line-height: 1.5em;
  text-align: center;
  color: #969799;
  white-space: nowrap;
}
.SilkRoadData .label-left {
  display: inline-block;
  width: calc(100% - 64px);
  vertical-align: middle;
}

.SilkRoadData .topImg {
  position: relative;
  width: 100%;
}
.SilkRoadData .days {
  position: absolute;
  left: 5%;
  top: 72%;
  color: #ffffff;
}
</style>
