import React, { useState, useEffect } from "react";
import withLayout from "@/layout";
import "./index.scss";
import { useSelector } from "react-redux";
import { ScrollView, Image } from "@tarojs/components";
import "@/assets/css/iconfont.css";
import Taro from "@tarojs/taro";
import { fetch } from "@/utils/request";
import { queryPolicyTypeList, queryPolicyList } from "@/services/policy";

const EncyItem = (props) => {
  const { city } = props

  const { item, index } = props;
  const [list, setList] = useState([]);

  useEffect(() => {
    if (item.policyTypeId) {
      getPolicyListByType(item.policyTypeId);
    }
  }, [item,city?.id]);

  const getPolicyListByType = policyTypeId => {
    queryPolicyList({ pageSize: 100, policyTypeId, cityId: city?.id }).then((res) => {
      setList(res.records);
    });
  };

  return (
    <view key={`ListItem-${index}`}>
      <view className="Title">
        <text>{index + 1 > 9 ? index + 1 : `0${index + 1}`}</text>
        <text>/{item.policyTypeName}</text>
        {/* <Image mode="heightFix" src={item.icon}></Image> */}
      </view>
      <view className="List">
        {list.map((subItem, subIndex) => (
          <view
            key={`subItem-${subIndex}`}
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/index/encyDetail/index?id=${subItem.policyId}`,
              });
            }}
          >
            <text className="Name">{subItem.subtitle}</text>
            {subItem.isHot === 1 && (
              <text className="Tips" style={{ background: "#FF0000" }}>
                {/* {subItem.tips} */}
                HOT
              </text>
            )}
            {/* {subItem.icon !== "" && (
              <Image mode="heightFix" src={subItem.icon}></Image>
            )} */}
          </view>
        ))}
      </view>
    </view>
  );
};

export default withLayout((props) => {
  const { city } = props;

  const [PageList, setPageList] = useState([]);

  const getPageList = () => {
    queryPolicyTypeList({ pageSize: 100 }).then((res) => {
      setPageList(res.records||[]);
    });
  };

  useEffect(() => {
    getPageList();
  }, []);
  return (
    <view className="Page encyclopediasOfBuyHouse">
      <ScrollView
        scroll-y={true}
        refresher-enabled={false}
        refresher-background="#fff"
      >
        <view className="PageContent">
          {PageList.map((item, index) => (
            <EncyItem city={city} item={item} key={index} index={index}></EncyItem>
          ))}
        </view>
      </ScrollView>
    </view>
  );
});
