<!-- 单位自主填报 -->
<template>
  <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="formInlineRef"
        :model="pagination"
        size="default"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="资产名称："
              prop="name"
            >
              <el-input
                v-model="pagination.name"
                placeholder="请输入"
                style="width: 95%;"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="审核状态："
              prop="auditState"
            >
              <el-select
                v-model="pagination.auditState"
                placeholder="请选择审核状态"
              >
                <el-option
                  label="待审核"
                  value="1"
                />
                <el-option
                  label="审核通过"
                  value="2"
                />
                <el-option
                  label="审核驳回"
                  value="3"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="6"
            style="text-align: left"
          >
            <el-form-item class="unit-form">
              <el-button @click="resetQuery('queryFrom')">重置</el-button>
              <el-button
                type="primary"
                @click="handleQuery('queryFrom')"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <main>
      <div class="search-title">
        <el-row class="mb8">
          <el-col>
            <div class="exportBtn">
              <div
                class="mybuttom"
                :class="btnShow == item.value ? 'mybuttomshow' : ''"
                v-for="(item, index) in btnArr"
                @click="xuanzelist(item)"
              >
                {{ item.label }}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <section>
        <el-table
          v-loading="loading"
          :data="tableData"
          :height="tabHeader"
          :max-height="tabHeader"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            type="index"
            width="70"
            label="序号"
            align="center"
          />
          <el-table-column
            label="资产名称"
            key="xtmc"
            prop="xtmc"
            align="center"
            v-if="btnShow == 'web'"
          />
          <el-table-column
            label="所属单位"
            key="dwmc"
            prop="dwmc"
            align="center"
            v-if="btnShow == 'web'"
          />
          <el-table-column
            label="资产名称"
            key="xcxmc"
            prop="xcxmc"
            align="center"
            v-if="btnShow == 'xcx'"
          />
          <el-table-column
            label="资产名称"
            key="gzhmc"
            prop="gzhmc"
            align="center"
            v-if="btnShow == 'gzh'"
          />
          <el-table-column
            label="资产名称"
            key="dzyxhz"
            prop="dzyxhz"
            align="center"
            v-if="btnShow == 'emil'"
          />
          <el-table-column
            label="资产名称"
            key="appName"
            prop="appName"
            align="center"
            v-if="btnShow == 'app'"
          />
          <el-table-column
            label="所属单位"
            key="ssdw"
            prop="ssdw"
            align="center"
            v-if="btnShow !== 'web'"
          />
          <el-table-column
            label="平台类型"
            key="ptlx"
            prop="ptlx"
            align="center"
            v-if="btnShow == 'gzh'"
          >
            <template #default="{ row }">
              <dict-tag
                :options="sys_ptlx_type"
                :value="row.ptlx"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="审核状态"
            key="auditState"
            width="200px"
            prop="auditState"
            class-name="table-status"
            align="center"
          >
            <template #default="{ row }">
              <span
                v-if="row.auditState == 1"
                style="color: #f58a0c"
              >
                待审核
              </span>
              <span
                v-if="row.auditState == 2"
                style="color: #16b771"
              >
                审批通过
              </span>
              <span
                v-if="row.auditState == 3"
                style="color: #f50c0c"
              >
                审批驳回
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            prop="userId"
            class-name="table-operation"
            align="center"
          >
            <template #default="{ row }">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <div
                  style="display: flex; align-items: center; cursor: pointer"
                  @click="goInfo(row)"
                >
                  <img
                    src="@/assets/images/icon-ck@2x.png"
                    alt=""
                    style="width: 20px; margin-right: 5px"
                  />
                  <span
                    class="look-info"
                    style="color: #1485ef"
                    >查看</span
                  >
                </div>
                <!--  -->
                <div
                  v-if="row.auditState == 3"
                  style="
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  @click="delInfo(row)"
                >
                  <img
                    src="@/assets/images/edit.png"
                    alt=""
                    style="width: 15px; margin-right: 5px"
                  />
                  <span
                    class="del-info"
                    style="color: #1485ef"
                    >编辑</span
                  >
                </div>
                <div
                  v-if="row.auditState == 3"
                  style="
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  @click="lookInfo(row)"
                >
                  <img
                    src="@/assets/images/icon-shenhe@2x.png"
                    alt=""
                    style="width: 15px; margin-right: 5px"
                  />
                  <span
                    class="del-info"
                    style="color: #1485ef"
                    >驳回原因</span
                  >
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <my-pagination
        id="L-pagination"
        :total="total"
        :page="pagination.current"
        :limit="pagination.size"
        @pagination="getPagination"
        :current-page.sync="pagination.current"
      ></my-pagination>
    </main>
    <!-- <my-dialog
      title="查看原因"
      ref="liebiaoDialog"
      class="taskDialogBox"
      width="40%"
    >
      <el-descriptions>
        <el-descriptions-item label="不通过原因">
          {{ chakanyuanyin }}
        </el-descriptions-item>
      </el-descriptions>
    </my-dialog> -->
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import myPagination from "@/views/components/Pagination/index.vue"
// import myDialog from "@/views/components/myDialog/index.vue"
// import danweiList from "@/views/system/user/danweiList.vue"
import {
  addassetTaskadd,
  getassetTask,
  getassetTaskid,
  assetTaskclose,
} from "@/api/renwuApi/index.js"
import {
  getAuditList,
  miniProgramsGetAuditList,
  gzhGetAuditList,
  EmailList,
  AppList,
} from "@/api/auditPagesApi/index.js"



const router = useRouter()
// 数据部分
const pagination = ref({
  current: 1,
  size: 10,
  dwmc: "",
  auditState: "",
  name: ""
})
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const tabHeader = ref(undefined)
const btnShow = ref("web")
const chakanyuanyin = ref("")
const btnArr = [
  { label: "web资产", value: "web" },
  { label: "小程序", value: "xcx" },
  { label: "公众号", value: "gzh" },
  { label: "电子邮件", value: "emil" },
  { label: "移动应用系统", value: "app" }
]

// 获取列表数据
const getInfo = (id) => {
  loading.value = true
  if (id === 1) {
    getAuditList(pagination.value).then((res) => {
      loading.value = false
      total.value = res.data.total
      tableData.value = res.data.records
    })
  } else if (id === 2) {
    miniProgramsGetAuditList(pagination.value).then((res) => {
      loading.value = false
      total.value = res.data.total
      tableData.value = res.data.records
    })
  } else if (id === 3) {
    gzhGetAuditList(pagination.value).then((res) => {
      loading.value = false
      total.value = res.data.total
      tableData.value = res.data.records
    })
  } else if (id === 4) {
    EmailList(pagination.value).then((res) => {
      loading.value = false
      total.value = res.data.total
      tableData.value = res.data.records
    })
  } else if (id === 5) {
    AppList(pagination.value).then((res) => {
      loading.value = false
      total.value = res.data.total
      tableData.value = res.data.records
    })
  }
}

// 重置查询
const resetQuery = () => {
  // 假设 resetForm 是一个工具函数或组件方法
  // resetForm("formInlineRef")
  pagination.value.current = 1
  switch (btnShow.value) {
    case "web": getInfo(1); break
    case "xcx": getInfo(2); break
    case "gzh": getInfo(3); break
    case "emil": getInfo(4); break
    case "app": getInfo(5); break
  }
}

// 查询
const handleQuery = () => {
  pagination.value.current = 1
  switch (btnShow.value) {
    case "web": getInfo(1); break
    case "xcx": getInfo(2); break
    case "gzh": getInfo(3); break
    case "emil": getInfo(4); break
    case "app": getInfo(5); break
  }
}

// 分页
const getPagination = (pages) => {
  pagination.value.current = pages.page
  pagination.value.size = pages.limit
  switch (btnShow.value) {
    case "web": getInfo(1); break
    case "xcx": getInfo(2); break
    case "gzh": getInfo(3); break
    case "emil": getInfo(4); break
    case "app": getInfo(5); break
  }
}

// 查看详情
const goInfo = (row) => {
  router.push({
    name: "assetsAuthRecord",
    query: {
      type: btnShow.value === "web" ? 0 :
            btnShow.value === "xcx" ? 1 :
            btnShow.value === "gzh" ? 2 :
            btnShow.value === "emil" ? 3 :
            btnShow.value === "app" ? 4 : 5,
      pageType: "look",
      btnShow: btnShow.value,
      id: btnShow.value === "web" ? row.currentId :
           btnShow.value === "xcx" ? row.miniId :
           btnShow.value === "gzh" ? row.accountId :
           btnShow.value === "emil" ? row.emailId :
           btnShow.value === "app" ? row.appId : null,
      name: "AssetRecord",
      queryData: pagination.value
    }
  })
}

// 编辑
const delInfo = (row) => {
  router.push({
    name: "assetsAuthRecord",
    query: {
      type: btnShow.value === "web" ? 0 :
            btnShow.value === "xcx" ? 1 :
            btnShow.value === "gzh" ? 2 :
            btnShow.value === "emil" ? 3 :
            btnShow.value === "app" ? 4 : 5,
      pageType: "change",
      btnShow: btnShow.value,
      id: btnShow.value === "web" ? row.currentId :
           btnShow.value === "xcx" ? row.miniId :
           btnShow.value === "gzh" ? row.accountId :
           btnShow.value === "emil" ? row.emailId :
           btnShow.value === "app" ? row.appId : null,
      name: "AssetRecord",
      queryData: pagination.value
    }
  })
}

// 查看驳回原因
const lookInfo = (row) => {
  chakanyuanyin.value = row.auditYy
  // liebiaoDialog.value.open()
}

// 切换tab
const xuanzelist = (item) => {
  btnShow.value = item.value
  switch (item.value) {
    case "web": getInfo(1); break
    case "xcx": getInfo(2); break
    case "gzh": getInfo(3); break
    case "emil": getInfo(4); break
    case "app": getInfo(5); break
  }
}

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

// 屏幕尺寸变化
const cancalDebounce = () => {
  const element = document.getElementById("L-size-main")
  const header = document.getElementById("L-header")
  const paginationEl = document.getElementById("L-pagination")
  const elementHeight = element?.offsetHeight || 0
  const headerHeight = header?.offsetHeight || 0
  const paginationtHeight = paginationEl?.offsetHeight || 0
  tabHeader.value = elementHeight - headerHeight - paginationtHeight - 140
}

onMounted(() => {
  window.addEventListener("resize", cancalDebounce)
  // 初始化加载数据
  getInfo(1)
})

onUnmounted(() => {
  window.removeEventListener("resize", cancalDebounce)
})
</script>

<style lang="scss" scoped>
.el-icon-s-unfold {
  font-size: 16px;
}

// ::v-deep .el-dialog__body{
//   padding-left: 80px;
// }
.el-icon-delete {
  color: #409eff;
  font-size: 16px;
  font-weight: 600;
  margin-right: 5px;
}
.exportBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.mybuttom {
  margin: 0 10px;
  display: inline-block;
  padding: 5px 20px;
  // background-color: rgba(30, 128, 235, 0.1);
  background-color: rgba(213, 225, 236, 0.1);
  border-radius: 8px;
  border: 1px solid #1e80eb;
  font-size: 14px;
  color: #1e80eb;
  font-family: Source Han Sans CN;
  cursor: pointer;

  &:hover {
    background-color: #1e80eb;
    color: #ffffff;
    border: 1px solid #1e80eb;
  }
}
.mybuttomshow {
  background-color: #1e80eb;
  color: #ffffff;
  border: 1px solid #1e80eb;
}
</style>
