<template>
  <div class="app-container">
    <el-row class="apply-filter">
      <!-- 筛选条件 -->
      <el-form ref="formRef" :inline="true" size="mini" :model="query.data">
        <el-form-item label="服务名称">
          <el-input v-model="query.name"></el-input>
        </el-form-item>
        <el-form-item label="申请人">
          <el-input v-model="query.data.unitName"></el-input>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select clearable v-model="query.data.applyState" style="width: 100px">
            <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
              type="primary"
              @click="getList"
              icon="Search"
          >搜索</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- <el-row justify="end">
      <el-button size="small" type="primary" plain>批量审核</el-button>
    </el-row> -->
    <el-row class="table_box">
      <el-table
          stripe
          :data="tableData"
          :height="tableHeight"
          style="width: 100%"
          size="small"
          :header-cell-style="{
          background: '#ebf3fb',
          color: '#333',
          padding: '4px 0',
          'border-right': '1px solid #fff',
        }"
      >
        <!-- <el-table-column type="selection" /> -->
        <el-table-column type="index" align="center" label="序号" :index="1"/>
        <el-table-column
            show-overflow-tooltip
            width="220"
            prop="name"
            label="服务名称"
        >
          <template #default="scope">
            <el-link @click="serviceDetail(scope.row.srvId)">
              {{ scope.row.name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            align="center"
            width="100"
            prop="unitName"
            label="申请人"
        >
          <template #default="scope">
            <el-tag size="medium">{{ scope.row.unitName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            show-overflow-tooltip
            header-align="center"
            align="left"
            prop="applyNote"
            label="申请说明"
        />
        <el-table-column
            show-overflow-tooltip
            align="center"
            width="140"
            prop="applyTime"
            label="申请时间"
        />
        <el-table-column
            show-overflow-tooltip
            align="center"
            width="140"
            prop="applyExpire"
            label="截至时间"
        />
        <el-table-column
            show-overflow-tooltip
            align="center"
            width="100"
            prop="userName"
            label="审核人"
        />
        <el-table-column
            show-overflow-tooltip
            align="center"
            width="80"
            prop="applyState"
            label="是否通过"
        >
          <template #default="scope">
            <el-popover effect="light" trigger="hover" placement="top">
              <template #default>
                <p v-if="scope.row.applyState === '1'">
                  审核结果:
                  <el-tag>同意</el-tag>
                </p>
                <p v-if="scope.row.applyState === '2'">
                  审核结果:
                  <el-tag type="danger">拒绝</el-tag>
                </p>
                <p v-if="scope.row.applyState === '0'">
                  审核结果:
                  <el-tag type="info">待审核</el-tag>
                </p>
                <p
                    v-if="
                    scope.row.applyState === '1' || scope.row.applyState === '2'|| scope.row.applyState === '0'
                  "
                >
                  审核说明: {{ scope.row.approveNote }}
                </p>
              </template>
              <template #reference>
                <div class="name-wrapper">
                  <el-tag v-if="scope.row.applyState == 0" type="info">
                    待审核
                  </el-tag>
                  <el-tag v-else-if="scope.row.applyState == 1">通过</el-tag>
                  <el-tag v-else-if="scope.row.applyState == 2" type="danger">
                    拒绝
                  </el-tag>
                </div>
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template #default="scope">
            <el-button
                size="mini"
                type="danger"
                @click="auditServiceApply(scope.row.id)"
                v-hasPermi="['service:apply:audit']"
            >
              审核
            </el-button>
            <el-button size="mini" @click="serviceDetail(scope.row.srvId)">
              服务详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- <pagination
      v-show="dataTotal > 0"
      :total="dataTotal"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    /> -->
    <el-pagination
        v-show="dataTotal > 0"
        style="margin-top:1%"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[ 20, 30, 40]"
        :page-size="pageSize"
        :current-page="pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal">
    </el-pagination>

    <ae-service-apply-audit
        :dialogVisible="dialogVisible"
        :id="currentApplyId"
    >
    </ae-service-apply-audit>
  </div>
</template>

<script>
import {getServiceApplyList} from "@/api/service/apply.js";
import AeServiceApplyAudit from "./AeServiceApplyAudit.vue";

export default {
  name: "ServiceInfoApply",
  components: {
    AeServiceApplyAudit,
  },
  data() {
    return {
      dialogVisible: false,
      currentApplyId: undefined,
      pageSize:'',
      pageNum:'',
      tableData: [],
      tableHeight: window.innerHeight - 300,
      paramList: [
        {
          paramCode: "name",
          paramName: "服务名称",
          align: "left",
          width: "150",
        },
        {paramCode: "type", paramName: "服务类型", width: "100"},
        {paramCode: "url", paramName: "服务地址", align: "left"},
        {paramCode: "rqtype", paramName: "请求方式", width: "80"},
        {paramCode: "serviceDept", paramName: "所属部门", width: "100"},
        {
          paramCode: "serviceSource",
          paramName: "所属系统",
          align: "left",
          width: "150",
        },
        {paramCode: "cnt", paramName: "调用次数", width: "100"},
        {paramCode: "rlstm", paramName: "发布时间", width: "120"},
        {paramCode: "status", paramName: "状态", width: "80"},
      ],
      dataTotal: 0,
      query: {
        pageNum: 1,
        pageSize: 20,
        orderBy: "",
        data: {
          name: "",
          unitName: "",
          applyState: "",
        },
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSizeChange(num){
      this.query.pageSize = num
      this.getList()
    },
    handleCurrentChange(num){
      this.query.pageNum = num
      this.getList()
    },
    /** 获取服务申请列表数据 */
    getList() {
      getServiceApplyList(this.query).then((r) => {
        this.tableData = r.rows;
        this.dataTotal = r.total;
      });
    },
    /** 关闭对话框 */
    closeDialog() {
      this.dialogVisible = false;
    },
    /** 审核申请 */
    auditServiceApply(id) {
      this.currentApplyId = id;
      this.dialogVisible = true;
    },
    /** 打开服务详情 */
    serviceDetail(srvId) {
      window.open(
          `${this.webUrl}/openData/detail?srvId=${srvId}&type=api`,
          "_blank"
      );
    },
  },
};
</script>
<style scoped>
.el-row {
  margin-bottom: 10px;
}

.table_box ::v-deep .el-table {
  border: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 5px;
}

.apply-filter ::v-deep .el-form-item {
  margin-bottom: 0;
}
</style>
