<style>
    .diy-component-preview .checkInhotspot {
        border: 1px dashed #5CB3FD;
        background-color: rgba(92, 179, 253, 0.2);
        z-index: 1;
        position: absolute;
    }
</style>
<template>
  <div :class="{'active':checkData.isCked}">
    <div class="diy-component-options" v-if="checkData.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="height: 200px;padding: 0 50px;background-size: 100% 100%;position: relative;"
        :style="'background-image: url('+getIconLink(data.backgroundPicUrl)+');'" flex="cross:center">
        <div v-if="data.showText" :style="cTextStyle" style="width: 100%;">
          <div style="margin-bottom: 10px;">今日签到可获得5积分</div>
          <div>已连续签到10天</div>
        </div>
        <div v-if="data.hotspot" class="checkInhotspot" :style="cHotspotStyle"></div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="checkData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <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>
            <div class="size-tip">50 × 50</div>
            <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="点击热区">
          <choiceArea :multiple="false" :pic-url="data.backgroundPicUrl" :hotspot-array="data.hotspot?[data.hotspot]:[]"
                width="750px" height="200px" @confirm="selectHotspot" :is-link="false">
            <el-button size="mini">设置热区</el-button>
          </choiceArea>
        </el-form-item>
        <el-form-item label="显示文字">
          <el-switch v-model="data.showText"></el-switch>
        </el-form-item>
        <el-form-item label="文字位置">
          <el-radio v-model="data.textPosition" label="left">靠左</el-radio>
          <el-radio v-model="data.textPosition" label="center">居中</el-radio>
          <el-radio v-model="data.textPosition" label="right">靠右</el-radio>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker v-model="data.textColor"></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";
  import choiceArea from "../../common/choiceArea.vue";

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

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.data.backgroundPicUrl = msg.url;
        this.choicImg = false;
      },
      // 热区选择(edit)
      selectHotspot(e) {
        if (e && e.length) {
            this.data.hotspot = e[0];
        }
      },
    },
    computed: {
      cTextStyle() {
        return `color: ${this.data.textColor};text-align: ${this.data.textPosition};`;
      },
      cHotspotStyle() {
        if (!this.data.hotspot)
          return '';
        return `width: ${this.data.hotspot.width}px;` +
          `height: ${this.data.hotspot.height}px;` +
          `left: ${this.data.hotspot.left}px;` +
          `top: ${this.data.hotspot.top}px;`;
      },
    },
    mounted() {

    }
  };

</script>
