<template>
  <div style="margin-left: 1%;padding-top: 1%;" :style="{'height':heightAll+'px'}">
    <el-row class="box">
      <!-- 筛选条件 -->
      <el-form ref="formRef" :inline="true" size="mini" :model="query.data">
        <el-form-item label="服务名称">
          <el-input v-model="query.data.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-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-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 class="box">
      <el-button
        @click="saveService"
        size="small"
        type="primary"
        plain
        v-hasPermi="['service:info:add']"
      >
        添加服务
      </el-button>
    </el-row>
    <el-row class="table_box">
      <el-table
        stripe
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        size="small"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: '#ebf3fb',
          color: '#333',
          padding: '4px 0',
          'border-right': '1px solid #fff',
        }"
      >
        <el-table-column type="expand">
          <template #default="prop">
            <el-table :data="prop.row.detail1">
              <el-table-column label="服务名称" prop="name" />
              <el-table-column label="服务类型" prop="type" />
              <el-table-column label="服务地址" prop="url" />
              <el-table-column label="请求方式" prop="rqtype" />
              <!-- <el-table-column label="调用次数" prop="cnt" /> -->
              <el-table-column label="发布时间" prop="rlstm" />
              <el-table-column
                show-overflow-tooltip
                header-align="center"
                align="center"
                width="60"
                prop="status"
                label="状态"
              >
                <template #default="scope">
                  <el-tag
                    :type="scope.row.status === '1' ? 'success' : 'warning'"
                    disable-transitions
                  >
                    {{ scope.row.status === "1" ? "启用" : "停用" }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column fixed="right" align="center" label="操作" width="220">
                <template #default="scope">
                  <el-button
                    :type="scope.row.status == 1 ? 'warning' : 'primary'"
                    v-hasPermi="['service:info:status']"
                    @click="updateStatus(scope.row)"
                    size="mini"
                  >
                    {{ scope.row.status == 1 ? "停用" : "启用" }}
                  </el-button>
                  <el-button
                    v-hasPermi="['service:info:update']"
                    @click="saveService(scope.row)"
                    size="mini"
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="danger"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['service:info:delete']"
                    size="mini"
                  >
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50"/>
        <el-table-column label="服务名称" prop="name" />
      </el-table>
      <!-- <el-table
        stripe
        :data="tableData"
        :height="tableHeight"
        style="width: 100%"
        size="small"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background: '#ebf3fb',
          color: '#333',
          padding: '4px 0',
          'border-right': '1px solid #fff',
        }"
      >
        <el-table-column type="index" align="center" label="序号" :index="1"/>
        <el-table-column
          show-overflow-tooltip
          v-for="(param, index) in paramList"
          :key="index"
          header-align="center"
          :align="param.align ? param.align : 'center'"
          :width="param.width ? param.width : 'auto'"
          :prop="param.paramCode"
          :label="param.paramName"
        />
        <el-table-column
          show-overflow-tooltip
          header-align="center"
          align="center"
          width="60"
          prop="status"
          label="状态"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.status === '1' ? 'success' : 'warning'"
              disable-transitions
            >
              {{ scope.row.status === "1" ? "启用" : "停用" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="220">
          <template #default="scope">
            <el-button
              :type="scope.row.status == 1 ? 'warning' : 'primary'"
              v-hasPermi="['service:info:status']"
              @click="updateStatus(scope.row)"
              size="mini"
            >
              {{ scope.row.status == 1 ? "停用" : "启用" }}
            </el-button>
            <el-button
              v-hasPermi="['service:info:update']"
              @click="saveService(scope.row)"
              size="mini"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              @click="handleDelete(scope.row)"
              v-hasPermi="['service:info:delete']"
              size="mini"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </el-row>
    <div style="width: 100%;text-align: center;">
      <!-- <el-pagination
        small
        style="margin-top:1%;"
        background
        v-model='pageNum'
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="dataTotal"
        class="mt-4"
      /> -->
    </div>

    <div>
        <el-pagination
            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>
      </div>
    
    <el-dialog
      v-model="addServiceVisible"
      title="服务"
      fullscreen
      @close="closeDialog"
    >
      <ae-service
        :serviceVisible="addServiceVisible"
        :service="checkedService"
        @close="closeDialog"
        @refreshTable="getList"
      ></ae-service>
    </el-dialog>
  </div>
  <div>

  </div>
</template>
<script setup name="Menu">
</script>
<script>
import "@/assets/styles/common.scss";
import AeService from "./AeService";
import {
  getServiceInfo,
  saveServiceInfo,
  deleteService,
} from "@/api/service/info";

export default {
  name: "SerivceInfo",
  components: {
    AeService,
  },
  data() {
    return {
      dialogVisible:false,
      addServiceVisible: false,
      checkedService: undefined,
      tableData: [],
      pageSize:20,
      heightAll:window.innerHeight,
      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: "76"},
        // {
        //   paramCode: "serviceSource",
        //   paramName: "所属模型",
        //   align: "left",
        //   width: "150",
        // },
        {paramCode: "cnt", paramName: "调用次数", width: "76"},
        {paramCode: "rlstm", paramName: "发布时间", width: "110"},
      ],
      dataTotal: 0,
      pageNum:1,
      query: {
        pageNum: 1,
        pageSize: 20,
        orderBy: " RLSTM DESC ",
        data: {
          name: "",
          cateCode: "",
        },
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    handleSizeChange(num){
      this.query.pageSize = num
      this.getList()
    },
    handleCurrentChange(num){
      this.query.pageNum = num
      this.getList()
    },
    addDetailPropertyInPlace(arr) {
      arr.forEach(obj => {
        obj.detail = structuredClone ? structuredClone(obj) : deepCopy(obj);
      });
      arr.forEach(obj => {
        obj.detail1 = []
        obj.detail1.push(obj.detail)
      });
      return arr
    },
    getList() {
      getServiceInfo(this.query).then((r) => {
        // this.tableData = r.rows
        this.tableData = this.addDetailPropertyInPlace(r.rows)
        console.log(this.tableData)
        this.dataTotal = r.total
      });
    },
    // 关闭弹窗
    closeDialog() {
      // this.addServiceVisible = false;
      // this.checkedService = undefined;
    },
    /** 添加、修改服务 */
    saveService(service) {
      this.addServiceVisible = true;
      console.log(service.serviceList)
      if (service.serviceList[0].srvId) {
        this.checkedService = service.serviceList[0];
      }
      else{
        return
      }

    },
    // 更新状态
    updateStatus(service) {
      if (service.status == "1") {
        service.status = "0";
      } else {
        service.status = "1";
      }
      saveServiceInfo({srvId: service.srvId, status: service.status}).then(
        (r) => {
          this.$message({
            message: (service.status == 1 ? "启用" : "停用") + "成功",
            type: "success",
          });
          this.getList();
        }
      );
    },
    handleDelete(service) {
      const srvId = service.srvId;
      const name = service.name;
      this.$modal
        .confirm('是否确认删除"' + name + '"服务的数据项？')
        .then(() => deleteService({params: {srvId: srvId}}))
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    tableRowClassName({row, rowIndex}) {
      if (row.status != 1) {
        return "warning-row";
      }
      return "";
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  margin-bottom: 10px;
}

.box ::v-deep .el-form-item {
  margin-bottom: 0;
}

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

::v-deep .el-dialog {
  position: relative;
  margin: 0 auto 0px;
  background: #ffffff;
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

::v-deep .el-dialog__body {
  // border-top: 1px solid #dcdfe6;
  max-height: 100% !important;
  min-height: 70%;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 2px;
    background-color: #ccc;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #0ae;
  }

  &::-webkit-scrollbar-track {
    background-color: #ccc;
  }
}
</style>
