<template>
  <div class="app-container">
    <el-form :model="search" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize" label-width="auto">
      <el-form-item label="会员账号" prop="userMobile">
        <el-input v-model="search.userMobile" placeholder="请输入会员账号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="search.realName" placeholder="请输入真实姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="代理区域" prop="areaTreaList">
        <el-cascader v-model="search.areaTreaList" :options="areaTreaList"
          :props="{ expandTrigger: 'hover', checkStrictly: true }" placeholder="请选择省市区县"></el-cascader>
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="search.phone" placeholder="请输入联系电话" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="20">
        <el-radio-group v-model="tabNum" @change="changeTab" :size="ELsize">
          <el-radio-button label="0">待审核</el-radio-button>
          <el-radio-button label="1">审核记录</el-radio-button>
        </el-radio-group>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
      <el-table-column type="index" width="55" label="序号" align="center">
        <template slot-scope="{$index}">
          {{ $getTableIndex(queryParams, $index + 1) }}
        </template>
      </el-table-column>
      <el-table-column label="会员账号" align="center">
        <template slot-scope="{row}">
          {{ row.userMobile | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" align="center">
        <template slot-scope="{row}">
          {{ row.realName | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center">
        <template slot-scope="{row}">
          {{ row.phone | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="代理层级" align="center" prop="agentLevel" key="agentLevel">
        <template slot-scope="{row}">
          {{ row.agentLevel | AgentLevelOptionFilter | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="代理区域" align="center" prop="provinceName" key="provinceName">
        <template slot-scope="{ row }">
          {{ row.provinceName + (row.cityName || "") + (row.areaName || "") }}
        </template>
      </el-table-column>
      <el-table-column label="申请数量" align="center">
        <template slot-scope="{row}">
          {{ row.applyQuantity | TableItemEmpty }}
        </template>
      </el-table-column>

      <el-table-column label="申请原因" align="center" show-overflow-tooltip>
        <template slot-scope="{row}">
          {{ row.applyReason | TableItemEmpty }}
        </template>
      </el-table-column>

      <template v-if="tabNum == '1'">
        <el-table-column label="发放数量" align="center" prop="issuedQuantity" key="issuedQuantity"></el-table-column>
      </template>
      <el-table-column label="申请时间" align="center" width="170">
        <template slot-scope="{row}">
          {{ row.createTime | TableItemEmpty }}
        </template>
      </el-table-column>
      <template v-if="tabNum == '1'">
        <el-table-column label="发放时间" align="center" width="170">
          <template slot-scope="{row}">
            {{ row.auditTime | TableItemEmpty }}
          </template>
        </el-table-column>
      </template>
      <el-table-column label="审核状态" align="center" prop="auditStatus" key="auditStatus">
        <template slot-scope="{ row }">
          {{ row.auditStatus | AuditStatusOptionFilter | TableItemEmpty }}
          <!-- <span v-if="row.auditStatus == 0">待审核</span>
          <span v-else-if="row.auditStatus == 5">拒绝</span>
          <span v-else-if="row.auditStatus == 10">同意</span> -->
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" v-if="tabNum == '0'">
        <template slot-scope="{row}">
          <!-- 区县 都由 省级审核。平台不审核 -->
          <el-button
            v-if="tabNum == '0' && row.auditStatus === AuditStatusEnum.AUDIT_PENDING && row.agentLevel == AgentLevelEnum.LEVEL_1"
            :size="ELTableSize" type="text" @click="handleReview(row)">审核</el-button>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column label="原因" align="center" v-else>
        <template slot-scope="{row}">
          {{ row.auditResult | TableItemEmpty }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog title="审核操作" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="申请数量">
          <span>{{ form.applyQuantity }}</span>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-radio-group v-model="form.auditStatus">
            <el-radio :label="AuditStatusEnum.AUDIT_APPROVED">审核通过</el-radio>
            <el-radio :label="AuditStatusEnum.AUDIT_REJECTED">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发放数量" prop="issuedQuantity" v-if="form.auditStatus == AuditStatusEnum.AUDIT_APPROVED">
          <el-input-number v-model="form.issuedQuantity" controls-position="right" placeholder="请输入发放数量" :min="0"
            :precision="0" :max="form.applyQuantity" style="width: 300px"></el-input-number>
        </el-form-item>
        <el-form-item label="审核原因" prop="auditResult" v-if="form.auditStatus == AuditStatusEnum.AUDIT_REJECTED">
          <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.auditResult">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返 回</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import {
  agentAccountCodeApplyWaitPage,
  agentAccountCodeApplyAuditPage,
  agentAccountCodeApplyAudit
} from "@/api/agentManage";
import { AuditStatusEnum, AgentLevelEnum } from "@/utils/statusEnum";
export default {
  mixins: [getListApi],
  data() {
    return {
      AuditStatusEnum,
      AgentLevelEnum,
      tabNum: "0",
      dialogFormVisible: false,
      listURL: agentAccountCodeApplyWaitPage,
      form: {
        auditStatus: 10,
      },
      rules: {
        issuedQuantity: [
          { required: true, message: "请输入发放数量", trigger: "blur" },
        ],
        auditResult: [
          { required: true, message: "请输入审核原因", trigger: "blur" },
        ],
      },
      btnLoading: false,
    };
  },
  created() {
    this.getCnAreaTree();
  },
  methods: {
    changeTab(val) {
      this.tabNum = val;
      this.listURL =
        val == "0"
          ? agentAccountCodeApplyWaitPage
          : agentAccountCodeApplyAuditPage;
      this.handleQuery();
    },
    handleReview(row) {
      // console.log(row);
      this.form = {
        id: row.id,
        applyQuantity: row.applyQuantity,
        auditStatus: AuditStatusEnum.AUDIT_APPROVED,
        issuedQuantity: undefined,
        agentId: row.agentId,
      };
      this.dialogFormVisible = true;
    },
    handleSubmit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          let form = {
            ...this.form,
            issuedQuantity: this.form.auditStatus == AuditStatusEnum.AUDIT_APPROVED ? this.form.issuedQuantity : 0,
            auditResult: this.form.auditStatus == AuditStatusEnum.AUDIT_REJECTED ? this.form.auditResult : "",
          };
          agentAccountCodeApplyAudit(form)
            .then((res) => {
              if (res.code == 200) {
                this.$message.success("审核成功");
                this.dialogFormVisible = false;
                this.getList();
              }
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
