<template>
  <div class="EmployeeFinace" style="margin:0 20px;">
    <q-btn-toggle style="width:50%;margin:0 auto;" v-model="msg.Conditon" spread no-caps toggle-color="primary"
      color="#2961FE" text-color="black" class="my-custom-toggle" :options="[
          {label: '交接人发起的', value: 1},
          {label: '待交接人审批的', value: 3}
        ]" @input="queryChange" />
    <br />
    <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关单据信息" flat
      class="sticky-right-column-table sticky-column-table" separator="none" :data="DataList" :columns="columns">
      <template v-slot:body-cell-CostTypeList="props">
        <q-td :props="props">
          <template v-for="(s,si) in props.row.CostTypeList">
            <span class="_tag_span">{{s}}</span><br />
          </template>
        </q-td>
      </template>
      <template v-slot:body-cell-Money="props">
        <q-td :props="props">
          <p>{{props.row.Type==1 ? "应收" : "应付" }}：<span class="">{{moneyFormat(props.row.Money)}}</span></p>
          <p>{{props.row.Type==1 ? "实收" : "实付" }}：<span class="">{{moneyFormat(props.row.PayMoney)}}</span></p>
        </q-td>
      </template>
      <template v-slot:body-cell-RemitterName="props">
        <q-td :props="props">
          <template v-if='props.row.Type===1'>
            <span class="_color_gar">汇款人：</span><span>{{props.row.RemitterName}}</span>
          </template>
          <template v-if='props.row.Type===2'>
            <span class="_color_gar">付款对象：</span><span>{{props.row.RemitterName}}</span>
          </template>
          <template v-if='props.row.Type===4'>
            <span class="_color_gar">{{$t('fnc.no')}}</span>
          </template>
        </q-td>
      </template>
      <template v-slot:bottom>
        <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
          :input="true" @input="changePage" />
      </template>
    </q-table>
  </div>
</template>

<script>
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    name: "EmployeeFinace",
    data() {
      return {
        loading: false,
        msg: {
          rowsPerPage: 5,
          pageIndex: 1,
          pageSize: 5,
          CreateBy: 0,
          Conditon: 1
        },
        columns: [{
            name: '单号',
            required: true,
            label: '单号',
            align: 'left',
            field: row => row.FrID
          },
          {
            name: 'TypeName',
            label: '单据类型',
            field: 'TypeName',
            align: 'left',
          },
          {
            name: 'CostTypeList',
            label: '费用类型',
            field: 'CostTypeList',
            align: 'left'
          },
          {
            name: 'Money',
            label: '金额',
            field: 'Money',
            align: 'left'
          },
          {
            name: 'RemitterName',
            label: '付款对象',
            field: 'RemitterName',
            align: 'left'
          },
          {
            name: 'EmName',
            label: '制单人员',
            field: 'EmName',
            align: 'left'
          },
          {
            name: 'StatusStr',
            label: '当前状态',
            field: 'StatusStr',
            align: 'left'
          },
        ],
        DataList: [],
        total: 0,
        pageCount: 0,
      }
    },
    created() {},
    mounted() {
      this.getPageList();
    },
    methods: {
      queryChange() {
        this.msg.pageIndex = 1;
        this.getPageList();
      },
      //分页
      changePage(val) {
        this.msg.pageIndex = val;
        this.getPageList();
      },
      // 获取列表数据
      getPageList() {
        this.DataList = [];
        this.pageCount = 0;
        if (this.saveObj.EmAccountId && this.saveObj.EmAccountId > 0) {
          this.msg.CreateBy = this.saveObj.EmAccountId;
        } else {
          this.msg.CreateBy = 99999999;
        }
        if (!this.msg.ClientID) this.msg.ClientID = 0;
        if (!this.msg.ClientType) this.msg.ClientType = 0;
        if (!this.msg.CurrencyId) this.msg.CurrencyId = 0;
        if (!this.msg.CostTypeID) this.msg.CostTypeID = 0;
        if (!this.msg.TemplateId) this.msg.TemplateId = 0;
        if (!this.msg.RB_Branch_Id) this.msg.RB_Branch_Id = -1;
        if (!this.msg.RB_Depart_Id) this.msg.RB_Depart_Id = 0;
        if (!this.msg.CreateBy) this.msg.CreateBy = 0;
        if (!this.msg.TCID) this.msg.TCID = 0;
        if (!this.msg.OrderID) this.msg.OrderID = 0;
        if (!this.msg.Status) this.msg.Status = 0;
        if (!this.msg.FrID) this.msg.FrID = 0;
        if (!this.msg.Conditon) this.msg.Conditon = 1;
        if (!this.msg.TradeWay) this.msg.TradeWay = 0;
        if (!this.msg.AccountType) this.msg.AccountType = 0;
        this.apipost('Financial_post_GetWOrkTransferPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.DataList = res.data.data.pageData;
            this.pageCount = res.data.data.pageCount;
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    watch: {
      saveObj: function (val, oldval) {
        this.msg.pageIndex = 1;
        if (this.saveObj.EmAccountId && this.saveObj.EmAccountId > 0) {
          this.msg.CreateBy = this.saveObj.EmAccountId;
        }
        this.getPageList();
      }
    }
  }

</script>
<style scoped>
  .EmployeeFinace .my-custom-toggle {
    border: 1px solid #2961FE
  }

</style>
