<style>
  .Useravatar-icon {
    background: #E3E3E3;
    border: 2px solid #fff;
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    display: inline-block;
  }

</style>
<template>
  <div :class="{'active':shopinfoData.isCked}">
    <div class="diy-component-options" v-if="shopinfoData.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="user-info-container" flex="cross:center" style=" background-color: rgba(255,255,255,1);background-size: cover;background-position: center;padding: 50px;
       height:156px;box-shadow:0px 6px 12px 0px rgba(76,76,76,0.14);border-radius:20px;"
        :style="'background-image: url('+getIconLink(data.backgroundPicUrl)+');'">
        <div style="width: 100%;display:none" :style="cOutBoxStyle">
          <div style="width: 100%;">
            <div :style="cAvatarBoxStyle">
              <div class="Useravatar-icon"></div>
            </div>
            <div style="color: #fff;" :style="cNameBoxStyle">{{data.headName}}</div><br />
            <div style="color: #fff;" :style="cNameBoxStyle">{{data.headInfo}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="shopinfoData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="昵称" style="display:none">
          <el-input type="text" v-model="data.headName" size="small" style="margin-right: 25px;">
          </el-input>
        </el-form-item>
        <el-form-item label="介绍" style="display:none">
          <el-input type="text" v-model="data.headInfo" size="small" style="margin-right: 25px;">
          </el-input>
        </el-form-item>
        <el-form-item label="背景图片">
          <div class="zk_pic_box" @click="checkType=1,choicImg=true" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.backgroundPicUrl) + ')'}">
            <i v-if="data.backgroundPicUrl==''" class="el-icon-picture-outline"></i>
            <el-button type="danger" v-if="data.backgroundPicUrl!=''" class="image-delete" size="mini"
              icon="el-icon-close" @click.stop="data.backgroundPicUrl=''" circle></el-button>
          </div>
        </el-form-item>

        <el-form-item label="按钮图片">
          <div class="zk_pic_box" @click="checkType=2,choicImg=true" flex="main:center cross:center"
            :style="{backgroundImage:'url(' + getIconLink(data.bottonImg) + ')'}">
            <i v-if="data.bottonImg==''" class="el-icon-picture-outline"></i>
            <el-button type="danger" v-if="data.bottonImg!=''" class="image-delete" size="mini" icon="el-icon-close"
              @click.stop="data.bottonImg=''" circle></el-button>
          </div>
        </el-form-item>

        <el-form-item label="背景颜色" >
          <el-color-picker v-model="data.backgroundColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体颜色" >
          <el-color-picker v-model="data.fontColor"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["shopinfoData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        checkType: 1,
        choicImg: false,
        data: this.shopinfoData.data,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if (this.checkType == 1) {
          this.data.backgroundPicUrl = this.getIconLink(msg.url);
        } else {
          this.data.bottonImg = this.getIconLink(msg.url);
        }
        this.choicImg = false;
      },
    },
    computed: {
      cFlexDir() {
        let style = '';
        if (this.data.style === 1) {
          style += 'dir:left box:first cross:center';
        }
        if (this.data.style === 2) {
          style += 'dir:top main:center';
        }
        if (this.data.style === 3) {
          style += 'dir:left box:first cross:center';
        }
        return style;
      },
      cOutBoxStyle() {
        let style = '';
        if (this.data.style === 3) {
          style += `padding: 30px 20px;border-radius: 10px; background-color: ${this.data.backgroundColor};`;
        }
        return style;
      },
      cAvatarBoxStyle() {
        let style = '';
        if (this.data.style === 1 || this.data.style === 3) {
          style += 'padding: 0 20px;';
        }
        if (this.data.style === 2) {
          style += 'text-align: center;';
        }
        return style;
      },
      cNameBoxStyle() {
        let style = '';
        if (this.data.style === 2) {
          style += 'text-align: center;';
        }
        if (this.data.style === 3) {
          style += 'color: #333333;';
        }
        return style;
      },
    },
    mounted() {

    }
  };

</script>
