<!--assetsManage/assets-->
<template>
  <el-row
    :gutter="20"
    style="height: 100%; background-color: #f2f4f6; display: flex"
  >
    <!--部门数据-->
    <el-col
      :span="3"
      :xs="24"
      style="
        margin-right: 10px;
        height: 100%;
        background-color: #fff;
        padding-top: 20px;
      "
    >
      <div class="head-container">
        <el-tree
          :data="deptOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          default-expand-all
          highlight-current
          @node-click="handleNodeClick"
        />
      </div>
    </el-col>
    <el-col :span="20" :xs="24" style="height: 100%; flex: 1">
      <div class="L-main" id="L-size-main">
        <div class="content-search" id="L-header">
          <div class="search-title">查询条件</div>
          <el-form
            :inline="true"
            ref="queryForm"
            :model="formInline"
            size="small"
            class="demo-form-inline"
          >
            <el-row :gutter="30">
              <el-col :span="8">
                <el-form-item label="系统名称：" prop="xtmc">
                  <el-input
                    v-model="formInline.xtmc"
                    placeholder="请输入系统名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="系统类型：" prop="xtlx">
                  <el-select
                    v-model="formInline.xtlx"
                    placeholder="请选择系统类型"
                  >
                    <el-option
                      v-for="dict in zc_xtlx"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="新增时间：" prop="time">
                  <el-date-picker
                    v-model="formInline.time"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="请选择"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="8">
                <el-form-item label="单位名称：" prop="dwmc">
                  <el-input
                    v-model="formInline.dwmc"
                    placeholder="请输入单位名称"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="系统状态：" prop="xtzt">
                  <el-select
                    v-model="formInline.xtzt"
                    placeholder="请选择系统状态"
                  >
                    <el-option
                      v-for="dict in zc_xtzt"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right; padding-right: 35px">
                <el-form-item
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                  "
                >
                  <el-button size="mini" @click="resetQuery">重置</el-button>
                  <el-button size="mini" type="primary" @click="handleQuery"
                    >查询</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <main>
          <div class="search-title">
            <span class="search-title-span">资产列表</span>
            <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="info"
                  plain
                  icon="Upload"
                  size="mini"
                  @click="handleImport"
                  >导入</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="Download"
                  size="mini"
                  @click="handleExport"
                  >导出</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="Plus"
                  size="mini"
                  @click="handleAdd"
                  >新增资产</el-button
                >
              </el-col>
            </el-row>
          </div>
          <section>
            <el-table
              v-loading="loading"
              :data="tableData"
              :height="tabHeader"
              :row-class-name="tableRowClassName"
              :max-height="tabHeader"
            >
              <el-table-column
                type="index"
                width="60"
                label="序号"
                align="center"
              />
              <el-table-column
                label="系统名称"
                key="xtmc"
                width="200px"
                prop="xtmc"
                align="center"
              />
              <el-table-column
                label="系统类型"
                key="xtlx"
                prop="xtlx"
                align="center"
              >
                <template #default="scope">
                  <dict-tag :options="zc_xtlx" :value="scope.row.xtlx" />
                </template>
              </el-table-column>
              <el-table-column
                label="单位名称"
                key="dwmc"
                prop="dwmc"
                align="center"
              />
              <el-table-column
                label="新增时间"
                key="createTime"
                prop="createTime"
                align="center"
              />
              <el-table-column
                label="系统状态"
                key="status"
                prop="status"
                class-name="table-status"
                align="center"
              >
                <template #default="scope">
                  <span v-if="scope.row.xtzt == 1" style="color: #16b771"
                    >已安装</span
                  >
                  <span v-if="scope.row.xtzt == 2" style="color: #f58a0c"
                    >测试中</span
                  >
                  <span v-if="scope.row.xtzt == 3" style="color: #1485ef"
                    >使用中</span
                  >
                  <span v-if="scope.row.xtzt == 4" style="color: #29a07a"
                    >维护中</span
                  >
                  <span v-if="scope.row.xtzt == 5" style="color: #f50c0c"
                    >关停</span
                  >
                  <span v-if="scope.row.xtzt == 6" style="color: #f50c0c"
                    >备用</span
                  >
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                prop="userId"
                class-name="table-operation"
                align="center"
              >
                <template #default="scope">
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                      "
                      @click="goInfo(scope.row, 1)"
                    >
                      <img
                        src="@/assets/images/icon-ck@2x.png"
                        alt=""
                        style="width: 20px; margin-right: 5px"
                      />
                      <span
                        class="look-info"
                        style="color: #1485ef; margin-right: 15px;white-space: nowrap;"
                        >查看</span
                      >
                    </div>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                      "
                      @click="goInfo(scope.row, 2)"
                    >
                    <img
                        src="@/assets/images/edit.png"
                        alt=""
                        style="width: 15px; margin-right: 5px"
                      />
                      <span
                        class="look-info"
                        style="color: #1485ef; margin-right: 15px;white-space: nowrap;"
                        >编辑</span
                      >
                    </div>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                      "
                      @click="goInfo(scope.row, 3)"
                    >
                    <img
                        src="@/assets/images/del.png"
                        alt=""
                        style="width: 20px; margin-right: 5px"
                      />
                      <span
                        class="look-info"
                        style="color: #f50c0c; margin-right: 10px;white-space: nowrap;"
                        >删除</span
                      >
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </section>
          <my-pagination
            id="L-pagination"
            :total="total"
            :page="formInline.current"
            :limit="formInline.size"
            @pagination="getPagination"
            v-model:current-page="formInline.current"
          />
        </main>
        <!-- 资产导入对话框 -->
        <el-dialog
          v-model="upload.open"
          :title="upload.title"
          width="400px"
          append-to-body
        >
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url + '?updateSupport=' + upload.updateSupport"
            :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">
                <span>仅允许导入xls、xlsx格式文件。</span>
                <el-link
                  type="primary"
                  :underline="false"
                  style="font-size: 12px; vertical-align: baseline"
                  @click="importTemplate"
                  >下载模板</el-link
                >
              </div>
            </template>
          </el-upload>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitFileForm"
                >确 定</el-button
              >
              <el-button @click="upload.open = false">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import myPagination from "@/views/components/Pagination/index.vue";
import { getToken } from "@/utils/auth";
import { assetUnit, deleteAssetInfo, schema } from "@/api/auditPagesApi/index";
import { useDict } from "@/utils/dict";
import { ElMessage, ElMessageBox } from "element-plus";
import { View, Edit, Delete, UploadFilled } from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance();
const router = useRouter();

// 字典数据
const { zc_xtzt, zc_xtlx } = useDict("zc_xtzt", "zc_xtlx");

// 部门树选项
const deptOptions = ref();
const tree = ref(null);

const defaultProps = {
  children: "children",
  label: "label",
};

const formInline = reactive({
  xtmc: "",
  xtlx: "",
  time: [],
  startTime: "",
  endTime: "",
  dwmc: "",
  xtzt: "",
  current: 1,
  size: 20,
});

const total = ref(0);
const tableData = ref([]);
const loading = ref(false);
const tabHeader = ref();

// 用户导入参数
const upload = reactive({
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "web资产导入",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: location.origin + "/api/tc/assetCurrent/importData",
});

/** 查询部门下拉树结构 */
const getDeptTree = () => {
  schema({ type: 0 }).then((response) => {
    deptOptions.value = response.data;
  });
};

// 筛选节点
const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
};

// 节点单击事件
const handleNodeClick = (data) => {
  formInline.deptId = data.id;
  handleQuery();
};

// 获取列表
const getList = () => {
  loading.value = true;
  assetUnit("get", formInline).then((res) => {
    loading.value = false;
    total.value = res.data.total;
    tableData.value = res.data.records;
  });
};

// 重置
const resetQuery = () => {
  proxy.$refs["queryForm"].resetFields();
  formInline.deptId = undefined;
  tree.value.setCurrentKey(null);
  handleQuery();
};

// 查询
const handleQuery = () => {
  formInline.current = 1;
  formInline.size = 20;
  if (formInline.time) {
    formInline.startTime = formInline.time[0];
    formInline.endTime = formInline.time[1];
  }
  formInline.time = [];
  getList();
};

// 页码获取
const getPagination = (pages) => {
  formInline.current = pages.page;
  formInline.size = pages.limit;
  getList();
};

// 导入
const handleImport = () => {
  upload.open = true;
};

// 导出
const handleExport = () => {
  proxy.download(
    "/tc/assetCurrent/export",
    {
      ...formInline,
    },
    `web资产${new Date().getTime()}.xlsx`
  );
};

/** 下载模板操作 */
const importTemplate = () => {
  proxy.download(
    "/tc/assetCurrent/importTemplate",
    {},
    `web资产导入模板${new Date().getTime()}.xlsx`
  );
};

// 文件上传中处理
const handleFileUploadProgress = () => {
  upload.isUploading = true;
};

// 文件上传成功处理
const handleFileSuccess = (response, file, fileList) => {
  upload.open = false;
  upload.isUploading = false;
  proxy.$refs.upload.clearFiles();
  ElMessageBox.alert(
    `<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>${response.msg}</div>`,
    "导入结果",
    { dangerouslyUseHTMLString: true }
  );
  getList();
};

// 提交上传文件
const submitFileForm = () => {
  proxy.$refs.upload.submit();
};

// 新增资产
const handleAdd = () => {
  proxy.setActiveMenu("/assetsManage2/webZC");
  router.push({
    path: "/assetsManage2/webZC-info",
    query: {
      pageType: "add",
      type: 0,
      parentName: "/assetsManage2/webZC",
    },
  });
};
// 查看详情
const goInfo = (row, id) => {
  if (id === 1) {
    proxy.setActiveMenu("/assetsManage2/webZC");
    router.push({
      path: "/assetsManage2/webZC-info",
      query: {
        pageType: "look",
        type: 0,
        id: row.id,
        queryData: formInline,
      },
    });
  } else if (id === 2) {
    proxy.setActiveMenu("/assetsManage2/webZC");
    router.push({
      path: "/assetsManage2/webZC-info",
      query: {
        pageType: "change",
        type: 0,
        id: row.id,
        queryData: formInline,
        parentName: "/assetsManage2/webZC",
      },
    });
  } else if (id === 3) {
    const userIds = row.id;
    ElMessageBox.confirm(`是否确认删除用户编号为"${userIds}"的数据项？`)
      .then(() => {
        return deleteAssetInfo(userIds);
      })
      .then(() => {
        getList();
        ElMessage.success("删除成功");
      })
      .catch(() => {});
  }
};

// 修改table背景色
const tableRowClassName = ({ rowIndex }) => {
  if (rowIndex % 2 !== 0) {
    return "evenNumber-row";
  }
  return "";
};

const cancalDebounce = () => {
  const element = document.getElementById("L-size-main");
  const header = document.getElementById("L-header");
  const pagination = document.getElementById("L-pagination");
  const elementHeight = element.offsetHeight;
  const headerHeight = header.offsetHeight;
  const paginationtHeight = pagination.offsetHeight;
  tabHeader.value = elementHeight - headerHeight - paginationtHeight - 110;
};

onMounted(() => {
  if (Object.keys(router.currentRoute.value.params).length !== 0) {
    Object.assign(formInline, router.currentRoute.value.params);
  } else {
    formInline.current = 1;
    formInline.size = 20;
  }
  getList();
  getDeptTree();
  cancalDebounce();
  window.addEventListener("resize", cancalDebounce);
});

onUnmounted(() => {
  window.removeEventListener("resize", cancalDebounce);
});
</script>
<style scoped>
::v-deep(.el-input__inner) {
  line-height: 32px;
  height: 30px;
}
::v-deep(.el-select__selection) {
  line-height: 32px;
  height: 30px;
}
::v-deep(.el-form-item__content) {
  line-height: 32px;
  height: 30px;
}
::v-deep(.el-range-editor--small.el-input__wrapper) {
  line-height: 32px !important;
  height: 30px !important;
}
/* .el-select__wrapper .el-input__wrapper {
    line-height: 32px;
    height: 30px;
  } */

/* ::v-deep(.el-input__inner) {
  line-height: 32px;
}
::v-deep(.el-select) {
  line-height: 32px;
  height: 30px;
}
::v-deep(.el-select--small .el-select__wrapper .el-input__wrapper) {
  line-height: 32px;
  height: 30px;
}
::v-deep(.el-range-editor--small) {
  line-height: 32px;
  height: 30px;
}
::v-deep(.el-form-item__content) {
  justify-content: flex-end;
  line-height: 32px;
  height: 30px;
} */
</style>
