<template>
  <div>
    <!-- <div class="setTimeDiv">
      超时预警时间设置:
      <p-input-number v-model="time" class="setTime"></p-input-number>
    </div> -->
    <div>
      <div class="timeCard" v-for="(items, index) in info" :key="index">
        <div class="info">
          <div class="title_left">
            <div>
              <div :class="{'v-pie yellow':items.taskType == 10,'v-pie blue':items.taskType == 20,'v-pie green':items.taskType == 30}"></div>
              <div>
                {{
                  items.taskType == 0
                    ? '无任务'
                    : items.taskType == 10
                    ? '入库'
                    : items.taskType == 20
                    ? '出库'
                    : items.taskType == 21
                    ? '待出库'
                    : items.taskType == 30
                    ? '搬运'
                    : items.taskType == 40
                    ? '内部移位'
                    : items.taskType == 50
                    ? '移动'
                    : ''
                }}
              </div>
            </div>
            <span class="title">容器编号</span>
            <span class="value">{{ items.containerNo }}</span>
            <span class="title">TASKID</span>
            <span class="value">{{ items.taskNo }}</span>
          </div>
          <div class="title_right">
            <div class="err_msg" 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>
        <div class="card">
          <!-- 1 -->
          <div class="card">
            <div v-if="items.containerRouteTask" class="box">
              <div class="blue">
                <div>
                  <div><a-icon type="check-circle" /></div>
                  <div>{{ items.containerRouteTask[0] | routeTaskState }}</div>
                </div>
                <div>{{ items.containerRouteTask[0].currentAreaRemark }}</div>
              </div>
              <div>{{ items.containerRouteTask[0].currentArea }}</div>
              <div>{{ items.containerRouteTask[0].currentLocation }}</div>
              <div>{{ items.containerRouteTask[0].createTime ? items.containerRouteTask[0].createTime : '' }}</div>
              <div>{{ items.containerRouteTask[0].arriveTime ? items.containerRouteTask[0].arriveTime : '' }}</div>
            </div>
          </div>
          <!-- 2 -->
          <div class="card" v-for="(item, index) in items.containerRouteTask" :key="index">
            <!-- 内容 -->
            <div class="box">
              <div
                :class="{
                  gray: item.routeTaskState == 1,
                  red: item.routeTaskState == 2,
                  yellow: item.routeTaskState == 3 && item.routeExecuteState == 50,
                  orange: item.routeTaskState == 3 && item.routeExecuteState == 60,
                  blue: item.routeTaskState == 4
                }"
              >
                <div>
                  <div>
                    <!-- 未开始 -->
                    <a-icon type="play-circle" v-if="item.routeTaskState == 1" />
                    <!-- 未发送 -->
                    <a-icon type="exclamation-circle" v-if="item.routeTaskState == 2" />
                    <!-- 异常 -->
                    <a-icon type="warning" v-else-if="item.errorMsg && item.routeTaskState == 2" />
                    <!-- 已发送但未开始 -->
                    <a-icon type="alert" v-if="item.routeTaskState == 3 && item.routeExecuteState == 50" />
                    <!-- 任务进行中 -->
                    <a-icon type="clock-circle" v-if="item.routeTaskState == 3 && item.routeExecuteState == 60" />
                    <!-- 异常 -->
                    <a-icon type="warning" v-else-if="item.errorMsg && item.routeTaskState == 3" />
                    <!-- 已完成 -->
                    <a-icon type="check-circle" v-if="item.routeTaskState == 4" />
                  </div>
                  <div>{{ item | routeTaskState }}</div>
                </div>
                <div>{{ item.nextAreaRemark }}</div>
              </div>
              <div>{{ item.nextArea }}</div>
              <div>{{ item.nextLocation }}</div>
              <div>{{ item.createTime ? item.createTime : '' }}</div>
              <div>{{ item.arriveTime ? item.arriveTime : '' }}</div>
            </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>
  </div>
</template>

<script>
import './box.css';
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
    }
  },
  filters: {
    routeTaskState(item) {
      if (item.routeTaskState == 1) {
        return '未开始';
      } else if (item.routeTaskState == 2) {
        return '未发送';
      } else if (item.routeTaskState == 3 && item.routeExecuteState == 50) {
        return '已发送但未开始';
      } else if (item.routeTaskState == 3 && item.routeExecuteState == 60) {
        return '任务执行中';
      } else if (item.routeTaskState == 4) {
        return '已完成';
      } else if (item.errorMsg && (item.routeTaskState == '3' || item.routeTaskState == '2')) {
        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>
