<template>
  <div class="staging_box">
    <div class="main_box">
      <div class="main_left">
        <div class="left_top_box">
          <div class="gzrw">工作任务 <span>1</span></div>
          <div class="tb_text">同比去年 50%</div>
        </div>
        <div class="left_bottom_box" :style="{ height: leftHeight + 'px' }">
          <div class="title">
            <img :src="getImgUrl('staging/title.png')" />
          </div>
          <ul>
            <li v-for="data in dataList" :key="data">
              <div class="top_text">
                <div class="name">{{ data.title }}</div>
                <div class="time">{{ data.time }}</div>
              </div>
              <div class="content_text">
                {{ data.content }}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="main_right">
        <div class="right_top_box">
          <ul>
            <li v-for="item in headerLx" :key="item">
              <div class="left_icon">
                <img :src="item.imgUrl" alt="" />
              </div>
              <div class="right_text">
                <div class="gzrw">
                  {{ item.name }} <span>{{ item.count }}</span>
                </div>
                <div class="tb_text" v-if="item.tip">{{ item.tip }} /</div>
              </div>
            </li>
          </ul>
        </div>
        <div class="right_bottom_box">
          <div class="title">
            <div class="left">
              <img :src="getImgUrl('staging/gznr.png')" /> 工作内容
            </div>
            <div class="right">
              <div @click="changeBtn(1)" :class="activeBtn == 1 ? 'active_bg' : ''" class="btn_text">
                国家局系统任务
              </div>
              <div @click="changeBtn(2)" :class="activeBtn == 2 ? 'active_bg' : ''" class="btn_text">
                甘肃省局系统任务
              </div>
            </div>
          </div>
          <div class="right_content">
            <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableHeight="tableHeight"
              :tableloading="tableloading">
              <template #actions="{ row }">
                <span class="operesee" @click="foundationFn(row, '1')">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  详情
                </span>
                <span class="operesee" @click="foundationFn(row, '2')">
                  <el-icon>
                    <EditPen />
                  </el-icon>
                  修改
                </span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="scsyje(scope.row)">
                  <template #reference>
                    <span class="operate" style="color: yellowgreen" size="small">删除</span>
                  </template>
                </el-popconfirm>
              </template>
              <template #fenye>
                <div class="fenye" :style="{ top: tableHeight + 'px' }">
                  <el-pagination class="pagination" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="listQuery.pageCurrent"
                    :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                    layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
                </div>
              </template>
            </MOSTY.Table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { onMounted, ref } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
const tableHeight = ref();
const leftHeight = ref();
const activeBtn = ref(1);
const headerLx = ref([
  {
    name: "事故处理",
    imgUrl: getImgUrl('staging/sgcl.png'),
    count: 0,
    tip: "同比去年"
  },
  {
    name: "安全检查",
    imgUrl: getImgUrl('staging/aqjc.png'),
    count: 0,
    tip: "同比去年"
  },
  {
    name: "专项检查",
    imgUrl: getImgUrl('staging/zxjc.png'),
    count: 0,
    tip: "同比去年"
  },
  {
    name: "待我审批",
    imgUrl: getImgUrl('staging/dwsp.png'),
    count: 0
  }
]);
const tableData = ref([]);
const tableColumns = ref([
  {
    title: "任务类型",
    prop: "rwlx"
  },
  {
    title: "任务名称",
    prop: "rwlx"
  },
  {
    title: "任务发布时间",
    prop: "rwlx"
  },
  {
    title: "反馈期限",
    prop: "rwlx"
  },
  {
    title: "状态",
    prop: "rwlx"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]);
const dataList = ref([
  {
    title: "城关区烟草专卖局（分公司）",
    time: "2025-09-31 14:23:29",
    content: "城关区烟草专卖局（分公司）生产安全事故综合应急预案"
  }
]);
onMounted(() => {
  tabHeightFn();
});
const listQuery = ref({});
const total = ref(0);
// 方法
const tabHeightFn = () => {
  leftHeight.value = window.innerHeight - 280;
  tableHeight.value = window.innerHeight - 370;
};

// 点击按钮切换显示表格
const changeBtn = (val) => {
  activeBtn.value = val;
};
</script>
<style lang="scss" scoped>
.staging_box {
  box-sizing: border-box;
  background: #eee;
  height: 100vh;

  .main_box {
    display: flex;

    .main_left {
      width: 402px;
    }

    .main_right {
      width: 76%;
    }

    .left_top_box {
      width: 100%;
      height: 150px;
      background: url("~@/assets/images/left_bg.png") no-repeat;
      background-size: 100% 100%;
      padding-left: 170px;
      padding-top: 40px;
      box-sizing: border-box;
      margin-bottom: 10px;

      .gzrw {
        font-size: 18px;
        font-weight: 500;

        span {
          font-size: 30px;
        }
      }

      .tb_text {
        margin-top: 10px;
        font-size: 16px;
      }
    }

    .left_bottom_box {
      background: #fff;
      height: calc(100vh - 26vh);

      .title {
        width: 100%;

        img {
          width: 100%;
        }
      }

      ul {
        padding: 10px;
        box-sizing: border-box;

        li {
          border: 1px solid var(--el-color-primary);
          padding: 10px;
          box-sizing: border-box;
          background: #f6fbfa;
          font-size: 12px;

          .top_text {
            display: flex;
            margin-bottom: 10px;
            justify-content: space-between;
          }

          .name {
            color: #1489d4;
          }

          .time {
            color: #878787;
          }

          .content_text {
            color: #191919;
            overflow: hidden;
            text-overflow: ellipsis; //文本溢出显示省略号
            white-space: nowrap; //文本不会换行
          }
        }
      }
    }

    .right_top_box {
      margin-left: 10px;

      ul {
        display: flex;
        color: #000;

        li {
          // width: 240px;
          width: 25%;
          height: 150px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          background: #fff;
          padding-left: 28px;
          box-sizing: border-box;
          margin-right: 30px;

          .left_icon {
            width: 70px;
            height: 62px;
            margin-right: 14px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .right_text {
            .gzrw {
              font-size: 18px;
              font-weight: 600;

              span {
                font-size: 30px;
              }
            }

            .tb_text {
              margin-top: 10px;
              font-size: 16px;
            }
          }
        }

        li:last-child {
          margin-right: 0px;
        }
      }
    }

    .right_bottom_box {
      background: #fff;
      margin: 10px 0 0 10px;

      img {
        width: 20px;
        height: 20px;
        vertical-align: bottom;
      }

      .title {
        color: #0f3916;
        padding: 10px;
        box-sizing: border-box;
        font-size: 18px;
        display: flex;
        justify-content: space-between;

        .right {
          display: flex;

          .btn_text {
            background: url("~@/assets/images/btn_bg.png") no-repeat;
            background-size: 100% 100%;
            margin-left: 10px;
            padding: 12px;
            box-sizing: border-box;
            color: #3d3d3d;
          }

          .active_bg {
            background: url("~@/assets/images/bt_active_bg.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>
