<template>
  <div class="case-wrapper">
    <div class="wrapper-header">
      <div class="search-box">
        <el-input
          v-model="searchText"
          style="width: 300px; height: 32px"
          placeholder="搜索调查案件"
          @keyup.enter="handleSearch"
        >
          <template #append
            ><el-button @click="handleSearch"
              ><el-icon><Search color="#84888E" /></el-icon></el-button
          ></template>
        </el-input>
      </div>
      <div class="select-box">
        <el-select
          v-model="releaseTime"
          placeholder="选择发布时间"
          style="width: 120px"
        >
          <el-option
            v-for="item in releaseTimeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="wrapper-main">
      <div class="left">
        <div class="left-box1">
          <div class="left-box1-header">
            <div class="icon"></div>
            <div class="title">{{ "发布时间" }}</div>
          </div>
          <div class="left-box1-main">
            <div class="time-label">
              <el-checkbox
                v-model="allYear.selected"
                :label="allYear.name"
                size="large"
              />
            </div>
            <div
              class="time-label"
              v-for="(item, index) in surveyYearList"
              :key="index"
            >
              <el-checkbox
                v-model="item.selected"
                :label="item.name"
                size="large"
              />
            </div>
          </div>
        </div>
        <div class="left-box2">
          <div class="left-box2-header">
            <div class="icon"></div>
            <div class="title">{{ "涉及领域" }}</div>
          </div>
          <div class="left-box2-main">
            <div
              class="area-label"
              v-for="(item, index) in surveyAreaList"
              :key="index"
            >
              <el-checkbox
                v-model="item.selected"
                :label="item.name"
                size="large"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right-header">
          <div class="header-item1">{{ "调查名称" }}</div>
          <div class="header-item2">{{ "调查案号" }}</div>
          <div class="header-item3">{{ "涉及领域" }}</div>
          <div class="header-item4">{{ "案件状态" }}</div>
          <div class="header-item5">{{ "发布日期" }}</div>
        </div>
        <div class="right-main">
          <div
            class="case-item"
            v-for="(val, idx) in curSurveyInfoList"
            :key="idx"
          >
            <div class="item-box1">
              <div
                class="name"
                :class="{
                  name1: val.name === '301',
                  name2: val.name === '337',
                  name3: val.name === '232',
                }"
              >
                {{ val.name }}
              </div>
              <div class="title">{{ val.title }}</div>
            </div>
            <div class="item-box2">{{ val.num }}</div>
            <div class="item-box3">{{ val.area }}</div>
            <div class="item-box4">{{ val.status }}</div>
            <div class="item-box5">{{ val.releaseDate }}</div>
          </div>
        </div>
        <div class="right-footer">
          <div class="footer-left">
            {{ "共105项调查" }}
          </div>
          <div class="footer-right">
            <el-pagination background layout="prev, pager, next" :total="105" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";

const releaseTime = ref("近一年发布");

const releaseTimeList = ref([
  {
    label: "近半年发布",
    value: "近半年发布",
  },
  {
    label: "近一年发布",
    value: "近一年发布",
  },
  {
    label: "近两年发布",
    value: "近两年发布",
  },
  {
    label: "近三年发布",
    value: "近三年发布",
  },
  {
    label: "近五年发布",
    value: "近五年发布",
  },
]);

const allYear = {
  name: "全部时间",
  selected: true,
};

const surveyYearList = ref([
  {
    name: "2025年",
    selected: false,
  },
  {
    name: "2024年",
    selected: false,
  },
  {
    name: "2023年",
    selected: false,
  },
  {
    name: "2022年",
    selected: false,
  },
  {
    name: "2021年",
    selected: false,
  },
]);
const surveyAreaList = ref([
  {
    name: "人工智能",
    selected: false,
  },
  {
    name: "半导体/芯片",
    selected: false,
  },
  {
    name: "电子设备",
    selected: false,
  },
  {
    name: "显示技术",
    selected: false,
  },
  {
    name: "新能源",
    selected: false,
  },
  {
    name: "通信设备",
    selected: false,
  },
]);

const surveyInfoList = ref([
  {
    name: "301",
    title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备和组件",
    num: "337-TA-1393",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2025年9月1日",
  },
  {
    name: "337",
    title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
    num: "337-TA-1392",
    area: "制造业",
    status: "正在调查",
    releaseDate: "2025年8月15日",
  },
  {
    name: "301",
    title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
    num: "337-TA-1422和337-TA-1425(合并)",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2025年8月10日",
  },
  {
    name: "337",
    title: "某些光伏干线总线电缆组件及其组件",
    num: "337-TA-1438",
    area: "光伏",
    status: "正在调查",
    releaseDate: "2024年7月29日",
  },
  {
    name: "337",
    title: "某些外国制造的半导体器件、包含相同产品及其组件的组件",
    num: "337-TA-1443",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2024年7月18日",
  },
  {
    name: "301",
    title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备及其组件",
    num: "337-TA-1441",
    area: "半导体",
    status: "终止调查",
    releaseDate: "2023年7月1日",
  },
  {
    name: "337",
    title: "某些包含相同功能的无线前端模块和设备",
    num: "337-TA-1435",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2022年6月14日",
  },
  {
    name: "337",
    title:
      "用于液晶显示器的某些玻璃基板,含有相同产品的产品以及制造相同方法的玻璃基板",
    num: "337-TA-1433",
    area: "显示技术",
    status: "正在调查",
    releaseDate: "2022年6月5日",
  },
  // {
  //   name: "337",
  //   title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
  //   num: "337-TA-1422和337-TA-1425(合并)",
  //   area: "光伏",
  //   status: "终止调查",
  //   releaseDate: "2025年8月10日",
  // },
  // {
  //   name: "232",
  //   title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
  //   num: "337-TA-1392",
  //   area: "制造业",
  //   status: "终止调查",
  //   releaseDate: "2025年8月15日",
  // },
]);

const curSurveyInfoList = ref([]);

const searchText = ref("");

const handleSearch = () => {
  curSurveyInfoList.value = surveyInfoList.value.filter((item) => {
    return item.title.indexOf(searchText.value) > -1;
  });
};

watch(
  () => surveyYearList.value,
  (val) => {
    const selectedArr = val
      .filter((item) => {
        return item.selected;
      })
      .map((item) => item.name);
    let arr = [];

    selectedArr.forEach((item) => {
      let arr1 = surveyInfoList.value.filter((vall) => {
        return vall.releaseDate.indexOf(item) > -1;
      });
      arr = [...arr, ...arr1];
    });

    curSurveyInfoList.value = arr;
  },
  {
    deep: true,
  }
);

watch(
  () => surveyAreaList.value,
  (val) => {
    const selectedArr = val
      .filter((item) => {
        return item.selected;
      })
      .map((item) => item.name);
    let arr = [];

    selectedArr.forEach((item) => {
      let arr1 = surveyInfoList.value.filter((vall) => {
        return vall.area.indexOf(item) > -1 || item.indexOf(vall.area) > -1;
      });
      arr = [...arr, ...arr1];
    });

    curSurveyInfoList.value = arr;
  },
  {
    deep: true,
  }
);

onMounted(() => {
  curSurveyInfoList.value = surveyInfoList.value;
});
</script>

<style lang="scss" scoped>
.case-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  .wrapper-header {
    width: 1600px;
    height: 32px;
    margin: 16px auto;
    display: flex;
    justify-content: space-between;
    .search-box {
      width: 300px;
      display: flex;
    }
    .select-box {
      height: 32px;
      box-sizing: border-box;
    }
  }
  .wrapper-main {
    width: 1600px;
    // height: 935px;
    height: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    .left {
      width: 300px;
      height: 560px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .left-box1 {
        margin-top: 17px;
        height: 260px;
        .left-box1-header {
          display: flex;
          .icon {
            width: 8px;
            height: 16px;
            margin-top: 4px;
            border-radius: 2px 2px 0 0;
            background: rgba(10, 87, 166, 1);
          }
          .title {
            height: 2px;
            margin-left: 17px;
            color: rgba(10, 87, 166, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
          }
        }
        .left-box1-main {
          margin-top: 10px;
          .time-label {
            height: 35px;
            margin-left: 25px;
          }
        }
      }
      .left-box2 {
        margin-top: 17px;
        height: 260px;
        .left-box2-header {
          display: flex;
          .icon {
            width: 8px;
            height: 16px;
            margin-top: 4px;
            border-radius: 2px 2px 0 0;
            background: rgba(10, 87, 166, 1);
          }
          .title {
            height: 2px;
            margin-left: 17px;
            color: rgba(10, 87, 166, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
          }
        }
        .left-box2-main {
          margin-top: 10px;
          .area-label {
            height: 35px;
            margin-left: 25px;
          }
        }
      }
    }
    .right {
      margin-left: 16px;
      width: 1284px;
      // height: 896px;
      height: 780px;
      border-radius: 4px;
      box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
      background: rgba(255, 255, 255, 1);
      .right-header {
        height: 54px;
        background: rgba(59, 65, 75, 1);
        display: flex;
        .header-item1 {
          width: 500px;
          color: rgba(255, 255, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 54px;
          padding-left: 80px;
          box-sizing: border-box;
        }
        .header-item2 {
          width: 196px;
          color: rgba(255, 255, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 54px;
          padding-left: 20px;
          box-sizing: border-box;
        }
        .header-item3 {
          width: 196px;
          color: rgba(255, 255, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 54px;
          padding-left: 20px;
          box-sizing: border-box;
        }
        .header-item4 {
          width: 196px;
          color: rgba(255, 255, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 54px;
          padding-left: 20px;
          box-sizing: border-box;
        }
        .header-item5 {
          width: 196px;
          color: rgba(255, 255, 255, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 54px;
          padding-left: 20px;
          box-sizing: border-box;
        }
      }
      .right-main {
        height: 680px;
        overflow-y: auto;

        .case-item {
          display: flex;
          padding: 16px 0;
          // height: 56px;
          &:nth-child(2n) {
            background: rgba(247, 248, 249, 1);
          }
          .item-box1 {
            width: 500px;
            display: flex;
            .name {
              height: 22px;
              padding: 0 8px;
              box-sizing: border-box;
              border-radius: 4px;
              margin-left: 32px;
              margin-top: 10px;
              // display: flex;
              // align-items: center;
            }
            .name1 {
              color: rgba(250, 140, 22, 1);
              border: 1px solid rgba(255, 213, 145, 1);
              background: rgba(255, 247, 230, 1);
            }
            .name2 {
              color: rgba(10, 87, 166, 1);
              border: 1px solid rgba(145, 202, 255, 1);
              background: rgba(230, 244, 255, 1);
            }
            .name3 {
              color: rgba(114, 46, 209, 1);
              border: 1px solid rgba(211, 173, 247, 1);
              background: rgba(249, 240, 255, 1);
            }
            .title {
              margin-left: 12px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 24px;
              display: flex;
              align-items: center;
            }
          }
          .item-box2 {
            width: 196px;
            padding-left: 20px;
            box-sizing: border-box;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            display: flex;
            align-items: center;
          }
          .item-box3 {
            width: 196px;
            padding-left: 20px;
            box-sizing: border-box;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            display: flex;
            align-items: center;
          }
          .item-box4 {
            width: 196px;
            padding-left: 20px;
            box-sizing: border-box;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            display: flex;
            align-items: center;
          }
          .item-box5 {
            width: 196px;
            padding-left: 20px;
            box-sizing: border-box;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            display: flex;
            align-items: center;
          }
        }
      }
      .right-footer {
        display: flex;
        // height: 60px;
        // background: orange;
        justify-content: space-between;
        .footer-left {
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 18px;
          margin-left: 24px;
          margin-top: 6px;
        }
        .footer-right {
          margin-right: 24px;
        }
      }
    }
  }
}
</style>