<template>
  <div id="centerRight1">
    <dv-decoration-4 style="width: 10px;height: 300px;position: absolute;bottom: 30px;right: 20px;" />
    <div class="bg-color-black">
      <div
        style="width: 100%; height: 100%"
        class="d-flex pt-2 pl-4 pr-4 jc-between ai-center"
      >
        <div class="board-item">
          <dv-border-box-10 class="board-item__title fw-b">待运行</dv-border-box-10>
          <transferBoard :transfers="transfers1"
                         :set-transfer-status-number="4"
                         :content-l-k="{
                           start_time: '开启时间',
                           end_time: '关闭时间'
                         }"
                         @refresh="getTransfer(true)"
                         @showDetail="({ item, isShow }) => ($refs['detailTransfer'].readonly = isShow,$refs['detailTransfer'].setData(item),$refs['detailTransfer'].show())"></transferBoard>
        </div>
        <div class="board-item">
          <dv-border-box-10 class="board-item__title fw-b">运行中</dv-border-box-10>
          <transferBoard :transfers="transfers2"
                         :set-transfer-status-number="6"
                         :content-l-k="{
                           start_time: '开启时间',
                           act_start_time: '开启运行时间',
                           end_time: '关闭时间',
                         }"
                         @refresh="getTransfer(true)"
                         @showDetail="({ item, isShow }) => ($refs['detailTransfer'].readonly = isShow,$refs['detailTransfer'].setData(item),$refs['detailTransfer'].show())"></transferBoard>
        </div>
        <div class="board-item">
          <dv-border-box-10 class="board-item__title fw-b">已完成</dv-border-box-10>
          <transferBoard :transfers="transfers3"
                         :set-transfer-status-number="-1"
                         :content-l-k="{
                           start_time: '开启时间',
                           act_start_time: '开启运行时间',
                           end_time: '关闭时间',
                           act_end_time: '关闭运行时间',
                         }"
                         @refresh="getTransfer(true)"
                         @showDetail="({ item, isShow }) => ($refs['detailTransfer'].readonly = isShow,$refs['detailTransfer'].setData(item),$refs['detailTransfer'].show())"></transferBoard>
        </div>
      </div>
    </div>

    <detailTransfer ref="detailTransfer" @refresh="getTransfer(true)"></detailTransfer>
  </div>
</template>

<script>
import { index, save } from "@/api/system/baseForm";
import { deepCopy } from "@/utils";
import { refreshTransferTime } from "@/settings";

import detailTransfer from "@/views/bigScreen/component/detailTransfer.vue";
import transferBoard from "@/views/bigScreen/component/transferBoard.vue";
export default {
  inject: ['load','cancelLoading','showModal'],
  components: {
    transferBoard,
    detailTransfer
  },
  data() {
    return {
      forwardRefreshTime: '',
      timer: null,
      transferObj: [
        {
          status: 4,
          label: '待运行'
        },
        {
          status: 6,
          label: '运行中'
        },
        {
          status: -1,
          label: '已完成'
        }
      ],
      transfers1: [],
      transfers2: [],
      transfers3: [],
    };
  },
  methods: {
    async getTransfer(isFirst = false) {
      if (isFirst) {
        this.forwardRefreshTime = this.$moment();
        this.transfers1 = [];
        this.transfers2 = [];
        this.transfers3 = [];
        const res = (
          await index({
            table_name: "transfers",
            page: 1,
            page_size: 9999,
            filter: [
              {
                key: 'start_time',
                op: 'range',
                value: `${this.$moment().startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment().endOf('days').format('YYYY-MM-DD HH:mm:ss')}`
              },
              {
                key: 'status',
                op: 'neq',
                value: 1
              }
            ]
          },false)
        ).data;
        res.forEach(i => {
          if (i.status === 2 || i.status === 3) {
            this.transfers1.push(i)
          }
          if (i.status === 4 || i.status === 5) {
            this.transfers2.push(i)
          }
          if (i.status === 6) {
            this.transfers3.push(i)
          }
        })
      } else {
        const res = (
          (await index({
            table_name: "transfers",
            page: 1,
            page_size: 9999,
            filter: [
              {
                key: "created_at",
                op: "range",
                value: `${this.forwardRefreshTime.format('YYYY-MM-DD HH:mm:ss')},${this.$moment().format('YYYY-MM-DD HH:mm:ss')}`
              },
              {
                key: "status",
                op: "range",
                value: "2,3"
              }
            ]
          },false)
        ).data);
        if (res.length > 0) {
          const h = this.$createElement;
          this.transfers1.push(...res)
          res.forEach(item => {
            if (item.level === 2) {
              this.showModal(true,h('div',[
                h('p',item.equipment_id_equipments_id_relation?.name),
                h('p',item.content),
                h('p',`计划时间：${this.$moment(item.start_time).format('YYYY-MM-DD HH:mm')}~${this.$moment(item.end_time).format('HH:mm')}`)
              ]))
            }
          })
        }
        this.forwardRefreshTime = this.$moment()
      }


      this.cancelLoading()
    },
  },
  created() {

  },
  async mounted() {
    await this.getTransfer(true);

    this.timer = setInterval(() => {
      this.getTransfer()
    },refreshTransferTime)
  },
  destroyed() {
    clearInterval(this.timer)
  },
};
</script>

<style lang="scss" scoped>
$box-height: 810px;
$box-width: 100%;
#centerRight1 {
  padding: 16px;
  padding-top: 60px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 30px - 60px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .board-item {
    width: 31%;
    height: 100%;
    display: flex;
    flex-direction: column;

    &__title {
      width: 40%;
      height: 44px;
      text-align: center;
      font-size: 17px;
      line-height: 44px;
      flex: 0;

      margin: auto;
      margin-top: 20px;
    }
    &-container {
      overflow: hidden;
      flex: 1;

      margin-top: 20px;

      &-item {
        width: 100%;
      }
    }
  }
}

::v-deep .row-item .ceil {
  width: 100%;
}

::v-deep .box-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: 1;

  padding: 30px 12px;

  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 10px 0 10px;

    & > div:nth-child(1) {
      background: #eccb77;
      border-radius: 30px;
      color: #333;
      padding: 6px 10px;
      font-weight: 600;
    }
    & > div:nth-child(2)  {
      font-weight: 600;
      font-size: 17px;
    }
  }
  &-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 10px 10px 0 10px;

    span {
      color: $primaryColor;
    }
    & > div:nth-child(1) {
      text-align: left;
      line-height: 2;
      font-size: 16px;
      font-weight: 600;
    }
    & > div:nth-child(2) {
      cursor: pointer;
      line-height: 2;
      font-size: 15px;
      font-weight: 600;
      background: $primaryColor;
      border-radius: 8px;
      border: 2px solid rgb(119, 232, 250);

      padding: 0 8px;
    }

  }
}
</style>
