<template>
  <div>
    <el-form ref="form" :model="formData" inline label-position="top">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="关键信息" name="1">
              <el-form-item >
                <span class="form-item"><em>入库单号：</em> {{formData.asnNo}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>入库单类型：</em> {{formData.asnType}}</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.status}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>审核状态：</em> {{formData.auditStatus}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>冻结状态：</em> {{formData.holdStatus}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>质检状态：</em> {{formData.qcStatus}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>质检单号：</em> {{formData.qcNo}}</span>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col :span="12">
          <el-collapse v-model="activeNames">
            <el-collapse-item title="基础信息" name="2">
              <el-form-item >
                <span class="form-item"><em>物流单号：</em> {{formData.logisticNo}}</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.priority}}</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.isAppointDock}}</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.supplierName}}</span>
              </el-form-item>
              <el-form-item >
                <span class="form-item"><em>承运商名称：</em> {{formData.carrierName}}</span>
              </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="3">
              <el-row>
                <el-button type="primary" @click="handlePoint('comfirmTaskPa')">上架确认</el-button>
                <el-button type="primary" @click="handlePoint('deleteTaskPa')">删除上架任务</el-button>
                <el-dropdown class="mrg-l" @command="toPrint">
                    <el-button v-auth="50100020124" type="primary">
                        打印<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-auth="50300030101" command="18010050113">打印上架任务单</el-dropdown-item>
                        <el-dropdown-item v-auth="50300030101" command="18010050114">Print Task Putaway List</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
              </el-row>
              <el-row class="row-mrg-t">
                <el-table :data="tableData" border @selection-change="handleChange">
                  <el-table-column type="selection" fixed align="center"></el-table-column>
                  <el-table-column  label="上架任务ID" prop="paId">
                    <template slot-scope="scope">
                      <p class="blue" @click="handleLine(scope.row)">{{scope.row.paId}}</p>
                    </template>
                  </el-table-column>
                  <el-table-column label="行号" prop="lineNo"></el-table-column>
                  <el-table-column label="状态">
                    <template
                      slot-scope="scope"
                    >{{ $utils.keyMatcher(scope.row.status, $keys.platform.status).name }}</template>
                  </el-table-column>
                  <el-table-column label="货主">
                    <template slot-scope="scope">
                      <p>{{scope.row.ownerCode}}</p>
                      <p>{{scope.row.ownerName}}</p>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品">
                    <template slot-scope="scope">
                      <p>{{scope.row.skuCode}}</p>
                      <p>{{scope.row.skuName}}</p>
                    </template>
                  </el-table-column>
                  <el-table-column label="包装规格" prop="packDesc"></el-table-column>
                  <el-table-column label="单位" prop="uomDesc"></el-table-column>
                  <el-table-column label="上架数" prop="qtyPaUom"></el-table-column>
                  <el-table-column label="商品重量" prop="skuWeight"></el-table-column>
                  <el-table-column label="上架重量" prop="paWeight"></el-table-column>
                  <el-table-column label="推荐库位" prop="suggestLoc"></el-table-column>
                  <el-table-column label="批次号" prop="lotNum"></el-table-column>
                  <el-table-column label="源库位" prop="fmLoc"></el-table-column>
                  <el-table-column label="源跟踪号" prop="fmId"></el-table-column>
                  <el-table-column label="目标库位" prop="toLoc"></el-table-column>
                  <el-table-column label="目标跟踪号" prop="toId"></el-table-column>
                  <el-table-column label="单据号" prop="orderNo"></el-table-column>
                  <el-table-column label="单据类型" prop="orderType"></el-table-column>
                  <el-table-column label="上架库位指定规则" prop="reserveCode"></el-table-column>
                  <el-table-column label="上架规则" prop="paRuleName"></el-table-column>
                  <el-table-column label="上架人" prop="paName"></el-table-column>
                  <el-table-column label="上架时间" prop="paTime"></el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-tooltip content="编辑" placement="top">
                        <el-button
                          size="mini"
                          type="primary"
                          icon="el-icon-edit"
                          plain
                          circle
                          @click="handleEdit(scope.$index, scope.row)"
                        ></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
      <el-row class="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>
    </el-form>
    <div class="row-mrg-t">
      <el-button v-auth="50100020207" type="primary" @click="$router.back()">关闭</el-button>
    </div>

    <goods-form
      :goodsFormVisible="goodsFormVisible"
      :currentRow="currentRow"
      @close="goodsFormVisible=false"
    @editOk="editOk"></goods-form>

    <Detail
      :showDetail="showDetailDetail"
      :detailData="detailData"
      @close="showDetailDetail = false"
    ></Detail>
  </div>
</template>
<script>
import { time } from 'apec-fe-utils'
import GoodsForm from './childrenForm/goods-form'
import Detail from './childrenForm/DetailDetail'
export default {
  components: {
    GoodsForm,
    Detail
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    this.formData = this.$route.params[0]
    this.tableData = this.$route.params[1]
  },
  data () {
    return {
      detailData: {}, // 详情数据
      showDetailDetail: false, // 任务详情
      needRefresh: false,
      activeNames: ['1', '2', '3', '4'],
      mode: 'create',
      formData: {},
      tableData: [],
      goodsFormVisible: false,
      currentRow: {},
      rows: [],
      ids: '',
    }
  },
  prop: {
    // tableData: Array
  },
  methods: {
    // 打印
    toPrint (command, vmNode) {
      if (!this.rows.length) return this.$message.warning('请选择数据')
      const param = {
        title: vmNode.$el.innerHTML,
        qs: `_functionCode=${command}&paId=${this.ids.split(',').join(';')}`
      }
      this.$print(param)
    },
    handleChange (selection) {
      this.rows = selection
      this.ids = selection.map(item => item.paId).join(',')
    },
    handleEdit (index, row) {
      this.currentRow = row
      this.goodsFormVisible = true
    },
    reGetData () {
      const queryTaskPa = this.$API.stockIn.Putaway.queryTaskPa
      const param = { orderNo: this.formData.asnNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      this.$https.post(queryTaskPa, param).then(res => {
        this.tableData = res.rows
      })
    },
    handlePoint (urlKey) {
      const url = this.$API.stockIn.Putaway[urlKey]
      const param = { taskPaBeans: JSON.stringify(this.rows) }
      this.$https.post(url, param).then(res => {
        this.reGetData()
      })
    },
    editOk () {
      this.goodsFormVisible = false
      this.reGetData()
    },
    handleLine (row) {
      this.detailData = row
      this.showDetailDetail = true
    },
  },
  watch: {

  },
  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;
}
.mrg-b {
  margin-bottom: 20px;
}
.mrg-l {
  margin-left: 10px;
}
</style>
