<style scoped>
 .form_box{
   margin: 0 auto;
   padding-top: 45px;
 }
 .TCIDAndTCNUMList_item{
   position: relative;
 }
 ._add_small_btn {
   position: absolute;
   right: -85px;
   top: 5px;
 }
 span._add_trip._add_small {
   width: 20px;
   height: 20px;
   line-height: 16px;
   font-size: 24px;
   margin-left: 12px;
 }

 span._add_trip {
   font-size: 30px;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background-color: #E95252;
   color: white;
   display: inline-block;
   line-height: 28px;
   text-align: center;
   margin-left: 28px;
   cursor: pointer;
 }
 ._delete_trip {
   -webkit-transform: rotate(46deg);
   transform: rotate(46deg);
 }

</style>
<template>
  <div>
    <div class="w350 form_box" v-if="!R && !F">
      <el-form label-width="110px" :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item :label="$t('fnc.feiyongfangxiang')" prop="Type">
          <el-radio-group v-model="ruleForm.Type" @change="Financial_post_GetCostTypeList(0)" :disabled="!!payType">
            <el-radio :label="1">{{$t('restaurant.res_income')}}</el-radio>
            <el-radio :label="2">{{$t('restaurant.res_outcome')}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('fnc.sfytxiangguan')" prop="Is_TCID">
          <el-radio-group v-model="ruleForm.Is_TCID" :disabled="!!(this.orderObj && this.orderObj.TCIDList && this.orderObj.TCIDList.length)">
            <el-radio :label="1">{{$t('fnc.yes')}}&nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
            <el-radio :label="0">{{$t('fnc.fou')}}&nbsp;&nbsp;&nbsp;&nbsp;</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-for="(item, index) in TCIDAndTCNUMList" >
          <el-form-item :label="$t('visa.v_tuanhao')" v-if="ruleForm.Is_TCID===1" class="TCIDAndTCNUMList_item" >
            <el-input v-model="item.TCID" class="w240"></el-input>
            <span class="_add_small_btn"><span class="_add_trip _add_small"  @click="addTCID">+</span> <span class="_add_trip _add_small _delete_trip" :style="{opacity: index === 0 ? '0' : '1'}"  @click="deleteTCID(index)">+</span></span>
          </el-form-item>
        </template>
        <el-form-item :label="$t('hotel.order_Number')" v-if="ruleForm.Is_TCID===1" >
          <el-input v-model="ruleForm.OrderID" class="w240"></el-input>
        </el-form-item>
        <el-form-item: label="$t('fnc.ssuogongsi')" prop="RB_Branch_Id" >
          <el-select  filterable  v-model='ruleForm.RB_Branch_Id' class="w240">
            <el-option v-for='item in CompanyList'
             :label='item.BName'
             :value='item.Id'
             :key='item.Id'
             :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('fnc.feiyongleixing')" prop="CostTypeID" >
          <el-select v-model="ruleForm.CostTypeID" :placeholder="$t('rule.qxzfyleixing')" filterable class="w240">
            <el-option v-for="item in GetCostTypeList" :label="item.Name" :value="item.ID" :key="item.ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="display: inline-block;line-height: 30px" class="normalBtn" @click="submitForm('ruleForm')">{{$t('pub.sureBtn')}}</div>
          <div style="display: inline-block;line-height: 30px" class="hollowFixedBtn" @click="resetForm('ruleForm')">{{$t('pub.cancelBtn')}}</div>
        </el-form-item>
      </el-form>
    </div>
    <template>
      <addReceivablesDocuments v-if="R" :dataList="R" :CostTypeID="ruleForm.CostTypeID" :OrderObj="orderObj" :path="path"></addReceivablesDocuments>
      <addFinancialDocuments v-if="F" :dataList="F" :CostTypeID="ruleForm.CostTypeID" :OrderObj="orderObj" :Cmd="Cmd"></addFinancialDocuments>
    </template>
  </div>
</template>
<script>
import addReceivablesDocuments from "./addReceivablesDocuments2";
import addFinancialDocuments from "./addFinancialDocuments2";
export default {
    data(){
        return{
          addOrderBox:true,
          ruleForm:{
            Type:1,
            Is_TCID:1,
            TCID:'',
            OrderID:'',
            CostTypeID:'',
            RB_Branch_Id:'',
            OrderSource:'',
            TCIDAndTCNUMList:[]
          },
          TCIDAndTCNUMList:[{TCID:''}],
          R:false,
          F:false,
          path:'',
          Cmd:'',
          GetList:[],
          active:1,
          AuditListData:{
              AuditList:[]
          },
          getCompanyMsg:{  // 公司
            RB_Group_Id:'0',
            Status:'0',
          },
          collectList:[],
          CompanyList:[],
          payList:[],
          total:0,
          currentPage:1,
          noData:false,
          lastID:-1,
          orderObj:{},
          showTab:0,
          GetCostTypeList: [],
          rules: {
            Type: [
              { required: true }
            ],
            Is_TCID: [
              { required: true }
            ],
            TCID: [
              { required: true, message: this.$t('visa.v_shurutuanhao'), trigger: 'blur' }
            ],
            OrderID: [
              { required: true, message: this.$t('rule.qsrdingdanhao'), trigger: 'blur' }
            ],
            CostTypeID: [
              { required: true, message: this.$t('rule.qxzfyleixing'), trigger: 'change' }
            ],
            RB_Branch_Id: [
              { required: true, message: this.$t('rule.qszssgongsi'), trigger: 'change' }
            ],
          },
          payType: null,
        }
    },methods:{
      deleteTCID: function (index) {
        this.TCIDAndTCNUMList.splice(index,1);
      },
      addTCID: function () {
        this.TCIDAndTCNUMList.push({TCID:''});
      },
      Financial_post_GetCostTypeList(id){  //获取支出费用类型
        this.apipost('Financial_post_GetCostTypeList',{ID:id,Type:this.ruleForm.Type}, res => {
          if(res.data.resultCode == 1) {
            this.GetCostTypeList = res.data.data;
          }
        }, err => {})
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost('Financial_post_GetTemplateDetail', this.ruleForm, r=>{
              if (r.data.resultCode===1) {
                console.log(r)
                if (this.ruleForm.Type ===1 ){
                  this.R = r.data.data
                } else {
                  this.F = r.data.data
                }
              } else {
                this.$message.error(r.data.message);
              }
            }, null)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.MsgBus.$emit('msg');
      },
      goUrl(path,id,Name,Type,IsUploadPic) {
          if(this.active==1){
              this.$router.push({ name: "addReceivablesDocuments",query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增收款单'}})
          }else{
              this.$router.push({ name: path,query:{"id":id,"Name":Name,"Type":Type,"orderObj":this.orderObj,'path':this.$route.query.path,'IsUploadPic':IsUploadPic,'Cmd':this.$route.query.Cmd,'companyID':this.$route.query.companyID,blank:'y',tab:'新增付款单'}})
          }
      },
      tabData(t){  //切换
          if(t==1){
              this.GetList = this.collectList;
          }else{
              this.GetList = this.payList;
          }
          if(this.GetList.length<1){
              this.noData = true;
          }else{
              this.noData = false;
          }
      },
      Financial_post_GetList(){ //获取
          this.apipost('Financial_post_GetList',{},res=>{
              if(res.data.resultCode==1){
                  let data = res.data.data;
                  if(data){
                      data.forEach(x => {
                          if(x.Type==1){
                              this.collectList.push(x);
                          }else{
                              this.payList.push(x);
                          }
                      });
                  }
                  this.GetList = this.collectList;
                  if(this.GetList.length<1){
                      this.noData = true;
                  }
                  if(this.$route.query.Type){
                      this.tabData(this.$route.query.Type);
                  }
              }else{
                  this.$message.error(res.data.message)
              }
          },err=>{})
      },
    getCompanyList(){ //获取公司列表
      this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
        if(res.data.resultCode==1){
          let data = res.data.data;
          if (this.$route.query.companyID !== '-1' && this.$route.query.companyID !== undefined) {
            data.forEach(x=>{
              x.disabled = true;
            });
            this.ruleForm.RB_Branch_Id = parseInt(this.$route.query.companyID)
          } else if (this.orderObj && this.orderObj.companyIDList && this.orderObj.companyIDList.length>0) {
            this.orderObj.companyIDList.forEach(x=>{
              data.forEach(y=>{
                if (y.disabled === false){
                  y.disabled = false
                }else {
                  y.disabled = x !== y.Id;
                }
              })
            });
            this.ruleForm.RB_Branch_Id = this.orderObj.companyIDList[0]
          }
          this.CompanyList = data;
        }else{}
      },err=>{})
    },
  },mounted(){
     this.MsgBus.$on('bankAddPage',() =>{
       this.F = false;
       this.R = false;
      });
      let userInfo=this.getLocalStorage();
      this.getCompanyMsg.RB_Group_Id=  userInfo.RB_Group_id;    //集团ID
      this.Financial_post_GetList();
      this.showTab = this.$route.query.Type?this.$route.query.Type:0;
      if(this.showTab==1){
          this.GetList = this.collectList;
      }else{
          this.GetList = this.payList;
      }
      this.active = parseInt(this.$route.query.Type)?parseInt(this.$route.query.Type):1;
      this.orderObj = this.$route.query.orderObj ? JSON.parse(this.$route.query.orderObj) : '';
      this.ruleForm.OrderSource = this.orderObj.OrderSource;
      if (this.orderObj && this.orderObj.TCIDList && this.orderObj.TCIDList.length>0) {
        this.TCIDAndTCNUMList = [];
        this.orderObj.TCIDList.forEach(x=>{
          this.TCIDAndTCNUMList.push({TCID:x});
        })
      } else if(this.$route.query.companyID){
        this.msg.RB_Branch_Id = parseInt(this.$route.query.companyID);
      }
      if (this.$route.query.Type) {
        this.payType = this.$route.query.Type;
        this.ruleForm.Type = parseInt(this.$route.query.Type);
      }
      this.path = this.$route.query.path ? this.$route.query.path : '';
      this.Cmd = this.$route.query.Cmd ? this.$route.query.Cmd : '';
      this.getCompanyList();
      this.Financial_post_GetCostTypeList(0)
    },components: {
      addReceivablesDocuments,
      addFinancialDocuments
    }
}
</script>
