<template>
  <el-row :gutter="15">
    <app-filter-item
      label="模型描述"
      prop="description"
      :rules="[{required: true, message: '模型描述不能为空'}]"
    >
      <el-input
        v-model="formData.description"
        autocomplete="off"
        clearable
        placeholder="请输入"
        :maxlength="50"
        :disabled="editing && deployed"
        @change="getPinyin"
      />
    </app-filter-item>

    <app-filter-item
      label="模型别名"
      prop="alias"
      :rules="[
        {
          required: true,
          pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
          message: '只能输入字母、数字、下划线，且以字母开头',
        },
      ]"
    >
      <el-input
        v-model="formData.alias"
        clearable
        placeholder="请输入"
        :maxlength="50"
        :disabled="editing && deployed"
      />
    </app-filter-item>

    <!-- <app-filter-item label="模型描述" prop="description">
        <el-tooltip
          class="item"
          effect="dark"
          content="勾选后，会在数据库生成对应的库表用于存储业务数据"
          placement="top-end"
        >
          <el-switch
            :disabled="editing && deployed"
            v-model="formData.supportDb"
          ></el-switch>
        </el-tooltip>
      </app-filter-item> -->
  </el-row>
</template>

<script>
export default {
  name: 'ModelHeader',
  props: {
    dataView: {
      type: Object,
      default: () => ({}),
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    editing: function () {
      return this.dataView && this.dataView.type == 'edit'
    },
    deployed: function () {
      return this.formData && this.formData.deployed == 1
    },
  },
  methods: {
    entBlur() {
      this.$emit('entBlur')
    },
    getPinyin() {
      this.$http
        .request({
          url: `${window.context.uc}/base/tools/v1/getPinyin`,
          method: 'GET',
          params: {chinese: this.formData.description, type: 0},
        })
        .then((res) => {
          if (res.data.state) {
            this.$set(this.formData, 'alias', res.data.value)
            this.formData.alias = res.data.value
            console.log(this.formData.alias)
          }
        })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .app-filter-item {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
