<template>
  <div>
    <div class="setTimeDiv">
      超时预警时间设置:
      <p-input-number v-model="time" class="setTime"></p-input-number>
    </div>
    <div class="timeCard" v-for="(items, index) in info" :key="index">
      <div class="info">
        <span class="title">容器编号:</span>
        <span class="value">{{ items.containerNo }}</span>
        <span class="title">载具编号::</span>
        <span class="value">{{ items.palletNo }}</span>
        <span class="title">任务类型:</span>
        <!-- 任务类型(0无任务,10 入库,20出库,21待出库,30搬运，40内部移位,50移动) -->
        <span class="value">{{
          items.taskType == 0
            ? '无任务'
            : items.taskType == 10
            ? '入库'
            : items.taskType == 20
            ? '出库'
            : items.taskType == 21
            ? '待出库'
            : items.taskType == 30
            ? '搬运'
            : items.taskType == 40
            ? '内部移位'
            : items.taskType == 50
            ? '移动'
            : ''
        }}</span>
        <div
          class="err"
          v-if="
            items.containerRouteTask &&
            items.containerRouteTask.find((item) => item.routeTaskState == 3 || item.routeTaskState == 2).errorMsg
          "
        >
          <span style="margin-left: 10px">警告:</span>
          <p-popover title="故障信息" placement="leftTop">
            <template slot="content">
              <div style="width: 600px">
                {{
                  items.containerRouteTask &&
                  items.containerRouteTask.find((item) => item.routeTaskState == 3 || item.routeTaskState == 2).errorMsg
                }}
              </div>
            </template>
            <span style="margin-left: 10px">
              {{
                items.containerRouteTask &&
                items.containerRouteTask.find((item) => item.routeTaskState == 3 || item.routeTaskState == 2).errorMsg
              }}
            </span>
          </p-popover>
        </div>
      </div>
      <div class="card" style="padding: 10px">
        <!-- 1 -->
        <div class="card">
          <div v-if="items.containerRouteTask" class="box">
            <a-popover>
              <template slot="content">
                <p>{{ items.containerRouteTask[0].currentAreaRemark }}</p>
              </template>
              <div>{{ items.containerRouteTask[0].currentArea }}</div>
              <div class="size">{{ items.containerRouteTask[0].currentAreaRemark }}</div>
            </a-popover>
            <!-- <div>{{ items.containerRouteTask[0].currentArea }}</div> -->
          </div>
        </div>
        <!-- 2 -->
        <div class="card" v-for="(item, index) in items.containerRouteTask" :key="index">
          <!-- {{ item.routeTaskState }} -->
          <!-- 箭头 -->

          <div class="jiantou" @click="showmodel(item)">
            <!-- <div>{{ parseInt(parseInt(new Date().getTime() - new Date(item.sendTime).getTime()) / 1000 / 60) }}</div> -->
            <!-- 已完成 -->
            <div style="width: 150px" v-if="item.routeTaskState == 4">
              <div class="updateTime"></div>
              <img class="icon" src="../icon/arrow-blue.png" alt="" />
              <div>{{ item.arriveTime ? item.arriveTime : '' }}</div>
            </div>

            <!-- 未开始 -->
            <div class="updateTime"></div>
            <img v-if="item.routeTaskState == 1" class="icon" src="../icon/arrow-gray.png" alt="" />
            <!-- 超时 -->
            <div
              v-if="
                parseInt((new Date().getTime() - new Date(item.sendTime).getTime()) / 1000 / 60) > time &&
                (item.routeTaskState == '3' || item.routeTaskState == '2') &&
                !item.errorMsg
              "
            >
              <div class="updateTime">
                <!-- {{ items.updateTime }} -->

                {{
                  toHourMinute(
                    parseInt(parseInt(new Date().getTime() - new Date(items.updateTime).getTime()) / 1000 / 60)
                  )
                }}
              </div>
              <img class="icon" src="../icon/arrow-orange.png" alt="" />
            </div>
            <div
              v-if="
                parseInt((new Date().getTime() - new Date(item.sendTime).getTime()) / 1000 / 60) < time &&
                (item.routeTaskState == '3' || item.routeTaskState == '2') &&
                !item.errorMsg
              "
            >
              <div class="updateTime">
                <!-- {{ items.updateTime }} -->

                {{
                  toHourMinute(
                    parseInt(parseInt(new Date().getTime() - new Date(items.updateTime).getTime()) / 1000 / 60)
                  )
                }}
              </div>
              <img class="icon" src="../icon/arrow-green.png" alt="" />
            </div>

            <!-- 异常 -->
            <div v-if="item.errorMsg && (item.routeTaskState == '3' || item.routeTaskState == '2')">
              <div class="updateTime">
                {{
                  toHourMinute(
                    parseInt(parseInt(new Date().getTime() - new Date(items.updateTime).getTime()) / 1000 / 60)
                  )
                }}
              </div>
              <img class="icon" src="../icon/arrow-red.png" alt="" />
            </div>
          </div>
          <!-- 内容 -->

          <div
            class="box"
            :class="[
              item.errorMsg && (item.routeTaskState == '3' || item.routeTaskState == '2') ? 'error' : '',
              item.routeTaskState == '1' ? 'unstarted' : '',
              item.sendTime &&
              parseInt((new Date().getTime() - new Date(item.sendTime).getTime()) / 1000 / 60) > time &&
              (item.routeTaskState == '3' || item.routeTaskState == '2') &&
              !item.errorMsg
                ? 'timeout'
                : '',
            ]"
          >
            {{ item.arriveTime ? item.arriveTime : '' }}
            <!-- :class="[
                item.routeTaskState == '0' ? 'normal' : '',
               item.errorMsg&&item.routeTaskState == '3'||item.routeTaskState == '3' ? 'error' : '',
                item.routeTaskState == '2' ? 'timeout' : '',
                item.routeTaskState == '1' ? 'unstarted' : ''
              ]" -->
            <!-- {{ moment.duration(moment().format('x') - moment(item.createTime).format('x')).minutes() }} -->
            <!-- {{ moment().format('x') - moment(item.createTime).format('x') }} -->
            <!-- {{ parseInt((new Date().getTime() - new Date(item.sendTime).getTime()) / 1000 / 60) }} -->

            <a-popover>
              <template slot="content">
                <p>{{ item.nextAreaRemark }}</p>
              </template>
              <div>{{ item.nextArea }}</div>
              <div class="size">{{ item.nextAreaRemark }}</div>
            </a-popover>
          </div>
        </div>
      </div>
    </div>

    <p-modal
      title="详情"
      width="80%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-descriptions bordered>
        <a-descriptions-item class="items" v-for="(item, key, index) in config.details" :key="index" :label="item">
          {{ detailData[Object.keys(config.details)[index]] }}
          <!-- {{ index }} -->
        </a-descriptions-item>
      </a-descriptions>
    </p-modal>
  </div>
</template>

<script>
import config from '../config'
import moment from 'moment'
export default {
  name: 'PBox',
  data() {
    return {
      config,
      time: 30,
      list: [],
      detailData: {},
      visible: false,
      confirmLoading: false,
    }
  },
  props: {
    info: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    info(val) {
      console.log(val)
      this.list = val.slice(1)
      console.log(this.list)
      //   return
    },
  },
  methods: {
    //转时间
    toHourMinute(minutes) {
      return Math.floor(minutes / 60) + '小时' + (minutes % 60) + '分'
      // 也可以转换为json，以方便专外部使用属
      // return {hour:Math.floor(minutes/60),minute:(minutes%60)};
    },

    showmodel(item) {
      console.log(item)

      switch (item.routeExecuteState) {
        case -1:
          item.routeExecuteState1 = '未开始'
          break
        case 0:
          item.routeExecuteState1 = '待发送'
          break
        case 10:
          item.routeExecuteState1 = '申请载具'
          break
        case 20:
          item.routeExecuteState1 = '申请载具开始'
          break
        case 30:
          item.routeExecuteState1 = '载具到位'
          break
        case 40:
          item.routeExecuteState1 = '开始绑定新载具'
          break
        case 50:
          item.routeExecuteState1 = '给设备发送移动指令'
          break
        case 60:
          item.routeExecuteState1 = '移动开始'
          break
        case 90:
          item.routeExecuteState1 = '完成'
          break
      }

      switch (item.routeTaskState) {
        case 1:
          item.routeTaskState1 = '未开始'
          break
        case 2:
          item.routeTaskState1 = '待开始'
          break
        case 3:
          item.routeTaskState1 = '进行中'
          break
        case 4:
          item.routeTaskState1 = '已完成'
          break
      }

      this.detailData = item
      this.visible = true
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
  },
}
</script>

<style scoped>
.updateTime {
  /* width: 100px; */
  height: 30px;
  text-align: center;
  /* border: 1px soloe red; */
}
.timeCard {
  margin-top: 10px;
  overflow-y: scroll;
  height: 200px;
  padding: 10px;
}
.setTimeDiv {
  float: right;
  padding: 10px;
  font-size: 15px;
  color: #1989fa;
  /* font-weight: bolder; */
}
.setTime {
  width: 100px;
}
.jiantou {
  height: 30px;
  line-height: 30px;
  margin-left: 10px;
  margin-right: 10px;
}
.err {
  margin-left: 20px;
  display: inline-block;
  background: #ed1938;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.info {
  padding: 10px;
  /* border: 1px solid pink; */
}
.size {
  /* font-size: 2px; */
  /* width: 50px; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title {
  margin-left: 20px;
  font-size: 16px;
  color: #4d4d4d;
  letter-spacing: 0;
  text-align: center;
}
.value {
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #333333;
  letter-spacing: 0;
}
.icon {
  width: 150px;
  height: 17px;
}
.card {
  /* width: 100%; */
  display: flex;
  justify-self: left;
}
.box {
  width: 150px;
  height: 90px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  background: #d1e7fe;
  border-radius: 3px;
  margin-left: 5px;
}
.normal {
  background: #d1e7fe;
  color: #1989fa;
}
.error {
  background: #ed1938;
  color: #fff;
}
.timeout {
  background: #ff7802;
  color: #fff;
}
.unstarted {
  background: #ffffff;
  border: 2px solid #e2e2e2;
  border-radius: 2px;
}
.items {
  width: 100px;
  height: 100px;
}
</style>
