<template>
  <div class="page_ShoppingReimbursementDetails">
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <input type="button" class="normalBtn" :value="SaveText" :disabled="IsDisable" @click="SaveData()" />
        </li>
      </ul>
    </div>
    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; ">
      <table border="0" cellspacing="1" cellpadding="0" class="roomReservationsTalbe" style="width:100%" v-loading="loading">
        <tr>
          <th colspan="5">{{$t('ground.dycaozuo')}}</th>
          <th colspan="8">{{$t('ground.dijieop')}}</th>
        </tr>
        <tr>
          <th width="120" style="display:none;">{{$t('ground.jindianNum')}}</th>
          <th width="180">{{$t('ground.dm')}}</th>
          <th width="90">{{$t('sm.company')}}</th>
          <th width="120" style="display:none">{{$t('ground.jdsj')}}</th>
          <th width="80">{{$t('ground.jdrs')}}</th>
          <th width="100">{{$t('fnc.a_zongjine')}}</th>
          <th width="100">{{$t('ground.yjlqqk')}}</th>
          <th width="120" style="display:none;">{{$t('ground.pzUpload')}}</th>
          <th width="100">{{$t('ground.ldyj')}}<br />{{$t('fnc.yingfu')}}</th>
          <th width="100">{{$t('ground.dyyj')}}<br />{{$t('fnc.yingfu')}}</th>
          <th width="100">{{$t('ground.gsyj')}}<br />{{$t('fnc.yingshou')}}</th>
          <th width="100">{{$t('ground.fyye')}}</th>
          <th width="100">{{$t('ground.fyzj')}}</th>
          <th width="100">{{$t('hotel.hotel_CurrentRate')}}</th>
          <th width="120">{{$t('ground.pzUpload')}}</th>
          <th width="120">{{$t('pub.pubRemark')}}</th>
        </tr>
        <tr v-if="list.length==0">
          <td colspan="15" style="height:40px;text-align:center;">
            {{$t('system.content_noData')}}
          </td>
        </tr>
        <tbody v-for="(item,outindex) in list" :class="{roomReservationsSplitTrCss:outindex%2!=0}">
          <tr v-for="(subItem,subIndex) in item.ShopDetailsList">
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length" style="display:none;">
              <!--进店团号-->
              <el-input v-model="item.ShopDetailsList[0].ShopNum"></el-input>
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <!--购物店名称-->
              {{item.ShopName}}
            </td>
            <td class="_height_45">
              <!--公司-->
              {{subItem.BName}} &nbsp;
              <span @click="DeleteItem(subItem)" style="color:blue;cursor:pointer;text-decoration:underline;">{{$t('system.ph_shanchu')}}</span>
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length" style="display:none">
              <el-input v-model="item.ShopDetailsList[0].EnterTime" placeholder="2019-01-01"
                @change="formatDateTime(item.ShopDetailsList[0].EnterTime,item)"></el-input>
              <!--EnterTime 进店时间-->
            </td>
            <td class="more_td">
              <el-input type="number" v-model="subItem.EnterNum" maxlength="3"></el-input>
              <!--EnterNum 进店人数-->
            </td>
            <td class="more_td _height_45">
              <el-input type="number" v-model="subItem.TotalMoney"></el-input>
              <!--TotalMoney 总金额【公司】-->
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <!--CommissionStatus 佣金领取状况-->
              <el-select v-model="item.ShopDetailsList[0].CommissionStatus">
                <el-option :label="$t('ground.xclq')" :value='1'></el-option>
                <el-option :label="$t('ground.gslq')" :value='2'></el-option>
              </el-select>
            </td>
            <td class="more_td" @click="upIndex = outindex" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length" style="display:none;">
              <p v-for="(img, imgIndex) in item.ShopDetailsList[0].imgList" @click="downLoadPZ(img)" v-if="img !== ''"
                style="cursor: pointer;padding: 5px;" title="点击下载">{{ '凭证' + (imgIndex + 1)}} <span
                  style="text-align: right;color: red;" @click.stop="UploadType=1,deleteImg(outindex,imgIndex)">X</span>
              </p>
              <img v-for="(img, imgIndex) in item.ShopDetailsList[0].imgList" @click="downLoadPZ(img)" v-if="img !== ''"
                :src="img" style="width: 10px;height: 10px;" alt="">
              <el-upload :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action="">
                <i class="el-icon-plus avatar-uploader-icon" @click="UploadType=1"></i>
                <div class="el-upload__text" @click="UploadType=1">{{$t('tips.dianjishanhcuan')}}</div>
              </el-upload>
              <!--Credentials 凭证【导游】-->
            </td>
            <td class="more_td">
              <el-input type="number" v-model="subItem.LeaderCommission"></el-input>
              <!--LeaderCommission 领队佣金应付-->
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <el-input type="number" v-model="item.ShopDetailsList[0].GuideCommission"></el-input>
              <!--GuideCommission 导游佣金应付-->
            </td>
            <td class="more_td _height_45">
              <el-input type="number" v-model="subItem.CompanyCommission"></el-input>
              <!--CompanyCommission 公司佣金应收-->
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <el-input type="number" v-model="item.ShopDetailsList[0].OtherDeduct"></el-input>
              <!--返佣余额 OtherDeduct-->
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <!--返佣总计 BackTotalMoney-->
              <el-input type="number" v-model="item.ShopDetailsList[0].BackTotalMoney"></el-input>
            </td>
            <td class="more_td" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <!--汇率 DMCRate-->
              <el-input type="number" v-model="item.ShopDetailsList[0].DMCRate"></el-input>
            </td>
            <td @click="upIndex = outindex" v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <!--DMCOPCredentials (地接OP上传凭证)-->
              <p v-for="(img, imgIndex) in item.ShopDetailsList[0].dmcImageList" @click="downLoadPZ(img)"
                v-if="img !== ''" style="cursor: pointer;padding: 5px;" title="点击下载">{{ '凭证' + (imgIndex + 1)}} <span
                  style="text-align: right;color: red;" @click.stop="UploadType=2,deleteImg(outindex,imgIndex)">X</span>
              </p>
              <img v-for="(img, imgIndex) in item.ShopDetailsList[0].dmcImageList" @click="downLoadPZ(img)"
                v-if="img !== ''" :src="img" style="width: 10px;height: 10px;" alt="">
              <el-upload :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action="">
                <i class="el-icon-plus avatar-uploader-icon" @click="UploadType=2"></i>
                <div class="el-upload__text" @click="UploadType=2">{{$t('tips.dianjishanhcuan')}}</div>
              </el-upload>
            </td>
            <td v-if="subIndex==0" :rowspan="item.ShopDetailsList.length">
              <!--Remarks 备注-->
              <el-input type="textarea" v-model="item.ShopDetailsList[0].Remarks"></el-input>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        SaveText: "保存",
        IsDisable: false, //是否禁用
        loading: false,
        list: [],
        upIndex: '',
        UploadType: '',
      }
    },
    methods: {
      deleteImg: function (index, sIndex) {
        if (this.UploadType == 1) {
          this.list[index].ShopDetailsList[0].imgList.splice(sIndex, 1);
        } else {
          this.list[index].ShopDetailsList[0].dmcImageList.splice(sIndex, 1);
        }
        this.$forceUpdate();
      },
      downLoadPZ: function (src) {
        const link = document.createElement('a');
        link.href = src;
        document.body.appendChild(link);
        link.click();
      },
      formatDateTime: function (data, obj) {
        if (isNaN(data) && !isNaN(Date.parse(data))) {
        } else {
          obj.EnterTime = '';
        }
      },
      uploadFileBtn(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning('文件大小不能超过10M！')
          return
        }
        //  1 文档  2 数据 3 图片
        let typeArr = [{
            stringArr: 'GIF|JPG|JPEG|PNG|BMP',
            type: 3
          },
          {
            stringArr: 'DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF',
            type: 1
          },
        ];
        let ft = file.file.name.substring(file.file.name.lastIndexOf('.') + 1, file.file.name.length).toUpperCase();
        let fileTypeNumber = 2;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != '-1') {
            fileTypeNumber = x.type
          }
        });
        let newArr = [];
        newArr.push(file.file);
        let path = "/Upload/ShopZhang/";
        this.$message.info('上传中...');
        var that = this;
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          var fileUrl = this.domainManager().ViittoFileUrl + x.data.FilePath;
          that.list.forEach((item, index) => {
            if (index == that.upIndex) {
              item.ShopDetailsList.forEach((subItem, subIndex) => {
                if (subIndex == 0) {
                  if (that.UploadType == 1) {
                    subItem.imgList.push(fileUrl);
                  } else {
                    subItem.dmcImageList.push(fileUrl);
                  }
                }
              });
            }
          });
          this.$message.success('上传成功');
        });
      },
      goUrlR(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "ID": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goUrlT(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goUrl(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj.TCIDS,
            'TCNUM': obj.TCNUMS,
            'flightTotal': obj.TotalSeat,
            'GuestNum': obj.CommonReport.HouseStatistics.RealityNum,
            'NewCombinationNum': obj.NewCombinationNum,
            blank: 'y',
            tab: title
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      getList() {
        this.loading = true;
        this.apipost(
          "dmcstatistics_get_GetPriceShopStaticsDetail", {
            TCIDs: this.$route.query.id
          },
          res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              data.forEach(item => {
                item.ShopDetailsList.forEach(subItem => {
                  subItem.EnterTime = subItem.EnterTimeStr;
                });
              })
              this.list = data;
            } else {
              this.Error(res.data.message);
            }
            this.loading = false;
          },
          err => {}
        );
      },
      //保存数据
      SaveData() {
        this.SaveText = "保存中..";
        this.IsDisable = true;
        this.apipost(
          "dmcstatistics_get_SetPriceShop", this.list,
          res => {
            this.SaveText = "保存";
            this.IsDisable = false;
            let _this = this;
            this.Info(res.data.message);
            setTimeout(function () {
              _this.MsgBus.$emit('msg');
              _this.MsgBus.$emit('refresh');
            }, 500)
          },
          err => {}
        );
      },
      DeleteItem(item) {
        var that=this;
        this.Confirm("是否要删除此数据?删除后将不能恢复.", function () {
          var msg = {
            Id: item.Id
          };
          that.apipost("dmcstatistics_post_RemovePriceShopDetails", msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success('删除成功！');
                that.getList();
              } else {
                that.Error(res.data.data);
              }
            }, null);
        });
      }
    },
    mounted() {
      this.getList()
    },
  }

</script>

<style scoped>
  .roomReservationsSplitTrCss td {
    background: #eee !important;
  }

  .roomReservationsTalbe {
    border-collapse: collapse;
  }

  .roomReservationsTalbe tr th {
    background: #eee;
    height: 40px;
    font-size: 12px;
    color: #333;
    border: 1px solid #d1d1d1;
  }

  .roomReservationsTalbe tr td {
    font-size: 12px;
    border: 1px solid #d1d1d1;
  }

  .roomReservationsTalbe tr td .link p:hover {
    text-decoration: underline;
    cursor: pointer;
  }

</style>