<style scoped>
.add-Enclosure{
  display: flex;
  justify-content: space-between;
}
.add-Enclosure-left{
  display: flex;
}
.item-but-box{
  display: flex;
}
.item-but{
  margin-right: 10px;
}
.numIcon{
  font-size: 12px;
  padding: 5px;
  color: #409eff;
}
.tatusText.grey{
  color: grey;
}
.tatusText.success{
  color: #21BA45;
}
.tatusText.error{
  color: #F2C037;
}
.tatusText.Black{
  color: Black;
}
.ToBeReceived.red{
  color: #fd397a;
}
.ToBeReceived.blue{
  color: #409eff;
}
.income_1{
  color: #2961FE;
}
.income_2{
  color: #3FC4FF;
}
</style>
<template>
    <div class="Business">
      <div class="add-Enclosure">
        <el-row :gutter="16">
          <el-col :span="8">
            <el-input size="mini" placeholder="输入单号" v-model="msg.FrID" label="单号" 
            @keyup.enter.native="getList"></el-input>
          </el-col>
          <el-col :span="6">
            <div style="display: flex;flex-direction: row;align-items: center;">
                <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">单据类型：</span>
                <el-select size="mini" width="200" v-model="msg.Type" placeholder="请选择" 
                @change="getList">
                    <el-option 
                    v-for="item in DocumentTypeList"
                    :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
                </el-select>
            </div>
          </el-col>
          <el-col :span="6">
              <div style="display: flex;flex-direction: row;align-items: center;">
                <span class="font-size-12" style="padding-right: 10px;flex-shrink: 0;">订单状态：</span>
                <el-select size="mini" width="200" v-model="msg.Status" placeholder="请选择" 
                @change="getList">
                    <el-option 
                    v-for="item in ApprovalStatusList"
                    :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
                </el-select>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="page-content">
      <el-table
        v-loading="loading"
        stripe
        ref="multipleTable"
        :data="dataList"
        tooltip-effect="dark"
        style="width: 100%"
        row-class-name="font-size-12">
        <el-table-column
            fixed
            label="单号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p @click="openDetails(scope.row)" class="font-color-link cp">{{scope.row.FrID}}</p>
            </template>
        </el-table-column>
        <el-table-column 
            label="单据类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p>{{scope.row.Type==1?'收入':(scope.row.Type==2?'支出':'不限')}}</p>
            </template>
        </el-table-column>
        <el-table-column
            label="费用类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
                <p v-for="(item,index) in scope.row.CostTypeList" :key="index">
                    {{item}}
                </p>
            </template>
        </el-table-column>
        <el-table-column
            label="交易方式"
            show-overflow-tooltip width="200">
            <template slot-scope="scope">
                <div class="_TradeWayList"
                v-for="(item,index) in scope.row.TradeWayList" 
                :key="index"
                style="line-height: normal !important;padding: 5px 10px;background-color: #EEEEEE;border-radius: 4px;margin: 10px 0;width:230px">
                    <p><span style="font-weight: bold;color:#333333">{{item.Alias}}</span>
                    <span class="_bank_name" style="height:20px;;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;margin-letf:10px">{{scope.row.TradeWayList[0].TypeName}}</span><span style="height:20px;display: inline-block;background-color: #333333;color: white;padding: 2px 4px;border-radius: 4px;margin-left:10px;" :style="{'background-color':item.AccountType=='私'?'#2AAEF2':'#FF9C01'}">{{item.AccountType==""?'无':item.AccountType}}</span> </p>
                    <p style="color:#333333">{{item.BankNo}}</p>
                </div>
            </template>
        </el-table-column>
        <el-table-column 
            label="金额" width="150">
            <template slot-scope="scope">
              <p>{{scope.row.Type==1?'应收：':(scope.row.Type==2?'应付：':'')}}{{scope.row.Money}}</p>
              <p>{{scope.row.Type==1?'实收：':(scope.row.Type==2?'实付：':'')}}{{scope.row.PayMoney}}</p>
            </template>
        </el-table-column>
        <el-table-column 
            label="付款对象"
            show-overflow-tooltip width="260">
            <template slot-scope="scope">
              {{scope.row.Type==2?scope.row.ClientTypeName+'：':'汇款人：'}}{{scope.row.RemitterName}}
            </template>
        </el-table-column>
        <el-table-column 
            label="制单人员"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.EmName}}
            </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="当前状态"
            show-overflow-tooltip width="110">
            <template slot-scope="scope">
              {{scope.row.StatusStr}}
            </template>
        </el-table-column>
      </el-table>
      </div>
      <div v-if="total>0">
          <el-pagination class="Mypagination" background @current-change="handleCurrentChange"
              :page-sizes="[30, 60, 90, 100]" :page-size="msg.pageSize" layout="sizes, prev, pager, next"
              @size-change="handleSizeChange" :total="total">
          </el-pagination>
      </div>
    </div>
</template>
<script>
export default {
  props: ["ID", "BusinessType"],
  data() {
    return {
      ApprovalStatusList:[
        {Name:'不限',Id:'-1'},
        {Name:'暂存',Id:'0'},
        {Name:'审核中',Id:'1'},
        {Name:'通过',Id:'2'},
        {Name:'驳回',Id:'3'},
        {Name:'作废',Id:'4'},
        {Name:'出纳暂存',Id:'5'},
      ],//订单状态
      DocumentTypeList:[
        {Name:'不限',Id:'-1'},
        {Name:'收入',Id:'1'},
        {Name:'支出',Id:'2'},
      ],// 单据类型
      dataList: [],
      loading: false,
      msg: {
        pageIndex: 1,
        pageSize: 30,
        FrID:"0",
        Type:"-1",
        Status: "-1",
        GuestId:""
    },
    total:0
    };
  },
  watch: {
    ID: {
      handler(val, oldVal) {
        this.getList();
      },
      deep: true,
    },
  },
  mounted() {
    this.msg.GuestId = this.ID
    this.getList();
    let $this = this
    this.MsgBus.$on("closeGetList", function() { 
      $this.getList()
    });
  },
  methods: {
    openDetails(row) {
      let href
      let url
      if(this.isOnline()){
        url = 'http://yx.oytour.com/#/'
      }else{
        url = 'http://www.test.com:8080/#/'
      }
      let data = [
          {   
            path:'FinancialDocumentsDetail',
            id: row.FrID
          }
      ]
      href = url+'automaticLogin?token='+this.getLocalStorage().token+'&data=' + JSON.stringify(data)
      window.open(href);
    },
    // 获取订单列表
    getList() {
        if(this.msg.FrID==''){
            this.msg.FrID = 0
        }
      this.loading = true;
      this.apipost2(
        "Financial_post_GetCRMGuestFinancePageList",
        this.msg,
        (res) => {
            this.msg.FrID=""
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
            this.loading = false
          } else {
            this.$message.error(res.data.message);
          }
        }
      );
    },
    // 添加订单
    addBusiness() {
      let $this = this;
      this.MsgBus.$emit("addTicketOrderBoxOpen", $this.ID, 0, true);
    },
    guanlian() {},
    jiechuguanlian() {},
    handleSizeChange(val) {
        this.msg.pageSize = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
    },
  },
};
</script>
