<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 label="加工单号" prop="kitNo">
                                        <el-input v-model="formData.kitNo" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="组合件类型" prop="kitType">
                                        <el-select v-model="formData.kitType" :disabled="mode==='edit' || mode==='detail'">
                                          <el-option label="组合加工(A=B+C)" value="COM"></el-option>
                                          <el-option label="辅料加工(A=A+辅料)" value="ACC"></el-option>
                                          <el-option label="增值加工(A=A)" value="VA"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="货主" prop="ownerCode">
                                       <PublicQuery
                                        title="货主"
                                        :disabled="mode==='edit' || mode==='detail'"
                                        single
                                        cfgKey="kitWmsCustomerCode"
                                        baseUrl="/kit_web/kitweb"
                                        :valueField.sync="formData.ownerCode"
                                        :textField.sync="formData.ownerCode"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="货主名称" prop="ownerName">
                                        <el-input v-model="formData.ownerName" disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="计划加工台" prop="kitLoc">
                                       <PublicQuery
                                        title="计划加工台"
                                        single
                                        :disabled="mode==='edit' || mode==='detail'"
                                        cfgKey="kitWmsLoc"
                                        baseUrl="/kit_web/kitweb"
                                        :valueField.sync="formData.kitLoc">
                                        </PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="状态" prop="status">
                                        <el-select v-model="formData.status" disabled>
                                          <el-option label="创建" value="00"></el-option>
                                          <el-option label="部分加工" value="70"></el-option>
                                          <el-option label="完全加工" value="80"></el-option>
                                          <el-option label="取消订单" value="90"></el-option>
                                          <el-option label="关闭订单" value="99"></el-option>
                                        </el-select>
                                    </el-form-item>
                            </el-collapse-item>
                        </el-collapse>
                      </el-col>
                      <el-col :span="12">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="基本信息" name="1">
                                    <el-form-item label="计划加工时间从" prop="fmEtk">
                                      <el-date-picker
                                        v-model="formData.fmEtk"
                                        type="datetime"
                                        :disabled="mode==='detail'"
                                        placeholder="选择日期时间">
                                      </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="计划加工时间到" prop="toEtk">
                                      <el-date-picker
                                        v-model="formData.toEtk"
                                        type="datetime"
                                        :disabled="mode==='detail'"
                                        placeholder="选择日期时间">
                                      </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="物流单号" prop="logisticNo">
                                        <el-input v-model="formData.logisticNo" :disabled="mode==='detail'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="审核人" prop="auditOpName">
                                       <PublicQuery
                                        title="审核人"
                                        single
                                        disabled
                                        cfgKey="kitWmsSkuCode"
                                        baseUrl="/kit_web/kitweb"
                                        :valueField.sync="formData.auditOpName">
                                        </PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="审核状态" prop="auditStatus">
                                        <el-select v-model="formData.auditStatus" disabled>
                                          <el-option label="未审核" value="00"></el-option>
                                          <el-option label="不审核" value="90"></el-option>
                                          <el-option label="已审核" value="99"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="审核时间" prop="auditTime">
                                        <el-input v-model="formData.auditTime" disabled></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 v-if="this.mode=='detail'">
                                  <el-button v-auth="50300030101" type="primary"  @click="handleAdd">上架确认</el-button>
                                  <el-button v-auth="50300030101" type="primary"  @click="handlDeleteeAdd">删除上架任务</el-button>
                                </el-row>
                                <el-row>
                                    <el-table
                                    :data='parentDetail'
                                     @selection-change="handleSelect">
                                        <table-column type="selection" fixed align="center"
                                            width="55">
                                        </table-column>
                                        <table-column
                                            label="上架任务ID"
                                            prop="paId">
                                        </table-column>
                                        <table-column
                                            label="状态"
                                            prop="status">
                                             <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.status, $keys.maintain.status).name }}
                                            </template>
                                        </table-column>
                                        <table-column
                                            label="货主"
                                            prop="owner">
                                        </table-column>
                                        <table-column
                                            label="商品"
                                            prop="sku">
                                        </table-column>
                                        <table-column
                                            label="源跟踪号"
                                            prop="fmId">
                                        </table-column>
                                        <table-column
                                            label="批次号"
                                            prop="lotNum">
                                        </table-column>
                                        <table-column
                                            label="包装规格"
                                            prop="packDesc">
                                        </table-column>
                                        <table-column
                                            label="包装单位"
                                            prop="uomDesc">
                                        </table-column>
                                        <table-column
                                            label="上架跟踪号"
                                            prop="toId">
                                        </table-column>
                                        <table-column
                                            label="库位(源/目标)"
                                            prop="paRule">
                                        </table-column>
                                        <table-column
                                            label="上架数"
                                            prop="qtyPaUom">
                                        </table-column>
                                        <table-column label="操作" width="100" fixed="right" v-if="mode=='detail'">
                                            <template slot-scope="scope">
                                              <el-tooltip content="工序" placement="top">
                                                <el-button
                                                    size="mini"
                                                    type="primary"
                                                    icon="el-icon-edit"
                                                    plain
                                                    circle
                                                    @click="handleProcess(scope.row)"></el-button>
                                              </el-tooltip>
                                            </template>
                                        </table-column>
                                    </el-table>
                                </el-row>
                            </el-collapse-item>
                        </el-collapse>
                    </el-col>
                </el-row>
            </el-form>
            <el-row class="row-mrg-t">
                <el-col :span="24">
                    <el-collapse v-model="activeNames" >
                        <el-collapse-item title="操作信息" name="3">
                          <div class="row-mrg-t" v-if="mode==='detail'">
                              <div class="operation-info">
                                <span>创建人登录名(姓名)：{{formMesg.creatorLoginName}}({{formMesg.creatorName}})</span>
                                <span>创建时间：{{formMesg.createTime}}</span>
                                <span>修改人登录名(姓名)：{{formMesg.modifierLoginName}}({{formMesg.modifierName}})</span>
                                <span>修改时间：{{formMesg.modifyTime}}</span>
                              </div>
                          </div>
                        </el-collapse-item>
                    </el-collapse>
                </el-col>
            </el-row>
          <ProcessForm
          :goodsFormVisible="goodsFormVisible"
          ref="msg"
          @handleProcessclose="handleProcessclose">
          </ProcessForm>
    </div>
</template>
<script>
import ProcessForm from './childrenForm/processForm.vue'
export default {
  components: {
    ProcessForm
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.formData = this.$route.params[0]
    }
    if (this.mode === 'detail') {
      this.formData = this.$route.params[0]
    }
  },
  data () {
    return {
      formData: {},
      goodsFormVisible: false,
      mode: 'create', // 模式
      activeNames: ['1', '2', '3'],
      editBool: false,
      delSubDetail: [],
      formMesg: {},
      parentDetail: []
    }
  },
  props: {

  },
  mounted () {
    this.handleQuery()
  },
  methods: {
    getData (url, param) {
      return this.$https.post(url, param)
    },
    handleQuery () {
      const url = this.$API.maintain.KitTaskPaList.queryKit
      const param = { orderNo: this.formData.kitNo, 'page.currentPage': 1, 'page.limitCount': 10 }
      const urls = this.$API.maintain.KitBomKitConfirmList.header
      const params = { kitNo: this.formData.kitNo }
      this.$https.all([this.getData(url, param), this.getData(urls, params)]).then(res => {
        this.parentDetail = res[0].rows
        this.formMesg = res[1].data
      })
    },
    handleAdd () {
      if (!this.delSubDetail.length) {
        return this.$message('请选着数据')
      }
      const url = this.$API.maintain.KitTaskPaList.kitControll
      const param = { paTasks: JSON.stringify(this.delSubDetail) }
      this.$https.post(url, param).then(res => {
        this.handleQuery()
      })
    },
    handleProcess (data) {
      if (data.status !== '00') {
        return this.$message('不是创建状态，不能操作')
      }
      this.goodsFormVisible = true
      this.$refs.msg.getMessage(data)
    },
    handleProcessclose () {
      this.goodsFormVisible = !this.goodsFormVisible
    },

    // 父件勾选checkbox
    handleSelect (selection, row) {
      this.delSubDetail = selection.map(item => item)
    },
    handleEdit (row) {

    },
    handlDeleteeAdd () {
      if (!this.delSubDetail.length) {
        return this.$message('请选着数据')
      }
      const url = this.$API.maintain.KitTaskPaList.kitBatchPutaway
      const param = { paTasks: JSON.stringify(this.delSubDetail) }
      this.$https.post(url, param).then(res => {
        this.handleQuery()
      })
    },
  },
  beforeRouteLeave (to, from, next) {
    this.needRefresh && (to.meta.needRefresh = true)
    next()
  },

}
</script>
 <style lang="scss">
    .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;
    }
</style>
