<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="userNickname">
        <el-input v-model="search.userNickname" placeholder="请输入会员昵称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

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

      <el-form-item label="代理层级" prop="agentLevel">
        <el-select v-model="search.agentLevel" placeholder="请选择代理层级" clearable>
          <el-option label="省级代理" value="1" />
          <el-option label="区县代理" value="2" />
        </el-select>
      </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="idCard">
        <el-input v-model="search.idCard" placeholder="请输入身份证号" clearable @keyup.enter.native="handleQuery" />
      </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 label="代理上级" prop="parentAgentPhone">
        <el-input v-model="search.parentAgentPhone" 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">重置</el-button>
        <!-- <el-button type="primary" size="mini">导出</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 :border="TableBorder" :size="ELTableSize" v-loading="loading" :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" prop="userMobile">
        <template slot-scope="scope">
          {{ scope.row.userMobile | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="身份证照片" align="center" prop="idCardFrontUrl">
        <template slot-scope="{ row }">
          <div class="id-card-images">
            <ImagePreview v-if="row.idCardFrontUrl" :src="row.idCardFrontUrl" width="50px" height="50px" />
            <ImagePreview v-if="row.idCardBackUrl" :src="row.idCardBackUrl" width="50px" height="50px" />
            <span v-if="!row.idCardBackUrl && !row.idCardFrontUrl">--</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="真实姓名" align="center" prop="realName"></el-table-column>
      <el-table-column label="性别" align="center" prop="gender">
        <template slot-scope="{row}">
          <dict-tag :options="dict.type.sys_user_sex" :value="row.gender" />
          <!-- <span v-if="scope.row.gender == 0">未知</span>
          <span v-if="scope.row.gender == 1">男</span>
          <span v-if="scope.row.gender == 2">女</span> -->
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="phone">
        <template slot-scope="{row}">
          <!-- {{ row.agentLevel == 1 ? "省级代理" : "区县代理" }} -->
          {{ row.phone | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center" prop="idCard">
        <template slot-scope="{row}">
          {{ row.idCard | TableItemEmpty }}
        </template>
      </el-table-column>
      <el-table-column label="代理层级" align="center" prop="agentLevel">
        <template slot-scope="{row}">
          <!-- {{ row.agentLevel == 1 ? "省级代理" : "区县代理" }} -->
          {{ row.agentLevel | AgentLevelOptionFilter | TableItemEmpty }}
        </template>
      </el-table-column>

      <el-table-column label="代理上级" align="center" prop="parentAgentPhone">
        <template slot-scope="scope">
          {{ scope.row.parentAgentPhone | TableItemEmpty }}
        </template>
      </el-table-column>

      <el-table-column label="申请区域" align="center" prop="applyArea">
        <template slot-scope="{ row }">
          {{ row.provinceName + (row.cityName || "") + (row.areaName || "") }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="createTime" width="160"></el-table-column>

      <template v-if="tabNum == '1'">
        <el-table-column label="审核时间" align="center" prop="auditTime" width="160" key="auditTime"></el-table-column>
        <el-table-column label="审核状态" align="center" prop="auditStatus" key="auditStatus">
          <template slot-scope="{row}">
            <!-- <span v-if="scope.row.auditStatus == 0">待审核</span>
            <span v-if="scope.row.auditStatus == 10">审核通过</span>
            <span v-if="scope.row.auditStatus == 5">审核不通过</span> -->
            {{ row.auditStatus | AuditStatusOptionFilter | TableItemEmpty }}
          </template>
        </el-table-column>
        <el-table-column label="详情" align="center" prop="auditResult" key="auditResult">
          <template slot-scope="scope">
            {{ scope.row.auditResult | TableItemEmpty }}
          </template>
        </el-table-column>
      </template>

      <template v-if="tabNum == '0'">
        <el-table-column label="审核状态" align="center" prop="auditStatus" key="auditStatus">
          <template slot-scope="{row}">
            <!-- <span v-if="scope.row.auditStatus == 0">待审核</span>
            <span v-if="scope.row.auditStatus == 10">审核通过</span>
            <span v-if="scope.row.auditStatus == 5">审核不通过</span> -->
            {{ row.auditStatus | AuditStatusOptionFilter | TableItemEmpty }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button :size="ELTableSize" type="text" @click="handleReview(scope.row)"
              v-if="scope.row.agentLevel == 1">审核</el-button>
            <span v-else>--</span>
          </template>
        </el-table-column>
      </template>
    </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" label-width="120px">
        <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="auditResult">
          <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 { AuditStatusEnum } from "@/utils/statusEnum";
import getListApi from "@/mixins/getListApi";
import {
  agentApplyWaitPage,
  agentApplyAuditPage,
  agentApplyAudit,
} from "@/api/agentManage";
export default {
  dicts: ['sys_user_sex'],
  mixins: [getListApi],
  data() {
    return {
      AuditStatusEnum,
      tabNum: "0",
      dialogFormVisible: false,
      listURL: agentApplyWaitPage,
      form: {},
      btnLoading: false,
    };
  },
  created() {
    this.getCnAreaTree();
  },
  methods: {
    changeTab(e) {
      this.listURL = e == "0" ? agentApplyWaitPage : agentApplyAuditPage;
      this.handleQuery();
    },
    handleReview(row) {
      // console.log(row);
      this.form = {
        ...row,
        auditStatus: this.AuditStatusEnum.AUDIT_APPROVED,
        auditResult: "",
      };
      this.dialogFormVisible = true;
    },
    handleSubmit() {
      if (this.form.auditStatus === this.AuditStatusEnum.AUDIT_REJECTED && !this.form.auditResult) {
        return this.$message.error("请填写审核原因");
      }
      this.btnLoading = true;
      agentApplyAudit(this.form)
        .then((res) => {
          this.btnLoading = false;
          if (res.code == 200) {
            this.$message.success("审核成功");
            this.dialogFormVisible = false;
            this.getList();
          }
        })
        .catch((err) => {
          this.btnLoading = false;
        });
    },
  },
};
</script>
<style scoped lang="scss">
.id-card-images {
  display: flex;

  ::v-deep .el-image {
    margin-right: 10px;
  }
}
</style>
