<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="confirmClickHandler" :priv="codeType === 'new' ? 'Platform.Code.Add' : 'Platform.Code.Edit'">
        <i class="fa fa-save"></i> 保存
      </el-button>
    </el-toolbar>
    <div class="detail-panel block-line-panel" v-loading="dataLoading">
      <el-form :model="tmpCode" :rules="codeRules" ref="codeForm" label-width="100px">
        <el-form-item label="代码类别" prop="codeType">
          <el-input v-model="tmpCode.codeType" :disabled="codeType && codeType!='new'"></el-input>
        </el-form-item>
        <el-form-item label="代码名称" prop="codeName">
          <el-input v-model="tmpCode.codeName"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="tmpCode.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: ''
    }
  },

  data() {
    return {
      dataLoading: false,
      tmpCode: {},
      codeRules: {
        codeType: [
          { required: true, message: '请输入类别', trigger: 'blur' },
          {
            pattern: /^[-._$\w]{0,40}$/,
            message: '请输入字母、数字、下划线、点且长度不超过40个字符',
            trigger: 'blur,change'
          }
        ],
        codeName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          {
            pattern: /^[.-\w-\u4e00-\u9fa5]{0,2000}$/,
            message: '请输入汉字、字母、数字、点且长度不超过2000个字符',
            trigger: 'blur,change'
          }
        ]
      }
    }
  },

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

  methods: {
    back() {
      this.$router.push({path: '/platform/code'})
    },

    async init() {
      if (this.codeType && this.codeType !== 'new') {
        this.dataLoading = true
        let res
        try {
          res = await axios.get(`/ui/codes/${this.codeType}`)
        } catch (e) {
          this.dataLoading = false
          return
        }
        this.dataLoading = false
        if (res.data.status !== 1) {
          util.showResponseMessage(res.data)
          return
        }
        this.tmpCode = res.data.data
      }
    },

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