<template>
    <div v-if="show" class="home-policy-detail">
        <policy-detail ref="policyDetail" @closed="show = false"></policy-detail>
    </div>

    <template v-else>
        <div style="background-image: url(/home-header.png)" class="home-header">
            <el-form @submit.prevent @keyup.enter="name && routeTo('/publicDomain', { name })">
                <el-form-item>
                    <el-input v-model="name" placeholder="搜索你想了解的政策">
                        <template #append>
                            <el-button link icon="search" @click="name && routeTo('/publicDomain', { name })">搜索</el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- <el-form-item label="热搜词:">
                    <el-tag type="warning">政策</el-tag>
                </el-form-item> -->
            </el-form>
        </div>

        <div class="home-content">
            <el-card class="home-container__tabs-card">
            <el-tabs class="left-tabs" v-model="params.zcLevel" tab-position="left" @tab-change="reloadTable">
                <el-tab-pane v-for="item in levelDic" :key="item" :label="item.slice(0, -1)" :name="item"></el-tab-pane>
            </el-tabs>

            <el-card shadow="never">
                <template #header>
                    <el-tabs v-model="params.inWhType" @tab-change="reloadTable">
                        <el-tab-pane v-for="item in storageTypeDic" :key="item.value" :label="item.label" :name="item.value"></el-tab-pane>
                    </el-tabs>
                </template>

                <ul v-loading="loading">
                    <li v-for="item in tableData" :key="item.id">
                        <span class="circle-icon"></span>
                        <el-text truncated @click="table_detail(item)">
                            <span>[{{ item.zcType }}]</span>
                            {{ item.name }}
                        </el-text>
                        <span class="date">{{ columnFormat(item, "createTime") }}</span>
                    </li>
                </ul>
            </el-card>
        </el-card>
        </div>
        
        <div class="home-container__domain">
            <div class="domain-title">{{ domainTitle }}</div>
            
            <div class="domain-link">
                <template v-for="zcType in typeDic" v-bind:key="zcType">
                    <el-card @click="routeTo('/publicDomain', { zcType, inWhType: params.inWhType })">{{ zcType }}</el-card>
                </template>
            </div>
        </div>

        <div class="home-fix-button-group">
            <el-button-group>
                <el-button v-for="item in fixedRouters" :key="item.path" type="primary" @click="routeTo(item.path)">
                    <template #icon>
                        <el-icon size="23">
                            <component v-if="item.meta.icon.indexOf('ep') !== -1" :is="item.meta.icon.slice(2)" />
                            <svg-icon v-if="item.meta.icon.indexOf('tjm') !== -1" :icon-class="item.meta.icon.slice(4)" />
                        </el-icon>
                    </template>
                    {{ item.label}}
                </el-button>
            </el-button-group>
        </div>
    </template>
</template>

<script>
import Share from "@/api/policy/share";
import { usePermissionStore } from "@/store/permission.js"
import { levelDic, typeDic } from "@/views/policyShare/main";
import { storageTypeDic, fixedMenus } from "./main";
import policyDetail from "./policyDetail.vue";

export default {
    components: {
        policyDetail
    },

    data() {
        return {
            levelDic, typeDic, storageTypeDic,
            name: "", // 筛选字段 -- 名称

            loading: false,
            params: {
                page: 1,
                size: 15,
                status: "done",
                zcLevel: levelDic[0],
                inWhType: storageTypeDic[0].value
            },
            tableData: [],

            show: false
        }
    },

    computed: {
        fixedRouters() {
            const router = usePermissionStore().sidebarRouters.filter(r => r.children && r.children.length == 1).map(r => r.children[0]);
            return fixedMenus.map(m => router.find(r => m.path == r.path) && Object.assign(m, router.find(r => m.path == r.path)) || null).filter(m => m);
        },

        domainTitle() {
            return storageTypeDic.find(s => s.value == this.params.inWhType).title;
        }
    },

    mounted() {
        this.reloadTable();
    },

    methods: {
        columnFormat(row, props) {
            if (props == "createTime") return row[props].split(" ")[0];
            if (props == "status") return statusDic[row[props]] || "";
            if (props == "isInWh") return whetherDic[row[props]] || "";
            return row[props];
        },

        reloadTable() {
            this.loading = true;
            Share.get(this.params).then(res => {
                this.loading = false;
                if (res.code === 200) this.tableData = res.data.records;
                else ElMessage.error(res.msg);
            }).catch(() => this.loading = false);
        },

        routeTo(path, query = {}) {
            this.$router.push({ path, query });
        },

        table_detail(row) {
            this.show = true;
            nextTick(() => this.$refs.policyDetail.setData(row));
        }
    }
}
</script>

<style lang="scss" scoped>
.home-policy-detail :deep {
  .el-page-header {
    position: static;
    width: 100%;
  }

  .tjm_card_style_custom {
    width: calc(100% - 2 * $base-padding);
    margin: $base-padding auto 0;

    .el-card__body {
      max-height: calc($base-main-height + $base-padding - 54px);
      overflow: auto;
    }
  }
}

.home-header {
  display: flex;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100% 94%;
  height: 400px;

  .el-form {
    width: 780px;
    margin: 0 auto 100px;

    .el-input {
      --el-component-size: 50px;
      --el-fill-color-light: var(--el-color-primary);
      --el-input-border-radius: 8px;

      :deep(.el-input__wrapper) {
        border: 2px solid var(--el-color-primary);
        border-right: none;
        box-shadow: 0 0;
      }

      :deep(.el-input__inner::placeholder) {
        font-weight: 500;
      }

      :deep(.el-input-group__append) {
        padding: 0 30px;
        box-shadow: 0 0;
        border: 2px solid var(--el-color-primary);
        border-left: none;
        color: #fff;

        .el-button {
          --el-button-active-color: #fff;
          display: flex;
          align-items: center;
          font-size: 16px;
        }
      }
    }
  }
}

.home-content {
  padding: 0 20px;

  .el-tabs :deep {
    .el-tabs__active-bar {
      display: none;
    }

    .el-tabs__item {
      font-size: 18px;
    }

    .el-tabs__item.is-active {
      background: var(--el-color-primary);
      color: #fff;
    }

    .el-tabs__content {
      display: none;
    }
  }

  .home-container__tabs-card > :deep(.el-card__body) {
    display: flex;
    background: #fff;

    .el-tabs.el-tabs--left {
      margin-top: 40px;

      .el-tabs__header {
        justify-content: flex-start;
        margin-right: 1px;

        .el-tabs__nav-wrap::after {
          width: 1px;
        }
      }
    }

    > .el-card {
      flex-basis: 100%;
      border: none;
      border-radius: 0;

      .el-card__header {
        padding: 0;
        border: none;

        .el-tabs.el-tabs--top .el-tabs__header {
          margin-bottom: 1px;

          .el-tabs__nav-wrap::after {
            height: 1px;
          }

          .el-tabs__item {
            padding: 0 20px;
          }
        }
      }

      .el-card__body {
        min-height: 208px;
        max-height: 308px;
        padding: 0;
        overflow: auto;
        font-family: 'Helvetica Neue', Helvetica, Arial, 'Hiragino Sans GB',
          'Hiragino Sans GB W3', 'Microsoft YaHei UI', 'Microsoft YaHei',
          'WenQuanYi Micro Hei', sans-serif;

        ul li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 14px 0 14px var(--el-card-padding);
          font-size: 16px;

          .circle-icon {
            display: inline-block;
            width: 4px;
            height: 4px;
            margin-right: 13px;
            background: #355d97;
            border-radius: 50%;
            line-height: 1;
          }

          .el-text {
            cursor: pointer;
            flex: 1;
            font-size: inherit;
            color: inherit;

            span {
              margin-right: 6px;
            }
          }

          &:hover .el-text {
            font-weight: 700;
            text-decoration: underline;
            color: var(--el-color-primary);
          }

          .date {
            margin-left: 10px;
            color: #6c7380;
          }
        }
      }
    }
  }
}

.home-container__domain {
  margin-top: 40px;
  padding: 0 20px 40px;

  .domain-title {
    position: relative;
    width: calc(100% - 40px);
    left: 20px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--el-border-color-light);
    text-align: center;
    font-size: 36px;
    font-weight: 700;

    &::after {
      content: '';
      position: absolute;
      width: 80px;
      height: 4px;
      background-color: var(--el-color-primary);
      bottom: -3px;
      left: calc(50% - 40px);
    }
  }

  .domain-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .el-card {
      flex-basis: calc((100% - 80px) / 3);
      margin-bottom: 20px;
      cursor: pointer;

      :deep(.el-card__body) {
        padding: 30px;
        text-align: center;
        font-size: 18px;
      }

      &:hover {
        --el-card-border-color: var(--el-color-primary);
        box-shadow: 0 0 20px 5px var(--el-color-primary);
      }
    }
  }
}

.home-fix-button-group {
  z-index: 999999;
  position: fixed;
  top: calc($base-navbar-height + 2 * $base-padding + 376px / 2 - 46px + 27px);
  right: 0;

  .el-button-group {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    background: var(--el-color-primary);

    .el-button {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      height: 72px;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      font-size: 14px;

      &:not(:first-child) {
        border-top: 1px solid #72bbff;
      }

      &:hover {
        background: transparent;
      }

      :deep(.el-icon + span) {
        margin-left: 0;
      }
    }
  }
}
</style>