<template>
  <div class=" activeDetail-item">
      <div class="up">
          <div class="date">第{{index}}天
              <i class="iconfont icon-xiala icon" v-if="isDropdown" @click="taggleDown"></i>
              <i class="iconfont icon-xiala1 icon" v-if="!isDropdown" @click="taggleDown"></i>
          </div>
          <div class="title">
              <q-input
                 ref="Title"
                 filled
                 stack-label
                 v-model="itemMsg.Title"
                 label="活动大标题"
                 :rules="[val => !!val || '请填写活动大标题']"
             />
          </div>
      </div>
      <div class="down" v-if="isDropdown">
          <div v-for="(item,index) in itemMsg.ActivityPlanList" :key="item.id" class="down-item q-mb-lg">
             <div class="item1">
                 <div class="circle"></div>
                 <div class="line"></div>
                 <div class="con">
                     <div class="starttime">
                         <q-input filled v-model="item.StartTime"  stack-label label="开始时间" ref="StartTime"
                            :rules="[val => !!val || '请选择开始时间']">
                            <template v-slot:append>
                              <q-icon name="access_time" class="cursor-pointer">
                                <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">
                                  <q-time v-model="item.StartTime"  format24h>
                                    <div class="row items-center justify-end">
                                      <q-btn v-close-popup label="关闭" color="primary" flat />
                                   </div>
                                 </q-time>
                               </q-popup-proxy>
                             </q-icon>
                           </template>
                         </q-input>
                     </div>
                     <div class="starttime">
                         <q-input
                          ref="long"
                           filled
                           stack-label
                           v-model.number="item.ActivityDuration"
                           type="number"
                            label="持续时长"
                            suffix="分钟"
                           :rules="[val => !!val || '请填写活动持续时长']"
                         />
                     </div>
                     <div style="flex-grow:2">
                        <q-input
                            ref="name"
                            filled
                            stack-label
                            v-model="item.TripTitle"
                            label="活动名称"
                            :rules="[val => !!val || '请填写活动名称']"
                         />
                     </div>
                 </div>
                 <el-tooltip class="item" effect="dark" content="删除当前活动" placement="top"  v-if="index>0">
                      <i class="iconfont icon-img_delete_small q-ml-sm" @click="delCurActuve(index)"></i>
                 </el-tooltip>
                
             </div>
             <div class="item-name">
                 活动内容
                 <div class="location" @click="getMapShow">
                     <i class="iconfont icon-customer-visited" ></i>
                     
                     <span v-if="item.LocationName">{{item.LocationName}}</span>
                     <span v-else>可设置活动定位</span>
                 </div>
             </div>
             <!-- 地图选址 -->
              <el-dialog title="地图展示" :visible.sync="isShowMap" width="960px" >
                <Map @map-submit="mapEvent($event,index)" :address="item.LocationName"></Map>
        </el-dialog>
             <div class="active-con">
                  <q-input
                     v-model="item.TripContent"
                     filled
                     type="textarea"
                     placeholder="输入活动内容..."
                />
             </div>
              <div class="item-name">
                 活动图片
             </div>
             <div class="active-con">
                  <div style="display:flex;flex-wrap: wrap;">
                     <div v-if="item.TripPicList&&item.TripPicList.length>0" v-for="(_item,_index) in item.TripPicList">
                       <div class="ItemImgDiv">
                         <q-img :src="_item" spinner-color="white" style="height: 100%;height:100%" />
                         <q-btn size="7px" @click="deleteItemImg(_index)" style="position:absolute;right:-5px;top:-5px;" round color="red" icon="iconfont icon-guanbi1" />
                       </div>
                     </div>
                     <el-upload
                       class="avatar-uploader addDutyMain"
                       action=""
                        :http-request="(files)=>{uploadFile(files,index)}"
                        :show-file-list="false"
                        >
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </div>
              </div>
              
          </div>
           <div class=" q-mt-lg q-mb-lg" style="margin-left:28px">
                   <q-btn color="accent" size="sm" class="" icon="add" label="添加当日活动" @click="addCurActuve" />
         </div>
      </div>
       
  </div>
</template>
<script>
import Map from "./commonMap";
import {
    UploadSelfFile,
  } from '../../api/common/common'
  export default {
      components:{
          Map
      },
      props:{
          itemData:{
              type:Object
          },
          index:{
              type:Number,
              default:1
          }
      },
      watch:{
          itemMsg:{
              handler(val){
                 this.$emit("success",val)
              },
              deep:true
          },
         
      },
     
    data() {
      return {
        isShowMap: false, //是否显示地图弹窗
        isDropdown: true,//显示下拉
        itemMsg:{
            Title:"",//活动大标题
            TripSort:0,//活动排序
            ActivityPlanList:[//活动安排
                {
                    TripSort:0,//排序
                    StartTime:"",//开始时间
                    ActivityDuration:"",//活动时长（单位：分钟）
                    LonLat:"",//活动地址经纬度
                    LocationName:"",//活动地址
                    TripTitle:"",//安排标题
                    TripContent:"",//内容
                    TripPicList:[]//图片
                }
            ]
        },
      }
    },

    mounted() {
     this.itemMsg=this.itemData
    },
    methods: {
      goBack(){
          this.$router.go(-1)
      },
      taggleDown(){
          this.isDropdown=!this.isDropdown
      },
      
       uploadFile(files,index) {
        UploadSelfFile('activeImg', files.file, res => {
          if (res.Code == 1) {
             this.itemMsg.ActivityPlanList[index].TripPicList.push(res.FileUrl);
          }
        })
      },
       //删除图片
      deleteItemImg(index,_index){
         this.itemMsg.ActivityPlanList[index].TripPicList.splice(_index,1);
      },
      //添加当日活动
      addCurActuve(){
          this.itemMsg.ActivityPlanList.push({
             TripSort:this.itemMsg.ActivityPlanList.length,//排序
             StartTime:"",//开始时间
             ActivityDuration:"",//活动时长（单位：分钟）
             LonLat:"",//活动地址经纬度
             LocationName:"",//活动地址
             TripTitle:"",//安排标题
             TripContent:"",//内容
             TripPicList:[]//图片 
          })
      },
        delCurActuve(index){
             this.itemMsg.ActivityPlanList.splice(index,1)
        },
        //得到地图信息
      mapEvent(e,index) {
          this.itemMsg.ActivityPlanList[index].LonLat= e.lat + "," + e.long;
          this.itemMsg.ActivityPlanList[index].LocationName= e.address;
          this.isShowMap = false;
      },
      getMapShow() {
        this.isShowMap = true;
      },
    }
  }

</script>
<style lang="scss" scoped>

  .activeDetail-item{
      .up{
          width: 700px;
        //   height: 55px;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          
          .date{
              font-size: 16px;
              font-family: PingFang SC;
              font-weight: bold;
              color: #2961FE;
              padding-bottom: 20px;
              display: flex;
              align-items: center;
              margin-right: 20px;
          }
          .icon{
              width: 20px;
              height: 20px;
              font-size: 12px;
              margin-left: 20px;
              padding: 10px;
              background-color: #C9DBFF;
              border-radius: 4px;
              color: #2961FE;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          .title{
              flex-grow: 2;
          }
      }
      .down{
          width: 640px;
          margin-left: 61px;
        //   height: 100px;
          border-left: 1px dashed #DCDCDC;
        .down-item{
            .item1{
                height: 55px;
                display: flex;
                align-items: center;
                .circle{
                    width: 8px;
                    height: 8px;
                    background-color: #2961FE;
                    border-radius: 50%;
                }
                .line{
                    width: 20px;
                    height: 2px;
                    background-color: #2961FE;
                }
                .con{
                    height: 100%;
                    background-color: #F2F2F2;
                    border-radius: 4px;
                    flex-grow: 2;
                    // padding: 10px 0;

                    display: flex;
                    .starttime{
                        width: 140px;
                        margin-right: 10px;
                    }
                }
            }
            .item-name{
                height: 55px;
                display: flex;
                align-items: center;
                font-size: 14px;
                font-family: PingFang SC;
                color: #2D2D2D;
                padding-left: 28px;
                .location{
                    margin-left: 15px;
                    font-size: 14px;
                    font-weight: 500;
                    color: #2961FE;
                }
            }
            .active-con{
                padding-left: 28px;
            }
        }  
      }
  }
  .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width:100%;
    height:100%;
    color:#8c939d;
    position: relative;
    overflow: hidden;
  }
  .addDutyMain{
    display:inline-block;
    width:118px;
    height:118px;
    font-size:70px;
    border: 1px dashed #d9d9d9;
    line-height:120px;
    text-align: center;
  }
  .ItemImgDiv{
    width:118px;
    height:118px;
    position: relative;
    margin:0 10px 10px 0;
    display:inline-block;
  }
</style>
