<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.branchId"
                placeholder="请选择"
                @change="change_query_branch"
              >
                <el-option label="全部" :key="undefined" :value="undefined"></el-option>
                <el-option
                  v-for="val in companys_list"
                  :key="val.id"
                  :label="val.name"
                  :value="val.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属门店">
              <el-select
                class="filter-item"
                v-model="listQuery.companyId"
                clearable
                placeholder="请选择"
              >
                <el-option label="全部" :key="undefined" :value="undefined"></el-option>
                <el-option
                  v-for="val in branchCompany_list"
                  :key="val.id"
                  :label="val.name"
                  :value="val.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <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 class="label_box">
          <div class="label_item top_color_bule">
            <p class="money_p">
              <span>￥</span>
              {{all_amount}}
            </p>
            <p class="money_label">总营收金额</p>
          </div>
          <div class="label_item top_color_bule2">
            <p class="money_p">
              <span>￥</span>
              {{orderAmount}}
            </p>
            <p class="money_label">订单&服务营收</p>
          </div>
          <div class="label_item top_color_origin">
            <p class="money_p">
              <span>￥</span>
              {{otherAmount}}
            </p>
            <p class="money_label">额外赔偿(违约金等)</p>
          </div>
          <div class="label_item top_color_yellow">
            <p class="money_p">
              <span>￥</span>
              {{withdrawals}}
            </p>
            <p class="money_label">已提现金额</p>
          </div>
          <div class="label_item top_color_red">
            <p class="money_p">
              <span>￥</span>
              {{balance}}
            </p>
            <p class="money_label">
              可提现金额，
              <a @click="lijitixian">立即提现 ></a>
            </p>
          </div>
        </div>
        <div class="label_filter">
          <div>收支明细</div>
          <div>
            <el-form>
              <el-form-item style="margin-bottom:0" label="时间筛选">
                <el-date-picker
                  type="date"
                  placeholder="开始时间"
                  v-model="startTime"
                  format="yyyy-MM-dd"
                  style="width: 40%;"
                ></el-date-picker>&nbsp;—
                <el-date-picker
                  type="date"
                  placeholder="结束时间"
                  v-model="endTime"
                  format="yyyy-MM-dd"
                  style="width: 40%;"
                ></el-date-picker>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <el-table :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
        <el-table-column align="center" label="类型" prop="typeName"></el-table-column>
        <el-table-column align="center" label="订单号/提现号" prop="cono"></el-table-column>
        <el-table-column align="center" label="收支说明" prop="sourceName"></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="samount"></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="c_w_dialog" width="40%" @close="c_w_dialog=false">
      <el-form :rules="c_w_rules" ref="c_w_form" :model="c_w_form">
        <div style="display:flex;justify-content: space-between;">
          <el-col :span="10">
            <el-form-item label="银行账号" prop="c_w_account">
              <el-input
                v-model="c_w_form.c_w_account"
                type="number"
                controls="false"
                placeholder="请输入银行账号"
                style="width:70%"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="全部提现">
              <el-switch v-model="c_w_form.c_w_isall" @change="change_all_with"></el-switch>
            </el-form-item>
          </el-col>
        </div>
        <el-table :data="c_w_data" border>
          <el-table-column label="门店简称" align="center" prop="companyName"></el-table-column>
          <el-table-column label="门店剩余金额" align="center" prop="balance"></el-table-column>
          <el-table-column label="提现金额" align="center">
            <template slot-scope="{row}">
              <el-input-number
                v-model="row.withdraw_money"
                type="number"
                :min="0"
                :step="0.01"
                :precision="2"
                placeholder="请输入提现金额"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="c_w_dialog = false">取 消</el-button>
        <el-button type="primary" @click="c_w_ok('c_w_form')">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="门店提现" :visible.sync="m_w_dialog" width="30%" @close="m_w_dialog=false">
      <el-form ref="m_w_form" :rules="m_w_rules" :model="m_w_form" label-width="80px">
        <el-form-item label="剩余金额">
          <el-input v-model="m_w_item.balance" disabled style="width:60%"></el-input>
        </el-form-item>
        <el-form-item label="提现金额" prop="withdraw_money">
          <el-input-number
            type="number"
            v-model="m_w_form.withdraw_money"
            style="width:60%"
            :precision="2"
            :step="0.01"
            placeholder="请输入提现金额"
            :min="0.01"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="银行账号" prop="account">
          <el-input
            type="number"
            v-model="m_w_form.account"
            style="width:60%"
            placeholder="请输入银行账号"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="m_w_dialog = false">取 消</el-button>
        <el-button type="primary" @click="m_w_ok('m_w_form')">确 定</el-button>
      </span>
    </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,
} 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_sum_list,
  revenue_sum_count,
  revenue_sum_ljtx,
  revenue_sum_ljtx_sub,
} from "api/company.js";
//
export default {
  name: "carApplyList",
  components: {
    ElCol,
    ElRow,
    Element1,
  },
  data() {
    var yhk_yz = (rule, value, callback) => {
      if (!/^([1-9]{1})(\d{14}|\d{18})$/.test(value)) {
        callback(new Error("请输入正确的银行卡号"));
      } else {
        callback();
      }
    };
    return {
      m_w_form: {
        withdraw_money: "",
        account: "",
      },
      m_w_rules: {
        withdraw_money: [
          { required: true, message: "请输入提现金额", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
          { validator: yhk_yz, trigger: "blur" },
        ],
      },
      c_w_data: [],
      c_w_form: {
        c_w_account: "",
        c_w_isall: false,
      },
      c_w_rules: {
        c_w_account: [
          { required: true, message: "请输入银行账号", trigger: "blur" },
          { validator: yhk_yz, trigger: "blur" },
        ],
      },
      title_text: "",
      BASE_API: process.env.BASE_API,
      add_edit_dialog: false,
      list: null,
      total: null,
      listLoading: true,
      startTime: undefined,
      endTime: undefined,
      listQuery: {
        page: 1,
        limit: 10,
        companyId: undefined,
        branchId: undefined,
        startTime: undefined,
        endTime: undefined,
      },
      inline: true,
      tableKey: 0,
      btn_disable: null,
      companys_list: [],
      branchCompany_list: [],
      branchCompany_list_copy: [],
      c_w_dialog: false,
      m_w_dialog: false,
      balance: undefined,
      orderAmount: undefined,
      otherAmount: undefined,
      withdrawals: undefined,
      all_amount: undefined,
      m_w_item: {},
    };
  },
  created() {
    this.getList();
    this.get_all_companys();
    this.get_all_branchCompany();
  },
  computed: {
    ...mapGetters(["elements"]),
    getHeaderWithToken() {
      return { Authorization: getToken() };
    },
  },
  methods: {
    change_query_branch(val) {
      if (val) {
        this.branchCompany_list = this.branchCompany_list_copy.filter(
          (item) => {
            return item.companyId == val;
          }
        );
      } else {
        this.branchCompany_list = this.branchCompany_list_copy;
      }
    },
    change_all_with() {
      let is_all = this.c_w_form.c_w_isall;
      if (is_all) {
        this.c_w_data.map((item) => {
          item.withdraw_money = item.balance;
        });
      } else {
        this.c_w_data.map((item) => {
          item.withdraw_money = "";
        });
      }
    },
    c_w_ok(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          let list = [];
          let has_err = false;
          this.c_w_data.forEach((element) => {
            if (
              element.withdraw_money &&
              element.withdraw_money != "" &&
              element.withdraw_money != 0
            ) {
              if (element.withdraw_money <= element.balance) {
                list.push({
                  companyId: element.companyId,
                  amount: element.withdraw_money,
                });
              } else {
                console.log(element.withdraw_money, element.balance);
                has_err = true;
                return;
              }
            }
          });
          if (has_err) {
            this.$message({
              message: "提现金额不能大于剩余金额!",
              type: "warning",
            });
            return;
          }
          let data = {
            accountNumber: this.c_w_form.c_w_account,
            companyIds: list,
          };
          revenue_sum_ljtx_sub(data).then((res) => {
            if (res.status == 200) {
              this.c_w_dialog = false;
              this.c_w_form = {
                c_w_account: "",
                c_w_isall: false,
              };
              this.$message({
                message: "提现申请已提交！",
                type: "success",
              });
            } else {
              this.$message.error({
                message: res.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    m_w_ok(formname) {
      this.$refs[formname].validate((valid) => {
        if (valid) {
          if (this.m_w_form.withdraw_money > this.m_w_item.balance) {
            this.$message({
              message: "提现金额不能大于剩余金额!",
              type: "warning",
            });
            return;
          }
          let data = {
            companyIds: [
              {
                companyId: this.m_w_item.companyId,
                amount: this.m_w_form.withdraw_money,
              },
            ],
            accountNumber: this.m_w_form.account,
          };
          revenue_sum_ljtx_sub(data).then((res) => {
            if (res.status == 200) {
              this.m_w_dialog = false;
              this.m_w_form = {
                withdraw_money: "",
                account: "",
              };
              this.$message({
                message: "提现申请已提交！",
                type: "success",
              });
            } else {
              this.$message.error({
                message: res.message,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
    //所有公司
    get_all_companys() {
      company_all_list().then((res) => {
        if (res.status == 200) {
          this.companys_list = res.data;
        }
      });
    },
    //所有门店
    get_all_branchCompany() {
      branchCompany_all_list({ state: 1 }).then((res) => {
        if (res.status == 200) {
          this.branchCompany_list = res.data;
          this.branchCompany_list_copy = res.data;
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.company_form.businessLicense = res.data;
    },

    /**
     * 获取列表
     * */
    getList() {
      this.listLoading = true;
      if (this.startTime) {
        this.listQuery.startTime = Date.parse(this.startTime);
      }
      if (this.endTime) {
        this.listQuery.endTime = Date.parse(this.endTime);
      }
      revenue_sum_count(this.listQuery).then((res) => {
        this.balance = res.data.balance;
        this.orderAmount = res.data.orderAmount;
        this.otherAmount = res.data.otherAmount;
        this.withdrawals = res.data.withdrawals;
        this.all_amount = (
          Number(res.data.otherAmount) + Number(res.data.orderAmount)
        ).toFixed(2);
      });
      revenue_sum_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;
        }
        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,
        companyId: undefined,
        branchId: undefined,
        startTime: undefined,
        endTime: undefined,
      };
      this.startTime = undefined;
      this.endTime = undefined;
      this.branchCompany_list = this.branchCompany_list_copy;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getList();
    },
    lijitixian() {
      revenue_sum_ljtx({ page: 1, limit: 999 }).then((res) => {
        if (res.data.totalCount > 1) {
          this.c_w_dialog = true;
          this.c_w_data = res.data.data;
          this.c_w_form = {
            c_w_account: "",
            c_w_isall: false,
          };
        } else {
          this.m_w_dialog = true;
          this.m_w_item = res.data.data[0];
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.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%;
}
.label_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.label_item {
  width: 260px;
  height: 130px;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top_color_bule {
  border-top: 12px solid #3d5afe;
}
.top_color_bule2 {
  border-top: 12px solid #00b0ff;
}
.top_color_origin {
  border-top: 12px solid #ff9100;
}
.top_color_yellow {
  border-top: 12px solid #ffea00;
}
.top_color_red {
  border-top: 12px solid #ff3d00;
}
.money_p {
  margin: 0;
  color: rgba(66, 66, 66, 1);
  font-size: 18px;
  font-weight: 600;
  span {
    &:first-child {
      color: rgba(97, 97, 97, 1);
      font-size: 14px;
    }
  }
}
.money_label {
  margin: 0;
  color: rgba(189, 189, 189, 1);
  font-size: 14px;
  a {
    color: blue;
  }
}
.label_filter {
  div {
    &:first-child {
      margin-left: 10px;
      color: #101010;
      font-size: 15px;
      font-weight: 600;
    }
  }
  display: flex;
  justify-content: space-between;
  border-left: 5px solid #101010;
  align-items: center;
  height: fit-content;
}
</style>
