<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="ruleCode">
            <el-input v-model="formData.ruleCode" @input.native="ruleCodeInput" @change="ruleCodeChange"></el-input>
          </el-form-item>
          <el-form-item label="规则名称" prop="ruleName">
            <el-input v-model="formData.ruleName"></el-input>
          </el-form-item>
          <el-form-item label="质检类型" prop="qcType">
            <el-select v-model="formData.qcType">
              <template v-for="item in $keys.strategy.qcRules.qcType">
                <el-option :key="item.id" :label="item.name" :value="item.key"></el-option>
              </template>
            </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-form>
      <el-collapse-item title="级差" name="2">
        <template>
          <RangeList :mode="mode" :formData="formData" :needGetList="needGetList" @deleteItems="deleteRangeItem"></RangeList>
        </template>
      </el-collapse-item>
      <el-collapse-item title="质检处理建议" name="3">
        <template>
          <SuggestList :mode="mode" :formData="formData" :needGetList="needGetList" @deleteItems="deleteSuggestItem"></SuggestList>
        </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 RangeList from './rangeList/RangeList'
import SuggestList from './suggestList/SuggestList'

export default {
  mixins: [ routerMixins ],
  components: { RangeList, SuggestList },
  watch: {
    detailData: {
      immediate: true,
      handler (val) {
        this.formData = { cdRuleQcClassList: [], cdRuleQcDetailList: [], ...val }
        val.ruleCode && (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: {
        ruleCode: [{ required: true, message: '必填', trigger: 'change' }],
        ruleName: [{ required: true, message: '必填', trigger: 'change' }],
        qcType: [{ required: true, message: '必填', trigger: 'change' }],
      },
      needGetList: false, // 子组件列表获取数据的时机
      deleteRuleQcClassItems: [], // 删除的级差项
      deleteRuleQcDetailItems: [], // 删除的处理建议
    }
  },
  methods: {
    // 规则编号变化
    ruleCodeInput (e) {
      this.$set(this.formData, 'ruleCode', e.target.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase())
    },
    ruleCodeChange () {
      this.$set(this.formData, 'ruleCode', this.formData.ruleCode.replace(/[^a-zA-Z0-9]/g, '').toUpperCase())
    },
    // 保存
    confirm () {
      this.confirmAndCreate('needClose')
    },
    // 保存并新增
    confirmAndCreate (needClose) {
      const url = this.$API.strategy.qcRules.create
      const param = {
        ruleQc: JSON.stringify(this.formData),
        deleteRuleQcClassItems: JSON.stringify(this.deleteRuleQcClassItems),
        deleteRuleQcDetailItems: JSON.stringify(this.deleteRuleQcDetailItems)
      }
      this.$https.post(url, param)
        .then(data => {
          this.$refs.form.resetFields()
          this.needRefresh = true
          this.formData = {}
          this.$set(this.formData, 'cdRuleQcClassList', [])
          this.$set(this.formData, 'cdRuleQcDetailList', [])
          this.deleteRuleQcClassItems = []
          this.deleteRuleQcDetailItems = []
          this.needGetList = false
          if (needClose === 'needClose') {
            this.$router.back()
          }
        })
    },
    // 删除级差项
    deleteRangeItem (itemList) {
      this.deleteRuleQcClassItems = itemList
    },
    // 删除建议项
    deleteSuggestItem (itemList) {
      this.deleteRuleQcDetailItems = itemList
    },
  },
}
</script>

<style lang="scss" scoped>
  .creator {
    overflow-y: auto;
    height: 100%;
  }
  .creator__body {
    height: calc(100% - 50px); // 减去 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>
