<template>
  <view class="polInfComponent">
    <view class="list-box">
      <uni-list class="content-list" v-if="isPolicyPublish === true">
        <uni-list-item class="arctile-list" v-for="(policyItem, policyIndex) in policyPublishList" :key="'arct-' + policyIndex" >
          <template v-slot:body>
            <view class="arctile-list box" style="padding:0 20rpx;" @click="toPolicy(policyItem)">
              <view class="box-left">
                <view>
                  <text class="list-title">{{ policyItem.policyTitle }}</text>
                </view>
                <view class="boxlist-down">
                  <text class="section">{{ policyItem.policySource }}</text>
                  <text class="date">{{ policyItem.updateTime.substring(0, 10) }}</text>
                </view>
              </view>
              <view>
                <image class="list-img" src="@/static/images/index/news.png"></image>
              </view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
    <uni-load-more
      v-if="loadMoreIf && policyPublishList.length > 8"
      :style="style"
      iconType="auto"
      :status="status"
      :contentText="contentText"
    />
  </view>
</template>

<script>
import { listPolicyPublish } from "@/api/lef/policyPublish";

export default {
  name: "polInfComponent",
  props: {
    pPolicyType: {
      type: Object,
    },
    policyObject: {
      type: Object,
      default: function () {
        return {
          policyType: "",
          showTotal: 8,
          loadMoreIf: true,
          loadMoreShow: true,
          polInfStyle: "",
          isReSearch: true,
        };
      },
    },
  },
  data() {
    return {
      pageWidth: 0,
      maxFontSize: 3,
      fontSizeUnit: "vw",
      isMargin: true,
      equals: false,
      isReSearch: this.policyObject.isReSearch,
      total: 0,
      loadMore: false,
      isPolicyPublish: false,
      status: "more",
      loadMoreIf: this.policyObject.loadMoreIf,
      style:
        this.policyObject.loadMoreShow === false
          ? "display: none"
          : this.policyObject.polInfStyle !== "" &&
            this.policyObject.polInfStyle !== undefined
          ? this.policyObject.polInfStyle
          : "",
      policyPublishList: [],
      queryParams: {
        policyType: this.policyObject.policyType,
        params: {
          showTotal: this.policyObject.showTotal,
        },
      },
      arctileList: [
        {
          title: "坚持把解决好“三农”问题作为全党工作重中之重",
          image: "./static/images/index/xvYhpn.jpg",
          timeIcon: "./static/images/index/xvYH7F.png",
          date: "2022-11-01",
        },
        {
          title: "农业农村部关于推进农业经营主体信贷直通车常态化服务的通知",
          image: "./static/images/index/xvY4lq.jpg",
          timeIcon: "./static/images/index/xvYH7F.png",
          date: "2022-11-03",
        },
        {
          title: "2022年农产品产地冷藏保险设施建设补贴申报要点",
          image: "./static/images/index/xvY70U.jpg",
          timeIcon: "./static/images/index/xvYH7F.png",
          date: "2022-11-04",
        },
      ],
      contentText: {
        contentdown: "查看更多",
        contentrefresh: "加载中",
        contentnomore: "暂无更多",
      },
      dictLists: {},
      polTypeTextWH: 0,
    };
  },
  computed: {
    more() {},
  },
  methods: {
    returnSet(val) {
      this.style = val.style;
      this.status = val.status;
    },
    toPolicy(policyItem) {
      this.$tab.navigateTo(
        "/pages/find/policyInformation/policyForDetails?id=" + policyItem.id
      );
    },
    getList() {
      this.status = "loading";
      listPolicyPublish(this.queryParams)
        .then((response) => {
          const rows = response.rows;
          rows.forEach((element, index) => {
            this.policyPublishList = element.list;
            if (this.policyPublishList.length > 0) {
              this.isPolicyPublish = true;
            }
            this.total = element.total;
            this.$emit("update:reTotal", this.total);
          });
          this.status =
            this.total > this.queryParams.params.showTotal ? "more" : "noMore";
        })
        .catch((err) => {
          // console.error(err);
        });
    },
    async initializeDict() {
      this.dictByType("policy_type");
    },
    dictByType(type) {
      this.getDicts(type).then((response) => {
        let dicts = [];
        for (let dict of response.data) {
          let element = {};
          element["value"] = dict.dictValue;
          element["text"] = dict.dictLabel;
          element["label"] = dict.dictLabel;
          dicts.push(element);
        }
        this.$set(this.dictLists, type, dicts);
      });
    },
  },
  watch: {
    policyObject: {
      handler: function (val) {
        this.$set(this.queryParams.params, "showTotal", val.showTotal);
        this.$set(this.queryParams, "policyType", val.policyType);
        this.$set(this.queryParams, "policyType", val.policyType);
        this.loadMoreIf = this.policyObject.loadMoreIf;
        this.style =
          this.policyObject.loadMoreShow === false ? "display: none" : "";
        if (val.showTotal < this.total) {
          this.getList();
        } else if (
          val.showTotal === this.total &&
          (!this.equals || this.isReSearch)
        ) {
          this.getList();
          this.equals = true;
        }
      },
      deep: true,
    },
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.getList();
    this.initializeDict();
    this.$nextTick(function () {
      let dimLimitPageWidth = 0;
      let dimLimit = 0;
      let dimLimitUnit = "";
      let dimLimisMargin = true;
      let DpolTypeTextWH = 0;
      let dimLimitDom = uni.createSelectorQuery().select(".uni-list");
      dimLimitDom
        .fields({ size: true }, (data) => {
          dimLimitPageWidth = data.width;
          dimLimit = data.width > 800 ? 23 : 3;
          dimLimitUnit = data.width > 800 ? "px" : "vw";
          dimLimisMargin = data.width > 800 ? false : true;
        })
        .exec();
      let policyTypeText = uni.createSelectorQuery().select(".list-img");
      policyTypeText
        .fields({ size: true }, (data) => {
          DpolTypeTextWH = data.width;
        })
        .exec();
      this.polTypeTextWH = DpolTypeTextWH;
      this.pageWidth = dimLimitPageWidth;
      this.maxFontSize = dimLimit;
      this.fontSizeUnit = dimLimitUnit;
      this.isMargin = dimLimisMargin;
    });
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.polInfComponent {
  background-color: white;
  height: calc(100%);
}

.list-box {
  display: -webkit-flex;
  display: flex;
  // margin-top: 15rpx;

  /deep/.content-list {
    width: 100vw;

    .uni-list-item__container {
      padding: 30rpx 0px;
    }

    .arctile-list {
      width: 100%;
      // height: 20vw;

      .box-left {
	   width: 100%;
	   flex-direction: column;
	   justify-content: space-around;
	   height: 80px;
	   float: left;
	   display: flex;
	   margin-right: 20px;
      }

      .list-img {
        // width: 16vw;
        // height: 12.12vw;
        float: left;
        // margin-left: 2vw;
        // margin-right: 2vw;
        // margin-top: 4vw;
		width:200rpx;
		height:150rpx;
      }
    }
  }
}
.arctile-list {
  margin-top: 0rpx;
}
.list-title {
  width: 100%;
  height: auto;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.boxlist-down {
  margin-top: 40rpx;
  // padding-top: calc(1rem - 1vh);
  // position:
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size:24rpx;
}
.dot {
  // position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: #67c23a;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  // margin-top: 12rpx;
}
.list-time {
  width: 32rpx;
  height: 32rpx;
  float: left;
  margin-left: 24rpx;
  // margin-top: 8rpx;
}
.policy_type-tag {
  float: right;
  width: 16vw;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 8rpx;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: flex;
  padding: 0px;
}
.policy_type-text {
  white-space: nowrap;
  font-size: var(--max-font-size);
  transform: scale(var(--policy_type-text-scale));
  padding: 0px;
  margin: 0px;
}
.policy_type-text-margin {
  background: unset !important;
  background-color: #e8f4ff !important;
}
.section{
	color:#4892fd;
}
.date {
  // position: absolute;
  // position: absolute;
  color: #999;
  padding-left: 10rpx;
  // margin-top: 8rpx;
  // padding-top: 8rpx;
  font-size: 24rpx;
  line-height: 30rpx;
}
.box{
	display: flex;
	justify-content: space-between;
}
</style>
