<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="removeHotelTrip(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.HotelId'" :rules="hotelTripRules.HotelId">
                  <el-select :disabled="isOpenGroup" class='w160' :placeholder="$t('pub.pleaseSel')" filterable v-model="subItemObj.childItem.HotelId"
                  @visible-change="getHotelList($event)" @change="changeHotelList()">
                    <el-option :label="$t('pub.unlimitedSel')" :value='Diner.DefaultSelectValue'></el-option>
                    <el-option v-for="item in QHotelList" :label='getItemLabel(item)' :value='item.ID' :key='item.ID'>
                    </el-option>
                  </el-select>
                </el-form-item>
              </span>
              <span class="HD_hotelru">
                <el-checkbox :disabled="isOpenGroup" v-model="subItemObj.childItem.IsSameLevel" :checked="subItemObj.childItem.IsSameLevel===CheckedVaule"
                :true-label="CheckedVaule" :false-label="UnCheckedVaule" border size="mini">同级酒店</el-checkbox>
              </span>
              <span class="comTravelLeft">房型选择</span>
              <span>
                <el-select :disabled="isOpenGroup" class='w160' :placeholder="$t('pub.pleaseSel')" filterable v-model="subItemObj.childItem.HotelProductId"
                  @visible-change="getHotelProductList($event)" @change="changeHotelProductList()">
                  <el-option :label="$t('pub.unlimitedSel')" :value='Diner.DefaultSelectValue'></el-option>
                  <el-option v-for="item in QHotelProductList" :label='item.Name' :value='item.ID' :key='item.ID'>
                  </el-option>
                </el-select>
              </span>
              <span v-if="subItemObj.childItem.IsUseDinner==1">
                <span class="TDhotelDiner">酒店含餐</span>
                <span>
                  <el-checkbox-group v-model="Diner.UseDinerCked">
                    <el-checkbox v-for="item in Diner.UseDinnerArray" :disabled="isOpenGroup||!varCanChecked(item)" :label="item.Id"
                      :key='item.Id'>{{item.Name}}</el-checkbox>
                  </el-checkbox-group>
                </span>
              </span>
            </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" >
              <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="removeHotelTrip(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>入住酒店</span>
              <span>
                  {{subItemObj.childItem.HotelName}}
              </span>
              <span v-if="subItemObj.childItem.IsSameLevel==1">或同级酒店</span>
              <span>房型</span>
              <span>
                {{subItemObj.childItem.HotelProductName}}
              </span>
              <span v-if="subItemObj.childItem.IsUseDinner==1">
                <span class="TDhotelDiner">酒店含餐</span>
                <span v-if="Diner.UseDinerCked==1">早餐</span>
                <span v-if="Diner.UseDinerCked==2">中餐</span>
                <span v-if="Diner.UseDinerCked==3">晚餐</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",
    "DinnerList",
    "index",
    "subIndex",
    "isOpenGroup",
    "subTotalIndex",
    "TimeTypeList"
  ],
  data() {
    var TimeTypeValidate = (rule, value, callback) => {
      if (value === 0) {
        callback(new Error("请选择时间类型"));
      } else {
        callback();
      }
    };
    var HotelIdValidate = (rule, value, callback) => {
      if (value === 0) {
        callback(new Error("请选择酒店"));
      } else {
        callback();
      }
    };
    return {
      //酒店列表
      QHotelList: [],
      //酒店房型列表
      QHotelProductList: [],
      toolbar: {
        clean: false, //加粗
        font: false, //字体
        narrative: true //叙述,
      },
      dspNone:false,
      initialIndex:0,
      //选中同级酒店
      CheckedVaule: 1,
      //不选中
      UnCheckedVaule: 0,
      //是否显示编辑框
      isShowEdit: false,
      //text框placeholder
      placeholder: "请输入酒店信息",
      //酒店含餐
      Diner: {
        DefaultSelectValue: 0,
        UseDinerCked: [],
        UseDinnerType: [
          {
            Id: "1",
            Name: "早"
          },
          {
            Id: "2",
            Name: "中"
          },
          {
            Id: "3",
            Name: "晚"
          }
        ],
        UseDinnerArray: []
      },
      //酒店验证
      hotelTripRules: {
        //时间类型验证
        TimeType: [
          {
            validator: TimeTypeValidate,
            trigger: "change"
          }
        ],
        HotelId: [
          {
            validator: HotelIdValidate,
            trigger: "change"
          }
        ]
      },
      TheDayUserDinner: [] //当天餐厅用餐情况
    };
  },
  components: {
    "my-edit": MyEdit
  },
  methods: {
   //获取酒店列表
    getHotelList(event) {
      if (event) {
        var msg = {
          IsGetPic: 1,
          IsGetRemark: 1,
          QCity: this.subItemObj.childItem.QCity
        };
        this.apipost(
          "hotel_post_GetLineHotelList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.QHotelList = res.data.data;
            }
          },
          err => {}
        );
      }
    },
    //酒店选择改变
    changeHotelList() {
      var that = this;
      if (that.subItemObj.childItem.HotelId != 0) {
        //获取当前选中的对象
        let obj = {};
        obj = that.QHotelList.find(item => {
          return item.ID === that.subItemObj.childItem.HotelId; //筛选出匹配数据
        });
        if (obj != undefined) {
          that.subItemObj.childItem.HotelProductId = 0;
          that.subItemObj.childItem.HotelProductName = "";
          that.QHotelProductList = [];
          that.Diner.UseDinnerArray = [];
          that.subItemObj.childItem.ImaArray = [];
          that.subItemObj.childItem.Description = obj.Descriptions;
          that.subItemObj.childItem.ImaArray = obj.imgList;
          that.subItemObj.childItem.IsUseDinner = obj.IsUseDinner;
          that.subItemObj.childItem.HotelName = obj.Name;
          let useDinnerTypeStr = that.subItemObj.childItem.UseDinnerType;
          if (that.subItemObj.childItem.ID > 0) {
            if (obj.UseDinnerType == null || !(obj.UseDinnerType.length > 0)) {
              that.Diner.UseDinerCked = [];
              that.subItemObj.childItem.UseDinnerType = "";
            } else {
              let useDinnerTypeStr = that.subItemObj.childItem.UseDinnerType;
              if (useDinnerTypeStr != null && useDinnerTypeStr.length > 0) {
                let objUseDinnerTypeArr = obj.UseDinnerType.split(",");
                let useDinnerTypeArr = useDinnerTypeStr.split(",");
                let tmpDinnerTypeArr = [];
                useDinnerTypeArr.forEach(x => {
                  let isRemove = true;
                  objUseDinnerTypeArr.forEach(y => {
                    if (x == y) {
                      isRemove = false;
                    }
                  });
                  if (!isRemove) {
                    tmpDinnerTypeArr.push(x);
                  }
                });
                that.subItemObj.childItem.UseDinnerType = tmpDinnerTypeArr.join(
                  ","
                );
                that.Diner.UseDinerCked = tmpDinnerTypeArr;
              }
            }
          } else {
            if (obj.UseDinnerType != null && obj.UseDinnerType.length > 0) {
              that.Diner.UseDinerCked = obj.UseDinnerType.split(",");
            }
          }
          let useDinnerTypeArry = [];
          if (obj.UseDinnerType != null && obj.UseDinnerType.length > 0) {
            useDinnerTypeArry = obj.UseDinnerType.split(",");
          }
          useDinnerTypeArry.forEach(y => {
            that.Diner.UseDinnerType.forEach(DinerTypeItem => {
              if (y == DinerTypeItem.Id) {
                that.Diner.UseDinnerArray.push(DinerTypeItem);
              }
            });
          });
          that.Diner.UseDinnerArray.sort(
            this.$commonUtils.createComprisonFunction("Id")
          );
        }
      }
    },
    //获取酒店房型列表
    getHotelProductList(event) {
      if (event) {
        this.apipost(
          "dict_post_HotelProduc_GetList",
          {
            Hotel_ID: this.subItemObj.childItem.HotelId
          },
          res => {
            if (res.data.resultCode == 1) {
              this.QHotelProductList = res.data.data;
            }
          },
          err => {}
        );
      }
    },
    //产品选择改变
    changeHotelProductList() {
      var that = this;
      if (that.subItemObj.childItem.HotelProductId != 0) {
        //获取当前选中的对象
        let obj = {};
        obj = that.QHotelProductList.find(item => {
          return item.ID === that.subItemObj.childItem.HotelProductId; //筛选出匹配数据
        });
        if (obj != undefined) {
          this.subItemObj.childItem.HotelProductName = obj.Name;
        }
      }
    },
    //上传景点图片
    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);
      });
    },
    //删除酒店
    removeHotelTrip(dayNum, subIndex) {
      this.$parent.$parent.commonRemove(dayNum, subIndex);
    },
    //删除图片
    delImg(index, subItemObj) {
      this.$parent.$parent.commonRemoveImg(index, subItemObj);
    },
    initTheDayUserDinner() {
      let dayNum = this.subItemObj.childItem.DayNum;
      this.TheDayUserDinner = [];
      this.DinnerList.forEach(x => {
        if (x.DayNum == dayNum) {
          if (x.UseDinnerType.length > 0) {
            let tempDinnerArr = x.UseDinnerType.split(",");
            let reg = /^[0-9]+.?[0-9]*/;
            tempDinnerArr.forEach(y => {
              if (reg.test(y)) {
                this.TheDayUserDinner.push(y);
              }
            });
          }
        }
      });
      this.TheDayUserDinner = Array.from(new Set(this.TheDayUserDinner));
    },
    varCanChecked(dinnerType) {
      let canChecked = true;
      this.TheDayUserDinner.forEach(x => {
        if (x == dinnerType.Id) {
          canChecked = false;
        }
      });
      return canChecked;
    },
    //上移下移
    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;
    }
  },

  mounted() {
    if (this.subItemObj.childItem.ID > 0) {
      if (this.subItemObj.childItem.HotelId > 0) {
        this.QHotelList.push({
          ID: parseInt(this.subItemObj.childItem.HotelId),
          Name: this.subItemObj.childItem.HotelName
        });
      }

      if (this.subItemObj.childItem.HotelProductId > 0) {
        this.QHotelProductList.push({
          ID: parseInt(this.subItemObj.childItem.HotelProductId),
          Name: this.subItemObj.childItem.HotelProductName
        });
      }
    }
  },
  watch: {
    subItemObj: {
      //深度监听，可监听到对象、数组的变化
      handler: function(val, oldVal) {
        this.subItemObj.childItem.HotelImg = JSON.stringify(
          this.subItemObj.childItem.ImaArray
        );
      },
      deep: true
    },
    "Diner.UseDinerCked": {
      handler: function(val, oldVal) {
        this.subItemObj.childItem.UseDinnerType = this.Diner.UseDinerCked.join(
          ","
        );
      }
    },
    DinnerList: {
      handler: function(val, oldVal) {
        this.initTheDayUserDinner();
      },
      deep: true
    },
    "subItemObj.childItem.QCity": {
      handler: function(val, oldVal) {
        this.getHotelList();
      },
      deep: true
    }
  }
};
</script>
