<template>
  <div  class="ls-vertical">
    <navbar icon="pm" title="样品列表" :buttons="btns"  @clickbutton="clickbtn"></navbar>
    <sample-list-search @query="doQuery" ref="searchRef" ></sample-list-search>
    <div class="ls-container sample-list" style="overflow: hidden;" >

      <div  class="ls-btn-row" >
        <div class="left">
          <img src="@/assets/img/public/icon-list.png" />
          <span >列表</span>
        </div>
        <div>
          <el-button @click="samplyApply" type="primary"  size="mini" icon="el-icon-plus">样品申请</el-button>
        </div>
      </div>

      <div  class="ls-table-warp">
        <el-table :data="tableData"
          @cell-dblclick="cellDblclick"
          :cell-style="cellStyle"
          highlight-current-row
          ref="tableRef"
          size="mini" stripe  height="100%" class="smaple-table" >

          <el-table-column type="index" label="序号" width="60" fixed="left" 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="statusKey" fixed="right" label="审批状态" :formatter="formatter"  min-width="100" show-overflow-tooltip>  </el-table-column>
          <el-table-column  label="操作" fixed="right"  min-width="120"  show-overflow-tooltip>
             <template slot-scope="scope">
              <el-button v-if="scope.row.status=='draft' " @click="handleEdit(scope.row, 'line')"
                   type="text" size="mini">编辑</el-button>
              <el-button v-if="scope.row.status=='draft' " @click="handleDelete(scope.row)"
                   type="text" size="mini">删除</el-button>
              <el-button v-if="scope.row.status !='draft' " type="text" size="mini"
                  @click="handleDetail(scope.row, scope.row.sampleImportId?'item':'line')"
                   >详情</el-button>
               <el-button v-if="scope.row.status=='audited' && !scope.row.sampleImportId" @click="handleUpdate(scope.row, 'line')"
                          type="text" size="mini">变更</el-button>
             </template>
          </el-table-column>

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

    </div>

  </div>
</template>

<script>

  import sampleListSearch from './components/sample-list-search.vue'

  export default{
    name: 'sample-lisk',
    components:{
      sampleListSearch,
    },
    created(){

    },
    mounted(){
      // this.doQuery();
    },
    activated(){
      this.doQuery();
    },
    methods:{

      doQuery(current){
        if ( typeof current != 'undefined') {
           this.pager.curPage = current;
        }
        let param = {
          currPage: this.pager.curPage,
          pageSize: this.pager.size,
          queryParam: {}
        };

        Object.assign(param.queryParam, this.$refs.searchRef.queryParam );

        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;
                debugger;
              if(this.tableData.length){
                this.getProcessApprove(this.tableData);
              }
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },
      //样品申请
      samplyApply(){
        this.$router.push({name: 'sampleApply', params: {backRouteUrl: 'sampleList'} });
      },
      handleEdit(row, flag){
        this.$router.push({name: 'sampleApply', params: {id: row.id, flag, backRouteUrl: 'sampleList'} });
      },
      handleUpdate(row,flag){
        this.$router.push({name: 'sampleApply', params: {id: row.id, flag, backRouteUrl: 'sampleList',isChange:true} });
      },
      handleDetail(row, flag){
        this.$router.push({
          name: 'sampleApply',
          params: {
            id: row.sampleImportId ? row.sampleImportId : row.id,
            flag: flag,
            disabledForm: row.sealSample =='Y' || !row.sampleImportId ? true : false,
            backRouteUrl: 'sampleList',
          },
        });
      },
      handleDelete(row){

        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

            this.$ajax.post({
              domain: 'crmUrl',
              url: 'sampleImport.deleteSampleLine',
              data: {id: row.id},
              requestType: 'body',
              showLoad: true,
              success: function (res) {
                if (res.errorCode === 200) {
                  this.$message.success('删除成功');
                  this.doQuery();
                }
              }.bind(this),
              error: function (res) {
                this.$message({
                  type: 'error',
                  message: res.body.msg || res.msg
                })
              }.bind(this)
            })

        }).catch(() => { });

      },
      cellDblclick(row, column, cell, event){
        debugger;
        if( row.status == 'draft'){
            this.$router.push({name: 'sampleApply', params: {id: row.id, flag: 'line', backRouteUrl: 'sampleList'} });
          } else if(row.status != 'draft'){
            this.$router.push({
              name: 'sampleApply',
              params: {
                id: row.sampleImportId ? row.sampleImportId : row.id,
                flag: row.sampleImportId ? 'item' : 'line',
                disabledForm: true,
                backRouteUrl: 'sampleList',
              },
            });
          }
      },
      // 查询流程审批人
      getProcessApprove(list) {
        let ary = [];
        list.forEach(item=>{
          if(item.status == 'rejected' || item.status == 'auditing' ){
            if(item.processId){
              ary.push({processId: item.processId});
            }
          }
        })
        debugger;
        if(!ary.length){ return };

        this.$ajax.post({
          domain: 'crmUrl',
          url: 'process.getProcessApprove',
          data: ary,
          requestType: 'body',
          showLoad: false,
          success: function (res) {
            if (res.errorCode === 200) {
              this.approverList = res.data;

              this.tableData.forEach(item=>{
                if(item.status == 'rejected' || item.status == 'auditing' ){
                  for(let el of this.approverList){
                    if(item.processId === el.processId){
                      this.$set(item, 'approver', el.approver );
                      break;
                    }
                  }
                } else {
                  this.$set(item, 'approver', '' );
                }
              })
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })
      },
      cellStyle({row, column, rowIndex, columnIndex}){
        if(column.label === '审批状态' ){
          if(row.status ==='canceled'){
            return 'color: #909399;';
          } else if(row.status === 'audited'){
            return 'color: #67C23A;';
          } else if(row.status ==='rejected'){
            return 'color: #F56C6C;';
          } else if( row.status ==='auditing'){
            return 'color: #409EFF;';
          } else {
            return '';
          }
        }
      },
      formatter(row, column, cellValue, index){
        if(column.property == 'checkResult'){
             if(!row.checkResult){
               return '-';
             } else {
               return row.checkResult;
             }
         }else if(column.property == 'statusKey'){
          if(row.approver ){
            return row.statusKey + " (" + row.approver +")" ;
          } else {
            return row.statusKey;
          }
        } else  if(column.property == 'sampleStatusKey'){
             if(!row.sampleStatusKey){
               return '待送样';
             } else {
               return row.sampleStatusKey;
             }
         } else if(column.property == 'sealSample'){
             if(row.sealSample === 'Y'){
               return '是';
             } else{
               return '否';
             }
         } else if(column.property == 'trialQuantity'){
           return this.$common.getComdifyNumber(row.trialQuantity);
         } else if(column.property == 'outputQuantity'){
           return this.$common.getComdifyNumber(row.outputQuantity);
         }
         else {
           return cellValue;
         }
      },
      // 导航栏按钮操作
      clickbtn  (type) {
        switch (type) {
          case 'refresh':
            this.doQuery(1);
            break;
        }
      },
    },
    data(){
      return {
        btns: [
          {
            title: '',
            btnEvent: 'refresh',
            size: '',
            circle: 'circle',
            type: 'refresh',
            show: true,
            icon: ''
          }
        ],
        approverList: [],
        tableData: [],

        //分页参数
        pager: {
          curPage: 1,
          size: 10,
          pageOptions: [10, 20, 30],
          totals: 0
        },
        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: 'platformKey', label: '芯片平台', width: 130, fixed: false, tooltip: true},
          { prop: 'chipModelKey', label: '芯片型号', width: 120, fixed: false, tooltip: true},
          { prop: 'itemLevel', label: '产品等级', width: 100, 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: 'sampleLineCode', label: '样品行编号', width: 150, fixed: false, tooltip: true},
         { prop: 'num', label: '料号', width: 100, fixed: false, tooltip: true},
         { prop: 'sampleStatusKey', label: '样品状态', width: 120, fixed: false, tooltip: true},
         { prop: 'actualDate', label: '实际送样时间', width: 120, fixed: false, tooltip: true},
         { prop: 'recDate', label: '承认样品时间', width: 120, fixed: false, tooltip: true},
         { prop: 'checkResult', label: '样品检验结果', width: 120, fixed: false, tooltip: true},
         { prop: 'sealSample', label: '是否封样', width: 100, fixed: false, tooltip: true},
         { prop: 'trialDate', label: '实际小批试产时间', width: 150, fixed: false, tooltip: true},
         { prop: 'trialQuantity', label: '小批试产数量', width: 120, fixed: false, tooltip: true},
         { prop: 'outputDate', label: '实际量产时间', width: 120, fixed: false, tooltip: true},
         { prop: 'outputQuantity', label: '量产数量', width: 120, fixed: false, tooltip: true},
         { prop: 'remark', label: '补充说明', width: 120, fixed: false, tooltip: true}
        ],


      }
    }
  }
</script>

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

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