<template>
    <div>
            <el-form ref="form" :model="formData" :rules="rules" inline  label-position="top" :disabled="mode==='detail'">
                <el-row :gutter="40">
                    <el-col :span="24">
                        <el-collapse v-model="activeNames" >
                            <el-collapse-item title="基础信息" name="1">
                                    <el-form-item label="货主" prop="ownerCode">
                                       <PublicQuery
                                        title="货主"
                                        :disabled="mode==='edit'"
                                        single
                                        :rowData.sync="ownerData"
                                        cfgKey="kitWmsCustomer"
                                        baseUrl="/kit_web/kitweb"
                                        :valueField.sync="formData.ownerCode"
                                        :textField.sync="formData.ownerCode"
                                      ></PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="父件编码" prop="parentSkuCode">
                                       <PublicQuery
                                        title="父件编码"
                                        single
                                        :disabled="mode==='edit'"
                                        :rowData.sync="parentData"
                                        cfgKey="kitWmsSkuCode"
                                        baseUrl="/kit_web/kitweb"
                                        :valueField.sync="formData.parentSkuCode">
                                        </PublicQuery>
                                    </el-form-item>
                                    <el-form-item label="父件名称" prop="parentSkuName">
                                        <el-input v-model="formData.parentSkuName" 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="isKitting">
                                        <el-checkbox v-model="formData.isKitting" true-label="Y" false-label="N" ></el-checkbox>
                                    </el-form-item>
                                    <el-form-item label="齐套管理类型" prop="kittingType">
                                        <el-select v-model="formData.kittingType">
                                          <el-option label="商品齐套" value="MK"></el-option>
                                          <el-option label="序列号齐套" value="SK"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="备注" prop="remark">
                                        <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 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-row>
                                <el-row>
                                    <el-table
                                    :data='subDetail'
                                     @select="handleSelect">
                                        <table-column type="selection" fixed align="center"
                                            width="55">
                                        </table-column>
                                        <table-column
                                            label="行号"
                                            prop="lineNo">
                                        </table-column>
                                        <table-column
                                            label="子件编码"
                                            prop="subSkuCode">
                                        </table-column>
                                        <table-column
                                            label="子件名称"
                                            prop="subSkuName">
                                        </table-column>
                                        <table-column
                                            label="子件类型"
                                            prop="zonesubSkuTypeName">
                                        </table-column>
                                        <table-column
                                            label="包装规格"
                                            prop="packDesc">
                                        </table-column>
                                        <table-column
                                            label="包装单位"
                                            prop="uomDesc">
                                        </table-column>
                                        <table-column
                                            label="数量"
                                            prop="qty">
                                        </table-column>
                                        <table-column
                                            label="数量EA"
                                            prop="qtyEa">
                                        </table-column>
                                        <table-column
                                            label="备注"
                                            prop="remark">
                                        </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 v-if="this.mode!=='detail'">
                                    <el-button v-auth="50300030101" type="primary" @click="handleAddStep">添加</el-button>
                                    <el-button v-auth="50300030101" type="primary" @click="handleDelStep">移除</el-button>
                                </el-row>
                                <el-row>
                                    <el-table
                                    :data='steps'
                                    @select="handleStepChange">
                                        <table-column type="selection" fixed align="center"
                                            width="55">
                                        </table-column>
                                        <table-column
                                            label="行号"
                                            prop="lineNo">
                                        </table-column>
                                        <table-column
                                            label="工序描述"
                                            prop="step">
                                        </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>
            <el-row class="row-mrg-t">
              <el-col :span="24">
                <el-collapse v-model="activeNames" >
                  <el-collapse-item title="" name="4">
                    <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>
                  </el-collapse-item>
                </el-collapse>
              </el-col>
            </el-row>
            <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>

        <SubDetails
        :goodsFormVisible="goodsFormVisible"
        :currentRow="subDetailRow"
        :rowIndex="rowIndex"
        :editBool="editBool"
        @close="close"
        @editOK="editOK"
        @handleConfirm="handleConfirm"
        @handleConfirmAdd="handleConfirmAdd">
        </SubDetails>

        <Step
        :stepVisible="stepVisible"
        :stepBool="stepBool"
        :rowIndex="stepIndex"
        :currentRow="stepRow"
        @close="stepClose"
        @editStepOK="editStepOK"
        @handleStepConfirm="handleStepConfirm"
        @handleStepConfirmAdd="handleStepConfirmAdd">
        </Step>
    </div>
</template>
<script>
import SubDetails from './childrenForm/subDetails'
import Step from './childrenForm/step'
export default {
  components: {
    SubDetails,
    Step
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    if (this.mode === 'edit') {
      this.formData = this.$route.params[0]
      this.subDetail = this.$route.params[1]
      this.steps = this.$route.params[2]
    }
    if (this.mode === 'detail') {
      this.formData = this.$route.params[0]
      this.subDetail = this.$route.params[1]
      this.steps = this.$route.params[2]
    }
  },
  data () {
    return {
      needRefresh: false, // 是否需要父路由刷新
      mode: 'create', // 模式
      activeNames: ['1', '2', '3', '4'],
      subDetail: [],
      steps: [],
      ownerData: {}, // 货主
      parentData: {}, // 父件
      subDetailRow: {},
      stepRow: {},
      rowIndex: '',
      stepIndex: '',
      goodsFormVisible: false,
      stepVisible: false,
      editBool: false,
      stepBool: false,
      delSubDetail: [],
      delSteps: [],
      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.subDetailRow = {}
          this.goodsFormVisible = true
          this.editBool = false
        }
      })
    },
    // 打开加工工序
    handleAddStep () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.stepRow = {}
          this.stepVisible = true
          this.stepBool = false
        }
      })
    },
    close () {
      this.goodsFormVisible = !this.goodsFormVisible
    },
    stepClose () {
      this.stepVisible = !this.stepVisible
    },
    // 加工勾选checkbox
    handleSelect (selection, row) {
      row.isChecked = !row.isChecked
      this.delSubDetail = selection.map(item => item)
    },
    // 加工勾选checkbox
    handleStepChange (selection, row) {
      row.isChecked = !row.isChecked
      this.delsteps = selection.map(item => item)
    },
    // 子件明细编辑
    handleEdit (index, row) {
      let data = Object.assign({ isChecked: 'false' }, row)
      this.subDetailRow = data
      this.rowIndex = index
      this.goodsFormVisible = true
      this.editBool = true
    },

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

    // 子件明细删除多行
    handleDel () {
      if (this.mode !== 'edit') {
        this.subDetail = this.subDetail.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.subDetail.splice(index, 1)
    },

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

    // 子件明细确认并添加
    handleConfirmAdd (list) {
      list = { ...list, ...this.formData }
      this.subDetail.push(list)
    },

    // 加工工序编辑
    handleEditStep (index, row) {
      let data = Object.assign({ isChecked: 'false' }, row)
      this.stepRow = data
      this.stepIndex = index
      this.stepVisible = true
      this.stepBool = true
    },
    // 加工工序确认
    handleStepConfirm (list) {
      list = { ...list, ...this.formData }
      this.steps.push(list)
      this.stepVisible = false
    },

    // 加工工序确认并添加
    handleStepConfirmAdd (list) {
      list = { ...list, ...this.formData }
      this.steps.push(list)
    },

    // 加工工序删除多行
    handleDelStep () {
      if (this.mode !== 'edit') {
        this.steps = this.steps.filter((item, index) => {
          if (item.isChecked) return item
        })
      } else {
        const url = this.$API.maintain.CdWhBomList.removeStep
        const param = { steps: JSON.stringify(this.delSteps) }
        this.$https.post(url, param).then(res => {
        })
      }
    },
    // 删除加工单行
    handleDelStepOne (index, row) {
      this.steps.splice(index, 1)
    },
    // 加工编辑保存成功
    editStepOK (row, index) {
      this.$set(this.steps, index, row)
      this.stepVisible = false
    },

    // 提交表单
    submitForm () {
      this.$refs.form.validate((valid) => {
        const url = this.$API.maintain.CdWhBomList.save
        const param = {
          bomHeader: JSON.stringify(this.formData),
          subDetails: JSON.stringify(this.subDetail || []),
          steps: JSON.stringify(this.steps || []),
          deleteStepJobIds: JSON.stringify([]),
          deleteSubDetailJobIds: 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>
