<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" :style="{background:searchData.data.background,marginLeft:searchData.data.left+'px',
      marginRight:searchData.data.right+'px',marginTop:searchData.data.top+'px',marginBottom:searchData.data.bottom+'px'}">
        <div
          :style="{background:searchData.data.color,borderRadius:searchData.data.radius+'px',color:searchData.data.textColor,textAlign:searchData.data.textPosition}">
          {{searchData.data.placeholder}}
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="searchData.isCked">
      <el-form label-width="100px">
        <el-form-item label="搜索框位置">
           <el-select v-model="searchData.data.searchPosition" size="small" class="w120"  >
            <el-option label="默认" :value='0'></el-option>
            <el-option label="顶部" :value='1'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索框颜色">
          <el-color-picker v-model="searchData.data.color" size="small"></el-color-picker>
          <el-input type="text" v-model="searchData.data.color" size="small" style="width: 80px; margin-right: 25px;">
          </el-input>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker v-model="searchData.data.background" size="small"></el-color-picker>
          <el-input type="text" v-model="searchData.data.background" size="small"
            style="width: 80px; margin-right: 25px;"></el-input>
        </el-form-item>
        <el-form-item label="圆角">
          <el-input type="number" size="small" v-model="searchData.data.radius"
            @keyup.native="checkInteger(searchData.data,'radius')" maxlength="2">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="提示文字">
          <el-input type="text" size="small" v-model="searchData.data.placeholder" maxlength="30"></el-input>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="searchData.data.textColor" size="small"></el-color-picker>
        </el-form-item>
        <el-form-item label="文字位置">
          <el-radio v-model="searchData.data.textPosition" label="left">居左</el-radio>
          <el-radio v-model="searchData.data.textPosition" label="right">居右</el-radio>
        </el-form-item>
        <el-form-item label="上边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'top','-')" v-model="searchData.data.top" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="下边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'bottom','-')" v-model="searchData.data.bottom" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="左边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'left','-')" v-model="searchData.data.left" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="右边距">
          <el-input type="text" size="small" @keyup.native="checkInteger(searchData.data,'right','-')" v-model="searchData.data.right" @change="getminNum()">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    props: ["searchData", "index", "dataLeng"],
    data() {
      return {

      };
    },
    created() {},
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      getminNum(){
        if(this.searchData.data.top==''){
            this.searchData.data.top=0;
        }
        if(this.searchData.data.right==''){
            this.searchData.data.right=0;
        }
        if(this.searchData.data.bottom==''){
            this.searchData.data.bottom=0;
        }
        if(this.searchData.data.left==''){
            this.searchData.data.left=0;
        }
      }
    },
    mounted() {}
  };

</script>