<style>
  .tradeAdd{
    width: 40px;
    height: 40px;
    border: 1px solid #d1d1d1;
    border-radius: 50%;
    text-align: center;
    line-height: 35px;
    font-size: 30px;
    color: #d1d1d1;
    background-color: #409EFF;
    cursor: pointer;
    color:#fff;
  }
</style>
<template>
  <div :class="{'active':tradeIndexData.isCked}">
    <div class="diy-component-options" v-if="tradeIndexData.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="diy-link" flex="cross:center;" style="background:#fff;">
        <div flex="dir:left cross:center" style="margin:20px;justify-content:space-between;">
          <div class="title" style="text-align: left">
            首页组件
          </div>
          <div class="title" style="text-align: left;margin-left:20px;">
            组件编号： tradeIndex
          </div>
        </div>
      </div>
    </div>
    <div class="diy-component-edit tradeActiviTy" v-if="tradeIndexData.isCked">
      <div v-for="(item,index) in tradeIndexData.data" :key="index" style="position:relative;border:1px solid #d1d1d1;width:345px;margin-bottom:20px;">
        <el-form label-width="100px" @submit.native.prevent >
          <el-form-item label="活动名称">
            <el-input size="small" style="width:200px;" v-model="item.GroupName"></el-input>
          </el-form-item>
          <el-form-item label="日期">
            <el-input size="small" style="width:200px;" v-model="item.DateStr"></el-input>
          </el-form-item>
          <el-form-item label="活动编号">
            <el-input size="small" style="width:200px;" v-model="item.NewActivitys"></el-input>
          </el-form-item>
          <el-form-item label="是否默认活动">
            <el-radio v-model="item.IsDefaultActivity" :label="0">否</el-radio>
            <el-radio v-model="item.IsDefaultActivity" :label="1">是</el-radio>
          </el-form-item>
        </el-form>
        <div style="position:absolute;right:0;top:0;width:20px;height:20px;
          border-radius:50%;background-color:red;color:#fff;text-align:center;cursor:pointer;" @click="removeTrade(index)">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="tradeAdd" @click="addAtradeObj()">+</div>
    </div>
  </div>
</template>
<script>
 
  export default {
    props: ["tradeIndexData", "index", "dataLeng"],
    components: {
 
    },
    data() {
      return {
        choicImg: false,
        isShowLink: false,
        data: this.tradeIndexData.data,
      };
    },
    watch: {
      tradeIndexData(newVal, oldVal) {
        this.data = this.tradeIndexData.data;
      },
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //点击添加
      addAtradeObj(){
        let obj={
          GroupName:'',
          DateStr:'',
          NewActivity:'',
          IsDefaultActivity:0 //0不是 1是
        }
        this.tradeIndexData.data.push(obj);
      },
      //删除
      removeTrade(index){
        this.tradeIndexData.data.splice(index,1);
      }
    },
    computed: {

    },
    mounted() {

    }
  };

</script>
