<template>
  <el-form
    data-vv-scope="form"
    class="businessObj-header-form"
    v-form="{inputsDisplay: 'block'}"
  >
    <ht-form-item label="模型描述" class="is-required" custom-colon>
      <ht-input
        autocomplete="off"
        v-model="formData.description"
        :validate="{required: true}"
        :disabled="editing && deployed"
        :maxlength="50"
        :showWordLimit="true"
      ></ht-input>
    </ht-form-item>
    <ht-form-item label="模型别名" class="is-required" custom-colon>
      <ht-input
        v-model="formData.alias"
        :disabled="(editing && deployed) || (handleType == 'simple')"
        autocomplete="off"
        @blur="entBlur"
        name="alias"
        v-pinyin="formData.description"
        validate="required: true|regex:^[a-zA-Z][a-zA-Z0-9_]*$,只能输入字母、数字、下划线，且以字母开头"
        :maxlength="50"
        :showWordLimit="true"
      ></ht-input>
    </ht-form-item>
    <ht-form-item label="所属分类" class="is-required" custom-colon>
      <eip-sys-type-selector
        placeholder="请选择分类"
        :cat-id="'9'"
        v-model="formData.categoryName"
        :sys-type-id.sync="formData.categoryId"
        :validate="{required: true}"
      />
    </ht-form-item>
    <ht-form-item>
      <el-checkbox v-model="formData.supportDb">支持数据库</el-checkbox>
      <el-checkbox v-model="formData.isVerify">支持后端校验</el-checkbox>
    </ht-form-item>
    <div v-if="formData.isVerify">
      <ht-form-item class="is-required" custom-colon>
        <template slot="label">
          接口地址
          <el-tooltip
            effect="dark"
            content="请求类型必须为post 接收参数名称必须为boData"
            placement="left-start"
          >
            <i class="icon-notes"></i
          ></el-tooltip>
        </template>
        <ht-input
          v-model="verifyJson.url"
          placeholder="请输入接口地址 示例：/api/test/get"
          class="ht api-address-input"
          autocomplete="off"
          validate="required"
        >
          <ht-select
            slot="prepend"
            v-model="verifyJson.serviceMode"
            display-style="block"
            :clearable="false"
            validate="required"
            style="width: 108px"
            :options="serviceList"
            :props="{key: 'value', value: 'label'}"
          ></ht-select>
        </ht-input>
      </ht-form-item>
      <ht-form-item custom-colon>
        <template slot="label">
          接口头部
          <el-tooltip
            effect="dark"
            content='接口头部（header）为JSON格式，如：{"Authorization":"Bearer eyJhbGciOiJIUzUxMiJ9"}'
            placement="left-start"
          >
            <i class="icon-notes"></i
          ></el-tooltip>
        </template>
        <ht-input
          v-model="verifyJson.headerStr"
          class="ht"
          placeholder="请输入接口头部（header）"
          autocomplete="off"
        ></ht-input
      ></ht-form-item>
    </div>
  </el-form>
</template>

<script>
const eipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')
import form from '@/api/form.js'
export default {
  components: {
    eipSysTypeSelector
  },
  name: 'BusinessObjHeader',
  props: ['dataView', 'formData', "handleType"],
  data() {
    return {
      serviceList: [],
      verifyJson: {
        url: '',
        serviceMode: '',
        headerStr: ''
      }
    }
  },
  watch: {
    option: {
      handler: function(newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  computed: {
    editing: function() {
      return this.dataView && this.dataView.type == 'edit'
    },
    deployed: function() {
      return this.formData && this.formData.deployed == 1
    }
  },
  mounted() {
    if (this.formData.verifyJson) {
      this.verifyJson = JSON.parse(this.formData.verifyJson)
    }
    this.loadSystemList()
  },

  methods: {
    entBlur() {
      this.$emit('entBlur')
    },
    //取得服务列表
    loadSystemList() {
      form.fetchSystemList().then(resp => {
        if (resp && resp.data) {
          //从接口中取得服务列表
          this.serviceList = resp.data.map(item => {
            let m = {value: item.sysCode, label: item.sysName}
            return {...m}
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.businessObj-header-form {
  padding: 0 16px;
  /deep/ .el-form-item__label {
    text-align: left;
    float: none;
    word-break: break-word;
  }
  /deep/.el-form-item__content {
    margin-left: 0 !important;
  }
  .inputs {
    width: 100%;
  }
  /deep/.el-input-group__prepend {
    padding: 0;
    text-align: center;
  }
}
.api-address-input {
  /deep/.field-tail__wrap {
    position: relative;
  }
  /deep/.el-form-item__error {
    left: -175px;
    top: 25px;
    width: 50px;
  }
  /deep/.el-input-group__prepend {
    .field-tail__wrap {
      .el-form-item__error {
        left: -90px;
        top: 25px;
      }
    }
  }
}
</style>