<template>
  <div :class="classObj" @click="showModal">
    <div class="exportNo">{{singleData.targetLocation}}</div>
    <div class="exportMsg">
      <div class="left">{{singleData.rosterCarOrderNo}}</div>
      <div class="right" v-show="singleData.isComplete==1">集货完成</div>
      
    </div>
    <div class="orderMsg">
      <div class="left">{{singleData.titleName}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
        confirmLoading: false,
        transferdata: [],

      };
    },
    props: {
      singleData: {
        type: Object,
        default: null
      }
    },
    updated() {
      console.log(this.singleData)
    },
    computed: {
      classObj() {
        return {
          card: this.singleData.rosterCarOrderNo != "",
          unexist: this.singleData.rosterCarOrderNo == "",
        };
      },
    },
    methods: {
      showModal() {
        if(this.singleData.rosterCarOrderNo==""){
          this.$message.error('当前出库口无任务')
          return;
        }
        
        this.$router.push({path: '/EIS/project/lppz/monitoring/sxexportmonitor/components/singleexportmonitor/index.vue', query: {targetLocation: this.singleData.targetLocation,isComplete: this.singleData.isComplete}});
      },
      
      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>
  .card {
    border-radius: 8px;
    width: 220px;
    height: 120px;
    border: 2px solid #797979;
    background: #17A6DD;
    position: relative;
    margin: 10px;
    overflow: hidden;
  }
  

  .card .exportNo {
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
    transform: translate(-50%, -50%);
  }

  .card .exportMsg {
    font-size: 14px;
    font-weight: bold;
    width: 220px;
    top: 0px;
    position: absolute;
    float: left;
  }

  .exportMsg>.left {
    float: left;
    margin: 3px;
  }
  
  .exportMsg>.right {
    float: right;
    margin-right: 8px;
    margin-top: 3px;
    color: ghostwhite;
    
    
  }

  .card .orderMsg {
    font-size: 14px;
    font-weight: bold;
    width: 220px;
    bottom: 0px;
    position: absolute;
    float: left;
  }


  .unexist {
    border-radius: 8px;
    width: 220px;
    height: 120px;
    border: 2px solid #797979;
    position: relative;
    margin: 10px;
    overflow: hidden;
  }

  .unexist .exportNo {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
    transform: translate(-50%, -50%);
  }

  .unexist .exportMsg {
    font-size: 14px;
    font-weight: bold;
    width: 220px;
    bottom: 0px;
    position: absolute;
    float: left;
  }
</style>
