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

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

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