<script setup lang="ts">
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
import type { UploadProps, UploadUserFile } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import excelIcon from "@/assets/home/excel_icon.svg?component";
import exportIcon from "@/assets/home/export_icon.svg?component";
import emptyIcon from "@/assets/home/empty_icon.png";
import { AccountChartBar, AccountChartPie } from "./components";

defineOptions({
  name: "Welcome"
});
const textarea = ref("");
const activeName = ref("1");
const inputValue = ref("");
const checkedValue = ref(false);
const checkAll = ref(false);

const format = percentage => (percentage === 100 ? "分析完成" : "数据分析中");
const fileList = ref<UploadUserFile[]>([
  {
    name: "food.jpeg",
    url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
  }
]);

const handleChange: UploadProps["onChange"] = (uploadFile, uploadFiles) => {
  fileList.value = fileList.value.slice(-3);
};
const handleChangeCollapse = (val: string) => {
  console.log(val);
  activeName.value = val;
};
const handleCheckAllChange = (val: boolean) => {
  console.log(val);
};
const barChartData = [
  {
    requireData: [2101, 5288, 4239, 4962, 6752, 5208, 7450],
    questionData: [2216, 1148, 1255, 1788, 4821, 1973, 4379]
  },
  {
    requireData: [2101, 3280, 4400, 4962, 5752, 6889, 7600],
    questionData: [2116, 3148, 3255, 3788, 4821, 4970, 5390]
  }
];
const pageNum = ref(3);
</script>

<template>
  <div class="home-page">
    <div v-if="pageNum === 1" class="home-page-type">
      <div class="home-page-type-title">欢迎使用智能情报分析系统</div>
      <div class="home-page-type-tip">请上传需要分析的文件</div>
      <div class="home-page-type-upload">
        <el-upload
          class="upload-box"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        >
          <div>
            <img src="@/assets/home/data_template.png" />
          </div>
          <div class="mt-14 mb-5">
            <img src="@/assets/home/Data_template_btn.png" />
          </div>
          <div class="el-upload__text"><em>点击上传</em>或拖拽支持的文件</div>
        </el-upload>
        <el-upload
          class="upload-box"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        >
          <div>
            <img src="@/assets/home/OCR_template.png" />
          </div>
          <div class="mt-14 mb-5">
            <img src="@/assets/home/OCR_template_btn.png" />
          </div>
          <div class="el-upload__text"><em>点击上传</em>或拖拽支持的文件</div>
        </el-upload>
      </div>
      <div class="home-page-type-footer">
        上传资金明细数据请确保有如下信息的表头:交易卡号、交易账号、交易证件号码、交易户名、交易日期、交易金额、交易余额、收付标志、对手户名、对手账号、对手卡号、对手开户银行、摘要说明、IP地址、MAC地址、备注、案件编号，且已将交易证件号码补充完整。
      </div>
    </div>
    <div v-else-if="pageNum === 2">
      <div class="home-page-analysis">
        <div class="analysis-box">
          <div class="analysis-box-top">
            <div class="analysis-box-top-left">
              <div class="mr-3">
                <component :is="toRaw(excelIcon)" />
              </div>
              <div class="analysis-box-top-file-name">
                当前文件：<span>{{ fileList[0].name }}</span>
              </div>
            </div>
            <div class="analysis-box-top-right">
              <el-upload
                v-model:file-list="fileList"
                :show-file-list="false"
                class="upload-btn"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                :limit="1"
                :on-change="handleChange"
              >
                <el-button type="primary" color="#5070F2" plain
                  >上传文件</el-button
                >
              </el-upload>
            </div>
          </div>
          <div class="analysis-box-middle">
            <div class="mr-3">
              <el-input
                v-model="textarea"
                style="width: 1263px"
                :autosize="{ minRows: 1, maxRows: 4 }"
                type="textarea"
                placeholder="请输入证件号进行分析"
              />
            </div>
            <div>
              <el-button type="primary" color="#5070F2">开始分析</el-button>
            </div>
          </div>
          <div class="analysis-box-bottom">
            可输入单个证件号码进行分析，若需分析多个主体，请将证件号码用“|”隔开
          </div>
          <div class="analysis-box-icon">
            <img src="@/assets/home/analysis_icon.png" />
          </div>
        </div>
      </div>
    </div>
    <div v-else class="home-page-result">
      <div class="home-page-result-top">
        <el-collapse
          v-model="activeName"
          accordion
          @change="handleChangeCollapse"
        >
          <el-collapse-item name="1">
            <template #title>
              <div class="collapse-header">
                <div class="collapse-header-left">
                  <div class="mr-3">
                    <component :is="toRaw(excelIcon)" />
                  </div>
                  <div class="collapse-header-file-name">
                    当前文件：<span>{{ fileList[0].name }}</span>
                  </div>
                  <div class="collapse-header-top-right">
                    <el-upload
                      v-model:file-list="fileList"
                      :show-file-list="false"
                      class="upload-btn"
                      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                      :limit="1"
                      :on-change="handleChange"
                    >
                      <el-button
                        type="primary"
                        color="#5070F2"
                        class="w[100px] h-8"
                        plain
                        @click.stop="
                          () => {
                            console.log('111');
                          }
                        "
                        >上传文件</el-button
                      >
                    </el-upload>
                  </div>
                </div>
                <div class="collapse-header-right">
                  {{ activeName === "1" ? "收起文件" : "展开文件" }}
                </div>
              </div>
            </template>
            <div class="collapse-box">
              <div class="collapse-box-middle">
                <div class="mr-3">
                  <el-input
                    v-model="textarea"
                    style="width: 1263px"
                    :autosize="{ minRows: 1, maxRows: 4 }"
                    type="textarea"
                    placeholder="请输入证件号进行分析"
                  />
                </div>
                <div>
                  <el-button type="primary" color="#5070F2">开始分析</el-button>
                </div>
              </div>
              <div class="collapse-box-bottom">
                可输入单个证件号码进行分析，若需分析多个主体，请将证件号码用“|”隔开
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="home-page-result-middle">
        <div class="home-page-result-content">
          <div class="home-page-result-content-left">
            <div class="home-page-result-content-left-top">
              <el-input
                v-model="inputValue"
                size="large"
                class="border-0"
                placeholder="搜索"
                :prefix-icon="Search"
              />
            </div>
            <div class="home-page-result-content-left-middle">
              <div class="result-content-left-middle-box">
                <el-checkbox v-model="checkedValue" />
                <div class="left-middle-box">
                  <div class="w[48px] h[48px] mr-3">
                    <img src="@/assets/home/resultDefaultAvatar.png" />
                  </div>
                  <div class="flex-1 left-middle-box-bottom">
                    <img src="@/assets/home/data_analysis.gif" />
                    <span>数据分析中...</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="home-page-result-content-left-bottom">
              <div>
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">
                  全选
                </el-checkbox>
              </div>
              <el-button
                link
                class="result-content-left-bottom-btn"
                :icon="exportIcon"
                >导出已分析文件</el-button
              >
            </div>
          </div>
          <div class="home-page-result-content-right">
            <div class="home-page-result-content-right-header">
              <el-button type="primary" color="#5070F2">查看文档</el-button>
            </div>
            <div class="home-page-result-content-right-content">
              <el-empty
                v-if="false"
                :image="emptyIcon"
                :image-size="372"
                description="资金数据分析中~"
                class="mt-52"
              />
              <div v-else class="result-content-right-content-box">
                <div class="in-and-out-account-box-first">
                  <div class="account-box-first-left w-[52%] h-[370px]">
                    <AccountChartBar
                      :requireData="barChartData[0].requireData"
                      :questionData="barChartData[1].questionData"
                    />
                  </div>
                  <div class="account-box-first-right w-[47%] h-[370px]">
                    <AccountChartPie />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  background-image: url("@/assets/home/home_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.home-page-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .home-page-type-title {
    font-size: 32px;
    font-style: normal;
    font-weight: bold;
    line-height: 38px;
    color: #333;
    text-align: left;
    text-transform: none;
  }

  .home-page-type-tip {
    margin: 16px 0 32px;
    font-size: 20px;
    font-style: normal;
    // font-family: "PingFang SC";
    font-weight: 500;
    line-height: 23px;
    color: #333;
    text-align: left;
    text-transform: none;
  }

  .home-page-type-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;

    .upload-box {
      width: 710px;
      height: 360px;

      :deep(.el-upload-dragger) {
        width: 710px;
        height: 360px;
        background-color: transparent;
        background-image: url("@/assets/home/upload_bg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 14px;
      }

      .el-upload__text {
        font-size: 16px;
        font-style: normal;
        // font-family: "PingFang SC";
        font-weight: 500;
        color: #333;
        text-transform: none;

        em {
          color: #5070f2;
          text-decoration-line: underline;
        }
      }
    }

    & > :first-child {
      margin-right: 20px;
    }
  }

  .home-page-type-footer {
    width: 1440px;
    font-size: 16px;
    font-style: normal;
    // font-family: "PingFang SC";
    font-weight: 500;
    line-height: 24px;
    color: #666;
    text-align: left;
    text-transform: none;
  }
}

.home-page-analysis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;

  .analysis-box {
    position: relative;
    box-sizing: border-box;
    width: 1440px;
    height: 240px;
    padding: 64px 32px;
    margin-top: 222px;
    background: linear-gradient(180deg, #d6deff 0%, #fff 19%);
    border: 2px solid rgb(80 112 242 / 30%);
    border-radius: 12px;

    .analysis-box-top {
      display: flex;
      place-items: center center;

      .analysis-box-top-left {
        display: flex;
        place-items: center center;
        margin-right: 24px;

        .analysis-box-top-file-name {
          font-size: 16px;
          font-style: normal;
          // font-family: "PingFang SC";
          font-weight: bold;
          line-height: 19px;
          color: #666;
          text-align: left;
          text-transform: none;

          span {
            font-weight: bold;
            color: #333;
          }
        }
      }
    }

    .analysis-box-middle {
      display: flex;
      place-items: center center;
      margin: 16px 0 12px;
    }

    .analysis-box-bottom {
      font-size: 14px;
      font-style: normal;
      // font-family: "PingFang SC";
      font-weight: 500;
      line-height: 24px;
      color: #666;
      text-align: left;
      text-transform: none;
    }

    .analysis-box-icon {
      position: absolute;
      top: -70px;
      right: 0;
    }
  }
}

.home-page-result {
  width: 100%;
  height: 100%;

  .home-page-result-top {
    width: 100%;
    margin-top: 1px;
    background: #fff;

    :deep(.el-collapse-item__header) {
      box-sizing: border-box;
      height: 80px;
      padding: 24px 32px;
    }

    :deep(.el-collapse-item__arrow) {
      color: #5070f2;
    }

    .collapse-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .collapse-header-left {
        display: flex;
        align-items: center;
        justify-content: center;

        .collapse-header-file-name {
          margin-right: 24px;
          font-size: 16px;
          font-style: normal;
          // font-family: "PingFang SC";
          font-weight: bold;
          line-height: 19px;
          color: #666;
          text-align: left;
          text-transform: none;

          span {
            font-weight: bold;
            color: #333;
          }
        }
      }

      .collapse-header-right {
        margin-right: 8px;
        font-size: 16px;
        font-style: normal;
        // font-family: "PingFang SC";
        font-weight: 500;
        line-height: 19px;
        color: #5070f2;
        text-align: left;
        text-transform: none;
      }
    }

    .collapse-box {
      box-sizing: border-box;
      padding: 0 32px;

      .collapse-box-middle {
        display: flex;
        place-items: center center;
        margin-bottom: 8px;
      }

      .collapse-box-bottom {
        font-size: 14px;
        font-style: normal;
        // font-family: "PingFang SC";
        font-weight: 500;
        line-height: 24px;
        color: #666;
        text-align: left;
        text-transform: none;
      }
    }
  }

  .home-page-result-middle {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - 170px);
    padding: 20px 32px 24px;

    .home-page-result-content {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background: #fff;
      border-radius: 8px;

      .home-page-result-content-left {
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 340px;
        height: 100%;
        border-radius: 8px 0 0 8px;
        box-shadow: 1px 0 0 0 #dcdcdc;

        .home-page-result-content-left-top {
          width: 100%;
          height: 40px;

          :deep(.el-input__wrapper) {
            border: none !important; /* 使用 !important 来确保覆盖默认样式 */
            box-shadow: none !important;
          }
        }

        .home-page-result-content-left-middle {
          box-sizing: border-box;
          flex: 1;
          width: 100%;
          padding: 16px;

          .result-content-left-middle-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 86px;

            .left-middle-box {
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 282px;
              height: 100%;
              padding: 0 16px;
              background: #eef1fe;
              border: 1px solid #5070f2;
              border-radius: 4px;

              .left-middle-box-bottom {
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                  margin-left: 4px;
                  font-size: 12px;
                  font-style: normal;
                  // font-family: "PingFang SC";
                  font-weight: 500;
                  line-height: 22px;
                  color: #000;
                  text-align: left;
                  text-transform: none;
                }
              }
              // :deep(.el-progress-bar__outer) {
              // }
            }
          }
        }

        .home-page-result-content-left-bottom {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 46px;
          padding-inline: 16px;
          background: #fcfdff;
          border-radius: 0 0 8px 8px;
          box-shadow: 0 -4px 8px 0 #f1f5fe;

          .result-content-left-bottom-btn {
            color: #5070f2;
          }
        }
      }

      .home-page-result-content-right {
        flex: 1;
        width: 100%;
        height: 100%;

        .home-page-result-content-right-header {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          width: 100%;
          height: 64px;
          padding: 16px;
          background: #fcfdff;
          border-radius: 0 8px 0 0;
          box-shadow: 0 1px 0 0 #e0e0e0;
        }

        .home-page-result-content-right-content {
          box-sizing: border-box;
          width: 100%;
          height: 100%;

          :deep(.el-empty__description p) {
            font-size: 16px;
            font-style: normal;
            // font-family: " PingFang SC";
            font-weight: 500;
            line-height: 19px;
            color: #666;
            text-align: left;
            text-transform: none;
          }

          .result-content-right-content-box {
            box-sizing: border-box;
            padding: 16px 16px 24px;

            .in-and-out-account-box-first {
              display: flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              height: 370px;

              .account-box-first-left {
                background: rgb(154 174 255 / 10%);
                border-radius: 4px;
              }

              .account-box-first-right {
                background: rgb(154 174 255 / 10%);
                border-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
