<style>
  .chooseLink .el-input-group__append {
    background-color: #fff;
  }

</style>
<template>
  <div :class="{'active':timerData.isCked}">
    <div class="diy-component-options" v-if="timerData.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="font-size: 0;">
        <img v-if="data.picUrl" :src="getIconLink(data.picUrl)" style="width: 100%;height: auto;">
      </div>
      <div style="height: 140px; padding:0 50px; color: #fff;background-size: cover;background-position: center;"
        :style="'background-image: url('+bottomBg+');'" flex="cross:center">
        <div>
          <div>距离活动开始还有</div>
          <div>xx天xx小时xx分xx秒</div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit" v-if="timerData.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.picUrl) + ')'}">
            <i v-if="data.picUrl==''" class="el-icon-picture-outline"></i>
            <el-button type="danger" v-if="data.picUrl!=''" class="image-delete" size="mini"
              icon="el-icon-close" @click.stop="data.picUrl=''" circle></el-button>
          </div>
        </el-form-item>
        <el-form-item class="chooseLink" label="链接">
          <el-input style="width: 300px" v-model="data.link.url" placeholder="点击选择链接" :disabled="true" size="small">
            <el-button size="small" slot="append" @click="isShowLink=true">选择链接</el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-date-picker v-model="data.startDateTime" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="data.endDateTime" size="small" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <el-dialog title="选择链接" :visible.sync="isShowLink" width="800px">
      <chooseMeun ref="chooseMeun"></chooseMeun>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="isShowLink=false">取 消</el-button>
        <el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  import chooseMeun from "../../common/chooseMeun.vue";
  export default {
    props: ["timerData", "index", "dataLeng"],
    components: {
      ChooseImg,
      chooseMeun
    },
    data() {
      return {
        choicImg:false,
        isShowLink:false,
        data: this.timerData.data,
        bottomBg: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/timer-bottom-bg.png',
      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        this.data.picUrl = msg.url;
        this.choicImg = false;
      },
      //获取选择链接
      getChoiceLink() {
        //调用子组件方法
        var obj = this.$refs.chooseMeun.getChooseMenu();
        this.data.link.url=obj.PageUrl;
        this.isShowLink = false;
      },

    },
    computed: {},
    mounted() {

    }
  };

</script>
