<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"
        :model="formInline"
        size="medium"
        class="demo-form-inline"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item label="任务名称：">
              <el-input
                v-model="formInline.taskName"
                placeholder="请输入"
                style="width: 95%"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="7">
            <el-form-item label="任务编号：">
              <el-input v-model="formInline.id" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="7">
            <el-form-item label="任务状态：">
              <el-select
                v-model="formInline.taskStatus"
                placeholder="请选择"
              >
                <el-option
                  label="已关闭"
                  value="0"
                >
                </el-option>
                <el-option
                  label="进行中"
                  value="1"
                >
                </el-option>
                <el-option
                  label="正常完成"
                  value="2"
                >
                </el-option>
                <el-option
                  label="超期完成"
                  value="3"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <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>
      <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="id" width="200px" prop="id" align="center" /> -->
          <el-table-column
            label="任务名称"
            key="taskName"
            prop="taskName"
            align="center"
          />
          <el-table-column
            label="任务下发时间"
            key="taskTime"
            prop="taskTime"
            align="center"
          >
            <!-- <template slot-scope="scope">
              <dict-tag :options="dict.type.project_middle_type" :value="scope.row.projectMiddleType"/>
            </template> -->
          </el-table-column>
          <el-table-column
            label="任务期限"
            key="taskDeadline"
            prop="taskDeadline"
            align="center"
          />
          <!-- <el-table-column label="任务完成时间" key="taskFinishTime" prop="taskFinishTime" align="center" /> -->
          <el-table-column
            label="任务状态"
            key="taskStatus"
            width="200px"
            prop="taskStatus"
            class-name="table-status"
            align="center"
          >
            <template #default="scope">
              <span
                v-if="scope.row.taskStatus == 0"
                style="color: #f56c6c"
              >
                已关闭
              </span>
              <span
                v-if="scope.row.taskStatus == 1"
                style="color: #e6a23c"
              >
                进行中
              </span>
              <span
                v-if="scope.row.taskStatus == 2"
                style="color: #67c23a"
              >
                正常完成
              </span>
              <span
                v-if="scope.row.taskStatus == 3"
                style="color: #67c23a"
              >
                超期完成
              </span>
              <span
                v-if="scope.row.taskStatus == 4"
                style="color: #f56c6c"
              >
                审核不通过
              </span>
              <span
                v-if="scope.row.taskStatus == 5"
                style="color: #f56c6c"
              >
                审核驳回
              </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)"
                >
                  <img
                    src="@/assets/images/icon-ck@2x.png"
                    alt=""
                    style="width: 20px; margin-right: 5px"
                  />
                  <span
                    class="look-info"
                    style="color: #1485ef; cursor: pointer"
                    >查看</span
                  >
                </div>
                <!-- v-if="scope.row.taskStatus == 1" -->
                <div
                  v-if="scope.row.taskStatus == 1 && scope.row.taskStatus != 0"
                  style="
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    margin-left: 10px;
                  "
                  @click="delInfo(scope.row)"
                >
                  <img
                    src="@/assets/images/icon-shenhe@2x.png"
                    alt=""
                    style="width: 15px; margin-right: 5px"
                  />
                  <span
                    class="del-info"
                    style="color: #1485ef; cursor: pointer"
                    >开始核查</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="新增任务" @close="importClose" ref="taskDialog" class="taskDialogBox" width="40%">
      <el-row>
        <el-col :span="18">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="ruleForm.taskName" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <el-form-item label="核查单位" prop="dwmc" class="select-box">
              <el-col :span="24">
                <el-select v-model="ruleForm.dwmc" placeholder="请选择活动区域" multiple collapse-tags> </el-select>
              </el-col>
              <el-col class="btn-box">
                <el-button type="primary" @click="addliebiao"><i class="el-icon-s-unfold"></i></el-button>
              </el-col>
            </el-form-item>
            <el-form-item label="任务期限" prop="taskDeadline">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.taskDeadline"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item class="newTask-form-item">
              <el-button @click="resetForm('ruleForm')">取消</el-button>
              <el-button type="primary" @click="submitForm('ruleForm')">发布</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </my-dialog>

    <div class="newTask-liebiao">
      <my-dialog title="单位列表" ref="liebiaoDialog" class="taskDialogBox" width="80%">
        <danweiList ref="danweiList" @adddanweilist="adddanweilist" @liebiaoClose="liebiaoClose"></danweiList>
      </my-dialog>
    </div>
    -->
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } 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 useUserStore from "@/store/modules/user";
const userStore = useUserStore();

import {
  addassetTaskadd,
  getassetTask,
  getassetTaskid,
} from "@/api/renwuApi/index";

const router = useRouter();

// 数据定义
const formInline = ref({
  name: "",
  type: "",
  time: [],
  number: "",
  status: "",
});
const pagination = ref({
  current: 1,
  size: 10,
});
const tableData = ref([]);
const loading = ref(false);
const tabHeader = ref(undefined);
const total = ref(0);

// 表单相关
const ruleForm = ref({
  taskName: "",
  dwmc: [],
  taskDeadline: "",
});
const rules = {
  taskName: [{ required: true, message: "请输入", trigger: "blur" }],
  dwmc: [{ required: true, message: "请选择", trigger: "change" }],
  taskDeadline: [{ required: true, message: "请选择日期", trigger: "change" }],
};
const tabclicklist = ref([]);

// 方法定义

// 获取列表
function getInfo() {
  loading.value = true;

  if (localStorage.getItem("ismypagination")) {
    const stored = JSON.parse(localStorage.getItem("ismypagination"));
    if (stored.isfanhui) {
      formInline.value = stored;
    }
  }
  // 判断是否是单位角色
  if (userStore.roles.length > 0 && userStore.roles.includes("unit")) {
    pagination.value.dwmc = userStore.useer?.nickName || "";
  }

  getassetTask(pagination.value).then((res) => {
    loading.value = false;
    total.value = res.data.total;
    tableData.value = res.data.records;
  });
}

// 查询
function handleQuery() {
  pagination.value = {
    current: 1,
    size: 10,
  };
  if (formInline.value.time?.length > 0) {
    formInline.value.begainTime = formInline.value.time[0];
    formInline.value.endTime = formInline.value.time[1];
  }
  Object.assign(pagination.value, formInline.value);
  formInline.value.isfanhui = false;
  localStorage.setItem("ismypagination", JSON.stringify(formInline.value));
  getInfo();
}

// 页码获取
function getPagination(pages) {
  pagination.value.current = pages.page;
  pagination.value.size = pages.limit;
  getInfo();
}

// 重置查询
function resetQuery() {
  formInline.value = {
    name: "",
    type: "",
    time: [],
    number: "",
    status: "",
  };
  pagination.value = {
    current: 1,
    size: 10,
  };
  localStorage.removeItem("ismypagination");
  getInfo();
}

// 查看详情
function goInfo(row) {
  getassetTaskid(row.id);
  router.push({
    name: "mytaskInfo",
    query: {
      pageType: "look",
      id: row.id,
      dwmc: row.dwmc,
    },
  });
}

// 开始核查
function delInfo(row) {
  console.log(row);
  router.push({
    name: "mytaskInfo",
    query: {
      pageType: "info",
      id: row.id,
      dwmc: row.dwmc,
    },
  });
}

// 修改表格背景色
function tableRowClassName({ rowIndex }) {
  return rowIndex % 2 !== 0 ? "evenNumber-row" : "";
}

// 屏幕尺寸变化
function cancalDebounce() {
  const element = document.getElementById("L-size-main");
  const header = document.getElementById("L-header");
  const paginationEl = document.getElementById("L-pagination");
  if (!element || !header || !paginationEl) return;

  const elementHeight = element.offsetHeight;
  const headerHeight = header.offsetHeight;
  const paginationtHeight = paginationEl.offsetHeight;
  tabHeader.value = elementHeight - headerHeight - paginationtHeight - 110;
}

// 生命周期
onMounted(() => {
  localStorage.removeItem("activeName");
  if (localStorage.getItem("ismypagination")) {
    if (JSON.parse(localStorage.getItem("ismypagination")).isfanhui) {
      formInline.value = JSON.parse(localStorage.getItem("ismypagination"));
      handleQuery();
    } else {
      localStorage.removeItem("ismypagination");
    }
  }
  localStorage.removeItem("ismypaginationTow");
  getInfo();
  cancalDebounce();
  window.addEventListener("resize", cancalDebounce);
});

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

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