<template>
  <div :class="{'active':searchData.isCked}">
    <div class="diy-component-options" v-if="searchData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview">
      <div class="diy-search">
        <el-form label-width="90px">
          <el-form-item :label="searchData.CompData.Name" :required="searchData.CompData.IsRequire"
            style="margin-bottom:0">
            <el-input type="textarea" v-model="searchData.CompData.TextValue"
              :placeholder="`最多输入${searchData.CompData.WordsLength}个字`"></el-input>
            <div class="tradeRemark">{{searchData.CompData.Remark}}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="diy-component-edit" v-if="searchData.isCked">
      <el-form label-width="100px">
        <el-form-item label="名称" required>
          <el-input v-model="searchData.CompData.Name" size="small" :maxlength="100"
            :placeholder="getplaceholderStr(searchData.CompData.WordsLength)"></el-input>
        </el-form-item>
        <el-form-item label="字数">
          <el-input type="text" v-model="searchData.CompData.WordsLength"
            @keyup.native="checkInteger(searchData.CompData,'WordsLength')" size="small"></el-input>
        </el-form-item>
        <el-form-item label="提示文字">
          <el-input type="textarea" v-model="searchData.CompData.Remark" size="small"></el-input>
        </el-form-item>
        <el-form-item label="是否必填">
          <el-switch v-model="searchData.CompData.IsRequire">
          </el-switch>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    props: ["searchData", "index", "dataLeng"],
    data() {
      return {};
    },
    created() {},
    methods: {
      getplaceholderStr(num) {
        var str = "";
        if (num > 0) {
          str = "最多输入" + num + " 个字";
        }
        return str;
      },
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      }
    },
    mounted() {}
  };

</script>
