<style>
  .Useravatar-icon {
    width: 80px;
    height: 80px;
    border-radius: 9999px;
    display: inline-block;
  }
  .shopInfo_Btn{
    width:120px;
    height:52px;
    border-radius:50px;
    overflow: hidden;
    float:left;
    margin-top:15px;
    background-size:cover;
  }
</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="{backgroundImage: 'url(' + getIconLink(data.backgroundPicUrl) + ')',backgroundColor:data.backgroundColor}">
        <div style="width: 100%;" :style="cOutBoxStyle">
          <div style="width: 100%;">
            <div :style="cAvatarBoxStyle" style="float:left;">
              <img class="Useravatar-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/default_head.png" alt="">
            </div>
            <div style="margin-left:20px;float:left;width:65%">
              <div :style="{color:data.fontColor}">{{data.headName}}</div>
              <div :style="{color:data.fontColor}">{{data.headInfo}}</div>
            </div>
            <div class="shopInfo_Btn" :style="{backgroundImage:'url(' + getIconLink(data.bottonImg) + ')'}">
            </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="字体" style="display:none;">
          <el-input placeholder="请输入内容" v-model="data.fontName">
            <el-select v-model="select" slot="prepend" placeholder="请选择" @change="GetFontName()">
              <el-option label="宋体" value="宋体"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item label="字体颜色">
          <el-color-picker v-model="data.fontColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input v-model="data.fontSize" size="small" type="number" min="12" max="50">
            <template slot="append">px</template>
          </el-input>
        </el-form-item>
        <el-form-item label="是否加粗">
          <el-checkbox v-model="data.isBold" true-label="true" false-label="false">加粗</el-checkbox>
        </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 {
        select: "",
        checkType: 1,
        choicImg: false,
        data: this.shopinfoData.data,
      };
    },
    created() {

    },
    methods: {
      GetFontName() {
        if (this.select) {
          this.data.fontName = this.select;
        }
      },
      //向父组件传值 并调用排序
      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>
