<template>
  <div class="custom-page height100">
    <el-card class="height100">
      <!-- <div class="page-title">app界面自定义</div> -->
      <div class="page-content">
        <div class="page-tip">
          <span class="tip-title">页面说明：</span>
          <span>可更换app目录界面及运行界面的背景图，可新增背景图，可预览背景图</span>
        </div>
        <div class="top-content">
          <div class="content-title">
            <div class="title">app目录界面设置</div>
            <div class="btn-group">
              <el-button type="default" @click="uploadPageImg">上传背景图</el-button>
            </div>
          </div>
          <div class="swiper-content top">
            <swiper class="swiper" data-title="page" :options="swiperOption">
              <swiper-slide v-for="(item, index) in pageList" :key="index">
                <div class="swiper-item">
                  <el-radio v-model="radioPage" :label="item.id"></el-radio>
                  <img :src="item.url" alt="">
                </div>
              </swiper-slide>
              <div class="swiper-button-prev" slot="button-prev">
                <i class="iconfont icon-arrow-left"></i>
              </div>
              <div class="swiper-button-next" slot="button-next">
                <i class="iconfont icon-arrow-right"></i>
              </div>
            </swiper>
          </div>
        </div>
        <div class="down-content">
          <div class="content-title">
            <div class="title">app运行画面设置</div>
            <el-upload
              class="upload-demo"
              action="#"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="3"
              :on-exceed="handleExceed"
              :file-list="pagefileList">
              <div class="btn-group">
                <el-button type="default" @click="uploadRunImg">上传背景图</el-button>
              </div>
            </el-upload>
            
          </div>
          <div class="swiper-content bottom">
            <swiper class="swiper" :options="swiperOption">
              <swiper-slide v-for="(item, index) in runList" :key="index">
                <div class="swiper-item">
                  <el-radio v-model="radioRun" :label="item.id"></el-radio>
                  <img :src="item.url" alt="">
                </div>
              </swiper-slide>
              <div class="swiper-button-prev" slot="button-prev">
                <i class="iconfont icon-arrow-left"></i>
              </div>
              <div class="swiper-button-next" slot="button-next">
                <i class="iconfont icon-arrow-right"></i>
              </div>
            </swiper>
          </div>
        </div>
      </div>
      <div class="btn-group footer-btn">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm('editform')">确定</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
var vm = null
export default {
  components:{Swiper, SwiperSlide},
  data() {
    return {
      radioPage: 1,
      radioRun: 1,
      swiperOption: {
        slideToClickedSlide:true,//点击后居中展示
        slidesPerView: 5,
        spaceBetween: 30,
        centeredSlides: true,
        observer: true,    // 动态检查器,自动初始化swiper,默认为false
        observerParents: true,
        // centerInsufficientSlides: true, //不够5个时居中显示
        loop: true, // 不能同上一个属性同用
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on:{
          click:function(){
            if(this.$el[0].parentNode.className.indexOf('top')>0){
              vm.radioPage = vm.pageList[this.realIndex].id
            }
            if(this.$el[0].parentNode.className.indexOf('bottom')>0){
              vm.radioRun = vm.runList[this.realIndex].id
            }
          }
        }
      },
      pagefileList:[],
      pageList:[
        {url:require("@/assets/default-rect.png"),id:1},
        {url:require("@/assets/default-rect.png"),id:2},
        {url:require("@/assets/default-rect.png"),id:3},
        {url:require("@/assets/default-rect.png"),id:4},
        {url:require("@/assets/default-rect.png"),id:5},
        {url:require("@/assets/default-rect.png"),id:6},
      ],
      runList:[
        {url:require("@/assets/default-rect.png"),id:1},
        {url:require("@/assets/default-rect.png"),id:2},
        {url:require("@/assets/default-rect.png"),id:3},
        {url:require("@/assets/default-rect.png"),id:4},
        {url:require("@/assets/default-rect.png"),id:5},
        {url:require("@/assets/default-rect.png"),id:6},
      ]
    };
  },
  created(){
    vm = this
  },
  mounted() {
  
  },
  methods: {
    uploadPageImg() {},
    uploadRunImg() {},
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    submitForm(){

    },
    close(){
      this.$router.go(-1)
    }
  }
};
</script>
<style lang="less" scoped>
.custom-page {
  position: relative;
  .page-title {
    font-size: 20px;
    color: #333333;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  .page-tip {
    background: #f7f5f2;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    color: #333333;
    .tip-title {
      font-weight: 700;
      margin-right: 5px;
    }
  }
  .page-content {
    width: 800px;
    margin: 0 auto;
    .content-title {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .title {
        position: relative;
        font-size: 18px;
        color: #333333;
        &::before {
          content: "";
          position: absolute;
          top: 6px;
          left: -20px;
          width: 4px;
          height: 18px;
          background: #000;
        }
      }
      .el-button {
        padding: 0 20px;
      }
    }
    .swiper-content {
      .swiper-item {
        position: relative;
        width: 100%;
        height: 128px;
        background-color: #99a9bf;
        border-radius:10px;
        /deep/.el-radio {
          position: absolute;
          right: 12px;
          top:12px;
          .el-radio__inner {
            width: 24px;
            height: 24px;
          }
          .el-radio__input.is-checked .el-radio__inner {
            border-color: #ac9374;
            background: #ac9374;
          }
          .el-radio__inner:hover {
            border-color: #ac9374;
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      .swiper-button-next {
        right:0;
      }
      .swiper-button-prev {
        left :0;
      }
      .swiper-button-prev, .swiper-button-next{
        background: #ac9374;
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }  
      .swiper-button-next:after, 
      .swiper-button-prev:after {
        font-size: 14px;
        font-weight: 700;
        color: #fff;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transition: 300ms;
        transform: scale(0.8);
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        transform: scale(1);
      }
    }
  }
  .footer-btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    .el-button {
      padding: 0 20px;
    }
  }
}
</style>