<template>
          <el-form label-width="160px" style="margin-top:150px;">
          <el-form-item label="模板类型：" prop="tempType">
            <el-select filterable placeholder="" v-model="tempType" class="form-item">
              <el-option v-for="item in templateTypes" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="tempName" label="模板名称：">
            <el-input type="text" v-model="tempName" class="form-item"></el-input>
          </el-form-item >
        </el-form>
</template>
<script>
export default {
  data() {
    return {
      tempType: '',
      tempName: '',
      templateTypes: []
    }
  },
  methods: {
    getCode() {
      return `<z:config type="${this.tempType}" name="${this.tempName}"/>`
    },
    async init() {
      let res = await axios.get('/ui/contentcore/templateeditor/templatetypes')
      this.templateTypes = res.data.status === 1 ? res.data.data : this.templateTypes
    }
  },
  watch: {
    tempType(curVal, oldVal) {
      let oldType = this.templateTypes.find(type => oldVal === type.key)
      let curType = this.templateTypes.find(type => curVal === type.key)
      if (this.tempName === '' || (oldType.name && this.tempName === oldType.name)) {
        this.tempName = curType.name
      }
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.tempType = ''
    this.tempName = ''
  }
}
</script>
