import { _decorator, Component, instantiate, Node, Prefab, Sprite, SpriteFrame } from 'cc';
import { base_ui } from '../../fw/base_ui';
import { select_area_item } from './select_area_item';
import { http } from '../../http';
import { config } from '../../config';
import { area_item_data } from '../../data';
const { ccclass, property } = _decorator;

@ccclass('select_area')
export class select_area extends base_ui {
    @property(Node) btn_close:Node = null
    @property(Node) img_title:Node = null
    @property(SpriteFrame) sf_province:SpriteFrame = null
    @property(SpriteFrame) sf_city:SpriteFrame = null
    @property(Node) province_btn_node:Node = null
    @property(Node) province_btn_next:Node = null
    @property(Node) city_btn_node:Node = null
    @property(Node) city_btn_up:Node = null
    @property(Node) city_btn_true:Node = null
    @property(Node) list_content:Node = null
    @property(Prefab) list_item:Prefab = null
    @property(Node) note_info:Node = null
    private province_list = []
    private province_selected_index:number = 0
    private province_selected_data:area_item_data = null
    private city_selected_index:number = 0
    private city_selected_data:area_item_data = null
    private m_is_modified:boolean = true //是否为修改
    private m_city_cb = null

    protected start(): void {
        this.onButtonListen(this.btn_close, ()=>{
            this.closeSelf()
        })
        this.onButtonListen(this.province_btn_next, ()=>{
            this.onClickProviceNext()
        })
        this.onButtonListen(this.city_btn_up, ()=>{
            this.onClickCityUp()
        })
        this.onButtonListen(this.city_btn_true, ()=>{
            this.onClickCityTrue()
        })

        this.requestProvinceListData()
    }

    initView(is_modified:boolean, city_cb) {
        this.m_is_modified = is_modified
        this.m_city_cb = city_cb
        if(!this.m_is_modified) {
            this.btn_close.active = false
            this.note_info.active = false
        }
    }

    closeSelf() {
        this.close()
    }

    private onClickProviceNext() {
        this.img_title.getComponent(Sprite).spriteFrame = this.sf_city
        this.province_btn_node.active = false
        this.city_btn_node.active = true

        let data_list = this.province_selected_data.list
        this.reloadCityListData(data_list)
    }

    private onClickCityUp() {
        this.img_title.getComponent(Sprite).spriteFrame = this.sf_province
        this.province_btn_node.active = true
        this.city_btn_node.active = false

        this.city_selected_index = 0
        this.city_selected_data = null
        this.reloadProvinceListData(this.province_list)
    }

    private onClickCityTrue() {
        // console.log('province:',this.province_selected_data.name,'  ','city:',this.city_selected_data.name)
        if(this.m_city_cb) {
            this.m_city_cb(this,this.city_selected_data)
        }
    }

    private requestProvinceListData() {
        http.get(config.STATIC_API.regions, (err,d)=>{
            if(!err){
                let data = JSON.parse(d)
                if(data.code===config.status.SUCCESS){
                    // console.log('data=',data.content)
                    this.province_list = data.content
                    this.reloadProvinceListData(data.content)
                }
            } else{
                console.log("initData err",err)
            }
        })
    }

    private reloadProvinceListData(data_list) {
        this.list_content.removeAllChildren()
        for (let index = 0; index < data_list.length; index++) {
            const element = data_list[index]
            let item = instantiate(this.list_item)
            item.parent = this.list_content;
            
            let area_item = item.getComponent(select_area_item)
            if(this.province_selected_index == index) {
                area_item.setSelectStatus()
                this.province_selected_data = element
            } else {
                area_item.setUnselectStatus()
            }
            area_item.initView(element,index, this.onClickProvinceItem.bind(this))
        }
    }

    private onClickProvinceItem(item:select_area_item) {
        let cur_index = item.getIndex()
        if(this.province_selected_index==cur_index) {
            return
        }
        let previous_item = this.list_content.children[this.province_selected_index].getComponent(select_area_item)
        previous_item.setUnselectStatus()

        item.setSelectStatus()

        this.province_selected_index = cur_index
        this.province_selected_data = item.getData()
    }

    private reloadCityListData(data_list) {
        this.list_content.removeAllChildren()
        for (let index = 0; index < data_list.length; index++) {
            const element = data_list[index]
            let item = instantiate(this.list_item)
            item.parent = this.list_content;
            
            let area_item = item.getComponent(select_area_item)
            if(this.city_selected_index == index) {
                area_item.setSelectStatus()
                this.city_selected_data = element
            } else {
                area_item.setUnselectStatus()
            }
            area_item.initView(element,index, this.onClickCityItem.bind(this))
        }
    }

    private onClickCityItem(item:select_area_item) {
        let cur_index = item.getIndex()
        if(this.city_selected_index==cur_index) {
            return
        }

        let previous_item = this.list_content.children[this.city_selected_index].getComponent(select_area_item)
        previous_item.setUnselectStatus()

        item.setSelectStatus()

        this.city_selected_index = cur_index
        this.city_selected_data = item.getData()
    }

}