<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">　　订单号：</span>
          <el-input
            v-model="body.orderId"
            style="width:65%;"
            placeholder="请输入订单号"
            size="small"
            clearable
          />
        </div>
        <div class="w_input">
          <span class="textSpan">　供应商名称：</span>
          <el-input
            v-model="body.name"
            style="width:65%;"
            placeholder="请输入供应商名称"
            size="small"
            clearable
          />
        </div>
        <div class="w_input">
          <span class="textSpan">　服务类型：</span>
          <el-select v-model="body.serviceType" size="small" clearable placeholder="请选择服务类型" style="width: 65%" @change="changeScope">
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
     
      </div>

      <div class="flex">
        <div class="w_date" >
          <span class="textSpan">　发送时间：</span>
          <el-date-picker
            v-model="applyDateStart"
            size="small"
            type="datetimerange"
            style="width:70%"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="[&quot;00:00:00&quot;,&quot;23:59:59&quot;]"
            start-placeholder="开始日期"
            end-placeholder="结束日期" 
            @change="oncustom"
            :clearable ="false"
            />

        </div>

      </div>
      <div class="flexend">
        <el-button class="classitem"  type="primary" plain icon="el-icon-star-off" @click="handleReset">导出
        </el-button>
        <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="handleSearch">搜索</el-button>
      </div>
    </div>
     <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="订单号" width="180" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="供应商名称" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="流水号" width="180" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.seqNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="入账时间" width="160" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="服务类型" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.serviceType==1">订单扣款</span>
          <span v-if="scope.row.serviceType==2">订单退款</span>
          <span v-if="scope.row.serviceType==3">财务加款</span>
          <span v-if="scope.row.serviceType==4">财务撤销</span>
        </template>
      </el-table-column>

      <el-table-column label="操作前金额" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.beforeAmount / 10000}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作金额" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.operatingAmount / 10000}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作后金额" width="120" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.afterAmount  / 10000}}</span>
        </template>
      </el-table-column>

      <el-table-column label="分发订单号" width="250" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.extorderId }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作人" width="160" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.operatorName }}</span>
        </template>
      </el-table-column>

     <el-table-column label="业务描述" width="300" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.note }}</span>
        </template>
      </el-table-column>

    </el-table>


    <!--分页-->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.page"
        :current-page="body.page"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {flowList} from '@/api/flow'
export default {
  data() {
    return {
      Name: '',
      tableData: [],
      applyDateStart: '', // 发送时间
      checkTimeStart: '', // 回调时间
      flowAmount: '', // 面额乘以10000
      flowAmount1: '', // 面额乘以10000
      body: {
        distinguish:2,   //1:供应商  2：供应商
        page: 1,
        size: 10
      },
      total: 0, // 总数据
      loading: false,
      status: [
        { id: 1, name: '订单扣款' },
        { id: 2, name: '订单退款' },
        { id: 3, name: '财务加款' },
        { id: 4, name: '财务撤销' },
      ],

    }
  },
  created() {
    const nowDate = new Date()
    const date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate()
    }
    const systemTime = date.year + '-' + date.month + '-' + date.date
    // this.body.applyDateStart = "2021-05-14 + " 00:00:00"
    this.applyDateStart = [systemTime + ' 00:00:00', systemTime + ' 23:59:59']
    this.body.createTimeStart = systemTime + ' 00:00:00'
    this.body.createTimeEnd = systemTime + ' 23:59:59'
    // this.body.applyDateEnd = systemTime + " 23:59:59"
    // this.
    this.getTenantList()
  },
  methods: {
    // 获取数据
    getTenantList() {
      this.loading = true
      flowList(this.body).then(res => {
        this.loading = false
        // this.tableData=res.data.data.records
        // limitedDate ：发送时间
        // lastModifyDate ：回调
        // usedTime   ：用时
        const tableData = res.data.data.records
        const arry = tableData.map((res) => {
          if (res.lastModifyDate != null && res.lastModifyDate != '') {
            const limitedDate = res.limitedDate
            const lastModifyDate = res.lastModifyDate
            // 发送时间 减去  回调时间
            const date = new Date(limitedDate)
            const time = date.valueOf()
            const modify = new Date(lastModifyDate)
            const last = modify.valueOf()
            const used = last - time
            res.usedTime = used
          }
          return res
        })
        this.tableData = arry
        console.log(arry)
        this.total = res.data.data.total
        console.log(res.data.data.records)
      })
    },
    // 搜索手机号
    onphon() {
      console.log(this.phone)
    },
    // 搜索面额
    // changeflow() {
    //   const flow = this.flowAmount
    //   // let body=this.body.flowAmount;
    //   this.body.flowAmount = flow //* 10000
    // },
     //清除面额
    changeflow(flow) {
      this.flowAmount = "";
    },
    //清除面额
    changeflow1(flow) {
      this.flowAmount1 = "";
    },
    // 搜索发送时间
    oncustom() {
      const applyDateStart = this.applyDateStart
      this.body.createTimeStart = applyDateStart[0]
      this.body.createTimeEnd = applyDateStart[1]
      // console.log(applyDateStart)
      // console.log(this.body.applyDateStart)
    },
    // 搜索回调时间
    oncheckTimeStart() {
      // checkTimeStart:"",
      //   checkTimeEnd:"",
      const checkTimeStart = this.checkTimeStart
      this.body.checkTimeStart = checkTimeStart[0]
      this.body.checkTimeEnd = checkTimeStart[1]
    },
    // 搜索状态
    changeScope() {
      console.log(this.body.status)
    },
    // 运营商
    changeoperator() {
      console.log(this.body.mobileOperator)
    },
    // 搜索
    handleSearch() {
      console.log(this.applyDateStart)
      this.body.page = 1
      if (this.applyDateStart == null) { // 发送时间为空时清空 body 里的发送时间
        this.body.applyDateEnd = ''
        this.body.applyDateStart = ''
      }
      if (this.checkTimeStart == null) { // 回调时间
        this.body.checkTimeStart = ''
        this.body.checkTimeEnd = ''
      }

      this.currentPage = '1'
      this.getTenantList()
    },
    //
    handleReset() {

    },
    // 分页
    handleSizeChange: function(val) {
      this.body.size = val
      this.getTenantList()
    },
    // 换页
    handleCurrentChange: function(val) {
      this.body.page = val
      this.getTenantList()
    }
  }
}
</script>

<style scoped>
 .textSpan{
   position: relative;
   top: 0;
     font-size: 14px;
     font-weight: 600;
     color:rgb(87, 86, 86)
 }
 .stylephone{
    display: flex;
 }
 .marginphone{
   padding-top: 9px;
 }
 .flex{
     width: 100%;
     display: flex;
     flex-direction: row;
     margin-bottom: 10px;
     /* flex-wrap: wrap; */
     /* justify-content: space-evenly; */
 }
 .w_date{
     width: 66%;
 }
 .w_input{
     width:33.33%;
 }
 .flexend{
   display: flex;
   justify-content: flex-end;
   padding-top:20px;
   padding-right: 40px;
 }
 .phone{
   width:66.5% !important ;
   z-index: 100;
 }
 /* .classitem{
   background: salmon;
 } */
</style>