<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="Duration" filled stack-label v-model.number="item.ActivityDuration" type="number"
                label="持续时长" suffix="分钟" :rules="[val => !!val || '请填写活动持续时长']" />
            </div>
            <div style="flex-grow:2">
              <q-input ref="TripTitle" 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">
          <Ueditor :value="item.TripContent" :config="ueditor.config" @input="setVal($event,index)" ref="ue" no-margin
            :isShowInsertImage="false" :isShowAttachment="false" :isShowVoice="false"></Ueditor>
        </div>
        <div class="item-name">
          活动图片
        </div>
        <div class="active-con">
          <div style="display:flex;flex-wrap: wrap;">
            <template v-if="item.TripPicList&&item.TripPicList.length>0">
              <div v-for="(_item,_index) in item.TripPicList" :key="_index">
                <div class="ItemImgDiv">
                  <q-img :src="_item" spinner-color="white" style="height: 100%;height:100%" />
                  <q-btn size="7px" @click="deleteItemImg(index,_index)" style="position:absolute;right:-5px;top:-5px;"
                    round color="red" icon="iconfont icon-guanbi1" />
                </div>
              </div>
            </template>
            <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 Ueditor from "../editor/UeEditor";
  import {
    UploadSelfFile,
  } from '../../api/common/common'
  export default {
    components: {
      Map,
      Ueditor
    },
    props: {
      itemData: {
        type: Object,
        default: null
      },
      index: {
        type: Number,
        default: 1
      }
    },
    watch: {
      itemData: {
        handler(val) {
          if (val) {
            this.itemMsg = val
            if (!this.itemMsg.ActivityPlanList) {
              this.itemMsg.ActivityPlanList = []
            }
          }
        },
        deep: true
      },
      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: [] //图片
            }
          ]
        },
        //富文本
        ueditor: {
          value: "",
          config: {
            initialFrameWidth: null,
            initialFrameHeight: 100,
            autoHeightEnabled: true,
            enableContextMenu: false,
            zIndex: 900
          }
        },
      }
    },
    mounted() {
      if (this.itemData) {
        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;
      },
      // 验证
      ruleVerification() {
        let hasErr = []
        this.$refs.Title.validate();
        if (this.$refs.Title.hasError) {
          hasErr.push(this.$refs.Title.hasError)
        }
        this.$refs.StartTime.map(item => {
          item.validate()
          if (item.hasError) {
            hasErr.push(item.hasError)
          }
        })
        this.$refs.Duration.map(item => {
          item.validate()
          if (item.hasError) {
            hasErr.push(item.hasError)
          }
        })
        this.$refs.TripTitle.map(item => {
          item.validate()
          if (item.hasError) {
            hasErr.push(item.hasError)
          }
        })
        if (hasErr.length > 0) {
          return false
        } else {
          return true
        }
      },
      //富文本
      setVal(val, index) {
        this.itemMsg.ActivityPlanList[index].TripContent = val;
      },
    }
  }
</script>
<style lang="scss" scoped>
  .activeDetail-item {
    .up {
      width: 700px;
      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;
      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;
            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;
  }

  .activeDetail-item .el-dialog__body {
    max-height: none !important;
  }
</style>