<template>
  <div>
    <el-form ref="form" :model="formData" inline label-position="top">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础信息" name="1">
              <el-form-item >
                <span class="form-item"><em>质检单号：</em> {{formData.qcNo}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>质检阶段：</em>{{ $utils.keyMatcher(formData.qcPhase, $keys.stockIn.qcPhase).name }}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>状态：</em>{{ $utils.keyMatcher(formData.status, $keys.stockIn.status).name }}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>审核状态：</em>{{ $utils.keyMatcher(formData.auditStatus, $keys.stockIn.auditStatus).name }}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>单据单号：</em>{{ formData.orderNo }}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>单据类型：</em>{{ $utils.keyMatcher(formData.orderType, $keys.stockIn.orderType).name }}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>货主编码：</em>{{formData.ownerCode}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>货主名称：</em>{{formData.ownerName}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>优先级：</em>{{formData.priority}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>订单时间：</em>{{formData.orderTime}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>审核人：</em>{{formData.auditOp}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>审核时间：</em>{{formData.auditTime}}</span>
              </el-form-item>
              <el-form-item label="预计质检时间从：">
                <el-date-picker
                  v-model="formData.fmEtq"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="预计质检时间到：">
                <el-date-picker
                  v-model="formData.toEtq"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="备注：">
                <el-input v-model="formData.remark"></el-input>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row class="row-mrg-t">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="质检信息" name="2">
              <el-row>
                <el-table :data="listData" border>
                  <table-column type="selection" fixed align="center" ></table-column>
                  <table-column label="行号" prop="lineNo">
                    <template slot-scope="scope">
                      <p class="blue" @click="handleGoodsLine(scope.$index,scope.row)">{{scope.row.lineNo}}</p>
                    </template>
                  </table-column>
                  <table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.status).name }}</template>
                  </table-column>
                  <table-column label="商品">
                    <template slot-scope="scope">
                      <p>{{scope.row.skuCode}}</p>
                      <p>{{scope.row.skuName}}</p>
                    </template>
                  </table-column>
                  <table-column label="包装单位" prop="uom"></table-column>
                  <table-column label="可质检数" prop="qtyAvailQcUom"></table-column>
                  <!-- <table-column label="可质检数EA" prop="qtyAvailQcEa"></table-column> -->
                  <table-column label="可质检重量(吨)" prop="availQcWeight" :formatter="formatColumn"></table-column>
                  <table-column label="质检数">
                    <template slot-scope="scope">
                      <p>合格：{{scope.row.qtyQcQuaEa}}</p>
                      <p>不合格：{{scope.row.qtyQcUnquaEa}}</p>
                    </template>
                  </table-column>
                  <table-column label="质检重量(吨)">
                    <template slot-scope="scope">
                      <p>合格：{{(+scope.row.qcQuaWeight).toFixed($consts.numFix.TON)}}</p>
                      <p>不合格：{{(+scope.row.qcUnquaWeight).toFixed($consts.numFix.TON)}}</p>
                    </template>
                  </table-column>
                  <table-column label="操作" width="100" fixed="right" >
                    <template slot-scope="scope">
                      <el-tooltip content="编辑" placement="top">
                        <el-button
                          size="mini"
                          type="primary"
                          icon="el-icon-edit"
                          plain
                          circle
                          @click="handleGoodsEdit(scope.$index, scope.row)"
                        ></el-button>
                      </el-tooltip>
                      <el-tooltip content="删除" placement="top">
                        <el-button
                          size="mini"
                          type="danger"
                          icon="el-icon-delete"
                          plain
                          circle
                          @click="handleDelGoodsOne(scope.$index, scope.row)"
                        ></el-button>
                      </el-tooltip>
                    </template>
                  </table-column>
                </el-table>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row class="row-mrg-t">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="操作信息" name="3">
              <div class="operation-info">
                <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorUserNameCn}})</span>
                <span>创建时间：{{formData.createTime}}</span>
                <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierUserNameCn}})</span>
                <span>修改时间：{{formData.modifyTime}}</span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-form>
    <div class="row-mrg-t" >
      <el-button
      v-if="!(formData.status==='99'
      || formData.auditStatus==='99'&&(formData.status==='00'||formData.status!=='00')
      || formData.auditStatus==='90'&&formData.status!=='00')"
      v-auth="50100020205" type="primary" @click="submitForm">保存</el-button>
      <el-button
       v-if="!(formData.status==='99'
       ||((formData.auditStatus==='99'||formData.auditStatus==='90')&&(formData.status==='00'||formData.status!=='00')))"
      v-auth="50100020205" type="primary" @click="handlePoint('auditQc')">审核</el-button>
      <el-button
       v-if="!(formData.status==='99'
       ||(formData.auditStatus==='99'&&formData.status!=='00')
       ||( formData.auditStatus==='90'&&formData.status==='00'||formData.status!=='00'))
       ||(formData.auditStatus==='00'&&formData.status==='00')"
      v-auth="50100020205" type="primary" @click="handlePoint('cancelAuditQc')">取消审核</el-button>
      <el-button
       v-if="!(formData.status==='99'
       || ((formData.auditStatus==='99'||formData.auditStatus==='90')&&formData.status==='00')
       ||( formData.auditStatus==='00'&&formData.status==='00'))"
      v-auth="50100020205" type="primary" @click="handlePoint('close')">关闭订单</el-button>
    </div>

    <goods-form
      :goodsFormVisible="goodsFormVisible"
      :currentRow="goodsEditRow"
      :listData="editListData"
      :rowIndex="rowIndex"
      @close="close"
      @editOK="editOK"
      :isLine="isLine"
    ></goods-form>
    <DetailDetail
    :showDetail="showDetailDetail"
    :detailData="detailData"
    @close="showDetailDetail = false"
  ></DetailDetail>
  </div>
</template>
<script>
import GoodsForm from './childrenForm/goods-form'
import { time } from 'apec-fe-utils'
import DetailDetail from './childrenForm/DetailDetail'
export default {
  components: {
    GoodsForm,
    DetailDetail
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    this.formData = { ...this.$route.params[0], ...this.$route.params[2] }
    this.listData = this.$route.params[1]
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3'],
      goodsList: [],
      listData: [],
      rowIndex: '',
      formData: {},
      goodsFormVisible: false,
      selectedIds: '',
      cacheIds: [],
      editListData: [],
      goodsEditRow: {},
      isLine: '',
      detailData: {}, // 详情数据
      showDetailDetail: false, // 任务详情
    }
  },
  methods: {

    close () {
      this.goodsFormVisible = !this.goodsFormVisible
    },

    getQuality (index, row, ...args) {
      const url = this.$API.stockIn.Quality.queryDetailSerial
      const param = { qcNo: row.qcNo, qcLineNo: row.qcLineNo, lineNo: row.lineNo, 'page.currentPage': 1, 'page.limitCount': 100000000 }
      this.$https.post(url, param).then(res => { this.editListData = res.rows })
      let data = { ...row }
      this.goodsEditRow = data
      this.rowIndex = index
      this.goodsFormVisible = true
      this.isLine = args[0]
    },

    // 质检信息编辑
    handleGoodsEdit (index, row) {
      if (row.status === '00') {
        this.getQuality(index, row)
      } else {
        this.$message.warning('不是创建状态，不能对质检明细进行操作')
      }
    },

    handleGoodsLine (index, row) {
      this.detailData = row
      this.showDetailDetail = true
    },

    getData (url, param) {
      return this.$https.post(url, param)
    },
    // 重新获得列表 刷新数据
    reGetList () {
      const headUrl = this.$API.stockIn.Quality.getHeader
      const listUrl = this.$API.stockIn.Quality.queryDetail
      const param = { qcNo: this.formData.qcNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.all([this.getData(headUrl, param), this.getData(listUrl, param)]).then(res => {
        this.formData = res[0]
        this.listData = res[1].rows
      })
    },

    // 质检信息保存成功
    editOK (row, index) {
      const url = this.$API.stockIn.Quality.saveNewQcDetail
      const param = {
        details: JSON.stringify(row),
        serialList: JSON.stringify([])
      }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
      this.goodsFormVisible = false
    },

    // 质检商品删除单行
    handleDelGoodsOne (index, row) {
      const url = this.$API.stockIn.Quality.removeDetails
      const param = { qcNo: row.qcNo, lineNo: row.lineNo }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

    // 单点操作
    handlePoint (urlKey) {
      const url = this.$API.stockIn.Quality[urlKey]
      const param = { qcNos: this.formData.qcNo }
      this.$https.post(url, param).then(res => {
        this.reGetList()
      })
    },

    // 提交表单
    submitForm () {
      this.$refs.form.validate((valid) => {
        const url = this.$API.stockIn.Quality.saveQcEntity
        const param = {
          headerEntity: JSON.stringify(this.formData || []),
          deleteLineNos: ''
        }
        if (valid) {
          this.$https.post(url, param).then(res => {
            if (res.success) {
              this.needRefresh = true
              this.$refs.form.resetFields()
              this.$router.back()
            }
          })
        }
      })
    },

  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  }
}
</script>
 <style lang="scss" scoped>
.el-collapse {
  border: 1px solid #ebeef5;
  .el-collapse-item__header {
    padding-left: 10px;
    font-weight: bold;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ebeef5 !important;
  }
  .el-collapse-item__content {
    padding-top: 25px;
    padding-left: 15px;
  }
}
.row-mrg-t {
  margin-top: 20px;
}
.operation-info {
  display: flex;
  justify-content: space-between;
}
.form-item {
  display: inline-block;
  margin-left: 10px;
  em{
    font-style: normal;
    color: #9c9d9e
  }
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
</style>
