<template>
  <div class="container">
    <div class="left-tree">
      <catalogue-tree
        @callback="catalogueCallBack"
        :isCustomer="true"
        :filter="false"
        catalogueType="share"
        :defaultKey="queryParams.catalogueId"
      />
    </div>
    <div class="plate">
      <div class="breadcrumb">首页 / <span>资源目录</span></div>
      <div class="iptBox">
        <el-input
          class="ipt"
          prefix-icon="el-icon-search"
          v-model="queryParams.resName"
          placeholder="请输入资源名称"
          clearable
        ></el-input>
      </div>
      <div class="cont" v-loading="loading">
        <div
          class="contCard"
          v-for="(res, i) in list"
          :key="i"
        >
          <div class="contFlex">
            <div style="display: flex">
              <div class="contTitle">{{ res.resName }}</div>
              <el-tag color="#FFF" v-if="res.resType === 'data'">数据</el-tag>
              <el-tag
                color="#FFF"
                type="success"
                v-if="res.resType === 'service'"
                >服务</el-tag
              >
            </div>
            <!-- <apply-resource :resForm="res" @callback="callback" /> -->
          </div>
          <div class="contTime">
            <div class="contLeft">
              <div class="contImg"></div>
              <div class="contNumb">{{ res.viewCount || 0 }}</div>
            </div>
            <div class="contRight">
              <div class="contLogo"></div>
              <div class="contNumb">
                {{ parseTime(res.createTime, "{y}-{m}-{d} {h}:{i}") }}
              </div>
            </div>
          </div>
          <div class="contMes">
            <div class="contText">信息标识符</div>
            <div class="contTxt">{{ res.infoId }}</div>
          </div>
          <div class="contMes">
            <div class="contText">开放类型</div>
            <div
              class="contTxt"
              :class="res.publishType === 'open' ? 'on' : ''"
            >
              {{ getDictLabel("sys_publish_type", res.publishType) }}
            </div>
          </div>
          <div class="contMes">
            <div class="contText">发布机构</div>
            <div class="contTxt">
              {{
                getDictLabel(
                  "sys_provide_organization",
                  res.provideOrganization
                ) || ""
              }}
            </div>
          </div>
          <div class="contMes">
            <div class="contText">资源描述</div>
            <div class="contTxt">{{ res.remark }}</div>
          </div>
          <div class="detail" @click="goToDetail(res)">
            <div class="detTxt">资源详情</div>
            <div class="el-icon-arrow-right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { parseQueryParam } from "@/utils/dxp";
import CatalogueTree from "@/components/CatalogueTree";
import ApplyResource from "@/components/ApplyResource";
import { listResources } from "@/api/customer/resource";
export default {
  name: "Catalogue",
  dicts: ["sys_provide_organization", "sys_publish_type"],
  computed: {
    ...mapGetters(["token"]),
  },
  watch: {
    queryParams: {
      deep: true,
      handler(val) {
        this.getList();
      },
    },
  },
  data() {
    return {
      selectedCatalogue: [],
      treeList: [],
      queryParams: {
        catalogueId: null,
        resName: null,
      },
      loading: false,
      open: false,
      list: [],
    };
  },
  components: { CatalogueTree, ApplyResource },
  created() {
    // 获取参数
    const params = parseQueryParam(window.location.search);
    if (params.id) {
      this.queryParams.catalogueId = Number(params.id);
    } else {
      this.queryParams.catalogueId = null;
    }

    this.getList();
  },
  methods: {
    goToDetail(res) {
      this.$router.push({ path: `/customer/detail?type=${res.resType}&id=${res.id}&catalogueId=${this.queryParams.catalogueId ? this.queryParams.catalogueId : ""}&from=catalogue` })
      console.log(res);
    },
    getDictLabel(dicts, val) {
      if (this.dict.type[dicts]) {
        const dict = this.dict.type[dicts].find((p) => p.value === val);
        if (dict) {
          return dict.raw.dictLabel;
        }
      }

      return null;
    },
    catalogueCallBack(data) {
      this.queryParams.catalogueId = data.id;
      this.getList();
    },
    getList() {
      this.loading = true;
      listResources(this.queryParams).then((response) => {
        this.loading = false;
        this.list = response.data;
      });
    },
    callback() {
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  min-height: calc(100vh - 84px);

  .left-tree {
    width: 270px;
    padding: 20px;
    box-shadow: 1px 0px 25px 0px rgba(0, 0, 0, 0.04);
    overflow: hidden;
  }

  .plate {
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    min-height: 900px;
    background: #fafafa;

    .iptBox {
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
      border-radius: 4px;
      padding: 30px;
      box-sizing: border-box;
      margin: 30px 0;

      .ipt {
        width: 340px;
        height: 42px;
      }
    }

    .cont {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      flex-wrap: wrap;
      margin-left: -30px;

      .contCard {
        width: 510px;
        padding: 30px 20px 20px 20px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0px 2px 12px 0px rgba(159, 192, 255, 0.14);
        border-radius: 4px;
        margin-bottom: 30px;
        margin-left: 30px;

        &.f {
          margin-right: 0;
        }

        .contFlex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          .contTitle {
            max-width: 304px;
            height: 28px;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            margin-right: 10px;
            overflow: hidden;
          }
        }

        .contTime {
          display: flex;
          margin-bottom: 54px;

          .contLeft {
            display: flex;
            align-items: center;
            margin-right: 32px;

            .contImg {
              width: 21px;
              height: 21px;
              background: url(../../../assets/images/yj.png) center no-repeat;
              background-size: contain;
            }

            .contNumb {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              margin-left: 10px;
            }
          }

          .contRight {
            display: flex;
            align-items: center;

            .contLogo {
              width: 21px;
              height: 21px;
              background: url(../../../assets/images/sj.png) center no-repeat;
              background-size: 18px;
            }

            .contNumb {
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              margin-left: 10px;
            }
          }
        }

        .contMes {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .contText {
            width: 140px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
          }

          .contTxt {
            width: 10%;
            flex-grow: 1;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            overflow: hidden;
          }

          .contTxt.on {
            color: #00b42a;
          }

          .contTxt.No {
            color: #ff5722;
          }
        }

        .contMes:nth-last-child(1) {
          margin-bottom: 0;
        }

        .detail {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 8px 20px;
          box-sizing: border-box;
          background: #f4f8ff;
          border-radius: 2px;
          margin-top: 30px;
          cursor: pointer;

          .detTxt {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #2866ff;
          }

          .el-icon-arrow-right {
            color: #2866ff;
          }
        }
      }
    }
  }
}
</style>
