<script>
import Vue from 'vue'
import draggable from 'vuedraggable'
export default Vue.extend({
  name: "exhibitorSetting",
  components: {
    draggable
  },
  data() {
    return {
      exhibitorSetting: {
        name: '',
        startTime: '',
        endTime: '',
        address: '',
        exhibitorName: '',
        telephone: '',
        email: '',
        socialMedia: [],
        mainPicture: '/static/image/cover.webp',
        logo: '/static/image/avatar.webp',
        description: ''
      }
    }
  },
  methods: {
    addSocial() {
      this.exhibitorSetting.socialMedia.push({
        key: Date.now(),
        type: '',
        url: ''
      })
    }
  }
})
</script>

<template>
  <div class="main-box">
    <div class="save">
      <el-button type="primary">保存</el-button>
    </div>
    <div class="info">
      <div class="scroll">
        <div class="form-item required">
          <div class="label">展会名称 </div>
          <el-input class="input" v-model="exhibitorSetting.name" placeholder="请输入展会名称"></el-input>
        </div>
        <div class="form-item required">
          <div class="label">展会时间</div>
          <div class="time-cont">
            <el-date-picker
              v-model="exhibitorSetting.startTime"
              type="date"
              placeholder="开始时间"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            ></el-date-picker>
            <el-date-picker
              v-model="exhibitorSetting.endTime"
              type="date"
              placeholder="结束时间"
              value-format="yyyy-MM-dd"
              style="width: 100%;"
            ></el-date-picker>
          </div>
        </div>
        <div class="form-item required">
          <div class="label">展会地点</div>
          <el-input class="input" v-model="exhibitorSetting.address" placeholder="请输入展会地点"></el-input>
        </div>
        <div class="form-item required">
          <div class="label">主办单位</div>
          <el-input class="input" v-model="exhibitorSetting.exhibitorName" placeholder="请输入主办单位"></el-input>
        </div>
        <div class="form-item required">
          <div class="label">联系电话</div>
          <el-input class="input" v-model="exhibitorSetting.telephone" placeholder="请输入联系电话"></el-input>
        </div>
        <div class="form-item required">
          <div class="label">联系邮箱</div>
          <el-input class="input" v-model="exhibitorSetting.email" placeholder="请输入联系邮箱"></el-input>
        </div>
        <div class="form-item">
          <div class="label">社交账号</div>
          <draggable v-model="exhibitorSetting.socialMedia" :options="{sort:true,animation:300,handel:'.handel'}" class="social-list">
            <transition-group class="drag-cont">
              <div v-for="(item,index) in exhibitorSetting.socialMedia" :key="item.key" class="social-item">
                <el-input v-model="item.url" placeholder="请输入链接">
                  <el-select slot="prepend" v-model="item.type" placeholder="请选择">
                    <el-option label="微信公众号" value="wechatPM"></el-option>
                  </el-select>
                </el-input>
                <div class="handel">⠿</div>
              </div>
            </transition-group>
          </draggable>
          <el-button @click="addSocial" icon="el-icon-plus">添加社交媒体</el-button>
        </div>
      </div>
    </div>
    <div class="desc">
      <div class="scroll">
        <div class="vision-cont">
          <img :src="exhibitorSetting.mainPicture" alt="" class="image loading">
          <div class="avatar-name">
            <img :src="exhibitorSetting.logo" alt="" class="avatar loading">
            <div>
              <div class="name">
                {{ exhibitorSetting.name||'示例展会名称' }}
              </div>
              <div class="exhibitor">
                {{ exhibitorSetting.exhibitorName||'示例主办方名称' }}
              </div>
            </div>
            <div class="avatar-upload">
              <div class="upload-icon">
                <span class="el-icon-upload icon"></span>
                <span class="text">上传logo</span>
              </div>
              <input type="file" class="uploader">
            </div>
          </div>
          <div class="cover-upload">
            <div class="upload-icon">
              <span class="el-icon-upload icon"></span>
              <span class="text">上传主视觉图</span>
            </div>
            <input type="file" class="uploader">
          </div>
        </div>
        <el-input rows="12" type="textarea" class="text-area" v-model="exhibitorSetting.description" placeholder="请输入展会介绍">
        </el-input>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .main-box{
    height: 100%;
    width: 100%;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    .save{
      display: flex;
      justify-content: flex-end;
      grid-column: span 2;
    }
    .info{
      position: relative;
      height: 100%;
      width: 100%;
      .scroll{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
      .form-item{
        margin: 16px 0;
        .label{
          margin-bottom: 8px;
        }
        .social-list{
          margin-bottom: 12px;
          .drag-cont{
            display:block;
            min-height: 60px;
            .social-item{
              position: relative;
              margin-bottom: 6px;
              .handel{
                color: gray;
                height: 100%;
                width: 20px;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: move;
              }
              .el-select{
                width: 160px;
              }
            }
          }
        }
        .time-cont{
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 16px;
        }
        &.required{
          .label::after{
            content: '*';
            color: red;
            margin-left: 4px;
          }
        }
      }
    }
    .desc{
      height: 100%;
      width: 100%;
      position: relative;
      .scroll{
        padding: 8px;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        overflow-y: auto;
      }
      .text-area{
        margin-top: 24px;
      }
      .vision-cont{
        position: relative;
        box-shadow: 0 0 8px 0 #00000022;
        overflow: hidden;
        width: 100%;
        border-radius: 16px;
        transition-duration: 300ms;
        &:hover{
          transform: translateY(-2px);
          box-shadow: 0 2px 12px 0 #00000022;
        }
        .cover-upload{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          aspect-ratio: 2.4;
          .upload-icon{
            overflow: hidden;
            transition-duration: 300ms;
            opacity: 0;
            color: gray;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(0px);
            .icon{
              font-size: 48px;
            }
          }
          &:hover{
            .upload-icon{
              backdrop-filter: blur(8px);
              opacity: 1;
            }
          }
          .uploader{
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        .avatar-name{
          position: relative;
          padding: 24px;
          display: grid;
          grid-template-columns: auto 1fr;
          align-items: center;
          grid-gap: 24px;
          .avatar-upload{
            position: absolute;
            top: 24px;
            left: 24px;
            width: 80px;
            height: 80px;
            .upload-icon{
              border-radius: 50%;
              transition-duration: 300ms;
              opacity: 0;
              color: gray;
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .icon{
                margin-top: -8px;
                font-size: 32px;
              }
              .text{
                line-height: 1;
                font-size: 12px;
              }
            }
            &:hover{
              .upload-icon{
                backdrop-filter: blur(8px);
                opacity: 1;
              }
            }
            .uploader{
              opacity: 0;
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }
          }
          .avatar{
            width: 80px;
            height: 80px;
            border-radius: 50%;
          }
          .name{
            font-size: 24px;
            font-weight: bold;
          }
          .exhibitor{
            color: gray;
          }
        }
        .image{
          object-fit: cover;
          width: 100%;
          aspect-ratio: 2.4;
        }
      }
    }
  }
</style>
