<template>
  <div class="page-contain list-contain">
    <top-nav title="样品进度"
             :showQuery="false"></top-nav>

      <van-list v-model="loading"
                :error.sync="loadError"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                finished-text="没有更多了"
                @load="getSampleData"
                class="data-list">
        <div>
          <div v-for="(item,index) in dataList"
               :key="index"
               class="collapse-box">
            <div class="top">
              <div class="row title">
                <span class="fb">{{item.projectLineCode}}</span>
                <div @click="handleExtend(index)"
                     class="fc8CEE">
                  <span v-if="item.isExtend">收起</span>
                  <span v-else>更多</span>
                  <van-icon :name="item.isExtend?'arrow-up':'arrow-down' " />
                </div>
              </div>
              <div class="row ptb20">
                <span>PN：{{item.longsysPN}}</span>
                <span>产品PN：{{item.productPN}}</span>
              </div>
              <div class="row">
                <span>料号：{{item.num}}</span>
                <span>产品类别：{{item.projectType}}</span>
              </div>
            </div>
            <div v-show="item.isExtend"
                 class="info-box">
              <div class="info-item">
                <span class="left">容量</span>
                <span class="right">{{item.capacity}}</span>
              </div>
              <div class="info-item">
                <span class="left">FW版本</span>
                <span class="right">{{item.fwVersion}}</span>
              </div>
              <div class="info-item">
                <span class="left">样品状态</span>
                <span class="right fc8CEE">{{item.sampleStatusKey}}</span>
              </div>
              <div class="info-item">
                <span class="left">样品数量</span>
                <span class="right">{{item.sampleQuantity}}</span>
              </div>
              <div class="info-item">
                <span class="left">样品验证结果</span>
                <span class="right">{{item.checkResult}}</span>
              </div>
              <div class="info-item">
                <span class="left">补充说明</span>
                <span class="right">{{item.remark}}</span>
              </div>
              <div class="info-item">
                <span class="left">承认样品时间</span>
                <span class="right">{{item.recDate}}</span>
              </div>
              <div class="info-item">
                <span class="left">实际送样时间</span>
                <span class="right">{{item.actualDate}}</span>
              </div>
              <div class="info-item">
                <span class="left">实际小批试产</span>
                <span class="right">{{item.trialDate}}</span>
              </div>
              <div class="info-item">
                <span class="left">小批试产数量</span>
                <span class="right">{{item.trialQuantity}}</span>
              </div>
              <div class="info-item">
                <span class="left">实际量产时间</span>
                <span class="right">{{item.outputDate}}</span>
              </div>
              <div class="info-item">
                <span class="left">量产数量</span>
                <span class="right">{{item.outputQuantity}}</span>
              </div>
              <div class="info-item">
                <span class="left">样品编码</span>
                <span class="right">{{item.sampleCode}}</span>
              </div>
              <div class="info-item">
                <span class="left">子行编码</span>
                <span class="right">{{item.projectLineCode}}</span>
              </div>
              <div class="info-item">
                <span class="left">创建人</span>
                <span class="right">{{item.creater}}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>

  </div>
</template>

<script>

export default {
  name: 'sample-progress',

  created () {
    this.projectId = this.$route.params.projectId;
    this.pageSize = 0;
    // this.getSampleData()
  },
  methods: {
    getSampleData () {
      this.pageSize += 10
      let param = {
        currPage: 1,
        pageSize: this.pageSize,
        queryParam: {
          projectId: this.projectId,
          moduleId: '3101'
        }
      }

      this.$axios.post({
        domain: 'crmUrl',
        url: 'sample.listPageSampleByProjectId',
        data: param,
        requestType: 'body',
        showLoad: true,
        success: function (res) {
          if (res.errorCode === 200) {
            this.dataList = res.data.records || []
            this.total = res.data.total || 0
            this.dataList.forEach(item => {
              this.$set(item, 'isExtend', true)
            })
            if (this.dataList.length >= this.total) {
              this.finished = true
            }
          } else {
            this.loadError = true
          }
        }.bind(this),
        error: function (err) {
          this.loadError = true
        }.bind(this),
        complete: function () {
          this.loading = false
        }.bind(this)
      })
    },
    handleExtend (index) {
      this.dataList[index].isExtend = !this.dataList[index].isExtend
    }

  },
  data () {
    return {
      projectId: '',
      loading: false,
      loadError: false,
      finished: false,
      total: 0,
      pageSize: 0,
      dataList: []
    }
  }
}
</script>

<style scoped  lang="scss">
</style>
