<style>
.TravelConfigImg {
  float: left;
  width: 180px;
  height: 120px;
  border: 1px dashed #d2d2d2;
  border-radius: 4px;
  margin-right: 10px;
}
.TravelConfigImg img {
  width: 100%;
  height: 100%;
}
.resourceImgAdd {
  width: 620px;
  margin: auto;
}
.addImgOpen {
  text-align: center;
  line-height: 110px;
}
</style>

<template>
    <div>
        <div class="TravelConfig clearfix" :class="{'foldHeight':isFold==1}">
          <span class="TMTitle"><i></i>基础设置</span>
          <span class="foldList" @click="fold" v-if="isFold==''">点击折叠</span>
          <span class="foldList" @click="fold" v-if="isFold==1">点击展开</span>
          <div class="Travel_Nav">
              <span class="Travel_TT">信息</span>
              <span class="Travel_Line"></span>
          </div>
          <div class="clearfix">
            <div class="TMOne_Right clearfix">
                <el-form label-width="100px" :model="PostConfig" ref="PostConfig">
                  <div class="clearfix">
                    <div class="TCRightOne">
                        <el-form-item label="编号">
                            <el-input  type="text" class="w200" disabled :value="PostConfig.ID"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('advmanager.v_line')">
                            <el-select disabled v-model="PostConfig.LineId" class='w200' :placeholder="$t('pub.pleaseSel')" >
                                <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
                                <el-option
                                    v-for="item in LineList"
                                    :label='item.LineName'
                                    :value='item.LineID'
                                    :key='item.LineID'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="TCRightTwo Tone">
                        <el-form-item label="系列">
                            <el-select disabled v-model="PostConfig.LineteamId" class='w200' :placeholder="$t('pub.pleaseSel')" >
                                <el-option :label="$t('pub.unlimitedSel')" :value='SelectDefaultValue'></el-option>
                                <el-option
                                    v-for="item in LineTeamList"
                                    :label='item.LtName'
                                    :value='item.LtID'
                                    :key='item.LtID'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                      <el-form-item label="PDF别名">
                        <el-input  type="text" class="w200" v-model="PostConfig.PDFAlias" ></el-input>
                      </el-form-item>
                    </div>
                    <div class="TCRightThree">
                        <el-form-item label="团队标题">
                            <el-input v-model="PostConfig.Title" type="textarea" :autosize="{minRows: 3, maxRows: 3 }" resize="none" class="w240" placeholder="请填写团队标题"></el-input>
                        </el-form-item>
                    </div>
                  </div>
                  <div class="Travel_ImgList clearfix">
                      <div class="TFimgList" v-for="(item,index) in PostConfig.fileList" :key="item.subCode">
                        <img v-if="!item.Url" src="../../../assets/img/bg_c3@3x.png"/>
                        <img v-else :src="item.Url"/>
                        <div class="TFIMGzhe">
                            <div class="TFreupload" @click="updateTFimg(index)">
                                <el-upload
                                    :file-list="PostConfig.fileList"
                                    :http-request="UploadAttachment"
                                    :multiple="true"
                                    accept="image/jpeg,image/gif,image/png,image/bmp"
                                    :show-file-list="false"
                                    action="">
                                    <i class="iconfont icon-Edit"></i>
                                </el-upload>
                            </div>
                            <div class="re-delte" @click.stop="ExchangeImg(index,0)" v-if="index!=0&&item.Url"><i class="iconfont icon-zuoyi"></i></div>
                            <div class="re-delte" @click.stop="ExchangeImg(index,1)" v-if="index!=PostConfig.fileList.length-1&&item.Url"><i class="iconfont icon-youyi"></i></div>
                            <div class="re-delte" @click.stop="addImgOpen(index)"><i class="iconfont icon-img_cz"></i></div>
                        </div>
                      </div>
                  </div>
                  <div class="Travel_Nav">
                      <span class="Travel_TT">功能</span>
                      <span class="Travel_Line"></span>
                  </div>
                  <div class="clearfix">
                      <div class="TCRightOne TCOrderControl">
                        <div>
                          <span class="ComSwitchTitle">订单操作</span>
                          <span class="TCswitch">
                              <el-switch v-model="PostConfig.IsOrder" :active-value="inActive"  :inactive-value="notInActive"></el-switch>
                              <div class="configNotice">关闭后，业务人员将不能操作订单</div>
                          </span>
                        </div>
                        <div>
                          <span class="ComSwitchTitle">报名候补</span>
                          <span class="TCswitch">
                              <el-switch v-model="PostConfig.IsSubstitution"  :active-value="inActive" :inactive-value="notInActive"></el-switch>
                              <div class="configNotice">关闭后不可超收人数</div>
                          </span>
                        </div>
                      </div>
                      <div class="TCRightTwo TTwo">
                        <div>
                          <span class="ComSwitchTitle">同行在线预订</span>
                          <span class="TCswitch">
                              <el-switch v-model="PostConfig.IsB2B"  :active-value="inActive" :inactive-value="notInActive"></el-switch>
                              <div class="configNotice">产品将会直接推送到B2B站点</div>
                          </span>
                        </div>
                        <div>
                          <span class="ComSwitchTitle">直客在线预订</span>
                          <span class="TCswitch">
                              <el-switch v-model="PostConfig.IsB2C" :active-value="inActive" :inactive-value="notInActive"></el-switch>
                              <div class="configNotice">产品将会直接推送到B2C站点</div>
                          </span>
                        </div>
                      </div>
                      <div class="TCRightThree">
                        <div class="opRemark">
                          <el-form-item label="OP备注内容">
                              <el-input v-model="PostConfig.OpRemark" type="textarea" :autosize="{minRows: 3, maxRows: 3 }" resize="none" class="w240" placeholder="OP备注内容"></el-input>
                          </el-form-item>
                        </div>
                      </div>
                  </div>
                  <div class="Travel_Nav">
                      <span class="Travel_TT">推荐</span>
                      <span class="Travel_Line"></span>
                  </div>
                  <div class="clearfix">
                      <div class="TCRightThree">
                        <el-form-item label="产品经理推荐">
                            <el-input v-model="PostConfig.ProductRecommend" type="textarea" :autosize="{minRows: 3, maxRows: 3 }" resize="none" class="w500" placeholder="产品经理推荐"></el-input>
                        </el-form-item>
                      </div>
                  </div>
                </el-form>
            </div>
          </div>
        </div>
        <el-dialog custom-class="resourceImgAdd" :title="$t('pub.addImg')" center :visible.sync="addimg">
            <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:isCheckmore='1' v-bind:imgType="3"></DMCchooseImg>
        </el-dialog>
    </div>
</template>
<script>
import DMCchooseImg from "../../commonPage/DMCchooseImg.vue";
export default {
  /*接收父组件传递的参数*/
  props: ["PostConfig", "LineList"],
  data() {
    return {
      //系列列表
      LineTeamList: [],
      //下拉框默认值
      SelectDefaultValue: 0,
      //折叠展开
      isFold: "",
      updateChoseIndex: "0",
      addimg: false,
      ChooseImgIndex: 0,
      inActive: 1,
      notInActive: 0
    };
  },
  components: {
    DMCchooseImg: DMCchooseImg
  },
  methods: {
    //点击折叠
    fold() {
      if (this.isFold == "") {
        this.isFold = 1;
      } else {
        this.isFold = "";
      }
    },
    validateForm() {
      //表单验证
      let flag = false;
      this.$refs["PostConfig"].validate(valid => {
        flag = valid;
      });
      return flag;
    },
    /*初始化组件*/
    init() {
      this.$emit("headCallBack", this.PostConfig);
    },
    //上传图片
    UploadAttachment(file) {
      let newArr = [];
      newArr.push(file.file);
      let fileName = file.file.name;
      let that = this;
      let path = "/Upload/DMC/";
      this.UploadSelfFileT(path, newArr, x => {
        var str = x.res.requestUrls[0];
        that.PostConfig.fileList[
          this.updateChoseIndex
        ].Url = this.domainManager().ViittoFileUrl + x.data.FilePath;
        that.PostConfig.fileList[this.updateChoseIndex].Name = fileName;
      });
    },

    //修改图片
    updateTFimg(index) {
      this.updateChoseIndex = index;
    },
    //图片左移右移
    ExchangeImg(index, IsMove) {
      var imgItem = this.PostConfig.fileList[index];
      //左移
      if (IsMove == 0) {
        var upItem = this.PostConfig.fileList[index - 1];
        this.$set(this.PostConfig.fileList, index - 1, imgItem);
        this.$set(this.PostConfig.fileList, index, upItem);
      } else {
        //右移动
        var downItem = this.PostConfig.fileList[index + 1];
        this.$set(this.PostConfig.fileList, index + 1, imgItem);
        this.$set(this.PostConfig.fileList, index, downItem);
      }
    },
    //关闭添加弹窗
    closeDMCchooseImg() {
      this.addimg = false;
    },
    addImgOpen(index) {
      this.addimg = true;
      this.ChooseImgIndex = index;
    },
    getDMCimg(imgArr) {
      var that = this;
      imgArr.forEach(imgItem => {
        var obj = this.$DMCUtils.DMCImageObj();
        obj.ID = 0;
        obj.Path = this.$commonUtils.removeDomain(imgItem.Path);
        obj.PicID = imgItem.ID;
        obj.ShowPath = imgItem.Path + "?x-oss-process=image/resize,l_140";
        that.PostConfig.fileList[this.ChooseImgIndex].Url = obj.ShowPath;
      });
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    PostConfig: {
      //深度监听，可监听到对象、数组的变化
      handler: function(val, oldVal) {
        this.$emit("headCallBack", this.PostConfig);
      },
      deep: true
    },
    //监听上传文件编号
    "PostConfig.fileList": {
      handler: function(val, oldVal) {
        if (
          this.PostConfig.fileList != "" &&
          this.PostConfig.fileList.length > 0
        ) {
          this.PostConfig.ImgCover = JSON.stringify(this.PostConfig.fileList);
        } else {
          this.PostConfig.ImgCover = "";
        }
        this.$emit("headCallBack", this.PostConfig);
      },
      deep: true
    },
    "PostConfig.ID": {
      handler: function(val, oldVal) {
        if (this.LineTeamList.length == 0) {
          var obj = {
            LtID: this.PostConfig.LineteamId,
            LtName: this.PostConfig.LtName
          };
          this.LineTeamList.push(obj);
        }
      },
      deep: true
    }
  }
};
</script>