<style>
  .page_iisMgadd {
    width: 830px;
    background-color: white;
    padding: 10px;
  }

  .page_iisMgadd>p {
    font-size: 18px;
    text-align: center;
    padding-bottom: 15px;
  }

  .page_iisMgadd .page_iisMgadd_table {
    width: 100%;
    font-size: 14px;
    text-align: center;
  }

  .page_iisMgadd .page_iisMgadd_table td {
    padding: 10px;
  }

  .page_iisMgadd .page_iisMgadd_table .page_iisMgadd_bank td._bank_td {
    width: 679px;
  }

  .page_iisMgadd .iis_save {
    text-align: right;
    padding: 10px 0 0 0;
  }

  .page_iisMgadd .page_iisMgadd_table tr td.text-align-left {
    font-weight: 800;
  }

  .page_iisMgadd ._addUpload_tips {
    margin-top: 20px;
    font-size: 12px;
    color: #999999;
  }

  .page_iisMgadd ._addUpload_box {
    display: block;
    margin-top: 15px;
  }

  .page_iisMgadd ._addUpload_box img {
    width: 100%;
    height: 100%;
  }

  .page_iisMgadd ._addUpload_box>div {
    float: left;
    width: 138px;
    height: 92px;
    border: 1px dashed rgba(210, 210, 210, 1);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 10px;
    padding: 5px;
    margin-right: 10px;
    position: relative;
  }

  .page_iisMgadd ._addUpload_box>div:hover {
    background-color: #f5f5f5;
  }

  .page_iisMgadd ._addFile_name {
    padding-left: 15px;
    max-width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page_iisMgadd ._addUpload_box .icon-guanbi1 {
    font-size: 12px;
    color: white;
    display: inline-block;
    margin-left: 15px;
    position: absolute;
    right: -6px;
    top: -9px;
    background-color: #f56c6c;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    text-align: center;
    line-height: 20px;
  }

  .page_iisMgadd ._addUpload_box .icon-guanbi1:hover {
    font-size: 12px;
    color: #c94052;
  }

  .page_iisMgadd ._addUpload_box .icon-excel,
  .page_iisMgadd ._addUpload_box .icon-pdf {
    text-align: center;
    font-size: 38px;
    color: green;
    line-height: 75px;
  }

  .page_iisMgadd .el-upload-dragger {
    font-size: 28px;
    color: #8c939d;
    width: 126px;
    height: 80px;
    line-height: 41px;
    text-align: center;
  }

</style>
<template>
  <div class="page_iisMgadd">
    <p>发票开具申请单</p>
    <table data-v-ca5157c2 border="1" class="page_iisMgadd_table" style="border-collapse: collapse;">
      <tr>
        <td width="130">部门</td>
        <td width="290">{{DepartName}}</td>
        <td width="130">申请人</td>
        <td>{{emName}}</td>
      </tr>
      <tr>
        <td>开具金额</td>
        <td>
          <el-input placeholder v-model="msg.ApplyMoney" @keyup.native="checkPrice(msg,'ApplyMoney')"></el-input>
        </td>
        <td>到账金额</td>
        <td>{{orderList.moneyStr}}</td>
      </tr>
      <tr class="page_iisMgadd_bank">
        <td>到账银行</td>
        <td colspan="3" class="_bank_td">
          {{orderList.AccountNumber}}
        </td>
      </tr>
      <tr>
        <td>申请日期</td>
        <td>{{new Date().Format('yyyy-MM-dd')}}</td>
        <td>到账日期</td>
        <td>{{orderList.TradeDateStr}}</td>
      </tr>

      <tr>
        <td v-if="msg.TCID>0">{{$t('visa.v_tuanhao')}}</td>
        <td v-if="msg.TCID>0">{{msg.TCID}}</td>
        <td{{$t('hotel.order_Number')}}/td>
        <td :colspan="msg.TCID>0?0:3">{{msg.OrderId}}</td>
      </tr>
      <tr>
        <td rowspan="6">开具内容</td>
        <td>
          公司名称
          <el-select v-model="isChang" placeholder class="w150" @change="clearInfo">
            <el-option :key="1" :value="1" label="常用公司"></el-option>
            <el-option :key="2" :value="2" label="非常用公司"></el-option>
          </el-select>
        </td>
        <td colspan="2">
          <el-select v-model="CompanyID" placeholder v-if="isChang === 1" @change="setDutyParagraph">
            <el-option v-for="item in CustomerList" :key="item.ID" :value="item.ID" :label="item.CompanyName">
            </el-option>
          </el-select>
          <template v-else>
            <span style="display:flex;align-items: center;">
              <el-input placeholder v-model="msg.CompanyName"></el-input>
              <el-checkbox v-model="checked">保存为常用</el-checkbox>
            </span>
          </template>
        </td>
      </tr>
      <tr>
        <td>税号</td>
        <td colspan="2">
          <el-input placeholder v-model="msg.DutyParagraph" v-if="isChang === 2"></el-input>
          <span v-else>{{msg.DutyParagraph}}</span>
        </td>
      </tr>
      <tr>
        <td>{{$t('admin.admin_address')}}</td>
        <td colspan="2">
          <el-input placeholder v-model="msg.Address"></el-input>
        </td>
      </tr>
      <tr>
        <td>电话</td>
        <td colspan="2">
          <el-input placeholder v-model="msg.CompanyPhone"></el-input>
        </td>
      </tr>
      <tr>
        <td>开户行</td>
        <td colspan="2">
          <el-input placeholder v-model="msg.OpeningBank"></el-input>
        </td>
      </tr>
      <tr>
        <td>账号</td>
        <td colspan="2">
          <el-input placeholder type="number" v-model="msg.BankNo"></el-input>
        </td>
      </tr>
      <tr>
        <td>开票内容</td>
        <td colspan="3">
          <el-input type="textarea" placeholder v-model="msg.ApplyContent"></el-input>
        </td>
      </tr>
      <tr>
        <td>备注</td>
        <td>
          <el-input type="textarea" placeholder v-model="msg.Remarks"></el-input>
        </td>
        <td>预计到账时间</td>
        <td>
          <el-date-picker v-model='msg.AccountingDate' class="w230" value-format="yyyy-MM-dd" type="date"
            placeholder="选择日期"></el-date-picker>
        </td>
      </tr>
    </table>
    <div>
      <div>
        <p>
          {{$t('fnc.scfujian')}}
          <span class="_addUpload_tips">{{$t('tips.wjdxbncgsz')}}</span>
        </p>
        <div class="_addUpload_box clearfix">
          <template v-for="(file,fIndex) in saveMsg">
            <div v-if="file.Type==3">
              <div style="width:100%;height:100%;overflow: hidden;">
                <img :src="file.Url?file.Url:file.Content" @click="showUpLoadFile(file)">
              </div>
              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
            </div>
            <div v-if="file.Type==1">
              <div class="iconfont"
                :class="file.Content.substring(file.Content.lastIndexOf('.')+1,file.Content.length).toUpperCase()=='PDF'? 'icon-pdf' : 'icon-excel'"
                @click="showUpLoadFile(file)"></div>
              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
            </div>
            <div v-if="file.Type==2">
              <div class="iconfont icon-excel" @click="showUpLoadFile(file)"></div>
              <span class="iconfont icon-guanbi1" @click="deleteUploadFile(fIndex)"></span>
            </div>
          </template>
          <div class="_pic_upload">
            <el-upload drag :http-request="uploadFileBtn" :multiple="true" :show-file-list="false" action>
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <div class="el-upload__text">{{$t('active.ld_djscwj')}}</div>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
    <div class="iis_save">
      <button class="normalBtn" @click="Addiis()">{{$t('fnc.tijiao')}}</button>
    </div>
    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          TCID: 0,
          OrderId: 0,
          ApplyMoney: 0,
          AactualMoney: 0,
          CompanyName: "",
          DutyParagraph: "",
          InvoiceApplyState: 1,
          CustomerId: 0,
          IsDefaultInfo: 1,
          ApplyPics: [],
          ID: 0,
          AccountingDate: '',
          InvoiceApplyType: 1, //默认为团队订单
          ApplyContent: '',//开票内容
        },
        DepartName: "",
        emName: "",
        accountList: [],
        orderList: {},
        isChang: 1,
        checked: true,
        CustomerList: [],
        CompanyID: "",
        images: [],
        imageOptions: {
          navbar: false,
          title: false
        },
        saveMsg: [],
        crmOrderObj:null
      };
    },
    methods: {
      goUrlO: function (OrderId) {
        this.$router.push({
          name: 'enrollTotal',
          query: {
            id: OrderId,
            blank: 'y',
            tab: '报名统计'
          }
        });
      },
      inited(viewer) {
        this.$viewer = viewer
      },
      showImg(src) {
        src = src.indexOf('http') != -1 ? src : this.domainManager().ViittoFileUrl + src;
        let isExsit = false
        this.images.forEach(x => {
          if (x == src)
            isExsit = true
        })
        if (!isExsit) {
          this.images.push(src)
        } else {
          this.$viewer.view(this.images.indexOf(src))
        }
        this.$viewer.show()
      },
      showUpLoadFile(i) { // 预览上传文件
        if (i.Type == 3) {
          this.showImg(i.Url);
        } else {
          if (i.Content.substring(i.Content.lastIndexOf('.') + 1, i.Content.length).toUpperCase() == 'PDF') {
            this.previewPDF(i.Url)
          } else {
            window.open("https://view.officeapps.live.com/op/view.aspx?src=" + i.Url)
          }
        }
      },
      deleteUploadFile(i) { // 删除上传文件
        this.saveMsg.splice(i, 1);
      },
      uploadFileBtn(file) { //上传
        if (file.file.size > 1024 * 1024 * 10) {
          this.$message.warning(this.$t('tips.wjdxbncgsz'))
          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;
        let typeOk = false;
        typeArr.forEach(x => {
          if (x.stringArr.indexOf(ft) != '-1') {
            fileTypeNumber = x.type;
            typeOk = true;
          }
        })
        if (!typeOk) return this.$message.error(this.$t('tips.qscWEfile'));
        let newArr = [];
        newArr.push(file.file)
        let path = "/Upload/Temporary/"
        this.$message.info(this.$t('tips.shangchuanzhong'))
        this.UploadSelfFileT(path, newArr, x => {
          let fileSize = file.file.size < 1024 ? file.file.size : (file.file.size / 1024).toFixed(0);
          this.saveMsg.push({
            Content: x.data.FilePath,
            ID: 0,
            Type: fileTypeNumber,
            Url: this.domainManager().ViittoFileUrl + x.data.FilePath,
          })
          this.$message.success(this.$t('tips.scchenggong'))
        }, 1);
      },
      clearInfo: function () {
        // 清除数据
        this.msg.DutyParagraph = "";
        this.msg.CompanyName = "";
      },
      setDutyParagraph: function () {
        // 绑定数据
        this.CustomerList.forEach(x => {
          if (x.ID === this.CompanyID) {
            this.msg.DutyParagraph = x.DutyParagraph;
            this.msg.CompanyName = x.CompanyName;
            this.msg.Address = x.Address;
            this.msg.BankNo = x.BankNo;
            this.msg.CompanyPhone = x.CompanyPhone;
            this.msg.OpeningBank = x.OpeningBank;
          }
        });
      },
      Addiis: function () {
        // 新增接口
        if (this.msg.CompanyName === "")
          return this.$message.error("请填写公司名称！");
        if (this.msg.DutyParagraph === "")
          return this.$message.error("请填写税号！");
        if (this.msg.ApplyContent === "")
          return this.$message.error("请填写开票内容！");
        if (this.checked) {
          this.msg.IsDefaultInfo = 1;
        } else {
          this.msg.IsDefaultInfo = 0;
        }
        this.msg.ApplyPics = this.saveMsg
        this.apipost(
          "InvoiceApply_get_SetInvoiceApply_V2",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.$message.success(res.data.message);
              let path = ''
              if(this.msg.InvoiceApplyType == 1){
                path = 'groupTourOrder'
              }else if(this.msg.InvoiceApplyType == 4){
                path = 'VisaProductEditOrder'
              }
              setTimeout(() => {
                if(!this.crmOrderObj){
                  this.$router.push({
                    name: path
                  });
                }else{
                  let data = [
                    {
                        path: this.crmOrderObj.crmPath+'?OrderId='+this.crmOrderObj.OrderId+'&blank=y',
                    },
                  ];
                    let href = this.domainManager().crmRoutingUrl +
                    "automaticLogin?token=" +
                    this.getLocalStorage().token +
                    "&data=" +
                    JSON.stringify(data);
                    window.open(href);
                }

              }, 1000);
            } else {
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      },
      getAccountList: function () {
        //获取账户类型对应下的账户列表
        this.apipost(
          "FinancialInstitutions_post_GetALLAccountList", {
            TypeId: 3
          },
          res => {
            if (res.data.resultCode == 1) {
              let data = res.data.data;
              data.forEach(x => {
                x.allName = `${x.Alias}-${x.BackNo}`;
              });
              this.accountList = data;
            }
          },
          err => {}
        );
      },
      getOrderDetail: function () {
        // 获取订单详情
        let OrderResource = this.msg.InvoiceApplyType;
        if (this.msg.InvoiceApplyType == 1) {
          OrderResource = 8; //团队订单
        }else if(this.msg.InvoiceApplyType==4){
          OrderResource = 10; //签证订单
        }else if(this.msg.InvoiceApplyType==5){
          OrderResource = 4; //车
        }else if(this.msg.InvoiceApplyType==6){
          OrderResource = 1; //酒店
        }else if(this.msg.InvoiceApplyType==7){
          OrderResource = 3; //景点
        }
        this.apipost(
          "InvoiceApply_get_GetOrderFinanceList", {
            OrderId: this.msg.OrderId,
            OrderResource: OrderResource,
            IsTravelMoney: 1
          },
          res => {
            if (res.data.resultCode == 1) {
              this.orderList = res.data.data;
            }
          },
          err => {}
        );
      },
      getCustomerInvoiceList: function () {
        // 根据客户id 获取对应发票信息
        this.apipost(
          "InvoiceApply_get_GetCustomerInvoiceList", {
            CustomerID: this.msg.CustomerId
          },
          res => {
            if (res.data.resultCode == 1) {
              this.CustomerList = res.data.data;
            }
          },
          null
        );
      },
      getDetail: function (id) { // 获取详情
        this.apipost('InvoiceApply_get_GetDetails', {
          ID: id,
          InvoiceApplyType: this.msg.InvoiceApplyType
        }, res => {
          if (res.data.resultCode == 1) {
            let detail = res.data.data
            this.isChang = 2
            this.msg.DutyParagraph = detail.DutyParagraph;
            this.msg.CompanyName = detail.CompanyName;
            this.msg.Address = detail.Address;
            this.msg.BankNo = detail.BankNo;
            this.msg.CompanyPhone = detail.CompanyPhone;
            this.msg.OpeningBank = detail.OpeningBank;
            this.msg.ApplyMoney = detail.ApplyMoney;
            if (detail.ApplyPics && detail.ApplyPics.length > 0) {
              detail.ApplyPics.forEach(x => {
                this.saveMsg.push({
                  Content: x.Url,
                  Type: x.Type,
                  Url: x.Url
                });
              })
            }
            this.getOrderDetail();
          }
          this.loading = false
        }, null)
      },
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.DepartName = userInfo.DepartName;
      this.emName = userInfo.emName;
      this.msg.OrderId = this.$route.query.OrderId;
      this.msg.TCID = this.$route.query.TCID?this.$route.query.TCID:0;
      this.msg.CustomerId = this.$route.query.customerId;
      this.msg.InvoiceApplyType = this.$route.query.InvoiceApplyType?this.$route.query.InvoiceApplyType:1;
      if(this.$route.query.crmOrderObj){
        let crmOrderObj = JSON.parse(this.$route.query.crmOrderObj)
        this.crmOrderObj = crmOrderObj
        this.msg.OrderId = crmOrderObj.OrderId;
        this.msg.TCID = crmOrderObj.TCID;
        this.msg.CustomerId = crmOrderObj.customerId;
        this.msg.InvoiceApplyType = crmOrderObj.InvoiceApplyType;
      }
      this.getAccountList();
      this.getOrderDetail();
      this.getCustomerInvoiceList();
      if (this.$route.query.edit) {
        this.msg.ID = this.$route.query.id
        this.getDetail(this.$route.query.id)
      }
    }
  };
</script>
