<template>
  <div class="app-container">
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="create"
      class="margin-left"
      >添加企业</el-button
    >
    <el-input
      v-model="page.data.username"
      placeholder="请输入账号名称"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.name"
      placeholder="请输入姓名"
      class="margin-left input"
    ></el-input>
    <el-input
      v-model="page.data.phone"
      placeholder="请输入手机号"
      class="margin-left input"
    ></el-input>
    <el-button
      type="primary"
      icon="el-icon-search"
      @click="fetchData"
      class="margin-left"
      >搜索</el-button
    >
    <!--主表格-->
    <el-table
      class="table"
      ref="table_form"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="序号" align="center" width="80px">
        <template slot-scope="scope">
          {{ indexMethod(scope.$index) }}
        </template>
      </el-table-column>
      <el-table-column label="账号名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.username | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="管理员姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.name | matchNull }}</span>
        </template>
      </el-table-column>
      <el-table-column label="管理员手机号" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column>

      <!-- <el-table-column label="公司全称" align="center">
        <template slot-scope="scope">
          {{ scope.row.phone | matchNull }}
        </template>
      </el-table-column> -->
      <el-table-column label="详细地址" align="center">
        <template slot-scope="scope">
          {{ scope.row.address | matchNull }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag
            effect="plain"
            type="success"
            v-if="scope.row.reviewStatus == 2"
            >已通过</el-tag
          >
          <el-tag
            effect="plain"
            type="warning"
            v-if="scope.row.reviewStatus == 1"
            >已拒绝</el-tag
          >
          <!-- <el-tag
            effect="plain"
            type="primary"
            v-if="scope.row.reviewStatus == 0"
            >待审核</el-tag
          > -->
          <el-button
            type="primary"
            v-if="scope.row.reviewStatus == 0"
            @click.stop="audit(scope.row)"
            >审核</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="企业通用码"
        align="center"
        v-if="codeType.indexOf('0') > -1"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.adminDetail.buildingCode"
            :preview-src-list="[scope.row.adminDetail.buildingCode]"
          >
            <div slot="error" class="image-slot">
              {{ scope.row.adminDetail.buildingCode ? "加载失败" : "暂无照片" }}
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        label="企业员工码"
        align="center"
        v-if="codeType.indexOf('1') > -1"
      >
        <template slot-scope="scope">
          <el-image
            style="width: 70px; height: 70px"
            :src="scope.row.adminDetail.buildingRegularCode"
            :preview-src-list="[scope.row.adminDetail.buildingRegularCode]"
          >
            <div slot="error" class="image-slot">
              {{
                scope.row.adminDetail.buildingRegularCode
                  ? "加载失败"
                  : "暂无照片"
              }}
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="" label="操作区" width="300">
        <template slot-scope="scope">
          <el-button
            type="danger"
            size="small"
            @click="deleteUser(scope.row.adminId)"
            >删除</el-button
          >
          <el-button type="primary" size="small" @click="update(scope.row)"
            >编辑</el-button
          >
          <el-button type="primary" size="small" @click="detail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加/编辑 -->
    <addEnterprise
      v-if="showDialog"
      :showDialog="showDialog"
      :dialogTitle="dialogTitle"
      @closeDialog="closeDialog"
      :updateList="updateList"
    />
    <!-- 详情 -->
    <detail
      :detailDialog="detailDialog"
      :list="detailRow"
      @dialogVisible="detailDialog = false"
    />
    <!--分页栏-->
    <pagination
      :total="total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import {
  getUserList,
  doDeleteAdmin,
  queryAdminById,
  audit,
} from "@/api/user_manage";

import addEnterprise from "@/views/enterprise_manage/compoment/addEnterprise.vue";
import detail from "@/views/enterprise_manage/compoment/detail.vue";
import Pagination from "@/components/Pagination";
export default {
  name: "",
  components: { addEnterprise, detail, Pagination },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未填写";
      } else {
        return str;
      }
    },
  },
  data() {
    return {
      codeType: this.$store.getters.codeType,
      // 主表格&主表格加载状态
      list: [],
      listLoading: false,
      dialogTitle: "添加",
      showDialog: false,
      updateList: null,
      detailRow: null,
      detailDialog: false,
      // 分页参数
      page: {
        data: {
          username: null,
          name: null,
          phone: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  methods: {
    // 获取列表数据
    fetchData() {
      getUserList(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    deleteUser(id) {
      this.$confirm("确定要删除此企业账号吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        doDeleteAdmin(id).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    create() {
      this.showDialog = true;
      this.dialogTitle = "添加";
    },
    update(row) {
      queryAdminById(row.adminId).then((res) => {
        this.updateList = res.data;
        this.dialogTitle = "编辑";
        this.showDialog = true;
      });
    },
    // 详情
    detail(row) {
      queryAdminById(row.adminId).then((res) => {
        this.detailRow = res.data;
        this.detailDialog = true;
      });
    },
    //审核
    audit(row) {
      this.$confirm("请选择", "提示", {
        confirmButtonText: "同意",
        cancelButtonText: "拒绝",
        type: "warning",
        center: true,
        showClose: false, //是否显示右上角的x
        closeOnClickModal: false, //是否可以点击空白处关闭弹窗
      })
        .then(() => {
          audit(row.adminId, 2).then((res) => {
            this.fetchData();
            this.$message({
              type: "success",
              message: "审核通过!",
            });
          });
        })
        .catch(() => {
          audit(row.adminId, 1).then((res) => {
            this.fetchData();
            this.$message({
              type: "success",
              message: "驳回成功!",
            });
          });
        });
    },
    // 关闭弹框
    closeDialog(e) {
      if (e) {
        this.fetchData();
      }
      this.showDialog = false;
    },
    // 审核
    saveEnterpriseAccount() {
      saveEnterpriseAccount().then((res) => {
        this.fetchData();
        this.$message.success("操作成功！");
      });
    },

    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData();
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 150px;
}
</style>
