<script>
import { domMap } from "@/const/inputType";
import { templatePropsMap } from "@/const/templateProps";
export default {
  props: {
    config: Object,
    index: Number,
  },
  data() {
    return {
    };
  },
  methods: {
    optionsRender(h) {
      if(this.config.edit_input === "checkbox" || this.config.edit_input === "radio") {
        return ['选项1','选项2','选项3'].map(i => h('el-option',{ props: { value: i,label: i } }))
      }
      if(this.config.edit_input === "file" || this.config.edit_input === "files") {
        return [
          h('el-button',{
            slot: 'trigger',
            props: {
              size: 'small',
              type: 'primary'
            }
          }, '选取文件'),
          h('el-button',{
            style: {
              'margin-left': '10px'
            },
            props: {
              size: 'small',
              type: 'success'
            }
          }, '上传到服务器'),
          h('div',{
            class: 'el-upload__tip',
            slot: 'tip'
          },'文件不超过500kb')
        ]
      }
    },
  },
  computed: {
    hiddenClass() {
      let classArr = []
      if(!this.config.list_show && this.config.form_show) {
        classArr.push('no-list-show')
      }
     if(!this.config.form_show && this.config.list_show) {
        classArr.push('no-form-show')
      }
      if(!this.config.list_show && !this.config.form_show) {
        classArr.push('no-all-show')
      }
      return classArr;
    }
  },
  render(h) {
    return h(
      "div",
      {
        class: this.hiddenClass,
        style: {
          opacity: (this.config.list_show && this.config.form_show) ? 1 : 0.5,
          filter:
            this.index === this.$store.state.form.selectedIndex
              ? "drop-shadow(0 0 2px #0077CCFF) drop-shadow(0 0 8px #449FD9FF)"
              : "",
          position: "relative",
        },
      },
      [
        h(domMap.get(this.config.edit_input), {
          style: {
            width: "100%",
          },
          props: templatePropsMap.get(this.config.edit_input),
        },this.optionsRender(h)),
      ]
    );
  },
};
</script>

<style scoped lang="scss">
.no-list-show {
  &::after {
    content: "列表隐藏";
    color: red;
    font-size: 12px;

    position: absolute;
    right: 10px;
    top: 0;
  }
}
.no-form-show {
  &::after {
    content: "表单隐藏";
    color: red;
    font-size: 12px;

    position: absolute;
    right: 10px;
    top: 0;
  }
}
.no-all-show {
  &::after {
    content: "表单、列表隐藏";
    color: red;
    font-size: 12px;

    position: absolute;
    right: 10px;
    top: 0;
  }
}
</style>
