<template>
  <div class="app-container calendar-list-container">
    <div>
      <div class="filter-container" ref="filter-container">
        <el-form ref="queryForm" :inline="inline" :model="listQuery" label-width="80px">
          <el-row>
            <el-form-item label="状态">
              <el-select v-model="listQuery.status" placeholder="请选择">
                <el-option label="全部" :key="undefined" :value="undefined"></el-option>
                <el-option label="已提现" value="1"></el-option>
                <el-option label="未提现" value="0"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="发起时间">
              <el-date-picker
                type="date"
                placeholder="开始时间"
                v-model="listQuery.startTime"
                value-format="timestamp"
                style="width: 40%;"
              ></el-date-picker>&nbsp;—
              <el-date-picker
                type="date"
                placeholder="结束时间"
                v-model="listQuery.endTime"
                value-format="timestamp"
                style="width: 40%;"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="提现号">
              <el-input v-model="listQuery.orderNo" placeholder="请输入提现号"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-button
              class="filter-item"
              type="primary"
              v-waves
              icon="el-icon-search"
              @click="handleFilter"
            >搜索</el-button>
            <el-button class="filter-item" @click="clear_handleFilter">清除搜索</el-button>
          </el-row>
        </el-form>
      </div>
      <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
        <el-table-column align="center" label="提现号" prop="orderNo"></el-table-column>
        <el-table-column align="center" label="所属公司" prop="branchName"></el-table-column>
        <el-table-column align="center" label="所属门店" prop="companyName"></el-table-column>
        <el-table-column align="center" label="提现金额" prop="amount"></el-table-column>
        <el-table-column align="center" label="发起时间" prop="crtTimeStr"></el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="{row}">
            <span v-if="row.stauts==0">未审核</span>
            <span v-else>审核</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作">
          <template slot-scope="{row}">
            <el-button type="text" v-if="row.stauts==0" @click="vailde_now(row)">立即审核</el-button>
            <el-button type="text" v-else @click="vailde_check(row)">查看凭证</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10,20,30,40,50]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="上传凭证"
      :visible.sync="update_vailed_dialog"
      width="30%"
      @close="update_vailed_dialog=false"
    >
      <el-form>
        <el-form-item label="凭证" style="margin-left: 100px;">
          <el-upload
            class="avatar-uploader"
            :action="BASE_API+'/api/universal/file/app/unauth/admin/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width:150px;height:150px" />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width:150px;height:150px;display:flex;align-items: center;justify-content: center;"
            ></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="是否通过" style="margin-left: 100px;">
          <el-radio-group v-model="is_pass">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="update_vailed_dialog = false">取 消</el-button>
        <el-button type="primary" @click="up_valid_ok">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="show_vailed_dialog" width="30%" @close="show_vailed_dialog=false">
      <img v-if="show_image" class="show_img" :src="show_image.cono" alt />
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from "utils/dateFormattor";

import {
  toEast8Date,
  deepCopyDate,
  newEast8Date,
  convertDate2Str,
  timestamp2Date,
} from "utils/dateUtils";

import { mapGetters } from "vuex";

import {
  company_list,
  add_company,
  del_company,
  upd_company,
  revenue_withdraw_list,
} from "api/company";
import { getAllZone } from "api/base_info/constant/";
import Element1 from "../admin/menu/components/element";
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import { getToken } from "utils/auth";
import {
  company_all_list,
  branchCompany_all_list,
  revenue_withdraw_sh,
} from "api/company.js";

export default {
  name: "carApplyList",
  components: {
    ElCol,
    ElRow,
    Element1,
  },
  data() {
    return {
      is_pass: 1,
      title_text: "",
      BASE_API: process.env.BASE_API,
      add_edit_dialog: false,
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        status: undefined,
        orderNo: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      inline: true,
      tableKey: 0,
      btn_disable: null,
      companys_list: [], //门店列表
      update_vailed_dialog: false,
      show_vailed_dialog: false,
      vailde_item: {},
      imageUrl: undefined,
      show_image: undefined,
    };
  },
  created() {
    this.getList();
    this.get_all_companys();
  },
  computed: {
    ...mapGetters(["elements"]),
    getHeaderWithToken() {
      return { Authorization: getToken() };
    },
  },
  methods: {
    up_valid_ok() {
      if (this.imageUrl) {
        let data = {
          orderNo: this.vailde_item.orderNo,
          cono: this.imageUrl,
          stauts: this.is_pass,
        };
        revenue_withdraw_sh(data).then((res) => {
          if (res.status == 200) {
            this.update_vailed_dialog = false;
            this.$message({
              message: "操作成功",
              type: "success",
            });
          } else {
            this.$message.error({
              message: res.message,
            });
          }
        });
      } else {
        this.$message({
          message: "请上传凭证",
          type: "warning",
        });
      }
    },
    handleAvatarSuccess(res) {
      this.imageUrl = res.data;
    },
    //所有公司
    get_all_companys() {
      company_all_list().then((res) => {
        if (res.status == 200) {
          this.companys_list = res.data;
        }
      });
    },

    /**
     * 获取列表
     * */
    getList() {
      this.listLoading = true;
      revenue_withdraw_list(this.listQuery).then((response) => {
        let totalCountRs = undefined;
        let listRs = undefined;
        if (
          !this.$utils.isEmpty(response.data.data) &&
          this.$utils.isInteger(response.data.totalCount)
        ) {
          listRs = response.data.data;
          totalCountRs = response.data.totalCount;
          listRs.map(function (item) {
            item.crtTimeStr = timestamp2Date(item.crtTime);
          });
        }
        this.listLoading = false;
        this.list = listRs;
        this.total = totalCountRs;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.$refs.queryForm.validate((valid) => {
        if (valid) {
          this.getList();
        } else {
          return false;
        }
      });
    },
    clear_handleFilter() {
      this.listQuery = {
        page: 1,
        limit: 10,
        status: undefined,
        orderNo: undefined,
        startTime: undefined,
        endTime: undefined,
      };
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    // 立即审核
    vailde_now(row) {
      this.update_vailed_dialog = true;
      this.imageUrl = undefined;
      this.vailde_item = row;
    },
    //查看凭证
    vailde_check(row) {
      this.show_vailed_dialog = true;
      this.show_image = row;
    },
  },
};
</script>
<style>
.top_btn {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.form_box {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.customWidth1 {
  width: 35%;
}
.show_img {
  width: 100%;
  height: 100%;
}
</style>
