<!--
 * @Description: 预警任务
 * @Author: xuch
 * @Date: 2022-08-25 14:19:18
 * @LastEditTime: 2023-09-04 16:59:20
 * @LastEditors: 曹文丽
-->
<script lang="ts" setup>
import { ref, reactive, watch, watchEffect, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import searchForm from "../../../components/sechdata/searchForm.vue";
import { getDictTypeList } from "../../../api/common";
import { getUserInfoCache } from "../../../utils/auth/user";
import {
  getWarningList,
  getInformCount,
  getInformStatusCount,
  getInformTrend,
} from "../../../api/disposal";
import { usePermissions } from "../../../composables/usePermissions";
import { handleGetIndex } from "../../../utils/tools";
import ViewDetail from "../components/viewDetail.vue";
import level_2 from "../../../assets/image/icon-arrow-2.png";
import level_1 from "../../../assets/image/icon-arrow-1.png";
import level_0 from "../../../assets/image/icon-arrow-0.png";
const { permissionsButtons } = usePermissions();
const butomData = ref([]);
const style = "width:14%";
const currentTab = ref(2);
interface UserInfo {
  userAuthentication: {
    principal: {
      roleId: number;
    };
  };
}
const userinfo: UserInfo = (getUserInfoCache() || {}) as UserInfo;
const roleid = ref(Number(userinfo.userAuthentication.principal.roleId));

const tablist = ref([
  {
    value: 2,
    img: "./resource/images/Received.png",
    name: "已收到",
    num: 0,
    color: "#677DFF",
  },
]);

// 搜索栏
const serchColumns = reactive([
  {
    key: "warningName",
    type: "input",
    label: "预警名称",
    col: 8,
  },
  {
    key: "level",
    type: "select",
    label: "预警等级",
    options: [
      {
        value: 0,
        label: "高",
      },
      {
        value: 1,
        label: "中",
      },
      {
        value: 2,
        label: "低",
      },
    ],
    col: 8,
  },
  // {
  //   key: "warningStatus",
  //   type: "select",
  //   label: "任务状态",
  //   options: [
  //     {
  //       value: 2,
  //       label: "已收到",
  //     },
  //   ],
  //   col: 8,
  // },
  {
    key: "creatorName",
    type: "input",
    label: "创建人",
    col: 8,
  },
]);

// 搜索数据
const serchformData = reactive({
  warningStatus: 2,
});
const page = ref(1);
const total = ref(5);
const pageSize = ref(20);
const tableData = ref([]);
const column: any[] = reactive([
  {
    prop: "warningName",
    label: "预警名称",
    minWidth: "160px",
    fixed: "left",
  },
  {
    prop: "warningDescribe",
    label: "预警描述",
    minWidth: "160px",
  },
  {
    prop: "levelStr",
    label: "预警等级",
    width: "110px",
  },
  {
    prop: "creatorName",
    label: "创建人",
    width: "100px",
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: "190px",
  },
  {
    prop: "issueTime",
    label: "接收时间",
    width: "190px",
  },
  {
    prop: "warningStatusStr",
    label: "状态",
    width: "110px",
  },
  {
    prop: "oparation",
    label: "操作",
    width: "80px",
    align: "center",
    buttons: [
      {
        title: "详情",
        hide: () => {
          if (butomData.value.indexOf("详情") > -1) {
            return true;
          }
        },
        eventName: function (row) {
          viewBtn(row);
        },
      },
    ],
  },
]);
const rightButtons = ref([]);

onMounted(() => {
  permissionsButtons.map((item) => {
    butomData.value.push(item.label);
  });
  search("loading");
  init();
});

watch(
  () => serchformData.warningStatus,
  () => {
    if (serchformData.warningStatus === "") {
      serchformData.warningStatus = 2;
    }
    currentTab.value = serchformData.warningStatus;
    search();
  }
);

// 初始化
const init = () => { };

// 重置
const reset = () => {
  Object.assign(serchformData, initFromData());
  search();
};
let initFromData = () => {
  page.value = 1;
  return {};
};
const tableBtnClick = (btn, row) => {
  btn.eventName(row);
};
const sizeChange = function (val: Number) {
  pageSize.value = val;
  page.value = 1;
  search();
};
const currentChange = function (val: Number) {
  page.value = val;
  search();
};
// 获取列表页demo
const search = (loading?) => {
  let data = JSON.parse(JSON.stringify(serchformData));
  data.pageSize = pageSize.value;
  data.pageNum = page.value;
  data.yaLoading = loading;
  getWarningList(data).then((res) => {
    const { code, data = {} } = res || {};
    if (code === 200) {
      data.rows &&
        data.rows.forEach((item) => {
          switch (item.level) {
            case 0:
              item.levelimg = level_0;
              item.levelhtml = `<span style="color: #D90808;">${item.levelStr}</span>`;
              break;
            case 1:
              item.levelimg = level_1;
              item.levelhtml = `<span style="color: #F18301;">${item.levelStr}</span>`;
              break;
            case 2:
              item.levelimg = level_2;
              item.levelhtml = `<span style="color: #0095FF;">${item.levelStr}</span>`;
              break;
          }
          switch (item.warningStatus) {
            case 2:
              item.color = "#FF7700";
              break;
          }
        });
      tableData.value = data.rows;
      tablist.value[0].num = total.value = data.total;
    }
  });
};

// tab页切换
const handleChangeTab = (i) => {
  serchformData.warningStatus = i;
};

const drawerProps = reactive({
  showDrawer: false,
  title: "预警任务详情",
  size: "big",
});
const drawerFormDisabled = ref(true);
const handleCloseDrawer = async (done) => {
  done();
};
const viewObj = ref({});
const viewBtn = (row) => {
  console.log(row, "]][[]]");
  drawerProps.showDrawer = true;
  let obj = {
    title: row.warningName,
    level: row.level,
    creatorName: row.creatorName, // 创建人
    createTime: row.createTime, // 创建时间
    issueTime: row.issueTime, // 下发时间
    status: row.warningStatus,
    desObj: {
      title: "预警描述",
      content: row.warningDescribe,
    },
    enterpriseList: row.enterpriseName ? row.enterpriseName.split("、") : [],
    fileList: row.fileName,
  };
  viewObj.value = obj;
};
</script>

<template>
  <div>
    <YaPageContent :formData="serchformData" :formColumns="serchColumns" :tableData="tableData" :tableColumns="column"
      searchLabelWidth="80px" templateHeight="calc(100vh - 0.7vw - 182px)" :rightButtons="rightButtons" @search="search"
      @reset="reset" @tableBtnClick="tableBtnClick" :currentPage="page" :pageSize="pageSize" :total="total"
      @sizeChange="sizeChange" @currentChange="currentChange">
      <template #pageContentTop>
        <searchForm :tablist="tablist" :style="style" :clickIndex="currentTab" @handleChangeTab="handleChangeTab">
        </searchForm>
      </template>
      <!-- icon_address -->
      <template #level="{ item }">
        <span style="display: flex; align-items: center">
          <img :src="item.levelimg" style="width: 8px; height: 8px" />
          <span style="margin-left: 5px" v-html="item.levelhtml"></span>
        </span>
      </template>
      <template #status="{ item }">
        <div class="ya-informStatus" style="">
          <span class="ya-status-icon" :style="'background:' + item.color"></span>
          <span style="margin-left: 6px">{{ item.warningStatusStr }}</span>
        </div>
      </template>
    </YaPageContent>
    <!-- 新增/编辑 -->
    <ya-drawer :drawerProps="drawerProps" :showConfirm="!drawerFormDisabled" destroy-on-close
      :before-close="handleCloseDrawer">
      <template #content>
        <ViewDetail :viewObj="viewObj" />
      </template>
    </ya-drawer>
  </div>
</template>
<style scoped lang="scss">
.ya-informStatus {
  width: 73px;
  height: 24px;
  border-radius: 12px;
  line-height: 24px;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.05);

  .ya-status-icon {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-left: 6px;
  }
}
</style>
