<template>
  <div>
    <el-form :inline="true" :model="filterQuery" class="query-form" size="mini">
      <el-row>
        <el-form-item class="query-form-item">
          <el-input
            v-model="filterQuery.batchNo"
            placeholder="企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item class="query-form-item">
          <el-select v-model="filterQuery.checkType" placeholder="审核状态">
            <el-option label="未审核" value="0"></el-option>
            <el-option label="已审核" value="1"></el-option>
            <el-option label="未通过" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onReset"
            ></el-button>
            <el-button type="primary" icon="search" @click="onSubmit"
              >查询</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table v-loading="loading" :data="list" style="width: 100%">
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column
        label="用户昵称"
        prop="nickName"
        width="220"
      ></el-table-column>
      <el-table-column
        label="企业名称"
        prop="companyName"
        width="230"
      ></el-table-column>
      <el-table-column
        label="联系人"
        prop="realName"
        width="160"
      ></el-table-column>
      <el-table-column label="手机" prop="mobile" width="120"></el-table-column>
      <el-table-column label="电话" prop="tel" width="120"> </el-table-column>
      <el-table-column label="邮箱" prop="email" width="180"> </el-table-column>
      <el-table-column label="企业类型" prop="bussinessStatus">
        <template slot-scope="scope">
          <span>{{ bussinessFlag[scope.row.bussinessStatus] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属地区" prop="area" width="200">
      </el-table-column>
      <el-table-column label="审核状态" prop="checkType" width="120">
        <template slot-scope="scope">
          <span>{{ checkFlag[scope.row.checkType] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            v-if="scope.row.checkType != 1"
            @click.native.stop="checkDialog(scope.row)"
            >审核</el-button
          >

          <!-- <el-button
            type="text"
            size="small"
            @click.native.stop="deleteDialog(scope.row)"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="审核"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form :model="checkQuery">
        <el-form-item label="分配角色：">
          <el-radio-group v-model="check" @change="handleCheckedChange">
            <el-radio v-for="item in roles" :key="item.id" :label="item.id">{{
              item.name
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="passRegister">通过</el-button>
        <el-button type="primary" @click="noPassRegister">不通过</el-button>
      </span>
    </el-dialog>
    <el-pagination
      :page-size="filterQuery.limit"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { getRegisters, checkPass, deleteRe } from "../../api/auth/register";
import { authCustomerRoles } from "../../api/auth/authAdmin";
export default {
  data() {
    return {
      filterQuery: {
        companyName: "",
        checkType: "0",
        page: 1,
        limit: 20,
      },
      value: "",
      total: 0,
      checkFlag: {
        0: "未审核",
        1: "已通过",
        2: "已拒绝",
      },
      bussinessFlag: {
        1: "生产企业",
        2: "流通企业",
        3: "医疗机构",
      },
      checkQuery: {
        id: "",
        checkType: "",
        roles: "",
      },
      list: [],
      roles: [],
      addDialogVisible: false,
      centerDialogVisible: false,
      check: "",
    };
  },

  methods: {
    onReset() {
      this.$router.push({
        path: "",
      });
      this.filterQuery = {
        companyName: "",
        checkType: "",
        page: 1,
        limit: 20,
      };
      this.getList();
    },

    onSubmit() {
      this.getList();
    },
    getList() {
      this.loading = true;
      getRegisters(this.filterQuery)
        .then((response) => {
          this.loading = false;
          this.list = response.data.list || [];
          this.total = response.data.total || 0;
        })
        .catch(() => {
          this.loading = false;
          this.list = [];
          this.total = 0;
        });
    },

    cancelDialog() {
      this.addDialogVisible = false;
    },

    handleCheckedChange(val) {
      console.log(val);
    },

    handleSizeChange(val) {
      this.filterQuery.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.filterQuery.page = val;
      this.getList();
    },

    checkRegister() {
      this.loading = true;

      checkPass(this.checkQuery)
        .then((response) => {
          if (response.code == 20000) {
            this.getList();
            this.$message({
              type: "success",
              message: "更新成功！",
            });
          } else {
            this.$message.warning("更新失败");
          }
        })
        .catch(() => {});
    },
    checkDialog(row) {
      console.log(this.checkQuery.roles);
      this.check = row.roles;
      this.checkQuery = {
        id: row.id + "",
        checkType: 1,
        roles: row.roles,
      };
      console.log(
        this.check + "---" + row.roles + "---" + this.checkQuery.roles
      );
      this.centerDialogVisible = true;
    },

    passRegister() {
      this.checkQuery.roles = this.check;
      this.checkRegister();
      this.centerDialogVisible = false;
    },
    noPassRegister() {
      this.checkQuery.roles = this.check;
      this.checkQuery.checkType = 2;
      this.checkRegister();
      this.centerDialogVisible = false;
    },

    deleteDialog(row) {
      this.$confirm("是否删除该记录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let tQuery = {
            id: row.id,
          };
          deleteRe(tQuery).then(() => {
            this.getList();
          });
        })
        .catch(() => {});
    },
    getRoleList() {
      authCustomerRoles()
        .then((response) => {
          this.roles = response.data.list || [];
          console.log("888---" + this.checkQuery.roles);
        })
        .catch(() => {
          this.checkQuery.roles = [];
        });
    },
  },

  mounted() {},
  created() {
    this.getList();
    this.getRoleList();
  },
};
</script>