<template>
<div class="creator">
  <div class="creator__body">
    <el-collapse v-model="activeNames">
      <el-form
        ref="form"
        inline
        label-position="top"
        :model="formData"
        :rules="rules"
        :disabled="mode === 'detail'"
      >
        <el-collapse-item title="基本信息" name="1">
          <el-form-item label="规则编码" prop="itemGroupCode">
            <el-input v-model="formData.itemGroupCode" @input.native="itemGroupCodeInput" @change="itemGroupCodeChange"></el-input>
          </el-form-item>
          <el-form-item label="规则名称" prop="itemGroupName">
            <el-input v-model="formData.itemGroupName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark"></el-input>
          </el-form-item>
        </el-collapse-item>
      </el-form>
      <el-collapse-item title="质检项明细" name="2">
        <template>
          <DetailList :mode="mode" :formData="formData" :needGetList="needGetList" @deleteItems="deleteDetailItem" @setQCItemDetails="setQCItemDetails"></DetailList>
        </template>
      </el-collapse-item>
      <el-collapse-item title="操作信息" name="4" v-if="mode === 'detail'">
        <div class="operation-info">
          <el-col :span="6">创建人登录名: {{detailData.createLoginName}} ({{detailData.createUserNameCn}})</el-col>
          <el-col :span="6">创建时间: {{detailData.createTime}}</el-col>
          <el-col :span="6">修改人登录名: {{detailData.modifyLoginName}} ({{detailData.modifyUserNameCn}})</el-col>
          <el-col :span="6">修改时间: {{detailData.modifyTime}}</el-col>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>

  <div class="creator__foot" v-if="mode !== 'detail'">
    <el-button v-auth="50300010201" type="primary" @click="confirm">保存</el-button>
    <el-button v-auth="50300010201" type="primary" @click="confirmAndCreate">保存并新增</el-button>
  </div>
</div>
</template>

<script>
import routerMixins from '../routerMixins'
import DetailList from './DetailList'

export default {
  mixins: [ routerMixins ],
  components: { DetailList },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { ...val }
        val.itemGroupCode && (this.needGetList = true)
      }
    },
  },
  created () {
    this.mode = this.$route.params.mode || 'create'
    this.detailData = this.$route.params.detailData || {}
  },
  mounted () {
  },

  data () {
    return {
      formData: {}, // 表单对象
      mode: 'create', // 模式
      detailData: {},
      activeNames: ['1', '2', '3', '4'],
      // 表单验证
      rules: {
        itemGroupCode: [{ required: true, message: '必填', trigger: 'change' }],
        itemGroupName: [{ required: true, message: '必填', trigger: 'change' }],
      },
      needGetList: false, // 子组件列表获取数据的时机
      deleteQCItems: [], // 删除的明细项
      qcItemDetails: [], // 明细列表
    }
  },
  methods: {
    // 规则编号变化, 自动大写
    itemGroupCodeInput (e) {
      this.$set(this.formData, 'itemGroupCode', e.target.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase())
    },
    itemGroupCodeChange () {
      this.$set(this.formData, 'itemGroupCode', this.formData.itemGroupCode.replace(/[^a-zA-Z0-9]/g, '').toUpperCase())
    },
    // 保存
    confirm () {
      this.confirmAndCreate('needClose')
    },
    // 保存并新增
    confirmAndCreate (needClose) {
      const url = this.$API.warehouseBasic.qcItems.create
      const param = {
        qcItemHeader: JSON.stringify(this.formData),
        qcItemDetails: JSON.stringify(this.qcItemDetails),
        deleteRows: JSON.stringify(this.deleteQCItems),
      }
      this.$https.post(url, param)
        .then(data => {
          this.$refs.form.resetFields()
          this.needRefresh = true
          this.formData = {}
          this.$set(this, 'qcItemDetails', [])
          this.deleteQCItems = []
          this.needGetList = false
          if (needClose === 'needClose') {
            this.$router.back()
          }
        })
    },
    // 添加明细项
    setQCItemDetails (itemList) {
      this.qcItemDetails = itemList
    },
    // 删除明细项
    deleteDetailItem (itemList) {
      this.deleteQCItems = itemList
    },
  },
}
</script>

<style lang="scss" scoped>
.creator {
  overflow-y: auto;
}
.creator__body {
  height: calc(100vh - 200px); // 减去自己的 margin 和 content 头的高度和 bottom 的高度
  border-bottom: 1px solid #ddd;
  overflow-x: hidden;
}
.el-collapse-item {
  margin-bottom: 20px;
}
.creator__foot {
  position: fixed;
  bottom: 20px;
}

.operation-info {
  text-align: center;
}
</style>
