<!--
 * @Descripttion:
 * @version:
 * @Author: kangkang
 * @Date: 2020-10-22 14:18:12
 * @LastEditors: kangkang
 * @LastEditTime: 2020-10-30 10:45:26
-->
<template>
<div style="height:95%">
  <el-date-picker
      v-model="timeSearh"
      type="daterange"
      align="right"
      unlink-panels
      size=small
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
    <el-button size=small @click="search()" type="primary">查询</el-button>
    <el-button size=small type="primary" @click="dialogFormVisible = true,clickOk = false" plain>补遗</el-button>
    <el-button size=small type="primary" @click="$router.push('/order/buyi')" plain>补遗记录</el-button>
  <el-table  :show-overflow-tooltip="true" :data="tableData" height="calc(100% - 150px)" style="width: 100%">
    <el-table-column prop="riqi" label="日期"> </el-table-column>
    <el-table-column prop="xingxing" label="星星"> </el-table-column>
    <el-table-column prop="xianfeng" label="先锋"> </el-table-column>
    <el-table-column prop="jike" label="极客"> </el-table-column>
    <el-table-column prop="qiangzi" label="强子" > </el-table-column>
    <el-table-column prop="xunlian" label="讯连" > </el-table-column>
    <el-table-column prop="tiantian" label="天天"> </el-table-column>
    <el-table-column prop="xigua" label="西瓜"> </el-table-column>
    <el-table-column prop="mogu" label="蘑菇"> </el-table-column>
    <el-table-column prop="huohu" label="火狐"> </el-table-column>
    <el-table-column prop="laoying" label="老鹰"> </el-table-column>
    <el-table-column prop="jinrui" label="金瑞"> </el-table-column>
    <el-table-column prop="wujin" label="无尽"> </el-table-column>
    <el-table-column prop="wanmei" label="完美"> </el-table-column>
    <el-table-column prop="jinqiao" label="金桥"> </el-table-column>
    <el-table-column prop="wuxian" label="无限"> </el-table-column>
    <el-table-column prop="shihui" label="实惠"> </el-table-column>
    <el-table-column prop="gongxiang" label="共享"> </el-table-column>
    <el-table-column prop="remark" :show-overflow-tooltip="true" label="备注"> </el-table-column>
  </el-table>
  <el-pagination
    background
    v-if="count !== 0"
    :current-page="pageNum"
    style="top:91%"
    layout="prev, pager, next"
    :page-size = "50"
    @prev-click="prev_page"
    @next-click="next_page"
    @current-change="handleCurrentChange"
    :total="count">
  </el-pagination>

  <el-dialog title="财务补遗" width="30%" :visible.sync="dialogFormVisible" center=true>
    <div style="text-align:center;">
      <div class="block">
        <span class="demonstration">产品</span>
        <el-select v-model="product" style="width:223px" size="small" placeholder="请选择产品">
          <el-option
            v-for="item in products"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="block">
        <span class="demonstration">类型</span>
        <el-select v-model="type" style="width:223px" size="small" placeholder="请选择操作类型">
          <el-option
            v-for="item in types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="block">
        <span class="demonstration">日期</span>
        <el-date-picker
          v-model="riqi"
          style="width:223px"
          type="date"
          size="small"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">金额</span>
        <el-input type="number" size="small" style="width:223px" v-model="money" placeholder="请输入金额"></el-input>
      </div>
      <div class="block">
        <span class="demonstration">备注</span>
        <el-input v-model="remark" size="small" style="width:223px" placeholder="请输入备注"></el-input>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" :disabled="clickOk" @click="buyi()">确 定</el-button>
    </div>
  </el-dialog>

</div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [],
      count: 0,
      pageNum: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      timeSearh: '',
      dialogFormVisible: false,
      products: [{
        value: 'xingxing',
        label: '星星'
      }, {
        value: 'xianfeng',
        label: '先锋'
      }, {
        value: 'jike',
        label: '极客'
      }, {
        value: 'qiangzi',
        label: '强子'
      }, {
        value: 'xunlian',
        label: '讯连'
      }, {
        value: 'tiantian',
        label: '天天'
      }, {
        value: 'xigua',
        label: '西瓜'
      }, {
        value: 'mogu',
        label: '蘑菇'
      }, {
        value: 'huohu',
        label: '火狐'
      }, {
        value: 'laoying',
        label: '老鹰'
      }, {
        value: 'jinrui',
        label: '金瑞'
      }, {
        value: 'wujin',
        label: '无尽'
      }, {
        value: 'wanmei',
        label: '完美'
      }, {
        value: 'jinqiao',
        label: '金桥'
      }, {
        value: 'wuxian',
        label: '无限'
      }, {
        value: 'shihui',
        label: '实惠'
      }, {
        value: 'gongxiang',
        label: '共享'
      }],
      product: '',
      types: [
        {
          value: '1',
          label: '充值'
        }, {
          value: '2',
          label: '退款返点'
        }, {
          value: '3',
          label: '补差'
        }
      ],
      type: '',
      riqi: '',
      money: null,
      remark: '',
      clickOk: false
    }
  },

  created () {
    this.$store.commit('setCurrentNav', '订单管理>>原后台财务明细')
    this.getData()
  },
  methods: {
    getData () {
      this.$api.get(this.$api.phpURL + 'order/FinanceCheck/getList').then(res => {
        this.tableData = res.data
        this.count = parseInt(res.count)
      })
    },
    prev_page () {
      this.$api.get(this.$api.phpURL + 'order/FinanceCheck/getList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    next_page () {
      this.$api.get(this.$api.phpURL + 'order/FinanceCheck/getList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    handleCurrentChange: function (currentPage) {
      this.pageNum = currentPage
      this.$api.get(this.$api.phpURL + 'order/FinanceCheck/getList', {page: this.pageNum}).then(res => {
        this.tableData = res.data
      })
    },
    search () {
      this.$api.post(this.$api.phpURL + 'order/FinanceCheck/search', {time: this.timeSearh}).then(res => {
        this.tableData = res.data
        this.count = 0
      })
    },
    buyi () {
      this.clickOk = true
      this.dialogFormVisible = false
      this.$api.post(this.$api.phpURL + 'order/FinanceCheck/buyi', {
        product: this.product,
        type: this.type,
        riqi: this.riqi,
        money: this.money,
        remark: this.remark
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>
