<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="back()" type="primary" size="me dium" round class="shadow-primary">
        <i class="fa fa-chevron-left"></i> 返回上页
      </el-button>
      <span class="button-separator"></span>
      <el-button @click="confirmCodeItemClickHandler" :priv="ID === 'new' ? 'Platform.Code.Add' : 'Platform.Code.Edit'">
        <i class="fa fa-save"></i> 保存
      </el-button>
    </el-toolbar>

    <div class="detail-panel block-line-panel">
      <el-form :model="tmpCodeItem" :rules="codeItemRules" ref="codeItemForm" label-width="100px">
        <el-form-item label="代码" prop="codeType">
          <el-input v-model="tmpCodeItem.codeType" :readonly="true" :disabled="true" ></el-input>
        </el-form-item>
        <el-form-item label="值" prop="codeValue" >
          <el-input v-model="tmpCodeItem.codeValue" ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="codeName">
          <el-input v-model="tmpCodeItem.codeName" ></el-input>
          <i v-if="false" class="fa fa-language" @click="langBtnClickHandler('codeName',tmpCodeItem.codeName,tmpCodeItem.name_I18N)"></i>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="tmpCodeItem.memo" ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'

export default {
  props: {
    codeType: {
      type: [String],
      default: ''
    },
    ID: {
      type: [String, Number]
    }
  },
  data() {
    return {
      tmpCodeItem: {},
      codeItemRules: {
        codeType: [{ required: true, message: '请输入类型', trigger: 'blur' }],
        codeName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            pattern: /^[.-\w-\u4e00-\u9fa5]{0,2000}$/,
            message: '请输入汉字、字母、数字、点且长度不超过2000个字符',
            trigger: 'blur,change'
          }
        ],
        codeValue: [
          { required: true, message: '请输入值', trigger: 'blur' },
          {
            pattern: /^[.-\w-\u4e00-\u9fa5]{0,40}$/,
            message: '请输入汉字、字母、数字、点且长度不超过40个字符',
            trigger: 'blur,change'
          }
        ]
      }
    }
  },

  async created() {
    await this.init()
  },

  methods: {
    back() {
      this.$router.push({path: `/platform/code/${this.codeType}/items`, query: {allowAddItem: this.tmpCodeItem.allowAddItem || false}})
    },

    async init() {
      this.tmpCodeItem.codeType = this.codeType
      if (this.ID && this.ID !== 'new') {
        let res = await axios.get(`/ui/codes/${this.codeType}/items/${this.ID}`)
        if (res.data.status !== 1) {
          util.showResponseMessage(res.data)
          return
        }
        this.tmpCodeItem = res.data.data
      }
    },

    async confirmCodeItemClickHandler() {
      try {
        await util.validateForm(this.$refs['codeItemForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      let res
      if (this.ID === 'new') {
        res = await axios.post(`/ui/codes/${this.codeType}/items`, this.tmpCodeItem)
      } else {
        res = await axios.put(`/ui/codes/${this.codeType}/items/${this.ID}`, this.tmpCodeItem)
      }
      if (res.data && res.data.status === 1) {
        util.showMessage(res)
        this.back()
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    }
  }
}
</script>
