<template>
  <div class="table-wrap">
    <el-table :data="tableData" ref="tableRef"   highlight-current-row  size="mini" stripe border >

      <el-table-column type="index" label="序号" fixed="left"  width="50" show-overflow-tooltip>
      </el-table-column>

      <el-table-column  v-for="(item, index) in colunms" :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :min-width="item.width"
          :show-overflow-tooltip="item.tooltip"
          >
      </el-table-column>

      <el-table-column prop="longsysPN" label="标准PN"   min-width="130" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.sealSample=='Y'"  class="seal">封</span>
          <span>{{scope.row.longsysPN}}</span>
        </template>
      </el-table-column>

      <el-table-column  v-for="(item, index) in colunms2" :key="index"
           :prop="item.prop"
           :label="item.label"
           :formatter="formatter"
           :class-name="item.prop =='sampleStatusKey'?'c357F':'' "
           :fixed="item.fixed"
           :min-width="item.width"
           :show-overflow-tooltip="item.tooltip"
           >
       </el-table-column>


      <el-table-column prop="checkResult"  label="样品状态"  min-width="180" >
        <template slot-scope="scope">
          <div v-if="scope.row.sampleLineStatus == 'draft' " class="c357F">{{scope.row.sampleStatusKey}}</div>
          <div v-else>
            <common-select v-model="scope.row.sampleStatus"   size="mini"  disabled
              dictType="Crm_Sample_Status"   ></common-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="actualDate"  label="实际送样时间"  min-width="150" >
        <template slot-scope="scope">
          <el-date-picker
                size="mini"
                v-model="scope.row.actualDate"
                type="date"
                :editable="false"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                disabled
                placeholder="请选择"
               >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="recDate"  label="承认样品时间"  min-width="150" >
        <template slot-scope="scope">
          <el-date-picker
                v-model="scope.row.recDate"
                size="mini"
                type="date"
                :editable="false"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                disabled
                placeholder="请选择"
               >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="checkResult"  label="样品检验结果"  min-width="130" >
        <template slot-scope="scope">
          <el-select v-model="scope.row.checkResult"
            placeholder="请选择"  size="mini" disabled  clearable>
              <el-option
                v-for="item in sampleResultList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="sealSample"  label="是否封样"  min-width="100" >
        <template slot-scope="scope">
          {{scope.row.sealSample == 'Y'?'是':'否'}}
        </template>
      </el-table-column>
      <el-table-column prop="trialDate"  label="实际小批试产时间"  min-width="150" >
        <template slot-scope="scope">
          <el-date-picker
                size="mini"
                v-model="scope.row.trialDate"
                type="date"
                :editable="false"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                disabled
                placeholder="请选择"
               >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="trialQuantity"  label="小批试产数量(pcs)"  min-width="150" >
        <template slot-scope="scope">
            <el-input
              size="mini"
              v-model="scope.row.trialQuantity"
              v-input-filter:gzero
              v-input-filter:comdify
              disabled
              placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column prop="outputDate"  label="实际量产时间"  min-width="150" >
        <template slot-scope="scope">
          <el-date-picker
                size="mini"
                v-model="scope.row.outputDate"
                type="date"
                :editable="false"
                disabled
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="请选择"
               >
          </el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="outputQuantity"  label="量产数量(pcs)"  min-width="130" >
        <template slot-scope="scope">
          <el-input
            size="mini"
            v-model="scope.row.outputQuantity"
            v-input-filter:gzero
            v-input-filter:comdify
            disabled
            placeholder="请输入" />
        </template>
      </el-table-column>
      <el-table-column prop="remark"  label="补充说明"  min-width="250" >
         <template slot-scope="scope">
            <el-input
                  v-model="scope.row.remark"
                  :maxlength="100"
                   size="mini"
                  type="textarea"
                  v-inputFilter:trim
                  disabled
                  :autosize="{ minRows: 1, maxRows: 3}"
                  show-word-limit
                  placeholder="请输入" />
         </template>
      </el-table-column>

    </el-table>
    <!-- 分页-->
    <ls-pagination :pager.sync="pager"  @query="doQuery"></ls-pagination>
  </div>
</template>

<script>
  export default {
    name: 'sample-process-table',
    created() {
      this.doQuery();
    },
    mounted() {

    },
    methods: {
      // 查询数据
      doQuery(current){
        if ( typeof current != 'undefined') {
           this.pager.curPage = current;
        }
        let param = {
          currPage: this.pager.curPage,
          pageSize: this.pager.size,
          queryParam: {
            projectId: this.projectid,
            moduleId: '3101',
          }
        };

        this.$ajax.post({
          domain: 'crmUrl',
          url: 'sample.listPageSampleByProjectId',
          data: JSON.stringify(param),
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            if (res.errorCode === 200) {
                this.tableData = res.data.records || [];
                this.pager.totals = res.data.total;
                this.tableData.forEach(item=>{
                  item.trialQuantity = this.$common.getComdifyNumber(item.trialQuantity);
                  item.outputQuantity = this.$common.getComdifyNumber(item.outputQuantity);
                })
                this.$refs.tableRef.doLayout();
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },

      formatter(row, column, cellValue, index){
        if(column.property == 'sealSample'){
             if(row.sealSample === 'Y'){
               return '是';
             } else{
               return '否';
             }
         }  else {
           return cellValue;
         }
      },


    },
    props:["projectid"],
    data() {
      return {
        //分页参数
        pager: {
          curPage: 1,
          size: 10,
          pageOptions: [10, 20, 50],
          totals: 0
        },
        tableData: [],

        colunms: [//表格列
          { prop: 'customer', label: '客户名称', width: 120, fixed: 'left', tooltip: true},
          { prop: 'projectName', label: '项目名称', width: 120, fixed: false, tooltip: true},
          { prop: 'projectCode', label: '项目编码', width: 120, fixed: false, tooltip: true},
          { prop: 'projectLineCode', label: '子行编码', width: 150, fixed: false, tooltip: true},
          { prop: 'platform', label: '芯片平台', width: 130, fixed: false, tooltip: true},
          { prop: 'chipModel', label: '芯片型号', width: 120, fixed: false, tooltip: true},
          { prop: 'samplePurposeKey', label: '样品用途', width: 100, fixed: false, tooltip: true},
          { prop: 'fwVersion', label: 'FW版本', width: 100, fixed: false, tooltip: true},

        ],
        colunms2: [
          { prop: 'productPN', label: '产品PN', width: 100, fixed: false, tooltip: true},
          { prop: 'projectType', label: '产品类别', width: 100, fixed: false, tooltip: true},
          { prop: 'capacity', label: '容量', width: 100, fixed: false, tooltip: true},
          { prop: 'applyQuantity', label: '申请数量', width: 100, fixed: false, tooltip: true},
          { prop: 'sampleQuantity', label: '样品数量', width: 100, fixed: false, tooltip: true},
          { prop: 'sampleLineCode', label: '样品行编号', width: 150, fixed: false, tooltip: true},
          { prop: 'num', label: '料号', width: 100, fixed: false, tooltip: true},
        ],

        sampleResultList: [
          {
            value: '通过',
            label: '通过'
          },
          {
            value: '未通过',
            label: '未通过'
          },
        ],

      }
    },

  }
</script>

<style  lang="scss">
 .detail-smaple-table {

  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: unset;
  }

}
 .seal {
    display: inline-block;
    // padding: 5px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #fff;
    background: #E6A23C;
    border-radius: 5px;
    margin-right: 8px;
  }
</style>
