<template>
  <div class="cash-page">
    <div class="toolbar">
      <el-form
        :inline="true"
        :model="formParams"
      >
        <el-form-item label="店铺名称">
          <el-input
            v-model="formParams.model.storeName"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="店铺编码">
          <el-input
            v-model="formParams.model.tenant"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="提现日期">
          <el-date-picker
            v-model="formParams.model.applyTimeString"
            size="mini"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select
            v-model="formParams.model.auditStatus"
            size="mini"
          >
            <el-option
              v-for="(item, index) in auditStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="query"
          >
            查询
          </el-button>
          <el-button
            plain
            size="mini"
            @click="reset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <div class="content_table">
        <el-table
          :data="tableData.records"
          style="width: 100%"
        >
          <el-table-column
            prop="storeName"
            label="店铺名称"
          />
          <el-table-column
            prop="tenant"
            label="店铺编码"
          />
          <el-table-column
            prop="amount"
            :formatter="getMoneyUnit"
            label="提现金额"
          />
          <el-table-column
            prop="auditStatus"
            label="处理状态"
            :formatter="getAuditStatus"
          />
          <el-table-column label="操作">
            <template
              slot-scope="scope"
            >
              <el-button
                type="text"
                size="small"
                @click.native.prevent="look(scope.row)"
              >
                查看
              </el-button>
              <el-button
                v-if="scope.row.auditStatus === 0"
                type="text"
                size="small"
                @click.native.prevent="handle(scope.row)"
              >
                处理
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="tableData.total > 0"
        :limit.sync="formParams.size"
        :page.sync="formParams.current"
        :total="Number(tableData.total)"
        @pagination="fetch"
      />
    </div>
    <cashDetails ref="dialog" :dialog-data="dialogData" @closed="closed" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import Finance from '@/api/Finance'
import cashDetails from './details'
export default {
  components: {
    Pagination,
    cashDetails
  },
  data() {
    return {
      formParams: {
        model: {
          storeName: '',
          tenant: '',
          applyTimeString: '',
          auditStatus: ''
        },
        size: 10,
        current: 1
      },
      auditStatus: [
        { label: '全部', value: '' },
        { label: '待处理', value: 0 },
        { label: '已处理', value: 1 }
      ],
      tableData: {},
      dialogData: {}
    }
  },
  created() {
    this.getCashList()
  },
  methods: {
    async getCashList() {
      const res = await Finance.getCashList(this.formParams)
      const resData = res.data
      if (resData.code === 0) {
        this.tableData = resData.data
      }
    },
    getAuditStatus(row, column, cellValue) {
      let t = ''
      this.auditStatus.map(item => {
        if (item.value === cellValue) {
          t = item.label
        }
      })
      return t
    },
    getMoneyUnit(row, column, cellValue) {
      return this.MoneyUnit(cellValue)
    },
    MoneyUnit (d) {
      let v = 0
      if (!d) return v
      v = (d / 100).toFixed(2)
      return v
    },
    query() {
      this.getCashList()
    },
    reset() {
      this.formParams = {
        model: {
          storeName: '',
          tenant: '',
          applyTimeString: '',
          auditStatus: ''
        },
        size: 10,
        current: 1
      }
    },
    look(d) {
      this.$refs.dialog.getDetail(d.id)
      this.dialogData = {
        title: '查看',
        isVisible: true,
        cash: d,
        cancel: '关闭',
        type: 0
      }
    },
    handle(d) {
      this.$refs.dialog.getDetail(d.id)
      this.dialogData = {
        title: '提现',
        isVisible: true,
        cash: d,
        confirm: '确认打款',
        cancel: '取消',
        type: 1
      }
    },
    fetch() {
      this.getCashList()
    },
    closed(v) {
      this.getCashList()
      this.dialogData.isVisible = v
    }
  }
}
</script>

<style lang="less" scoped>
.cash-page {
  padding: 15px 20px;
  .toolbar {
    margin-bottom: 25px;
    .product-name {
      width: 180px;
    }
  }
}
</style>
