<template>
  <div class="item-properties">
    <p class="properties-title">表单配置</p>
    <p v-if="!selectItem.type" class="no-data-text">请先从面板中选择组件</p>

    <div v-if="selectItem.type" class="properties-form">
      <el-form
        ref="form"
        :model="selectItem.options"
        label-position="top"
        size="mini"
      >
        <el-form-item label="表单名称" prop="label">
          <el-input
            v-model="selectItem.options['label']"
            placeholder="请输入表单名称"
          />
        </el-form-item>
        <template v-if="selectItem.type === 'input'">
          <el-form-item label="提示文字" prop="placeholder">
            <el-input
              v-model="selectItem.options['placeholder']"
              placeholder="请输入提示文字"
            />
          </el-form-item>
        </template>

        <template v-else-if="selectItem.type === 'textarea'">
          <el-form-item label="提示文字" prop="placeholder">
            <el-input
              v-model="selectItem.options['placeholder']"
              placeholder="请输入提示文字"
            />
          </el-form-item>
          <el-form-item label="行数" prop="rows">
            <el-input
              v-model="selectItem.options['rows']"
              placeholder="请输入行数"
            />
          </el-form-item>
          <el-form-item label="最大长度" prop="maxLength">
            <el-input
              v-model="selectItem.options['maxLength']"
              placeholder="请输入最大长度"
            />
          </el-form-item>
        </template>

        <template v-else-if="['radio', 'checkbox', 'select'].includes(selectItem.type)">
          <el-form-item label="选项" prop="options">
            <div class="form-options">
              <div
                v-for="(item, index) in selectItem.options.options"
                :key="index"
                class="form-options_item"
              >
                <el-input v-model="item.label" placeholder="请输入选项名称" />
                <el-button-group>
                  <el-button
                    type="default"
                    icon="el-icon-plus"
                    size="mini"
                    :disabled="selectItem.options.options.length >= 200"
                    @click="handleAddOptions(index)"
                  />
                  <el-button
                    type="default"
                    icon="el-icon-minus"
                    size="mini"
                    :disabled="selectItem.options.options.length <= 1"
                    @click="handleDelOptions(index)"
                  />
                </el-button-group>
              </div>
            </div>
          </el-form-item>
        </template>
        <el-form-item label="是否必填" prop="isRequired">
          <el-radio-group v-model="selectItem.options['isRequired']">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import LocalMixin from '../../locale/mixin.js'

export default {
  mixins: [LocalMixin],
  // inject: {
  //   // 自定义组件
  //   customComponents: {
  //     from: 'customC',
  //     default: () => []
  //   }
  // },
  inject: ['getSelectItem'],
  data() {
    return {
      count: 2
    }
  },
  computed: {
    selectItem() {
      return this.getSelectItem()
    }
  },
  watch: {
    // selectItemKey() {
    //   this.init()
    // }
  },
  mounted() {},
  methods: {
    init() {},

    handleAddOptions(index) {
      this.count++
      this.selectItem.options.options.splice(index + 1, 0, {
        label: '选项名称',
        value: this.count.toString()
      })
    },

    handleDelOptions(index) {
      this.selectItem.options.options.splice(index, 1)
    }
  }
}
</script>
<style scoped lang="scss">
.item-properties {
  .properties-title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #000000;
    font-weight: bold;
    padding: 0 8px;
  }
  .properties-form {
    padding: 0 16px;

    .form-options {
      &_item {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        margin-bottom: 8px;

        .el-button-group {
          display: flex;
          align-items: center;
          margin-left: 16px;
        }
      }
    }
  }
  .no-data-text {
    text-align: center;
    font-size: 13px;
  }
  .common-form {
    padding: 10px;
  }

  .linkage-item {
    border-bottom: 1px solid #ebeef5;
    .linkage-form {
      padding: 10px;
    }
  }
}
</style>
