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

</style>
<template>
  <div :class="{'active':userData.isCked}">
    <div class="diy-component-options" v-if="userData.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="height: 300px;background-color: #f5f7f9;background-size: cover;background-position: center;padding: 50px;"
        :style="'background-image: url('+getIconLink(data.backgroundPicUrl)+');'">
        <div style="width: 100%;" :style="cOutBoxStyle">
          <div style="width: 100%;" :flex="cFlexDir">
            <div :style="cAvatarBoxStyle">
              <div class="Useravatar-icon"></div>
            </div>
            <div style="color: #fff;" :style="cNameBoxStyle">用户昵称</div>
          </div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="userData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="样式">
          <el-radio v-model="data.style" :label="1">样式1</el-radio>
          <el-radio v-model="data.style" :label="2">样式2</el-radio>
          <el-radio v-model="data.style" :label="3">样式3</el-radio>
        </el-form-item>
        <el-form-item label="背景图片">
          <div class="zk_pic_box" @click="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="背景颜色">
          <el-color-picker v-model="data.backgroundColor"></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: ["userData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        data: this.userData.data,
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.data.backgroundPicUrl = 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>
