<template>
  <div>
    <el-dialog
      title="库区"
      :visible.sync="addFormVisible"
      :before-close="handleFormClose"
      width="60%">
      <div class="mrg-b">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="基本信息" name="1">
            <div class="mrg-l">
              <el-form
              :disabled="mode==='detail'"
                inline
                ref="addForm"
                label-position="top"
                :model="formData"
                :rules="rules">
                <el-form-item
                label="批次属性编码"
                prop="lotCode">
                  <el-input v-model="formData.lotCode" :disabled="mode==='edit'"></el-input>
                </el-form-item>
                <el-form-item
                label="批次属性名称"
                prop="lotName">
                  <el-input v-model="formData.lotName"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="mrg-b">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="批次属性明细" name="2">
            <div class="mrg-l mrg-r">
              <el-table
                stripe
                border
                :data="tableData">
                <table-column
                type="selection"
                fixed
                width="45"
                    align="center">
                </table-column>
                <table-column
                label="批次标签"
                prop="title">
                </table-column>
                <table-column
                label="批次标签(外语)"
                prop="foreignTitle">
                </table-column>
                <table-column
                label="输入控制">
                  <template slot-scope="scope">
                     {{ $utils.keyMatcher(scope.row.inputControl, $keys.warehouseBasic.inputControl).name }}
                  </template>
                </table-column>
                <table-column
                label="属性类型">
                 <template slot-scope="scope">
                     {{ $utils.keyMatcher(scope.row.fieldType, $keys.warehouseBasic.fieldType).name }}
                  </template>
                </table-column>
                <table-column
                label="属性选项">
                  <template slot-scope="scope">
                     {{ $utils.keyMatcher(scope.row.KeyValue, $keys.warehouseBasic.KeyValue).name }}
                  </template>
                </table-column>
                <table-column
                label="是否关键字">
                  <template slot-scope="scope">
                     {{ $utils.keyMatcher(scope.row.isKeyword, $keys.warehouseBasic.isKeyword).name }}
                  </template>
                </table-column>
                <table-column
                label="操作" v-if="mode!=='detail'">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-edit"
                        plain
                        circle
                        @click="handleEdit(scope.$index, scope.row)"></el-button>
                    </template>
                </table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="mrg-b">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
     <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.creatorNameCn}})</span>
              <span>创建时间：{{formData.createTime}}</span>
              <span>修改人登录名(姓名)：{{formData.modifierLoginName}}({{formData.modifierNameCn}})</span>
              <span>修改时间：{{formData.modifyTime}}</span>
            </div>
        </div>
      <div v-if="mode!=='detail'">
        <el-button v-auth="50400050201" type="primary" @click="submitForm">保存</el-button>
        <el-button v-auth="50400050202" type="primary" @click="submitAddForm">保存并新增</el-button>
      </div>
    </el-dialog>

      <edit-addform
        :editFormVisible="editFormVisible"
        :formData="editFormData"
        :index="rowindex"
        @editFormClose="editFormClose"
        @handleConfirm="handleConfirm">
      </edit-addform>
  </div>
</template>
<script>
import editAddform from './childrenForm/edit-addForm'
export default {
  components: {
    editAddform
  },
  data () {
    return {
      formData: {},
      rules: {
        lotCode: [
          { required: true, message: '批次属性编码必填', trigger: 'blur' }
        ],
        lotName: [
          { required: true, message: '批次属性名称必填', trigger: 'blur' }
        ]
      },
      editFormVisible: false,
      selectedIds: '',
      activeNames: ['1', '2'],
      currentPage: 1,
      pageSize: 10,
      editFormData: {},
      rowindex: ''
    }
  },
  props: {
    addFormVisible: Boolean,
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number,
    mode: String,
    headData: Object,
    rowData: Object
  },
  methods: {

    // 编辑
    handleEdit (index, row) {
      this.editFormVisible = true
      this.editFormData = { ...row }
      this.rowindex = index
    },

    // 关闭新增编辑弹窗
    editFormClose () {
      this.editFormVisible = !this.editFormVisible
    },

    // 新增编辑后数据
    handleConfirm (row, index) {
      this.$emit('handleChageTable', row, index)
      this.editFormClose()
    },

    // 每页显示条数
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.$emit('addGetList', { 'page.limitCount': pageSize })
    },

    // 当前页码
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.$emit('addGetList', { 'page.currentPage': currentPage })
    },

    // 发送保存数据
    postList () {
      const url = this.$API.warehouseBasic.libraryBatch.addFormSave
      const header = JSON.stringify(this.formData)
      const details = JSON.stringify(this.tableData)
      const param = { header, details }
      this.$https.post(url, param).then(res => {
        if (res.success) {
          this.$emit('saveOK')
          this.$getLotAttrs() // 重新获取全局批次属性
        }
      })
    },

    // 关闭新增弹窗
    handleFormClose () {
      this.$emit('handleFormClose')
      this.$refs.addForm.resetFields()
    },

    // 保存
    submitForm () {
      this.$refs.addForm.validate((vaild) => {
        if (vaild) {
          this.postList()
          this.$nextTick(() => {
            this.handleFormClose()
          })
        } else {
          return false
        }
      })
    },

    // 所属区域输入时赋值
    inpChange ($event) {
      this.areaVal = $event
    },

    // 保存并新增
    submitAddForm () {
      this.$refs.addForm.validate((vaild) => {
        if (vaild) {
          this.postList()
          this.$nextTick(() => {
            this.$refs.addForm.resetFields()
          })
        } else {
          return false
        }
      })
    },

    // 请求区域窗口数据
    areaGetList (query) {
      const url = this.$API.warehouseBasic.libraryArea.areaGetList
      const param = { ...this.areaFormData, ...query }
      this.$https.post(url, param).then(res => {
        this.tableList = res.rows
        this.total = res.total
      })
    },

    // 打开区域弹窗
    handleAreaForm () {
      this.areaGetList()
      this.areaFormVisible = true
    },

    // 关闭区域弹窗
    areaFormClose () {
      this.areaFormVisible = !this.areaFormVisible
    },

    //  区域弹窗checkbox勾选储存id
    cacheSelectedIds (ids) {
      this.selectedIds = ids
      this.areaVal = ids
      this.formData.areaName = ids
      this.formData.areaCode = ids
      this.areaFormVisible = !this.areaFormVisible
    }
  },
  watch: {
    headData: {
      handler (item) {
        this.formData = item
      },
      deep: true
    },
    rowData: {
      handler (item) {
        this.formData = item
      },
      deep: true
    }
  }
}
</script>
 <style lang="scss">
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
    .mrg-r{
        margin-right:10px;
    }
    .el-collapse{
        border: 1px solid #ebeef5;
        .el-collapse-item__header{
            padding-left: 10px;
            font-weight: bold;

            border-bottom: 1px solid #ebeef5 !important;
        }
        .el-collapse-item__content{
            padding-top:25px
        }
    }
    .row-mrg-t {
        margin-top: 20px;
    }
</style>
