<template>
  <div>
    <div v-for="(itemInfo, index) in info" :key="index" class="contract-box">
      <Row>
        <!--样品信息-->
        <Col span="6">
          <ul class="progress-ul">
            <li>
              <div class="title">样品编号</div>
              <div class="cont">
                <a
                   :class="{
                 'blue-color':itemInfo.queryType === 0,
                 'green-color':itemInfo.queryType === 1,
                  'red-color':itemInfo.queryType === 2,
                 'warning-color':itemInfo.queryType === 3
                 }"
                   style="font-weight: bold"
                >{{itemInfo.sampleCode}}</a>
              </div>
            </li>
            <li>
              <div class="title">试验名称</div>
              <div class="cont">
                {{itemInfo.name}}
              </div>
            </li>
            <li>
              <div class="title">钻孔编号</div>
              <div class="cont">
                {{itemInfo.boreholeName}}
              </div>
            </li>
          </ul>
        </Col>
        <!--样品进度信息-->
        <Col span="18">
          <ProgressList :progressList="[{name:'已分配',time:itemInfo.allotTime,user:itemInfo.alloter},
        {name:'检测完成',time:itemInfo.testEndTime,user:itemInfo.testEnder},{name:'已复核',time:itemInfo.checkTime,user:itemInfo.checker},
        {name:'已审核',time:itemInfo.auditTime,user:itemInfo.auditor}]"
                        :state="itemInfo.progressIndex"></ProgressList>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import ProgressList from '../../../components/statistic/ProgressList'

export default {
  components: { ProgressList },
  props: {
    info: null
  },
  data() {
    return {
      progressList: [],
      sampleInfo: []
    }
  },
  watch: {
    info: function(newVal, oldVal) {
      console.log('newVal===========', newVal.oldValue)
    }
  },
  mounted() {
    this._console(this.info)
  },
  methods: {
    _sampleClick(data) {
      // 样品详情
      this.$refs.detail._open(data)
    },
    _console(info) {
      console.log('info', info)
    }
  }
}
</script>
<style>
.progress-ul li {
  border: 1px solid #ddd;
  overflow: hidden;
}
.progress-ul li .title {
  padding: 13px;
}
.progress-ul li .title {
  width: 35%;
  background: #eee;
  padding: 13px;
  border-right: 1px solid #ddd;
  float: left;
}
.progress-ul li .cont {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 15px;
  padding-left: 15px;
  float: left;
  width: 65%;
}
.contract-box {
  margin: 10px 0;
}
.contract-box {
  border: 1px solid #dcdcdc;
}
</style>
