<!--
 * @Author: zwq
 * @Date: 2022-03-07 15:31:13
 * @LastEditors: zwq
 * @LastEditTime: 2022-03-08 16:55:37
 * @Description:
-->
<template>
  <div class="main-body">
    <div class="top-title">
      <img src="../../assets/wcs/top.png" style="margin-top:-10px;width:100%">
    </div>
    <div class="top-status">
      <div style="color:#FF1F1F">
        <div class="status-circle" style="background-color:#FF1F1F" />
        Non Scheduled
      </div>
      <div style="color:#6CCE0A">
        <div class="status-circle" style="background-color:#6CCE0A" />
        Scheduled Downtime
      </div>
      <div style="color:#F54F87">
        <div class="status-circle" style="background-color:#F54F87" />
        Unscheduled Downtime
      </div>
      <div style="color:#1600FF">
        <div class="status-circle" style="background-color:#1600FF" />
        Productive
      </div>
      <div style="color:#FFB30E">
        <div class="status-circle" style="background-color:#FFB30E" />
        Engineering
      </div>
      <div style="color:#4228A9">
        <div class="status-circle" style="background-color:#4228A9" />
        Standby
      </div>
    </div>
    <div class="middle-top-jixieshou">
      <el-row :gutter="40">
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2" :offset="3">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
        <el-col :span="2">
          <img
            src="../../assets/wcs/jixieshou/Scheduled Downtime.png"
            style="width:100%"
          >
        </el-col>
      </el-row>
    </div>
    <div class="middle-guidao">
      <el-row :gutter="20">
        <el-col :span="4" :offset="4">
          <img
            src="../../assets/wcs/huoche/Engineering.png"
            style="height:117px;"
          >
        </el-col>
        <el-col :span="4" :offset="8">
          <img
            src="../../assets/wcs/huoche/Productive.png"
            style="height:117px"
          >
        </el-col>
      </el-row>
    </div>
    <div class="middle-top-jixieshou">
      <el-row :gutter="40">
        <el-col :span="2">
          <div>
            <img
              src="../../assets/wcs/jixieshou/Non Scheduled.png"
              style="width:100%"
            >
          </div>
        </el-col>
        <el-col :span="2" :offset="2">
          <div>
            <img
              src="../../assets/wcs/jixieshou/Non Scheduled.png"
              style="width:100%"
            >
          </div>
        </el-col>
        <el-col :span="2" :offset="11">
          <div>
            <img
              src="../../assets/wcs/jixieshou/Engineering.png"
              style="width:100%"
            >
          </div>
        </el-col>
        <el-col :span="2" :offset="1">
          <div>
            <img
              src="../../assets/wcs/jixieshou/Standby.png"
              style="width:100%"
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottom-table">
      <div class="bottom-table-title">
        {{ $t('module.basicData.wcs.tableTitle') }}
      </div>
      <div class="table">
        <base-table
          :page="listQuery.current"
          :limit="listQuery.size"
          :table-config="tableProps"
          :table-data="list"
          :is-loading="listLoading"
        >
          <method-btn
            slot="handleBtn"
            :method-list="tableBtn"
            @clickBtn="handleClick"
          />
        </base-table>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from './components/BaseTable'
import MethodBtn from './components/MethodBtn'
import i18n from '@/lang'

const tableBtn = [
  {
    type: 'stop',
    icon: 'icon1',
    btnName: 'btn.stop'
  },
  {
    type: 'delete',
    icon: 'icon2',
    btnName: 'btn.delete'
  }
]

const tableProps = [
  {
    prop: 'taskCode',
    label: i18n.t('module.basicData.Warehouse.taskCode'),
    align: 'center'
  },
  {
    prop: 'name',
    label: i18n.t('module.basicData.Warehouse.VehicleName'),
    align: 'center'
  },
  {
    prop: 'targetLocation',
    label: i18n.t('module.basicData.Warehouse.TargetLocation'),
    align: 'center'
  },
  {
    prop: 'FullBoxNumber',
    label: i18n.t('module.basicData.Warehouse.FullBoxNumber'),
    align: 'center'
  },
  {
    prop: 'EmptyFork',
    label: i18n.t('module.basicData.Warehouse.EmptyFork'),
    align: 'center'
  },
  {
    prop: 'TaskBoxNumber',
    label: i18n.t('module.basicData.Warehouse.TaskBoxNumber'),
    align: 'center'
  },
  {
    prop: 'ExecutionOperation',
    label: i18n.t('module.basicData.Warehouse.ExecutionOperation'),
    align: 'center'
  },
  {
    prop: 'NextOperation',
    label: i18n.t('module.basicData.Warehouse.NextOperation'),
    align: 'center'
  },
  {
    prop: 'CurrentExecutionStatus',
    label: i18n.t('module.basicData.Warehouse.CurrentExecutionStatus'),
    align: 'center'
  }
]

export default {
  name: 'DeviceMonitor',
  components: { BaseTable, MethodBtn },
  data() {
    return {
      tableBtn,
      tableProps,
      list: [],
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(raw) {
      if (raw.type === 'delete') {
        this.$confirm(`${this.$t('module.basicData.visual.TipsBefore')}[${raw.data.name}]?`, this.$t('module.basicData.visual.Tips'), {
          confirmButtonText: this.$t('module.basicData.visual.confirmButtonText'),
          cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
          type: 'warning'
        }).then(() => {
          console.log('delete')
        }).catch(() => {})
      }
    },
    getList(key) {
      this.listLoading = true
      // factoryList(this.listQuery).then(response => {
      //   if (response.data.records) {
      //     this.list = response.data.records
      //   } else {
      //     this.list.splice(0, this.list.length)
      //   }
      //   this.total = response.data.total
      this.list = [
        {
          name: 1
        },
        {
          name: 2
        }
      ]
      this.listLoading = false
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-body {
  min-height: 100%;
  width: 100%;
  background: url("../../assets/wcs/di tu.png") center no-repeat;
  background-size: cover;
  overflow: hidden;

  .top-title {
    height: 80px;
  }

  .top-status {
    width: 85%;
    margin-left: 7.5%;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #dfedf9, -1px -1px 10px #dfedf9;
    padding: 15px 0;
    margin-bottom: 10px;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
  }
  .status-circle {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
  }
  .middle-top-jixieshou {
    width: 85%;
    margin-left: 7.5%;
  }
  .middle-guidao {
    height: 208px;
    width: 90%;
    margin: 10px 5%;
    padding: 40px;
    background: url("../../assets/wcs/gui dao.png") center no-repeat;
    background-size: 100% 208px;
    overflow: hidden;
  }
  .bottom-table {
    height: 280px;
    width: 90%;
    margin: 10px 5%;
    background: url("../../assets/wcs/xia.png") center no-repeat;
    background-size: 100% 280px;
    overflow: hidden;
    text-align: center;
  }
  .bottom-table-title {
    margin-top: 15px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #030609;
    line-height: 25px;
    letter-spacing: 5px;
  }
  .table {
    width: 90%;
    margin-top: 20px;
    margin-left: 5%;
  }
}
</style>
