<template>
  <el-form
    v-model="column"
    data-vv-scope="columnForm"
    label-width="100px"
    v-form="{formItemAlign: 'right'}"
    class="add-column-form"
  >
    <ht-form-item label="栏目名称" prop="name" class="is-required">
      <ht-input
        class="fix-width-input"
        v-model="column.name"
        autocomplete="off"
        :validate="{required: true}"
        placeholder="请输入名称"
        :maxlength="50"
        :showWordLimit="true"
      ></ht-input>
      <!-- v-if="column.isPublic !== 1" -->
      <el-checkbox v-model="column.showTitle">显示</el-checkbox>
    </ht-form-item>
    <ht-form-item label="栏目别名" prop="code" class="is-required">
      <ht-input
        v-if="operateType === 'add'"
        class="fix-width-input"
        v-model="column.alias"
        v-pinyin="column.name"
        autocomplete="off"
        :validate="
          'required:true|regex:^[a-zA-Z][a-zA-Z0-9_]*$,只能输入字母、数字、下划线，且以字母开头|isExist:${portal}/portal/sysIndexColumn/sysIndexColumn/v1/getByAlias?alias=,' +
            (column.id || '')
        "
        placeholder="请输入别名"
        :disabled="column.id ? true : false"
        :maxlength="50"
        :showWordLimit="true"
      >
      </ht-input>
      <ht-input
        v-else
        class="fix-width-input"
        v-model="column.alias"
        disabled
      ></ht-input>
    </ht-form-item>
    <!-- <ht-form-item label="栏目分类" class="is-required col-classify">
      <eip-sys-type-selector
        typeKey="INDEX_COLUMN_TYPE"
        v-model="column.catalogName"
        :sys-type-id.sync="column.catalog"
      ></eip-sys-type-selector>
    </ht-form-item> -->
    <ht-form-item
      label="使用平台"
      style="display: block"
      class="is-required"
      v-form="{inputsDisplay: 'block'}"
    >
      <ht-radio
        style="width: 100%;"
        v-model="column.isPublic"
        :validate="{required: true}"
        @change="changePublic"
        :disabled="column.id ? true : false"
        :options="options"
      />
    </ht-form-item>
    <ht-form-item
      label="数据类型"
      style="display: block"
      v-if="columnTenantId == -1"
    >
      <ht-radio
        style="width: 100%;"
        v-model="column.isInit"
        :disabled="column.id ? true : false"
        :options="[
          {key: 0, value: '私有数据'},
          {key: 1, value: '平台公用数据'}
        ]"
      />
    </ht-form-item>
    <ht-form-item label="栏目高度" v-if="column.isPublic != 1">
      <el-radio-group
        v-model="designColumn.colHeightType"
        v-if="designColumn.colType !== 'custom'"
        @change="handleHeightTypeChange"
      >
        <el-radio label="default">默认</el-radio>
        <el-radio label="custom" class="custom-col-height">自定义</el-radio>
      </el-radio-group>
      <template
        v-if="
          designColumn.colHeightType === 'custom' ||
            designColumn.colType === 'custom' ||
            !designColumn.colHeightType
        "
      >
        <ht-input
          v-model="column.colHeight"
          type="number"
          :min="0"
          class="column-height__input"
          placeholder="输入高度"
        ></ht-input
        ><span class="unit">px</span>
      </template>
    </ht-form-item>
    <!-- <ht-form-item
      label="更多路径"
      v-if="designColumn.colType !== 'swipeSlide' && column.showTitle"
    >
      <ht-input
        class="full-input"
        autocomplete="off"
        v-model="column.colUrl"
        :maxlength="100"
        :showWordLimit="true"
      ></ht-input>
    </ht-form-item> -->
    <ht-form-item label="栏目用途">
      <ht-input
        class="full-input"
        v-model="column.memo"
        :maxlength="50"
        type="textarea"
        :autosize="{minRows: 2, maxRows: 4}"
        :showWordLimit="true"
      ></ht-input>
    </ht-form-item>
  </el-form>
</template>

<script>
import columnMixins from '@/views/portal/components/columnMixins.js'
import EipSysTypeSelector from '@/components/selector/EipSysTypeSelector.vue'
export default {
  name: 'AddColumnForm',
  components: {
    EipSysTypeSelector
  },
  props: {
    column: {
      type: Object,
      default: () => {}
    },
    operateType: {
      type: String,
      default: 'add'
    },
    designColumn: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [columnMixins],
  data() {
    return {
      options: [
        {key: 0, value: '管理端'},
        {key: 2, value: '应用端'},
        {key: 1, value: '手机端'}
      ]
    }
  },

  methods: {
    handleHeightTypeChange(val) {
      this.$emit('height-type-change', val)
    },
    changePublic(val) {
      // 手机端为 左右糅合 时置空
      if (val == 1 && this.designColumn.model == 'blend') {
        this.designColumn.model = ''
      }
      this.$set(this.designColumn, 'dataType', '')
      this.$emit('public-type-change', val)
      this.$store.dispatch('flow/updateFormPublic', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.add-column-form {
  margin-top: 24px;
  .fix-width-input {
    width: 418px;
    margin-right: 10px;
  }
  .full-input {
    width: 100%;
  }
  .col-classify {
    ::v-deep {
      .el-input__inner {
        border-radius: 2px 0 0 2px;
      }
      .el-input-group__append {
        border-radius: 0 2px 2px 0;
      }
    }
  }
  .custom-col-height {
    padding-right: 10px;
  }
}
</style>