<template>
  <div>
    <div class="title">
      <span contenteditable="true" @blur="edit('title', $event)">
        {{ data.title }}
      </span>
    </div>
    <div class="subTitle">
      <span contenteditable="true" @blur="edit('subTitle', $event)">
        {{ data.subTitle }}
      </span>
    </div>
    <div class="tabs">
      <el-tabs v-model="activeName" :editable="true" @edit="tabEdit">
        <el-tab-pane :name="`${k}`" v-for="(i,k) in data.list">
          <template slot="label">
            <span contenteditable="true" @blur="edit1('title', k,$event)">
              {{ i.title }}
            </span>
          </template>
          <transition name="fade">
            <div v-if="activeName === `${k}`" style="position:relative;">
              <div class="content">
                <div class="left">
                  <div class="itemTitle" contenteditable="true" @blur="edit1('leftTitle', k,$event)">
                    {{ i.leftTitle }}
                  </div>
                  <div class="itemCode" contenteditable="true" @blur="edit1('leftInfo', k,$event)">
                    {{ i.leftInfo }}
                  </div>
                  <div class="image">
                    <UploadEl :data="i"/>
                  </div>
                </div>
                <div class="right">
                  <div class="infos" v-for="(ii,kk) in i.infos">
                    <i class="del el-icon-circle-close" @click="data.list[k].infos.splice(k, 1);"></i>
                    <div class="infoTitle" contenteditable="true" @blur="edit2('title', k,kk,$event)">
                      {{ ii.title }}
                    </div>
                    <div class="infoNum" contenteditable="true" @blur="edit2('info', k,kk,$event)">
                      {{ ii.info }}
                    </div>
                  </div>
                  <div class="infos" style="text-align: center" v-if="i.infos.length < 7">
                    <div style="width:100%;height:100%;"
                         @click="data.list[k].infos.push({title:'请输入',info:'请输入'})">
                      <i class="el-icon-circle-plus" style="font-size: 1vw; line-height: 2.9vw"></i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import UploadEl from "@/components/editEl/uploadEl.vue";

export default {
  name: 'EditEl8',
  props: ['data'],
  components: {
    UploadEl,
  },
  data() {
    return {
      activeName: '0'
    }
  },
  mounted() {
  },
  methods: {
    tabEdit(e, action) {
      if (action === 'remove') {
        this.activeName = '0'
        this.$props.data.list.splice(parseFloat(e), 1);
      }
      if (action === 'add') {
        this.$props.data.list.push({title: '请输入', leftTitle: '请输入', leftInfo: '请输入', infos: []})
      }
    },
    edit(key, e) {
      this.$props.data[key] = e.target.innerText
    },
    edit1(key, index, e) {
      this.$props.data.list[index][key] = e.target.innerText
    },
    edit2(key, index, index2, e) {
      this.$props.data.list[index][index2][key] = e.target.innerText
    },
  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.title {
  padding-top: 4.2vw;
  width: 100%;
  text-align: center;
  font-size: 2.5vw;
  letter-spacing: 4px;
  color: #0003;
}

.subTitle {
  padding-top: 0.4vw;
  width: 100%;
  text-align: center;
  font-size: 1.9vw;
  letter-spacing: 2px;
  color: #000;
}

.tabs {
  text-align: left;
  margin-top: 2.3vw;

  /deep/ .el-tabs__header {
    margin: 0 20vw 15px;
  }

  /deep/ .el-tabs__content {
    padding: 0 20vw;
    background-color: fade(@standard-color, 10);
  }

  /deep/ .el-tabs__nav-wrap::after {
    display: none;
  }

  /deep/ .el-tabs__item {
    letter-spacing: 3px;
    padding: 0 2vw;
    height: 2.9vw;
    font-size: 1.6vw;
  }

  /deep/ .el-tabs__item {
    line-height: 2.9vw;
  }

  /deep/ .el-tabs__item.is-active {
    font-weight: 600;
    color: @standard-color;
  }

  /deep/ .el-tabs__active-bar {
    height: 4px;
    background-color: @standard-color;
  }

  .content {
    padding: 2.2vw 0;

    .left {
      width: 34%;
      height: 21.7vw;
      display: inline-block;
      box-shadow: 0 0 3px #0002;
      background-color: #fff;
      text-align: center;
      vertical-align: top;

      .itemTitle {
        padding-top: 1.2vw;
        font-size: 1vw;
      }

      .itemCode {
        margin-top: 0.2vw;
        font-size: 1.1vw;
      }

      .image {
        width: 80%;
        margin-top: 1vw;
        margin-left: 10%;
        height: 15vw;
        background-color: cadetblue;
      }
    }

    .right {
      margin-left: 1%;
      width: 65%;
      height: 21.2vw;
      display: inline-block;
      box-shadow: 0 0 5px #0002;
      background-color: #fff;
      padding-top: 0.5vw;

      .infos {
        width: 93%;
        margin: 0 auto;
        border-bottom: 1px dashed #0003;
        position: relative;
        height: 2.9vw;

        .del {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
        }
      }

      .infoTitle {
        position: absolute;
        width: 46%;
        height: 100%;
        top: 0;
        left: 4%;
        text-align: left;
        font-size: 1vw;
        letter-spacing: 1px;
        color: #0009;
        line-height: 2.9vw;
      }

      .infoNum {
        position: absolute;
        width: 46%;
        height: 100%;
        top: 0;
        right: 5%;
        text-align: right;
        font-size: 1vw;
        letter-spacing: 1.4px;
        color: #000;
        line-height: 2.9vw;
      }
    }
  }

}

.fade-enter-active {
  animation: fadeInRight;
  animation-duration: 0.5s;
}

.fade-leave-active {
  animation: fadeOutLeft;
  animation-duration: 0.5s;
}
</style>
