<template>
  <div class="list1">
    <el-page-header
      class="header"
      @back="$router.replace('/index')"
      :content="type + '：共搜索到' + total + '条'"
    >
    </el-page-header>

    <div class="container">
      <el-skeleton animated :loading="loading">
        <template #template>
          <div class="list">
            <div class="list__item" v-for="i in 8" :key="i">
              <el-skeleton-item
                class="list__item--name"
                variant="text"
                style="height: 36px; margin-right: 40px"
              ></el-skeleton-item>
              <div class="list__item--btn">预览</div>
            </div>
          </div>
        </template>
        <template>
          <div>
            <div class="list" v-if="list.length > 0">
              <div class="list__item" v-for="i in list" :key="i.id">
                <div
                  class="list__item--pre"
                  v-if="i.leixing == 5"
                >
                  {{ i.wenjian }}【{{ i.nianfen }}】{{ i.bianhao }}号
                </div>
                <div class="list__item--name">{{ i.biaoti }}</div>
                <div class="list__item--type" :style="{'background': ['#a8f35f','#407cbe','#bf6865','#5d53cf','#7d7e4d'][i.leixing-1]}">{{ typeFormat(i.leixing) }}</div>
                <div class="list__item--date">
                  {{ $moment(new Date(i.created_at)).format("YYYY-MM-DD") }}
                </div>
                <el-dropdown
                  trigger="click"
                  placement="bottom-start"
                  @command="open"
                >
                  <div class="list__item--btn" @click="getDetail(i)">预览</div>
                  <template #dropdown>
                    <el-dropdown-menu v-if="load">
                      <div
                        style="width: 100px; position: relative; height: 60px"
                      >
                        <Spin fix></Spin>
                      </div>
                    </el-dropdown-menu>
                    <el-dropdown-menu v-else>
                      <template v-if="uploadsList.length > 0">
                        <el-dropdown-item
                          :command="item"
                          v-for="item in uploadsList"
                        >
                          {{ item.name }}
                        </el-dropdown-item>
                      </template>
                      <template v-else>
                        <el-dropdown-item disabled> 暂无内容 </el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <div class="list__item--download">
                  <el-dropdown
                    trigger="click"
                    placement="bottom-start"
                    @command="down"
                  >
                    <i class="el-icon-download" @click="getDetail(i)"></i>
                    <template #dropdown>
                      <el-dropdown-menu v-if="load">
                        <div
                          style="width: 100px; position: relative; height: 60px"
                        >
                          <Spin fix></Spin>
                        </div>
                      </el-dropdown-menu>
                      <el-dropdown-menu v-else>
                        <template v-if="uploadsList.length > 0">
                          <el-dropdown-item
                            :command="item"
                            v-for="item in uploadsList"
                          >
                            {{ item.name }}
                          </el-dropdown-item>
                        </template>
                        <template v-else>
                          <el-dropdown-item disabled>
                            暂无内容
                          </el-dropdown-item>
                        </template>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </div>

            <el-empty v-else :image-size="200"></el-empty>
          </div>
        </template>
      </el-skeleton>

      <el-pagination
        class="page"
        background
        layout="prev, pager, next"
        :page-size.sync="$store.state.reception.select.page_size"
        :total="total"
        :current-page.sync="$store.state.reception.select.page"
        @current-change="
          (e) => {
            $store.commit('reception/SET_SELECTED', { key: 'page', value: e });
            getMaterial();
          }
        "
      >
      </el-pagination>
    </div>

    <Modal
      :width="76"
      transfer
      :z-index="6000"
      v-model="showModal"
      :footer-hide="true"
      title="预览"
    >
      <template>
        <iframe
          style="width: 100%; height: 57vh"
          :src="codeUri"
          border="0"
        ></iframe>
      </template>
    </Modal>

    <div
      class="type-select"
      :class="{ 'type-select-hidden': !isTypeSelectShow }"
    >
      <div
        v-for="item in formType"
        class="type-select__item"
        :class="{ 'type-select__item-active': isSelectedType(item) }"
        @click="typeSelect(item)"
      >
        {{ item.label }}
      </div>

      <p class="close" @click="isTypeSelectShow = !isTypeSelectShow">
        <i
          :class="
            isTypeSelectShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'
          "
        ></i>
      </p>
    </div>
  </div>
</template>

<script>
import formType from "@/const/formType";
import { download } from "@/utils/downloadRequest";
import { materials, detail } from "@/api/reception";
export default {
  data() {
    return {
      formType,
      isTypeSelectShow: true,
      codeUri: "",
      showModal: false,
      loading: false,
      list: [],
      total: 0,

      load: false,
      uploadsList: [],
    };
  },
  methods: {
    typeSelect({ value }) {
      let leixing = this.$store.state.reception.select.leixing
        ? this.$store.state.reception.select.leixing.split(",")
        : [];
      if (leixing.find((i) => i == value)) {
        leixing.splice(leixing.indexOf(leixing.find((i) => i == value)), 1);
        this.$store.commit("reception/SET_SELECTED", {
          key: "leixing",
          value: leixing.toString(),
        });
      } else {
        leixing.push(value);
        this.$store.commit("reception/SET_SELECTED", {
          key: "leixing",
          value: leixing.toString(),
        });
      }

      this.getMaterial();
    },

    async getMaterial() {
      this.loading = true;
      const res = await materials(this.$store.state.reception.select);
      this.total = res.tags.total;
      this.list = res.tags.data;
      this.loading = false;
    },

    async getDetail(i) {
      this.load = true;
      const res = await detail({
        table_name: "materials",
        id: i.id,
      });
      this.uploadsList =
        res.detail?.id_material_fujian_uploads_material_id_relation || [];
      this.load = false;
    },

    open(e) {
      this.codeUri = `http://view.ali251.langye.net:8012/onlinePreview?url=${encodeURIComponent(
        new Buffer(e.url).toString("base64")
      )}`;

      this.showModal = true;
      //window.open(`http://view.ali251.langye.net:8012/onlinePreview?url=${codeUri}`)
    },
    down(e) {
      download(e.url, "get", {}, e.name);
    },
  },
  computed: {
    isSelectedType() {
      return function ({ value }) {
        let leixing = this.$store.state.reception.select.leixing
          ? this.$store.state.reception.select.leixing.split(",")
          : [];
        return leixing.find((i) => i == value);
      };
    },

    type() {
      return this.formType
        .filter((i) =>
          (this.$store.state.reception.select.leixing
            ? this.$store.state.reception.select.leixing.split(",")
            : []
          ).find((j) => j == i.value)
        )
        .map((i) => i.label)
        .toString() || '全部文件';
    },
    typeFormat () {
      return function (leixing) {
        return this.formType.find(i => i.value === leixing)?.label
      }
    }
  },
  mounted() {
    this.getMaterial();
  },
  created() {
    window.getMaterial = this.getMaterial;
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getMaterial();
    });
  },
};
</script>

<style scoped lang="scss">
.type-select {
  border-radius: 4px;
  background: #fff;
  text-align: center;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.04));
  line-height: 3.5;
  cursor: pointer;
  transition: all 0.3s;

  transform: translateY(-50%);
  position: fixed;
  top: 50%;
  left: 16px;

  &-hidden {
    transform: translate(calc(-100% - 16px), -50%);
  }
  &__item {
    color: #333;
    font-size: 13.5px;
    font-weight: 600;
    transition: all 0.3s;

    padding: 0 4px;
    position: relative;
    &::after {
      content: "";
      height: 1px;
      background: rgba(160, 160, 160, 0.3);

      position: absolute;
      left: 8px;
      right: 8px;
      top: -0.5px;
    }
    &:hover {
      color: #fff;
      background: #4398da;
    }
    &-active {
      color: #fff;
      background: #247ec3;
    }
  }
  & > div:nth-child(1) {
    border-radius: 4px 4px 0 0;
    &::after {
      display: none;
    }
  }
  & > div:nth-last-child(2) {
    border-radius: 0 0 4px 4px;
  }

  .close {
    width: 20px;
    cursor: pointer;
    background: #fff;
    color: #333;
    box-sizing: border-box;
    font-size: 12px;
    line-height: 2;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s;

    padding: 10px 4px 10px 2px;
    transform: translate(100%, -50%);
    position: absolute;
    top: 50%;
    right: 0%;
    &:hover {
      color: #fff;
      background: #247ec3;
    }
  }
}
::v-deep .el-page-header__content {
  font-size: 15px;
}
.list1 {
  background: #f8f8f8;

  padding: 31px 18.75%;
  position: relative;
}
.header {
  background: #fff;
  box-shadow: 0 0 15px 0 rgba(130, 127, 126, 0.1);

  padding: 16px 23px 16px 22px;
  margin-bottom: 20px;
}
.container {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 15px 0 rgba(130, 127, 126, 0.1);

  padding: 24px 23px 44px 22px;
}
.list {
  &__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f8f8f8;

    padding: 11px 9px 11px 27px;
    position: relative;

    &--pre {
      font-size: 13px;
      font-weight: 500;
      color: #398ac9;

      padding-right: 10px;
      margin-right: 10px;
      position: relative;

      &::after {
        content: "";
        width: 2px;
        background: #398ac9;

        position: absolute;
        top: 2px;
        bottom: 2px;
        right: -1px;
      }
    }
    &::before {
      content: "";
      height: 6px;
      width: 6px;
      border-radius: 6px;
      background: #cad8e4;

      transform: translateY(-50%);
      position: absolute;
      left: 0;
      top: 50%;
    }
    &--name {
      font-size: 13px;
      color: #333;
      flex: 1;

      //padding-left: 10px;
    }
    &--type {
      font-size: 12px;
      padding: 2px 6px;
      color: #fff;
      border-radius: 20px;

      margin: 0 10px;
    }
    &--date {
      font-size: 13px;
      color: #999999;

      margin-right: 42px;
    }
    &--btn {
      cursor: pointer;
      font-size: 13px;
      color: #247ec3;
      border-radius: 30px;
      border: 1px solid #247ec3;
      transition: all 0.2s;

      padding: 7px 17px;
      margin-right: 23px;

      &:hover {
        color: #fff;
        background: #247ec3;
      }
    }
    &--download {
      cursor: pointer;
      & > i {
        font-size: 16px;
        color: #247ec3;

      }

      padding-right: 9px;
    }
  }
}

.page {
  display: flex;
  justify-content: center;

  margin-top: 30px;

  & ::v-deep .btn-prev,
  ::v-deep .btn-next,
  ::v-deep .el-pager > li {
    width: 39px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    border-radius: 100px;
    background: #fff;
    transition: all 0.2s;
  }

  & ::v-deep .btn-prev,
  ::v-deep .btn-next {
    background: #fff;
    border: 1px solid #e7e7e7;
  }
}
</style>
