<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">
                <span
                   style="font-weight: bold"
                >{{itemInfo.entrustVO.client}}</span>
              </div>
            </li>
            <li>
              <div class="title">委托编号</div>
              <div class="cont">
                {{itemInfo.entrustVO.entrustCode}}
              </div>
            </li>
            <li>
              <div class="title">钻孔名称</div>
              <div class="cont">
                {{itemInfo.entrustVO.boreholeName}}
              </div>
            </li>
            <li>
              <div class="title">水深(米)</div>
              <div class="cont">
                {{itemInfo.entrustVO.waterDepth}}
              </div>
            </li>
            <li>
              <div class="title">委托日期</div>
              <div class="cont">
                {{$dateformat(itemInfo.entrustVO.entrustDate,'yyyy-mm-dd')}}
              </div>
            </li>
            <li>
              <div class="title">项目负责人</div>
              <div class="cont">
                {{itemInfo.entrustVO.projectLeader}}
              </div>
            </li>
            <li>
              <div class="title">项目名称</div>
              <div class="cont">
                {{itemInfo.entrustVO.projectName}}
              </div>
            </li>
            <li>
              <div class="title">钻孔位置</div>
              <div class="cont">
                {{itemInfo.entrustVO.boreholeLocation}}
              </div>
            </li>
            <li>
              <div class="title">进度</div>
              <div class="cont">
                {{itemInfo.entrustVO.progress.display}}
              </div>
            </li>
          </ul>
        </Col>
        <!--样品进度信息-->
        <Col span="18">
          <flowIndex :listInfo = itemInfo.data></flowIndex>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { soilEntrust } from '../../api'
import flowIndex from './flowIndex'
export default {
  components: { flowIndex },
  props: {
    info: null
  },
  data() {
    return {
      progressList: [],
      entrustList: [],
      formObj: {
        client: undefined,
        boreholeName: undefined
      }
    }
  },
  watch: {
    info: function(newVal, oldVal) {
      console.log('newVal===========', newVal.oldValue)
    }
  },
  methods: {
    _search() {
      this._getData()
    },
    _getData: async function() {
      const result = await soilEntrust.listSummaryQuery(
        this.$serializeForm(this.formObj)
      )
      if (result) {
        this.entrustList = result
        console.log('this.entrustList', this.entrustList)
      }
    },
    _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>
