<template>
  <div class="trip-item-box">
    <div class="edit" v-if="isShowEdit">
        <div class="TCtraffic flex">
            <div class="partName">
                <span class="TDTripType">自由活动</span>
            </div>
            <span class="datePickContent" style="display:none;">
              <!--:prop="'DayList.'+index+'.dayArray.'+subIndex+'.childItem.TimeType'" :rules="freedomTripRules.TimeType"-->
              <el-form-item >
                <el-select :disabled="isOpenGroup" class="w160" placeholder="请选择时间" v-model="subItemObj.childItem.TimeType">
                  <el-option v-for="item in TimeTypeList" :label='item.Name' :value='item.Id' :key='item.Id'>
                  </el-option>
                </el-select>
              </el-form-item>
            </span>
            <div class="delSpan">
              <el-tooltip class="item" effect="dark" content="查看" placement="top-start">
                <i class="iconfont icon-chakan" @click="isShowEdit=!isShowEdit"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" v-if="!isOpenGroup" content="删除" placement="top-start">
                <i class="iconfont icon-xingzhuang" @click="removeFreeDomTrip(subItemObj.childItem.DayNum,subIndex)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="上移" placement="top-start" v-if="subIndex!=0&&!isOpenGroup">
                <i class="iconfont icon-shangyi" @click="MoveItem(subItemObj.childItem.DayNum,subIndex,0)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="下移" placement="top-start" v-if="subIndex!=subTotalIndex-1&&!isOpenGroup">
                <i class="iconfont icon-xiayi1" @click="MoveItem(subItemObj.childItem.DayNum,subIndex,1)"></i>
              </el-tooltip>
            </div>
        </div>
        <div class="TP_edit">
          <my-edit v-if="isShowEdit" v-on:edit-value="subItemObj.childItem.Description = arguments[0]" v-bind:editValue="subItemObj.childItem.Description"
            v-bind:toolbarShow="toolbar" v-bind:referenceList="DefaultList" v-bind:placeholder="placeholder"></my-edit>
        </div>
        <div class="SiencDiv clearfix">
          <div class="ScLeftImg">
            <div class="TFimgList" v-for="(item,index) in subItemObj.childItem.ImaArray" :key="item.subCode">
              <img v-if="!item.Url" src="../../../assets/img/bg_c3@3x.png" />
              <img v-else :src="item.Url" />
              <div class="imgzhe" @click="getPic(subItemObj.childItem.ImaArray,index)">
                <div class="clearfix" style="text-align:center;">
                  <div class="re-delte" @click.stop="delImg(index,subItemObj)"><i class="iconfont icon-xingzhuang"></i></div>
                  <div class="re-delte" @click.stop="toExchangeImg(subItemObj.childItem.DayNum,subIndex,index,0)" v-if="index!=0"><i class="iconfont icon-zuoyi"></i></div>
                  <div class="re-delte" @click.stop="toExchangeImg(subItemObj.childItem.DayNum,subIndex,index,1)" v-if="index!=subItemObj.childItem.ImaArray.length-1"><i class="iconfont icon-youyi"></i></div>
                </div>
              </div>
            </div>
          </div>
          <div class="rightAddImg">
            <el-upload :file-list="subItemObj.childItem.ImaArray" :http-request="uploadScenImg" :data="subItemObj.childItem"
              :multiple="true" accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
              <i class="iconfont icon-img_haha"></i>
            </el-upload>
          </div>
        </div>
    </div>

    <div class="read" v-if="!isShowEdit">
        <div class="TCtraffic flex">
            <div class="partName">
                <span class="TDTripType">自由活动</span>
            </div>
            <div class="delSpan">
              <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                <i class="iconfont icon-bianji" @click="isShowEdit=!isShowEdit"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" v-if="!isOpenGroup" content="删除" placement="top-start">
                <i class="iconfont icon-xingzhuang" @click="removeFreeDomTrip(subItemObj.childItem.DayNum,subIndex)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="上移" placement="top-start" v-if="subIndex!=0&&!isOpenGroup">
                <i class="iconfont icon-shangyi" @click="MoveItem(subItemObj.childItem.DayNum,subIndex,0)"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="下移" placement="top-start" v-if="subIndex!=subTotalIndex-1&&!isOpenGroup">
                <i class="iconfont icon-xiayi1" @click="MoveItem(subItemObj.childItem.DayNum,subIndex,1)"></i>
              </el-tooltip>
            </div>
        </div>
        <div class="TP_editShow">
          <pre v-html="subItemObj.childItem.Description"></pre>
        </div>
        <div class="SiencDiv clearfix">
          <div class="ScLeftImg">
            <div class="TFimgList" v-for="(item,index) in subItemObj.childItem.ImaArray" :key="item.subCode">
              <img v-if="!item.Url" src="../../../assets/img/bg_c3@3x.png" />
              <img v-else :src="item.Url" @click="getPic(subItemObj.childItem.ImaArray,index)" />
            </div>
          </div>
        </div>
    </div>

    <div v-if="dspNone" class="viewBigPicLayer myPiclayer" @click="colseLayer">
        <i @click="colseLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer" ></i>
        <el-carousel height="600px" :initial-index='initialIndex' :interval="5000" trigger="click">
          <el-carousel-item v-for="(item,index) in picObj" :key="index">
            <img style="width:100%;" :src="item.Url" />
          </el-carousel-item>
        </el-carousel>
    </div>
  </div>
</template>
<script>
  import MyEdit from "../../EditTemplate.vue";
  export default {
    props: ["subItemObj", "DefaultList", "subIndex", "index", "isOpenGroup","subTotalIndex","TimeTypeList"],
    data() {
      var TimeTypeValidate = (rule, value, callback) => {
        if (value === 0) {
          callback(new Error("请选择时间类型"));
        } else {
          callback();
        }
      };
      return {

        toolbar: {
          clean: false, //清除样式
          font: false, //字体
          narrative: true //叙述,
        },
        //是否显示编辑框
        isShowEdit:false,
        dspNone:false,
        initialIndex:0,
        //text框placeholder
        placeholder:'请输入活动信息',
        DefaultSelectValue: 0,
        //自由活动验证
        freedomTripRules: {
          //时间类型验证
          TimeType: [{
            validator: TimeTypeValidate,
            trigger: "change"
          }]
        }
      };
    },
    components: {
      "my-edit": MyEdit
    },
    methods: {
      //上传景点图片
      uploadScenImg(item) {
        let newArr = [];
        newArr.push(item.file);
        let path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          var fileObj = this.$commonUtils.FileObject();
          fileObj.Url = this.domainManager().ViittoFileUrl + x.data.FilePath,
          fileObj.fileName = x.data.FileName;
          item.data.ImaArray.push(fileObj);
        });
      },
      //删除自由活动
      removeFreeDomTrip(dayNum, subIndex) {
        this.$parent.$parent.commonRemove(dayNum, subIndex);
      },
      //删除图片
      delImg(index, subItemObj) {
        this.$parent.$parent.commonRemoveImg(index, subItemObj);
      },
       //上移下移
      MoveItem(dayNum,subIndex,IsUp)
      {
        this.$parent.$parent.MoveItem(dayNum, subIndex,IsUp);
      },
      //左右移动
      toExchangeImg(dayNum, subIndex, imgIndex, IsMove) {
        this.$parent.$parent.ExchangeImg(dayNum, subIndex, imgIndex,IsMove);
      },
      colseLayer(){
        this.dspNone=false;
      },
      getPic(obj,index){
        this.picObj=obj
        this.dspNone=true;
        this.initialIndex = index;
      },
    },
    created() {
      
    },

    watch: {
      subItemObj: {
        //深度监听，可监听到对象、数组的变化
        handler: function (val, oldVal) {
          this.subItemObj.childItem.FreedomImg = JSON.stringify(
            this.subItemObj.childItem.ImaArray
          );
        },
        deep: true
      }
    }
  };

</script>