<!--样品列表--->
<template>
  <div class="list-contain"
       style="background:#fff">
    <top-nav title="样品明细"></top-nav>
    <div class="data-list">
      <div class="data-item">
        <div class="row productInfo"
             style="padding:0px 10px 0px 10px;">
          <div style="border-bottom:1px solid #ebebeb;width:100%">
            <div class="left"
                 style="padding:10px 0px">
              <span class="fb">{{ codeColumms.sampleLineCode||'无编号' }}</span>
            </div>
          </div>
        </div>
        <div class="productInfo"
             style="width:100%;text-align:right;color:#008cee;padding-right:10px"><span @click="clopses">{{this.clopse?'收起':'展开'}}</span></div>
        <div v-for="(item, index) in this.data1"
             :key="index+'first'">
          <div class="row productInfo left"
               style="width:100%;display:flex">
            <div style="width:40%;">{{item.name}}：</div>
            <div class="fc666"
                 style="width:60%">{{ item.value }}</div>
          </div>
        </div>
        <div v-for="(item, index) in this.data.data2"
             :key="index+'second'">
          <div class="row left"
               :style="{width:'100%',display:'flex',paddingTop:item.key==='longsysPN'?'10px':'',borderTop:index===0?'1px solid #e9e9e9':''}">
            <div style="width:40%;">{{item.name}}：</div>
            <div class="fc666"
                 :style="{width:'60%',color:item.name==='样品状态'?'#008cee':''}">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'sample-detail',
  data () {
    return {
      clopse: false,
      codeColumms: { sampleLineCode: '' },
      columns: {
        columns1: { customer: '客户', deptName: '代理商', expectDate: '期望送样时间', custRequired: '客制要求', sampleAddr: '送样地址', deliveryArea: '交付地点', settleCharge: '收费方式', personContact: '联系人', phone: '联系电话', assistantName: '商务人员', salesName: '销售人员' },
        columns2: { longsysPN: '标准PN', applyQuantity: '申请数量', productPN: '产品PN', num: '料号', projectType: '项目类别', capacity: '容量', fwVersion: 'FW版本', platformKey: '芯片平台', chipModel: '芯片型号', sampleStatusKey: '样品状态', sampleQuantity: '送样数量', checkResult: '样品验证结果', actualDate: '实际送样时间', trialDate: '试产时间', trialQuantity: '试产数量', outputDate: '量产时间', outputQuantity: '量产数量', remarks: '补充说明' }
      },
      data1: [],
      data: { data1: [], data2: [] }
    }
  },
  created () {
    if (this.$route.params) {
      // 通过路由跳转进来
      this.codeColumms = this.$route.params
      for (let i = 1; i < 3; i++) {
        let data = []
        for (let key in this.columns['columns' + i]) {
          data.push({
            key: key,
            name: this.columns['columns' + i][key],
            value: this.$route.params[key] ? this.$route.params[key] : ''
          })
        }
        this.data['data' + i] = data
      }
      this.data1 = !this.clopse ? this.data.data1.filter((v, i) => i < 4) : this.data.data1
      this.getChargeType(this.data.data1)
    }
  },
  methods: {
    clopses () {
      this.data1 = this.clopse ? this.data.data1.filter((v, i) => i < 4) : this.data.data1
      this.clopse = !this.clopse
    },
    // 查询收费方式
    getChargeType (secondData) {
      this.$axios.get({
        domain: 'dictUrl',
        url: 'dict.datalist',
        data: {
          busSystem: 'cloud-crm-project',
          dictSign: 'Crm_Free_Settlement'
        },
        success: function (res) {
          if (res.success) {
            let data = res.data || []
            if (data.length !== 0 && secondData.length !== 0) {
              secondData.map(v => {
                let find = data.find(m => m.vaule === v.value)
                if (find) {
                  v.value = find.key
                }
              })
            }
          } else {
            this.$toast.fail(res.msg)
          }
        }.bind(this),
        error: function (res) {
          this.$toast.fail(res.msg)
        }.bind(this)
      })
    }
  }
}
</script>
<style scoped lang="scss">
/deep/.list-contain .van-nav-bar__right {
  visibility: hidden !important;
}
.data-item {
  border-radius: 5px !important;
  padding: 0px !important;
  .left {
    padding: 0px 20px;
  }
}
.productInfo {
  background: #f9f9f9;
}
</style>
