<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"
                         @refresh="getTransfer"
                         @showModal="d => ($refs['detailTransfer'].setData(d),$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"
                         @refresh="getTransfer"
                         @showModal="d => ($refs['detailTransfer'].setData(d),$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"
                         @refresh="getTransfer"
                         @showModal="d => ($refs['detailTransfer'].setData(d),$refs['detailTransfer'].show())"></transferBoard>
        </div>
      </div>
    </div>

    <detailTransfer ref="detailTransfer"></detailTransfer>
  </div>
</template>

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

import detailTransfer from "@/views/bigScreen/component/detailTransfer.vue";
import transferBoard from "@/views/bigScreen/component/transferBoard.vue";
export default {
  inject: ['load','cancelLoading'],
  components: {
    transferBoard,
    detailTransfer
  },
  data() {
    return {
      transferObj: [
        {
          status: 4,
          label: '待执行'
        },
        {
          status: 6,
          label: '执行中'
        },
        {
          status: -1,
          label: '已完成'
        }
      ],
      transfers1: [],
      transfers2: [],
      transfers3: [],
    };
  },
  methods: {
    async getTransfer() {
      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')}`
            }
          ]
        },false)
      ).data;
      res.forEach(i => {
        if (i.status === 2 || i.status === 3) {
          this.transfers1.push(i)
        }
        if (i.status === 4) {
          this.transfers2.push(i)
        }
        if (i.status === 6) {
          this.transfers3.push(i)
        }
      })

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

  },
  async mounted() {
    await this.getTransfer();
  },
  destroyed () {
  }
};
</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>
