<template>
    <div>
            <el-form ref="form" :model="formData" :rules="rules" inline  label-position="top" :disabled="mode==='detail'">
                <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'">
                                          <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'"
                                        single
                                        :rowData.sync="ownerData"
                                        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'"
                                        :rowData.sync="parentData"
                                        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"
                                        placeholder="选择日期时间">
                                      </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="计划加工时间到" prop="toEtk">
                                      <el-date-picker
                                        v-model="formData.toEtk"
                                        type="datetime"
                                        placeholder="选择日期时间">
                                      </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="物流单号" prop="logisticNo">
                                        <el-input v-model="formData.logisticNo" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="审核人" prop="auditOpName">
                                       <PublicQuery
                                        title="审核人"
                                        single
                                        disabled
                                        :rowData.sync="parentData"
                                        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="handleDel">移除</el-button>
                                    <el-button v-auth="50300030101" type="primary" @click="handleDel">复制</el-button>
                                </el-row>
                                <el-row>
                                    <el-table
                                    :data='parentDetail'
                                     @select="handleSelect">
                                        <table-column type="selection" fixed align="center"
                                            width="55">
                                        </table-column>
                                        <table-column
                                            label="行号"
                                            prop="parentLineNo">
                                        </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="父件">
                                            <template slot-scope="scope">
                                              <p>{{scope.row.parentSkuCode}}</p>
                                              <p>{{scope.row.parentSkuName}}</p>
                                            </template>
                                        </table-column>
                                        <table-column
                                            label="预加工数"
                                            prop="qtyPlanUom">
                                        </table-column>
                                        <table-column
                                            label="已加工数"
                                            prop="qtyKitUom">
                                        </table-column>
                                        <table-column
                                            label="包装规格"
                                            prop="packDesc">
                                        </table-column>
                                        <table-column
                                            label="包装单位"
                                            prop="uomDesc">
                                        </table-column>
                                        <table-column
                                            label="计划加工台"
                                            prop="planKitLoc">
                                        </table-column>
                                        <table-column
                                            label="上架规则"
                                            prop="paRuleName">
                                        </table-column>
                                        <table-column
                                            label="是否生成子件"
                                            prop="isCreateSub">
                                            <template slot-scope="scope">
                                              {{ $utils.keyMatcher(scope.row.isCreateSub, $keys.maintain.isCreateSub).name }}
                                            </template>
                                        </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="handleEdit(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="handleDelOne(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">
                                <el-row>
                                    <el-table
                                    :data='subs'>
                                        <table-column type="selection" fixed align="center"
                                            width="55">
                                        </table-column>
                                        <table-column
                                            label="行号"
                                            prop="subLineNo">
                                        </table-column>
                                        <table-column
                                            label="父件行号"
                                            prop="parentLineNo">
                                        </table-column>
                                        <table-column
                                            label="状态"
                                            prop="status">
                                        </table-column>
                                        <table-column
                                            label="子件"
                                            prop="sub">
                                        </table-column>
                                        <table-column
                                            label="子件类型"
                                            prop="subSkuType">
                                        </table-column>
                                        <table-column
                                            label="待加工数EA"
                                            prop="qtyPlanEa">
                                        </table-column>
                                        <table-column
                                            label="库存周转规则"
                                            prop="rotationRuleName">
                                        </table-column>
                                        <table-column
                                            label="分配规则"
                                            prop="allocRuleName">
                                        </table-column>
                                        <table-column
                                            label="区域"
                                            prop="areaName">
                                        </table-column>
                                        <table-column
                                            label="库区"
                                            prop="zoneName">
                                        </table-column>
                                        <table-column
                                            label="库位"
                                            prop="locCode">
                                        </table-column>
                                        <table-column
                                            label="跟踪号"
                                            prop="traceId">
                                        </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="handleEditStep(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="handleDelStepOne(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-form>
             <hr style="background-color:#F5F5F5;height:1px;border:none" v-if="mode==='detail'">
              <div class="row-mrg-t" v-if="mode==='detail'">
                  <div class="operation-info">
                    <span>创建人登录名(姓名)：{{formData.creatorLoginName}}({{formData.creatorName}})</span>
                    <span>创建时间：{{formData.createTime}}</span>
                    <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierName}})</span>
                    <span>修改时间：{{formData.modifyTime}}</span>
                  </div>
              </div>
            <div class="row-mrg-t" v-if="mode!=='detail'">
              <el-button v-auth="50300030101" type="primary" @click="submitForm">确 定</el-button>
              <el-button v-auth="50300030101" type="primary" @click="$router.back()">取 消</el-button>
            </div>

        <ParentDetails
        :goodsFormVisible="goodsFormVisible"
        :currentRow="parentDetailRow"
        :rowIndex="rowIndex"
        :editBool="editBool"
        :lineNo="lineNo"
        @close="close"
        @editOK="editOK"
        @handleConfirm="handleConfirm"
        @handleConfirmAdd="handleConfirmAdd">
        </ParentDetails>
    </div>
</template>
<script>
import ParentDetails from './childrenForm/parentDetails'
export default {
  components: {
    ParentDetails
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.formData = this.$route.params[0]
      this.parentDetail = this.$route.params[1]
      this.subs = this.$route.params[2]
    }
    if (this.mode === 'detail') {
      this.formData = this.$route.params[0]
      this.parentDetail = this.$route.params[1]
      this.subs = this.$route.params[2]
    }
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3'],
      parentDetail: [],
      parentDetailRow: {},
      subs: [],
      ownerData: {}, // 货主
      parentData: {}, // 父件
      rowIndex: '',
      goodsFormVisible: false,
      editBool: false,
      delSubDetail: [],
      lineNo: 0,
      formData: {
        isKitting: 'N'
      },

      rules: {
        ownerCode: [{ required: true, message: '货主编码必填', trigger: 'change' }],
        parentSkuCode: [{ required: true, message: '父件编码必填', trigger: 'change' }],
        kitType: [ { required: true, message: '组合类型必填', trigger: 'change' } ],
      },

    }
  },
  props: {

  },
  mounted () {
  },
  methods: {

    // 打开父件件明细弹窗
    handleAdd () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.parentDetailRow = {}
          this.goodsFormVisible = true
          this.editBool = false
          this.lineNo = this.parentDetail.length + 1
        }
      })
    },

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

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

    // 父件件明细编辑
    handleEdit (index, row) {
      let data = Object.assign({ isChecked: 'false' }, row)
      this.parentDetailRow = data
      this.rowIndex = index
      this.goodsFormVisible = true
      this.editBool = true
    },

    // 父件明细保存成功
    editOK (row, index) {
      this.$set(this.parentDetail, index, row)
      this.goodsFormVisible = false
      this.editBool = false
    },

    // 父件件明细删除多行
    handleDel () {
      if (this.mode !== 'edit') {
        this.parentDetail = this.parentDetail.filter((item, index) => {
          if (item.isChecked) return item
        })
      } else {
        const url = this.$API.maintain.CdWhBomList.removeSubDetail
        const param = { subDetails: JSON.stringify(this.delSubDetail) }
        this.$https.post(url, param).then(res => {
        })
      }
    },

    // 删除父件明细单行
    handleDelOne (index, row) {
      this.parentDetail.splice(index, 1)
    },

    // 父件明细确认
    handleConfirm (list) {
      list = { ...list, ...this.formData }
      this.parentDetail.push(list)
      this.goodsFormVisible = false
    },

    // 父件明细确认并添加
    handleConfirmAdd (list) {
      list = { ...list, ...this.formData }
      this.parentDetail.push(list)
      this.lineNo = this.parentDetail.length + 1
    },

    // 提交表单
    submitForm () {
      this.$refs.form.validate((valid) => {
        const url = this.$API.maintain.WmKitOrderList.save
        const param = {
          kitOrderHeader: JSON.stringify(this.formData),
          parentDetails: JSON.stringify(this.parentDetail || []),
          subDetails: JSON.stringify([]),
          deleteParentLineNos: JSON.stringify([])
        }
        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()
  },
  watch: {
    ownerData: {
      handler (item) {
        this.formData.ownerName = item.ebcuNameCn
      },
      deep: true
    },
    parentData: {
      handler (item) {
        this.formData.parentSkuName = item.skuName
      },
      deep: true
    }
  }
}
</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>
