<template>
  <div class="carousel-config">
    <div class="config-header">设置</div>
    <div class="confit-item">
      <div class="config-title">
        样式
      </div>
      <div class="config-setting">
        <div class="config-setting">
          <el-select
            v-model="currentSub.fillStyle"
            placeholder="请选择"
            class="full-input"
            @change="change('fillStyle', $event)"
          >
            <el-option
              v-for="item in fillStyleLit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="confit-item">
      <div class="config-title">
        轮播间隔
      </div>
      <div class="config-setting">
        <el-select
          v-model="currentSub.interval"
          placeholder="请选择"
          class="full-input"
          @change="change('interval', $event)"
        >
          <el-option
            v-for="item in intervalList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <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>
              <ImageUpload
                :key="index + '-' + 1"
                :item="[item]"
                :src="item.src"
                @success="success"
              />
              <Jump :item="item" />
            </div>
          </div>
        </div>
      </div>
      <a class="add-widget" href="javascript:;" @click="addCarousel">
        <i class="el-icon-plus"></i>
        添加图片
      </a>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import ImageUpload from '@/components/ImageUpload'
import Jump from '../components/Jump'
export default {
  components: {
    ImageUpload,
    Jump
  },
  data() {
    return {
      fillStyleLit: [
        {
          value: 1,
          label: '留边'
        },
        {
          value: 2,
          label: '填充'
        }
      ],
      intervalList: [
        {
          value: 2000,
          label: '2秒'
        },
        {
          value: 5000,
          label: '5秒'
        },
        {
          value: 7000,
          label: '7秒'
        }
      ]
    }
  },
  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
    },
    success(response, file, fileList) {
      const { url } = response.data
      fileList[0].src = url
    },
    delectItem(list, index) {
      list.splice(index, 1)
    },
    addCarousel() {
      if (this.currentSub.list.length >= 20) {
        return
      }
      this.currentSub.list = this.currentSub.list.map(item => {
        item.collapseState = false
        return item
      })
      this.currentSub.list.push({
        href: '',
        src: '',
        collapseState: true
      })
      console.log(this.currentSub.list)
    }
  }
}
</script>

<style lang="less" scoped>
.carousel-config {
  .carousel-images {
    .carousel-item {
      display: flex;
      padding: 10px;
      border-bottom: 1px solid #ccc;
      .img-box {
        width: 80px;
        height: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .carousel-content {
        margin-left: 10px;
        .carousel-title {
          margin-bottom: 15px;
          font-size: 14px;
        }
      }
    }
  }
  .add-carousel {
    text-align: center;
    color: #5d99d3;
  }
}
</style>
