<style scoped>
  /deep/.el-table th.el-table__cell {
    background-color: #E6E6E6;
  }

</style>

<template>
  <div class="page_fnDm page_RecPayQuery" @keyup.enter="resetPageIndex()">
    <div class="query-box" style="margin-bottom: 0px;">
      <el-form class="_info_box clearfix" label-width="110px">
        <el-row style="padding:15px 20px 0 0;">
          <el-col :span="4">
            <el-form-item label="审核人">
              <el-select filterable v-model='msg.CreateBy' class="">
                <el-option :value="0" :label="$t('system.ph_buxian')"></el-option>
                <el-option v-for='item in EmployeeList' :label='item.EmName' :value='item.EmployeeId'
                  :key='item.EmployeeId'>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <el-col :span="5">
              <el-form-item label="审核日期">
                <el-date-picker class="h34" v-model="missionDate" @change="timeAdd(4)" type="daterange"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <ul class="clearfix">
        <li class="hight_query">
          <button class="hollowFixedBtn" @click="resetPageIndex()">{{$t('pub.searchBtn')}}</button>
          <button class="normalBtn" @click="method5()">{{$t('visa.v_daochu')}}</button>          
        </li>
      </ul>
    </div>
    <div class="_fnDm_content" v-loading='loading'>
      <el-table ref="multipleTable" :data="DataList" tooltip-effect="dark" style="width: 100%" row-key="FrID">        
        <el-table-column :label="$t('fnc.danhao')" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.Type==2" style="cursor: pointer;color: #00C6FF;"
              @click="openDetails(scope.row.FrID)">{{ scope.row.FrID }}</span>
              <span v-else style="cursor: pointer;color: red;"
              @click="openDetails(scope.row.FrID)">{{ scope.row.FrID }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="公司别" width="100">
          <template slot-scope="scope">
            {{scope.row.RB_BranchName}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="凭证编号" width="260">
          <template slot-scope="scope">
            {{scope.row.AuditNum}}
          </template>
        </el-table-column>
        
        <el-table-column prop="" :label="$t('fnc.feiyongleixing')" show-overflow-tooltip width="140">
          <template slot-scope="scope">
            <span style="background-color: rgba(64,158,255,.1);display: inline-block;padding: 0 5px;height: 22px;line-height: 20px;font-size: 12px;color: #646464;border-radius: 4px;box-sizing: border-box;border: 1px solid rgba(64,158,255,.2);white-space: nowrap;margin-bottom: 4px;">{{scope.row.CostTypeIdStr}}</span></br>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.fkduixiang')" show-overflow-tooltip width="320">
          <template slot-scope="scope">
              <span>{{scope.row.RemitterName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.jiaoyiriqi')" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{scope.row.TradeDate}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('objFill.originalamount')" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.WBMoney}}/{{scope.row.CurrencyName}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="本位币" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.Money}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="状态" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.StatusName}}
          </template>
        </el-table-column>
        <el-table-column prop="" :label="$t('fnc.zdrenyuan')" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{scope.row.CreateBy}}</div>
            <div>{{scope.row.CreateDate}}</div>
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-bottom:15px">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChanges"
          layout="total,sizes,prev, pager, next, jumper" :page-sizes="[8,20,50,70,100,200]" :page-size="msg.pageSize"
          :current-page.sync="currentPage" :total='total'>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    data() {
      return {
        msg: {
          pageIndex: 1,
          pageSize: 8,
          CreateBy: '',
          QStartDate: '',
          QEndDate: '',
          EmployeeId: '',
        },
        DataList: [],
        EmployeeList: [],
        missionDate: [],
        loading: false,        
        currentPage: 1,
        total: 0,
        employeeMsg: { // 员工
          GroupId: '',
          BranchId: -1,
          DepartmentId: 0,
          PostId: 0,
          IsLeave: 0,
        },
      }
    },
    created() {
      if (this.$route.query.pageIndex) {
        this.msg.pageIndex = this.$route.query.pageIndex;
      }

      let sDate = this.FormartDate(new Date(this.getBeforeDate(1)));
      let eDate = this.FormartDate(new Date(this.getBeforeDate(0)));
      var now = new Date();
      var firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
      sDate = this.FormartDate(firstDay);
      this.missionDate = [sDate, eDate];
      this.msg.QStartDate = sDate;
      this.msg.QEndDate = eDate;
    },
    mounted() {
      let userInfo = this.getLocalStorage();
      this.msg.EmployeeId = userInfo.EmployeeId;
      this.employeeMsg.GroupId = userInfo.RB_Group_id;
      this.getPageList();
      this.getEmployee();
    },
    methods: {
      // 单据详情
      openDetails(FrID) {
        let query = {
          id: FrID,
          blank: "y",
        };
        this.$router.push({
          path: "/FinancialDocumentsDetail",
          query
        });
      },
      handleSizeChange(val) {
        this.msg.pageSize = val
        this.msg.pageIndex = 1;
        this.getPageList();
      },
      handleCurrentChanges(val) {
        this.msg.pageIndex = val;
        this.getPageList();
      },
      getPageList() { // 获取列表数据
        this.loading = true;
        if (!this.msg.CreateBy) this.msg.CreateBy = 0;
        this.apipost('Financial_post_GetAccountVoucherNumberPageList', this.msg, res => {
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            if (this.total == 0) {
              this.DataList = [];
            } else {
              this.DataList = res.data.data.pageData;
            }
            this.loading = false;
          } else {
            this.loading = false;
            this.$message.error(res.data.message);
          }
          this.currentPage = parseInt(this.msg.pageIndex);
        }, err => {})
      },
      method5: function () {
        if (!this.msg.CreateBy) this.msg.CreateBy = 0;
        let time = this.getBeforeDate(0, new Date().Format("yyyy-MM-dd"))
        var fileName = `凭证编号${time}.xls`;
        this.GetLocalFile("Financial_post_GetAccountVoucherNumberListToExcel", this.msg, fileName);
      },
      timeAdd(t) { // 日期格式
        if (t == 1) { //制单日期
          if (!this.productionDate) {
            this.msg.sDate = '';
            this.msg.eDate = '';
            return
          }
          this.msg.sDate = this.productionDate[0];
          this.msg.eDate = this.productionDate[1];
        }
        if (t == 4) { //交易日期
          if (!this.missionDate) {
            this.msg.QStartDate = '';
            this.msg.QEndDate = '';
            return
          }
          this.msg.QStartDate = this.missionDate[0];
          this.msg.QEndDate = this.missionDate[1];
        }
      },
      queryInfoInit() { // 初始化msg
        let msg = {
          pageIndex: this.msg.pageIndex,
          pageSize: 6,
          CreateBy: this.msg.FrID,
          QStartDate: this.msg.QStartDate,
          QEndDate: this.msg.QEndDate,
        }
        this.msg = msg;
      },
      handleCurrentChange(val) { //翻页
        this.msg.pageIndex = val;
        this.getPageList();
      },
      resetPageIndex() { // 重置页码
        this.msg.pageIndex = 1;
        this.currentPage = 1;

        this.getPageList()
      },
      getEmployee() { //员工
        this.apipost('admin_get_EmployeeGetList', this.employeeMsg, res => {
          if (res.data.resultCode == 1) {
            this.EmployeeList = res.data.data;
          }
        }, err => {})
      },
    }
  }

</script>