<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;">
          <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" content="删除" placement="top-start" v-if="!isOpenGroup">
            <i class="iconfont icon-xingzhuang" @click="removeScienTrip(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 class="TDplanList clearfix">
          <div class="TDLeftPlan">
            <span>景点选择</span>
            <span>
              <el-form-item :prop="'DayList.'+index+'.dayArray.'+subIndex+'.childItem.CouponsId'" :rules="scienTripRules.CouponsId">
                <el-select :disabled="isOpenGroup" class='w160' :placeholder="$t('pub.pleaseSel')" filterable v-model="subItemObj.childItem.CouponsId"
                  @visible-change="getQScenicList($event)" @change="changeQScenicList()">
                  <el-option :label="$t('pub.unlimitedSel')" :value='DefaultSelectValue'></el-option>
                  <el-option v-for="item in QScenicList" :label='getItemLabel(item)' :value='item.ID' :key='item.ID'>
                  </el-option>
                </el-select>
              </el-form-item>
            </span>
            <span class="comTravelLeft">门票</span>
            <span>
              <el-select :disabled="isOpenGroup" class='w160' filterable :placeholder="$t('pub.pleaseSel')" v-model="subItemObj.childItem.CouponsTicketId"
                @visible-change="getTicketList($event)" @change="changeTicketList()">
                <el-option :label="$t('pub.unlimitedSel')" :value='DefaultSelectValue'></el-option>
                <el-option v-for="item in QTicketList" :label='item.TicketName' :value='item.Id' :key='item.Id'>
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="TDRightPlan">
            <label class="comTravelLeft">游玩时间</label>
            <el-input :disabled="isOpenGroup" type="text" class="w120" v-model="subItemObj.childItem.PlayTimeHour"
              @keyup.native="checkInteger(subItemObj.childItem,'PlayTimeHour')" maxlength="2"></el-input>&nbsp;&nbsp;小时
            <el-input :disabled="isOpenGroup" type="text" class="w120" v-model="subItemObj.childItem.PlayTimeMinutes"
              @keyup.native="checkInteger(subItemObj.childItem,'PlayTimeMinutes')" maxlength="2"></el-input>&nbsp;&nbsp;分钟
          </div>
        </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" v-if="!isShowEdit">
            <i class="iconfont icon-bianji" @click="isShowEdit=!isShowEdit"></i>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="!isOpenGroup">
            <i class="iconfont icon-xingzhuang" @click="removeScienTrip(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 class="title-box">
          <div class="TDLeftPlan">
            <span>
              {{subItemObj.childItem.CouponsName}}
            </span>
            <span class="comTravelLeft">门票</span>
            <span>
              {{subItemObj.childItem.CouponsTicketName}}
            </span>
            <span>游玩时间</span>
            <span>{{subItemObj.childItem.PlayTimeHour}}</span>
            <span>小时</span>
            <span>{{subItemObj.childItem.PlayTimeMinutes}}</span>
            <span>分钟</span>
          </div>
        </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();
        }
      };
      var CouponsIdValidate = (rule, value, callback) => {
        if (value === 0) {
          callback(new Error("请选择景点"));
        } else {
          callback();
        }
      };
      return {
        toolbar: {
          clean: false, //加粗
          font: false, //字体
          narrative: true //叙述,
        },

        QScenicList: [],
        QTicketList: [],
        DefaultSelectValue: 0,
        //是否显示编辑框
        isShowEdit: false,
        dspNone: false,
        initialIndex: 0,
        //text框placeholder
        placeholder: "请输入景点信息",
        //景点验证
        scienTripRules: {
          //时间类型验证
          TimeType: [{
            validator: TimeTypeValidate,
            trigger: "change"
          }],
          CouponsId: [{
            validator: CouponsIdValidate,
            trigger: "change"
          }]
        }
      };
    },
    components: {
      "my-edit": MyEdit
    },
    methods: {
      //获取景区列表
      getQScenicList(event) {
        if (event) {
          this.QScenicList = [];
          var msg = {
            IsGetPic: 1,
            IsGetFeature: 1,
            QCity: this.subItemObj.childItem.QCity
          };
          this.apipost(
            "ticketcoupons_post_GetLineScienList",
            msg,
            res => {
              if (res.data.resultCode == 1) {
                this.QScenicList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      //选择改变
      changeQScenicList() {
        var that = this;
        if (that.subItemObj.childItem.CouponsId != 0) {
          //获取当前选中的对象
          let obj = {};
          obj = that.QScenicList.find(item => {
            return item.ID === that.subItemObj.childItem.CouponsId; //筛选出匹配数据
          });
          if (obj != undefined) {
            that.subItemObj.childItem.CouponsTicketId = 0;
            that.subItemObj.childItem.CouponsTicketName = "";
            that.subItemObj.childItem.ImaArray = [];
            that.QTicketList = [];
            that.subItemObj.childItem.CouponsName = obj.Name;
            that.subItemObj.childItem.Description = obj.Feature;
            if (obj.PicPath != undefined && obj.PicPath != "") {
              var scenImgList = obj.PicPath.split(",");
              for (var i = 0; i < scenImgList.length; i++) {
                var fileObj = that.$commonUtils.FileObject();
                if (scenImgList[i] != "") {
                  fileObj.Url = that.domainManager().ViittoFileUrl + scenImgList[i];
                  fileObj.Name = "";
                  that.subItemObj.childItem.ImaArray.push(fileObj);
                }
              }
            }
          }
        }
      },
      //获取景区门票列表
      getTicketList(event) {
        if (event) {
          this.QTicketList = [];
          this.apipost(
            "ticketcouponsticket_get_GetList", {
              CouponsId: this.subItemObj.childItem.CouponsId
            },
            res => {
              if (res.data.resultCode == 1) {
                this.QTicketList = res.data.data;
              }
            },
            err => {}
          );
        }
      },
      //门票选择
      changeTicketList() {
        var that = this;
        if (that.subItemObj.childItem.CouponsTicketId != 0) {
          //获取当前选中的对象
          let obj = {};
          obj = that.QTicketList.find(item => {
            return item.Id == that.subItemObj.childItem.CouponsTicketId; //筛选出匹配数据
          });
          if (obj != undefined) {
            that.subItemObj.childItem.CouponsTicketName = obj.TicketName;
          }
        }
      },
      //删除景区
      removeScienTrip(dayNum, subIndex) {
        this.$parent.$parent.commonRemove(dayNum, subIndex);
      },
      //删除图片
      delImg(index, subItemObj) {
        this.$parent.$parent.commonRemoveImg(index, subItemObj);
      },
      //上传景点图片
      uploadScenImg(item) {
        let newArr = [];
        newArr.push(item.file);
        let path = "/Upload/DMC/";
        this.UploadSelfFileT(path, newArr, x => {
          // var str = x.res.requestUrls[0];
          var fileObj = this.$commonUtils.FileObject();
          fileObj.Url = this.$commonUtils.GetALiFileUrl(str);
          fileObj.fileName = x.data.FilePath;
          item.data.ImaArray.push(fileObj);
        });
      },
      //上移下移
      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;
      },
      getItemLabel(item){
        let returnName = item.Name;
        if(item.Inventory>=0){
          returnName = returnName+ "   " +item.Inventory;
        }
        return returnName;
      }
    },
    created() {
      if (this.subItemObj.childItem.ID > 0) {
        if (this.subItemObj.childItem.CouponsId > 0) {
          this.QScenicList.push({
            ID: parseInt(this.subItemObj.childItem.CouponsId),
            Name: this.subItemObj.childItem.CouponsName
          });
        }
        if (this.subItemObj.childItem.CouponsTicketId > 0) {
          this.QTicketList.push({
            Id: parseInt(this.subItemObj.childItem.CouponsTicketId),
            TicketName: this.subItemObj.childItem.CouponsTicketName
          });
        }
      }
    },
    mounted() {},
    watch: {
      subItemObj: {
        //深度监听，可监听到对象、数组的变化
        handler: function (val, oldVal) {
          this.subItemObj.childItem.ScenicImg = JSON.stringify(
            this.subItemObj.childItem.ImaArray
          );
        },
        deep: true
      },
      "subItemObj.childItem.QCity": {
        handler: function (val, oldVal) {
          this.getQScenicList();
        },
        deep: true
      }
    }
  };

</script>