<template>
  <!-- 工程管理页面 -->
  <div class="app-container">
    <!-- 表格 -->
    <TableModel
      :formLabel="formLabel"
      :columnsList="columnsList"
      :request-api="queryEdgeDeviceListApi"
      ref="tableRef"
      @transIdList="getIdList"
    >
      <template slot="btn" slot-scope="{ queryParams }">
        <el-button
          type="primary"
          @click="handleAddData()"
          icon="el-icon-plus"
          size="mini"
          >发起边代接入申请</el-button
        >
        <!--        <el-button
          @click="handleExportData(
                    exportList,
                    'base/tbProDepart/export',
                    '项目部清单',
                    queryParams
                  )"
          icon="el-icon-upload2"
          size="mini"
        >导出数据</el-button
        >-->
      </template>
      <template slot="handle" slot-scope="{ data }">
        <el-button
          type="primary"
          size="mini"
          v-if="data.auditStatus === 1 || data.auditStatus === 2"
          @click="handleAllData(data)"
          >详情</el-button
        >
        <el-button
          type="primary"
          size="mini"
          v-if="data.auditStatus === 2"
          @click="handleEditData(data)"
          >编辑</el-button
        >
        <el-button
          type="primary"
          size="mini"
          v-if="data.auditStatus === 0"
          @click="handleExamData(data)"
          >审核</el-button
        >
        <el-button
          type="danger"
          size="mini"
          v-if="data.auditStatus === 2"
          @click="handleDeleteData(data.id, deleteEdgeDeviceApi)"
          >删除</el-button
        >
      </template>
      <template slot="relPhone" slot-scope="{ data }">
        {{ phoneCrypto(data.relPhone) || '-' }}
      </template>
      <template slot="auditStatus" slot-scope="{ data }">
        <span v-if="data.auditStatus === 0">审核中</span>
        <span v-if="data.auditStatus === 1">已通过</span>
        <span v-if="data.auditStatus === 2">已驳回</span>
      </template>
    </TableModel>

    <!-- 新增以及修改时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfig"
      @closeDialogOuter="closeDialogOuter"
    >
      <template slot="outerContent">
        <!-- 新增以及修改数据的表单组件 -->
        <FormInsert :editParams="editParams" @closeDialog="closeDialog" />
      </template>
    </DialogModel>

    <!-- 审核时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfigApprove"
      @closeDialogOuter="closeDialogOuterApprove"
    >
      <template slot="outerContent">
        <!-- 审核的表单组件 -->
        <FormApprove
          :editParams="editParams"
          @closeDialogApprove="closeDialogApprove"
        />
      </template>
    </DialogModel>

    <!-- 详情时的弹框 -->
    <DialogModel
      :dialogConfig="dialogConfigAll"
      @closeDialogOuter="closeDialogOuterAll"
    >
      <template slot="outerContent">
        <!-- 详情的表单组件 -->
        <FormAll :editParams="editParams" @closeDialogAll="closeDialogAll" />
      </template>
    </DialogModel>
  </div>
</template>

<script>
import { formLabel, columnsList, dialogConfig } from "./config";
import { dialogConfigApprove } from "./config-approve";
import { dialogConfigAll } from "./config-all";
import { commonMixin } from "../mixins/common";
import { queryEdgeDeviceListApi, deleteEdgeDeviceApi } from "@/api/base/insert";
import FormInsert from "./components/form-insert.vue";
import FormApprove from "./components/form-insert-approve.vue";
import FormAll from "./components/form-insert-all.vue";
export default {
  name: "ProjectDepart",
  methods: {
    queryEdgeDeviceListApi,
    deleteEdgeDeviceApi,
    getIdList(idList) {
      this.exportList = [];
      idList.forEach((item) => {
        this.exportList.push(item.id);
      });
    },
    handleExamData(v) {
      this.editParams = v;
      console.log(v);
      this.dialogConfigApprove.outerVisible = true;
      this.dialogConfigApprove.outerTitle = "审核";
      // this.dialogConfig.dialogWidth = '50%'
      // this.dialogConfig.dialogHeight = '50%'
      // this.dialogConfig.dialogType = 'exam'
    },
    handleAllData(v) {
      console.log(v);
      this.editParams = v;
      this.dialogConfigAll.outerVisible = true;
      this.dialogConfigAll.outerTitle = "接入申请明细";
    },
    closeDialogOuterApprove() {
      this.dialogConfigApprove.outerVisible = false;
      this.$refs.tableRef.getTableList();
    },
    closeDialogApprove() {
      this.dialogConfigApprove.outerVisible = false;
      this.$refs.tableRef.getTableList();
    },
    closeDialogOuterAll() {
      this.dialogConfigAll.outerVisible = false;
      this.$refs.tableRef.getTableList();
    },
    closeDialogAll() {
      this.dialogConfigAll.outerVisible = false;
      this.$refs.tableRef.getTableList();
    },
  },
  mixins: [commonMixin],
  components: {
    FormInsert,
    FormApprove,
    FormAll,
  },
  created() {},
  data() {
    return {
      // 搜索区表单配置项
      formLabel,
      // 表格导出id列表
      exportList: [],
      // 列表区配置项
      columnsList,
      dialogConfigApprove,
      dialogConfigAll,
      // 弹框区配置项
      dialogConfig,
      // 新建时弹框标题
      addDialogTitle: "接入申请",
      // 修改时弹框标题
      editDialogTitle: "修改申请",
    };
  },
};
</script>
