<style>
  .reserStore {
    min-height: 200px;
    background: #fff;
    overflow: hidden;
  }
  .reserStoreImg{
    width:100%;
    height:150px;
    overflow: hidden;
  }
  .reserStoreImg img{
      width:100%;
      margin-top:-100px;
  }
  .reserBtmStore{
      padding:30px;
  }
  .reserBtmOne{
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
</style>
<template>
  <div :class="{'active':reserData.isCked}">
    <div class="diy-component-options" v-if="reserData.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="reserStore" :style="{marginLeft:data.PaddingLeft+'px',
        marginRight:data.PaddingRight+'px',marginTop:data.PaddingTop+'px',
        marginBottom:data.PaddingBottom+'px','borderRadius':data.SearchFilletPX+'px'}">
          <div class="reserStoreImg" v-if="data.IsShowStoreImg">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hire.jpg" alt=""/>
          </div>
          <div class="reserBtmStore">
            <div class="reserBtmOne">
                <div style="color:#000000;font-size:14px;">月星环球港门店</div>
                <div style="color:#111111;font-size:12px;">距离：20m</div>
            </div>
            <div style="color:#727272;font-size:12px;margin:20px 0;">成都市锦江区阳光新业中心2号楼2302</div>
            <div class="reserBtmOne">
                <div style="color:#555555;font-size:12px;">
                <i style="color:#FF4048;margin-right:5px;position:relative;top:-4px;" class="iconfont icon-tel"></i>023-12345678</div>
                <div style="color:#FFC86D;font-size:12px;">上次消费的店铺</div>
            </div>
          </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="reserData.isCked">
      <el-form label-width="120px" @submit.native.prevent>
        <el-form-item label="上边距">
          <el-input type="number" size="small" :min="0" v-model="data.PaddingTop">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="下边距">
          <el-input type="number" size="small" :min="0" v-model="data.PaddingBottom">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="左边距">
          <el-input type="number" size="small" :min="0" v-model="data.PaddingLeft">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="右边距">
          <el-input type="number" size="small" :min="0" v-model="data.PaddingRight">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="圆角">
          <el-input type="number" size="small" :min="0" v-model="data.SearchFilletPX">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否显示封面图">
            <el-switch
                v-model="data.IsShowStoreImg"
                active-color="#409EFF"
                :active-value="true"
                :inactive-value="false">
            </el-switch>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    props: ["reserData", "index", "dataLeng"],
    components: {},
    data() {
      return {
        data: this.reserData.data,
        checkIndex: 0
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      }
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
