<template>
  <a-modal title="清运详情" :footer="null" v-model="isShow" @cancel="cancel" centered>
    <div class="detail-item" v-for="item in itemData" :key="item.index"><span>{{ item.rubbishType }}：</span>{{ (item.cleanWeight/1000).toFixed(2) }} kg</div>
  </a-modal>
</template>

<script>
import { getCleanDetails } from '@/api/cleanManage.js'
export default {
  name: 'CleanDetailModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deviceNo: {
      type: [Number, String],
      default: ''
    },
    cleanTime: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.visible,
      itemData: []
    }
  },
  methods: {
    cancel (e) {
      this.$emit('close')
    },
    getDetailInfo () {
      getCleanDetails({ deviceNo: this.deviceNo, cleanDate: this.cleanTime }).then(res => {
        this.itemData = res.data
      })
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        this.getDetailInfo()
      }
    }
  }
}

</script>

<style lang="less" scoped="scoped">
	.detail-item{
		margin:10px 0;
		letter-spacing: 0.5px;
		span{
			display: inline-block;
			text-align: right;
			width: 50%;
			font-weight:normal
		}
	}
</style>
