jsdw_ios/QuickLocation/Section/AppRestrict/AppRestrictView.swift

//
//  AppRestrictView.swift
//  QuickLocation
//

import UIKit

final class AppRestrictView: UIView {
    let navView = BaseNavigationView(title: "应用配对库")
    let scrollView = UIScrollView()
    let contentView = UIView()
    let guideCard = UIView()
    let exampleCard = UIView()
    let listCard = UIView()
    let tableView = UITableView(frame: .zero, style: .plain)
    let addBtn = UIButton(type: .custom)

    private var tableHeightConstraint: NSLayoutConstraint?

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor(hexStr: "#FAFAFA")
        setup()
    }

    required init?(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }

    func setListVisible(_ visible: Bool, rowCount: Int, rowHeight: CGFloat = 80) {
        listCard.isHidden = !visible
        tableHeightConstraint?.constant = visible ? rowHeight * CGFloat(rowCount) : 0
        layoutIfNeeded()
    }

    private func setup() {
        addSubview(navView)
        addSubview(scrollView)
        addSubview(addBtn)
        scrollView.addSubview(contentView)

        contentView.addSubview(guideCard)
        contentView.addSubview(exampleCard)
        contentView.addSubview(listCard)
        listCard.addSubview(tableView)

        navView.layoutChain.top().edgesHorzontal().height(kNaviHeight)

        addBtn.setTitle("新增配对应用", for: .normal)
        addBtn.setTitleColor(.white, for: .normal)
        addBtn.titleLabel?.font = FontManager.boboBold(18)
        addBtn.setBackgroundImage(UIImage(named: "Common/button_bg_2"), for: .normal)
        addBtn.cornerRadius = 20
        addBtn.layoutChain
            .left(16)
            .right(16)
            .bottom(kSafeBottomMargin + 16)
            .height(56)

        scrollView.layoutChain
            .topToBottomOfView(navView)
            .edgesHorzontal()
            .bottomToTopOfView(addBtn, offset: -12)

        contentView.layoutChain
            .edges()
            .widthToView(scrollView)

        guideCard.layoutChain
            .top(12)
            .edgesHorzontal(16)

        exampleCard.layoutChain
            .topToBottomOfView(guideCard, offset: 12)
            .edgesHorzontal(16)

        listCard.layoutChain
            .topToBottomOfView(exampleCard, offset: 12)
            .edgesHorzontal(16)
            .bottom(12)

        tableView.backgroundColor = .clear
        tableView.separatorStyle = .none
        tableView.isScrollEnabled = false
        tableView.rowHeight = 80
        tableView.layoutChain.edges(all: 12)
        tableHeightConstraint = tableView.heightAnchor.constraint(equalToConstant: 0)
        tableHeightConstraint?.isActive = true

        styleCard(guideCard)
        styleCard(exampleCard)
        styleCard(listCard)
        setupGuideCard()
        setupExampleCard()
    }

    private func styleCard(_ card: UIView) {
        card.backgroundColor = .white
        card.layer.cornerRadius = 26
        card.clipsToBounds = true
    }

    private func setupGuideCard() {
        let titleLab = UILabel()
        let attr = NSMutableAttributedString(
            string: "如何配对？只需 ",
            attributes: [
                .font: UIFont.systemFont(ofSize: 14, weight: .bold),
                .foregroundColor: UIColor(hexStr: "#293445")
            ]
        )
        attr.append(NSAttributedString(
            string: "3",
            attributes: [
                .font: FontManager.boboBold(16),
                .foregroundColor: UIColor(hexStr: "#00ADFE")
            ]
        ))
        attr.append(NSAttributedString(
            string: " 步",
            attributes: [
                .font: UIFont.systemFont(ofSize: 14, weight: .bold),
                .foregroundColor: UIColor(hexStr: "#293445")
            ]
        ))
        titleLab.attributedText = attr
        guideCard.addSubview(titleLab)
        titleLab.layoutChain.top(20).left(20).right(20)

        let stepsView = PairGuideStepsView()
        guideCard.addSubview(stepsView)
        stepsView.layoutChain
            .topToBottomOfView(titleLab, offset: 20)
            .edgesHorzontal(20)
            .bottom(20)
            .height(72)
    }

    private func setupExampleCard() {
        let badge = UIView()
        badge.backgroundColor = UIColor(hexStr: "#F1FFED")
        badge.layer.cornerRadius = 8
        badge.clipsToBounds = true
        exampleCard.addSubview(badge)
        badge.layoutChain.top(10).left(10)

        let checkIcon = UIImageView(
            image: UIImage(named: "AppRestrict/pair_badge_check")?.withRenderingMode(.alwaysOriginal)
        )
        checkIcon.contentMode = .scaleAspectFit
        let badgeLab = UILabel()
        badgeLab.text = "正确示例"
        badgeLab.font = .systemFont(ofSize: 12, weight: .medium)
        badgeLab.textColor = UIColor(hexStr: "#00BB47")
        
        badge.addSubview(checkIcon)
        checkIcon.layoutChain.width(12).height(12).edgesVertical(7).left(4)
        
        badge.addSubview(badgeLab)
        badgeLab.layoutChain.leftToRightOfView(checkIcon, offset: 1).right(5).centerY()
        
        let wechatItem = AppCatalogStore.item(id: "wechat")
        let leftIcon = UIImageView()
        let rightIcon = UIImageView()
        let linkIcon = UIImageView(image: UIImage(named: "AppRestrict/pair_link_active")?.withRenderingMode(.alwaysOriginal))
        [leftIcon, rightIcon].forEach {
            $0.contentMode = .scaleAspectFill
            $0.layer.cornerRadius = 10
            $0.clipsToBounds = true
        }
        if let wechatItem {
            AppCatalogStore.setIcon(for: leftIcon, item: wechatItem)
            AppCatalogStore.setIcon(for: rightIcon, item: wechatItem)
        }
        linkIcon.contentMode = .scaleAspectFit

        let row = UIStackView(arrangedSubviews: [leftIcon, linkIcon, rightIcon])
        row.axis = .horizontal
        row.alignment = .center
        row.spacing = 12
        exampleCard.addSubview(row)
        row.layoutChain
            .top(36)
            .centerX()
            .bottom(14)
        leftIcon.layoutChain.width(50).height(50)
        rightIcon.layoutChain.width(50).height(50)
        linkIcon.layoutChain.width(35).height(25)
    }
}