<style>
    .mp_lookbtn {
        height: 52px;
        line-height: 50px;
        text-align: center;
        width: 120px;
        background-color: #fff;
        border: 1px solid #308e20;
        color: #308e20;
        font-size: 24px;
        border-radius: 8px;
    }

</style>
<template>
  <div :class="{'active':mpData.isCked}">
    <div class="diy-component-options" v-if="mpData.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 style="background: #fff;border: 1px solid #e2e2e2;border-width: 1px 0;padding: 20px;">
        <div style="color: #909399;font-size: 20px;margin-bottom: 10px;">小程序关联的公众号</div>
        <div flex="box:justify cross:center">
          <div>
            <div style="height: 80px;width: 80px;background: #333;border-radius: 100px; margin-right: 20px;"></div>
          </div>
          <div>
            <div style="font-size: 30px;">公众号名称</div>
            <div style="font-size: 24px;color: #666;">公众号简介</div>
          </div>
          <div>
            <div class="mp_lookbtn">查看</div>
          </div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="mpData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="组件位置">
          <el-radio v-model="data.position" label="auto">自动</el-radio>
          <el-radio v-model="data.position" label="top">悬浮顶部</el-radio>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";

  export default {
    props: ["mpData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        data: this.mpData.data,
      };
    },
    created() {

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

    },
    mounted() {

    }
  };

</script>
