<template>
  <div class="image-config">
    <div class="config-header">内容</div>
    <div class="config-item">
      <div class="config-setting">
        <div class="collapse-list">
          <div
            v-for="(item, index) in currentSub.list"
            :key="index"
            class="collapse-item"
          >
            <div class="collapse-item-header" @click="collapseToggle(item)">
              <i class="header-icon el-icon-rank"></i>
              <div class="header-thumbnail">
                <img v-if="item.src" :src="item.src" />
                <div v-else class="el-icon-picture-outline"></div>
              </div>
              <div class="header-name">图片</div>
              <div class="header-arrow">
                <i
                  class="el-icon-delete"
                  @click="delectItem(currentSub.list, index)"
                ></i>
              </div>
              <div class="header-arrow">
                <i
                  class="el-icon-arrow-down"
                  :class="item.collapseState ? 'open' : ''"
                ></i>
              </div>
            </div>
            <div v-if="item.collapseState" class="collapse-item-content">
              <div class="config-title">导航名称</div>
              <el-input
                v-model="item.text"
                placeholder="请选择"
                maxlength="6"
                class="full-input"
              />
              <div class="config-title">默认图标</div>
              <ImageUpload
                :key="index + '-' + 1"
                :item="[item]"
                :src="item.iconPath"
                @success="handleImageSuccess1"
              />
              <div class="config-title">选中图标</div>
              <ImageUpload
                :key="index + '-' + 2"
                :item="[item]"
                :src="item.selectedIconPath"
                @success="handleImageSuccess2"
              />
              <Jump :item="item" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class="add-widget" href="javascript:;" @click="addImage">
      <i class="el-icon-plus"></i>
      添加图片
    </a>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import ImageUpload from '@/components/ImageUpload'
import Jump from '../components/Jump'
export default {
  components: {
    ImageUpload,
    Jump
  },
  computed: {
    ...mapState('creationCamp', [
      'templatePage',
      'currentComponentKeyCode',
      'currentComponentConfig'
    ]),
    currentSub() {
      return this.currentComponentConfig
    }
  },
  watch: {
    currentSub: {
      handler: function handler() {
        this.setComponentConfig({
          keyCode: this.currentComponentKeyCode,
          content: this.currentSub
        })
      },
      deep: true
    }
  },
  methods: {
    ...mapMutations('creationCamp', ['setComponentConfig']),
    collapseToggle(item) {
      item.collapseState = !item.collapseState
    },
    handleImageSuccess1(response, file, fileList) {
      const { url } = response.data
      fileList[0].iconPath = url
    },
    handleImageSuccess2(response, file, fileList) {
      const { url } = response.data
      fileList[0].selectedIconPath = url
    },
    delectItem(list, index) {
      list.splice(index, 1)
    },
    addImage() {
      if (this.currentSub.list.length >= 5) {
        return
      }
      this.currentSub.list = this.currentSub.list.map(item => {
        item.collapseState = false
        return item
      })
      this.currentSub.list.push({
        href: '',
        iconPath: '',
        selectedIconPath: '',
        text: '',
        collapseState: true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.image-config {
  .collapse-list {
    margin-bottom: 10px;
    .full-input {
      margin-bottom: 8px;
    }
    .collapse-item {
      margin-top: 10px;
      background-color: #fff;
      border: 1px solid #c5cddb;
      .collapse-item-header {
        display: flex;
        align-items: center;
        height: 36px;
        background-color: #eef0f2;
        .header-icon {
          width: 32px;
          text-align: center;
          cursor: move;
        }
        .header-thumbnail {
          display: flex;
          align-items: center;
          width: 30px;
          height: 25px;
          font-size: 20px;
          img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
            border-style: none;
          }
        }
        .header-name {
          margin-left: 10px;
          flex: 1;
        }
        .header-arrow {
          width: 32px;
          text-align: center;
          font-size: 16px;
          i {
            transition: all 0.3s;
            &.open {
              transform: rotate(-180deg);
            }
          }
        }
      }
      .collapse-item-content {
        padding: 20px 10px;
        .upload-widget {
          margin-bottom: 10px;
          .upload-uploader {
            width: 100%;
            height: 110px;
            /deep/ .el-upload {
              width: 100%;
            }
          }
          .upload-images {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
          .upload-btn {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 110px;
            cursor: pointer;
            border: 2px dashed #2e60f8;
            border-radius: 2px;
            background-color: #f8f9fb;
            text-align: center;
            font-size: 20px;
            color: #2e60f8;
            i {
              color: #2e60f8;
              font-size: 20px;
            }
            .upload-title {
              margin-left: 10px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .add-widget {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    background-color: #2e60f8;
    color: #fff;
    text-align: center;
    display: block;
    cursor: pointer;
    margin-bottom: 20px;
  }
}
</style>
