<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.fmEtq}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>预计质检时间到：</em>{{formData.toEtq}}</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 >
                <span class="form-item"><em>备注：</em>{{formData.remark}}</span>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row :gutter="40" class="row-mrg-t">
        <el-col :span="24">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="商品明细" name="2">
              <el-row>
                <el-button v-auth="50300030101" type="primary" @click="handleConfirm">质检确认</el-button>
                <el-button v-auth="50300030101" type="primary" @click="handleCancelQc">取消质检确认</el-button>
                <el-button
                  v-auth="50300030101"
                  type="primary"
                  @click="handleCreateQc"
                  v-if="formData.qcPhase!=='RCV'"
                >生成上架任务</el-button>
              </el-row>
              <el-row class="row-mrg-t">
                <el-table border ref="goods" :data="goodsList" @select="handleGoodsRow">
                  <table-column type="selection" fixed align="center"></table-column>
                  <table-column label="行号" prop="lineNo">
                    <template slot-scope="scope">
                      <p class="blue" @click="handleConfirmLine(scope.row)">{{scope.row.lineNo}}</p>
                    </template>
                  </table-column>
                  <table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.qcStatus).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="可质检数">
                    <template slot-scope="scope">
                      <p>数量EA: {{scope.row.qtyAvailQcUom}}</p>
                      <p>重量: {{scope.row.availQcWeight}}</p>
                    </template>
                  </table-column>
                  <table-column label="数量">
                    <template slot-scope="scope">
                    </template>
                  </table-column>
                  <table-column label="重量">
                    <template slot-scope="scope">
                      <!-- <p>合格: {{scope.row}}</p>
                      <p>不和格: {{scope.row}}</p>-->
                    </template>
                  </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}}</p>
                      <p>不合格: {{scope.row.qcUnquaWeight}}</p>
                    </template>
                  </table-column>
                  <table-column label="合格率" prop="pctQua"></table-column>
                  <table-column label="质检处理建议" prop="SYS_WM_QC_SUGGEST"></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">
              <el-row>
                <el-table :data="qcList" border>
                  <table-column label="行号" prop="lineNo">
                    <template slot-scope="scope">
                      <p class="blue" @click="handleLine(scope.row)">{{scope.row.lineNo}}</p>
                    </template>
                  </table-column>
                  <table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.stockIn.qcStatus).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="uomDesc"></table-column>
                  <table-column label="可质检数" prop="qtyAvailQcUom"></table-column>
                  <!-- <table-column label="可质检数EA" prop="qtyAvailQcEa"></table-column> -->
                  <table-column label="可质检重量" prop="availQcWeight"></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="质检重量" prop="qtyQcEa">
                    <template slot-scope="scope">
                      <p>合格：{{scope.row.qcQuaWeight}}</p>
                      <p>不合格：{{scope.row.qcUnquaWeight}}</p>
                    </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="4">
              <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>
      <div class="row-mrg-t">
        <el-button
        v-if="!(formData.status==='99'
        ||formData.auditStatus==='99'&&formData.status==='00'
        ||formData.auditStatus==='90'&&formData.status==='00'
        ||formData.auditStatus==='00'&&formData.status==='00')"
        v-auth="50100020205" type="primary" @click="handlePoint('close')">关闭订单</el-button>
      </div>
    </el-form>
    <goods-form
      :goodsFormVisible="goodsFormVisible"
      :tableData="childrenData"
      :currentRow="currentRow"
      :status="status"
      :qcNo="qcNo"
      :ids="ids"
      @close="close"
      @editOk="editOk"
    ></goods-form>

    <DetailDetail
      :showDetail="showDetailDetail"
      :detailData="detailData"
      @close="showDetailDetail = false"
    ></DetailDetail>
  </div>
</template>
<script>
import GoodsForm from './childrenForm/goods-form'
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[3] }
    this.goodsList = this.$route.params[1]
    this.qcList = this.$route.params[2]
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4'],
      formData: {},
      goodsList: [],
      qcList: [],
      childrenData: [],
      goodsFormVisible: false,
      goodsRow: [],
      status: '',
      qcNo: '',
      ids: '',
      currentRow: {},
      detailData: {}, // 详情数据
      showDetailDetail: false, // 任务详情
    }
  },
  props: {

  },
  mounted () {
  },
  methods: {
    close () {
      this.goodsFormVisible = !this.goodsFormVisible
    },

    getConfirm () {
      this.status = this.formData.status
      this.qcNo = this.formData.qcNo
      const url = this.$API.stockIn.Manage.getQua
      const param = {
        itemGroupCode: this.qcList[0].itemGroupCode,
        qcNo: this.formData.qcNo,
        'page.currentPage': 1,
        'page.limitCount': 10
      }
      this.$https.post(url, param).then(res => {
        this.childrenData = res.rows
        this.goodsFormVisible = true
      })
    },

    // 质检确认
    handleConfirm () {
      if (!this.goodsRow.length) return this.$message.warning('请选择一条数据')
      if (this.goodsRow.length !== 1) return this.$message.warning('只能选择一条数据')
      this.currentRow = this.goodsRow[0]
      this.getConfirm()
    },
    // 商品明细行点击
    handleConfirmLine (row) {
      this.currentRow = row
      this.getConfirm()
    },

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

    // 取消质检
    handleCancelQc () {
      const url = this.$API.stockIn.Manage.getQucCancel
      const param = {
        qcNo: this.formData.qcNo,
        lineNos: this.ids,
      }
      this.$https.post(url, param).then(res => {
        const url = this.$API.stockIn.Manage.getGoods
        const param = { qcNo: this.formData.qcNo, isAfterQcRegister: 'Y', 'page.currentPage': 1, 'page.limitCount': 10 }
        this.$https.post(url, param).then(res => {
          this.goodsList = res.rows
        })
      })
    },
    // 生成上架
    handleCreateQc () {
      const url = this.$API.stockIn.Manage.getQucCreate
      const param = {
        qcNo: this.formData.qcNo,
        lineNos: this.ids,
      }
      this.$https.post(url, param).then(res => {
        const url = this.$API.stockIn.Manage.getGoods
        const param = { qcNo: this.formData.qcNo, isAfterQcRegister: 'Y', 'page.currentPage': 1, 'page.limitCount': 10 }
        this.$https.post(url, param).then(res => {
          this.goodsList = res.rows
        })
      })
    },

    // 商品明细勾选
    handleGoodsRow (selection, row) {
      this.ids = selection.map(item => item.lineNo).join(',')
      this.goodsRow = selection
    },

    // 商品信息保存成功
    editOk () {
      const url = this.$API.stockIn.Manage.getGoods
      const param = { qcNo: this.formData.qcNo, isAfterQcRegister: 'Y', 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.post(url, param).then(res => {
        this.goodsList = res.rows
        this.goodsFormVisible = false
      })
    },

    handlePoint (urlKey) {
      this.$confirm(`是否关闭订单 ?`)
        .then(() => {
          const url = this.$API.stockIn.Manage[urlKey]
          const param = { qcNos: this.formData.qcNo }
          this.$https.post(url, param).then(res => {

          })
        })
    }

  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },
  watch: {
  }
}
</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;
}
.form-item {
  display: inline-block;
  margin-left: 10px;
  em{
    font-style: normal;
    color: #9c9d9e
  }
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
</style>
