<template>
  <div class="delists_wrap">
    <div class="block_wrap">
      <el-form label-width="100px" :form="queryForm" size="small" class="layout_conditional">
        <el-form-item label="取样时间">
          <el-date-picker
            v-model="queryForm.date"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="顺序号">
          <el-input v-model="queryForm.number" clearable></el-input>
        </el-form-item>
        <el-form-item label="样品编号">
          <el-input v-model="queryForm.sample" clearable></el-input>
        </el-form-item>
        <el-form-item label="班次">
          <el-select v-model="queryForm.shift" placeholder="请选择" clearable>
            <el-option key="早班" label="早班" value="早班"></el-option>
            <el-option key="晚班" label="晚班" value="晚班"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分厂">
          <el-select v-model="queryForm.branchName" placeholder="请选择" clearable>
            <el-option
              v-for="item in branchObj.branch"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样品分类">
          <el-select v-model="queryForm.sampleType" placeholder="请选择" clearable>
            <el-option
              v-for="item in branchObj.sampleTypes"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="样品名称">
          <el-select v-model="queryForm.sampleName" placeholder="请选择" clearable>
            <el-option
              v-for="item in branchObj.sampleTemplateInfoVOS"
              :key="item.sampleName"
              :label="item.sampleName"
              :value="item.sampleName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="flex_last">
          <el-button type="primary" size="small" class="btn_check" @click="handleQuery('查询')">查询</el-button>
          <el-button class="btn_reset" size="small" @click="handleQuery('重置')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout_table block_wrap">
      <div class="header_wrap">
        <h3>取样登记列表</h3>
        <div class="header_right_wrap">
          <el-button type="primary" @click="handleEditTable('批量新增')" size="small" icon="el-icon-plus">批量新增</el-button>
          <el-button type="primary" @click="handleEditTable('新增')" size="small" icon="el-icon-plus">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" class="production_wrap" :cell-class-name="addClass" style="width: 100%" v-loading="loading">
        <el-table-column
          width="60"
          prop="shiftCode"
          label="班次">
        </el-table-column>
        <el-table-column
          width="160"
          prop="samplingTime"
          label="取样时间">
        </el-table-column>
        <el-table-column
          width="70"
          prop="number"
          label="顺序号">
        </el-table-column>
        <el-table-column
          width="160"
          prop="sample"
          label="样品编号">
        </el-table-column>
        <el-table-column
          width="100"
          prop="licensePlate"
          label="车牌号">
        </el-table-column>
        <el-table-column
          width="140"
          prop="supplier"
          label="供货单位">
        </el-table-column>
        <el-table-column
          width="160"
          prop="branchName"
          label="所属分厂">
        </el-table-column>
        <el-table-column
          prop="sampleType"
          label="样品分类">
        </el-table-column>
        <el-table-column
          prop="sampleName"
          label="样品名称">
        </el-table-column>
        <el-table-column
          width="140"
          prop="address"
          label="取样地点">
        </el-table-column>
        <el-table-column
          width="140"
          prop="sampler"
          label="取样人">
        </el-table-column>
        <el-table-column
          width="140"
          prop="handover"
          label="交接人">
        </el-table-column>
        <el-table-column
        width="160"
          prop="remark"
          label="备注">
          <template slot-scope="scope">
            <span v-if="!scope.row.remark">
              {{ scope.row.remark }}
            </span>
            <el-popover v-else width="300" class="reference" placement="bottom" trigger="hover" :content="scope.row.remark">
              <div style="width:100%;height:100%;overflow:hidden" slot="reference">{{ scope.row.remark }}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="检验进度">
          <template slot-scope="scope">
            <!-- 已检的检验项数/检验项总数 -->
            <span>{{ scope.row.finish }} / {{ scope.row.altogether }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="检验状态">
        </el-table-column>
        <el-table-column
          width="165"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-link @click="handleEditTable('编辑', scope.row)" type="primary" v-if="scope.row.status === '待检'">编辑</el-link>
            <el-link @click="handleEditTable('查看', scope.row)" type="primary" v-else>查看</el-link>
            <el-popconfirm title="确认删除该条数据？" @onConfirm="handledeleteTable(scope.row)" v-show="scope.row.status === '待检'">
              <el-link slot="reference" type="primary">删除</el-link>
            </el-popconfirm>
            <el-popconfirm title="确认作废该条数据？" @onConfirm="handletoVoidTable(scope.row)" v-show="scope.row.isFlag === 1">
              <el-link slot="reference" type="primary">作废</el-link>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="pagination"
        :current-page.sync="pageObj.pageNum"
        @size-change="handleSizeChange"
        @current-change="paginationChange"
        background
        :page-sizes="[10, 20, 40, 100, 200]"
        :page-size="pageObj.pageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageObj.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/business/laboratory/samplRegistration/index'
import moment from 'moment'
export default  {
  data() {
    return {
      loading: false,
      queryForm: {
        date: null, // 取样时间
        number: null, // 顺序号
        sample: null, // 样品编号
        branchName: null, // 所属分厂
        sampleType: null, // 样品分类
        sampleName: null, // 样品名称
        shift: null // 班次
      },
      query: {},
      tableData: [],
      pageObj: {
        pageSize: 20,
        pageNum: 1,
        total: 0
      },
      branchObj: {}
    }
  },
  created () {
    this.getList(this.query) // 获取列表
    this.branchFactory() // 所属分厂三联动
  },
  methods: {
    addClass({
      row,
      column,
      rowIndex,
      columnIndex
    }) {
      //第八列添加 red 类
      if (columnIndex == 10) {
        return 'addclassName'
      }
    },
    getList(params = {}) { // 获取列表
      params.pageNum = this.pageObj.pageNum
      params.pageSize = this.pageObj.pageSize
      params.userId = this.$store.state.user.userId
      this.loading = true
      api.listRegisterInfoPage(params).then(res => {
        if (res.code === 200) {
          this.loading = false
          this.pageObj.total = res.data.total
          this.tableData = res.data.records
        }
      })
    },
    branchFactory(obj = {}) { // 所属分厂三联动
      obj.userId = this.$store.state.user.userId
      api.getTemplateBranchInfoVO(obj).then(res => {
        if (res.code === 200) {
          this.branchObj = res.data
        }
      })
    },
    handleQuery(type) { // 查询、重置
      if (type === '重置') {
        this.queryForm = {
          date: null, // 取样时间
          number: null, // 顺序号
          sample: null, // 样品编号
          branchName: null, // 所属分厂
          sampleType: null, // 样品分类
          sampleName: null, // 样品名称
          shift: null // 班次
        }
        this.pageObj.pageSize = 20
      }
      this.pageObj.pageNum = 1
      this.query = {}
      if (this.queryForm.date) { // 取样时间
        this.query.startTime = moment(this.queryForm.date[0]).format('YYYY-MM-DD HH:mm:ss')
        this.query.endTime = moment(this.queryForm.date[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      if (this.queryForm.number) { // 顺序号
        this.query.number = this.queryForm.number
        if ( isNaN(Number(this.queryForm.number)) ) {
          this.$message({ message: '顺序号必须是数字', type: 'warning' })
          // this.tableData = []
          return
        }
      }
      if (this.queryForm.sample) { // 样品编号
        this.query.sample = this.queryForm.sample
      }
      if (this.queryForm.branchName) { // 所属分厂
        this.query.branchName = this.queryForm.branchName
      }
      if (this.queryForm.sampleType) { // 样品分类
        this.query.sampleType = this.queryForm.sampleType
      }
      if (this.queryForm.sampleName) { // 样品名称
        this.query.sampleName = this.queryForm.sampleName
      }
      if (this.queryForm.shift) { // 班次
        this.query.shift = this.queryForm.shift
      }
      this.getList(this.query) // 获取列表
    },
    paginationChange(current) {
      this.pageObj.pageNum = current
      this.getList(this.query) // 获取列表
    },
    handleSizeChange(size) {
      this.pageObj.pageSize = size
      this.getList(this.query) // 获取列表
    },
    handletoVoidTable(val){ //作废
      let data = {
        RegisterId:val.id
      }
      api.cancellationRegisterInfo(data).then(res=>{
        if (res.code === 200) {
          this.getList() // 获取列表
          this.$message({ message: '作废成功', type: 'success' })
        }
      })
    },
    handledeleteTable(val) { // 删除
      api.deleteRegisterInfo(val.id).then(res => {
        if (res.code === 200) {
          this.getList() // 获取列表
          this.$message({ message: '删除成功', type: 'success' })
        }
      })
    },
    handleEditTable(type, val) {
      this.$router.push({
        path: this.$router.pullPath,
        query: {
          type,
          id: val && val.id || null
        }
      })
    },
    // 列表作废
    handleDelTable(){

    }
  },
  watch: {
    'queryForm.branchName': function(val) {
      this.queryForm.sampleType = null // 样品分类
      this.queryForm.sampleName = null // 样品名称
      this.branchFactory({ branch: val }) // 所属分厂三联动
    },
    'queryForm.sampleType': function(val) {
      this.queryForm.sampleName = null // 样品名称
      this.branchFactory({ branch: this.queryForm.branchName, sampleType: val }) // 所属分厂三联动
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.aboration_wrap {
  .delists_wrap {
    margin-top: 16px;
    height: 100%;
    overflow-y: auto;
    .layout_table .header_wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .pagination {
      position: relative;
      right: -5px;
      margin-top: 16px;
      padding: 0;
      text-align: right;
    }
    .layout_conditional {
      display: grid;
      grid-template-columns: repeat(4, minmax(256px, 25%));
      grid-template-areas: ". . . ." ". . . b";
      margin-bottom: -22px;
      overflow: hidden;
      .el-date-editor,
      .el-input.el-input--suffix,
      .el-select {
        width: 100%;
      }
      .flex_last {
        .el-form-item__content {
          margin-left: 0!important;
        }
      }
      .btn_check {
        position: relative;
        top: 0px;
        margin-left: 16px;
      }
      .btn_reset {
        position: relative;
        margin-left: 8px;
      }
      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        color: #355DB4;
        background: none;
      }
    }
  }
}
.addclassName {
  div {
    width: 160px;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
  }
}
</style>
