<template>
    <view>
        <view class="title">
            全部
        </view>
        <block v-for="(item, index) in city" :key="index">
            <view class="cityList" @click="cityClick(item)">
                {{ item.name }}
                <image src="../../../static/img/correct.svg" v-if="id === item.id" mode=""></image>
                <image v-else-if="layer !== maxLayer" src="../../../static/img/right.svg" mode=""></image>
            </view>
        </block>
        <view class="" v-if="layer === maxLayer" style="height: 230rpx;background-color: #f6f6f6;"></view>
        <view class="btn" v-if="layer === maxLayer" @click="comfirm">
            <view class="bottombtn">
                确定
            </view>
        </view>
    </view>
</template>

<script>
    import {
        getWorktypesList
    } from '@/api/resume.js'

    export default {
        data() {
            return {
                workTypeList: [],

                choose: false,
                chooseIndex: '',
                parentId: undefined,
                parentLabel: null,
                layer: 1,
                maxLayer: 2,
                id: '',
                label: '',
                parentTwoId: '',
                parentTwoLabel: '',
                tradeId: '',
            }
        },
        computed: {
            city() {
                if (!this.workTypeList.length) return;
                if (this.parentTwoId) {
                    const parentItem = this.workTypeList.find(item => item.id == this.parentId);
                    const parentChild = parentItem.child.find(item => item.id == this.parentTwoId);
                    if (parentItem) {
                        return parentChild.child
                    }
                } else if (this.parentId) {
                    const parentItem = this.workTypeList.find(item => item.id == this.parentId);
                    if (parentItem) {
                        return parentItem.child;
                    }
                } else {
                    return this.workTypeList;
                }
            }
        },
        mounted() {
            getWorktypesList(2).then(res => {
                this.workTypeList = res.data.data;
            })
        },

        onLoad({
            tradeId,
            parentId,
            layer,
            maxLayer,
            parentLabel,
            parentTwoId,
            parentTwoLabel
        }) {
            this.parentLabel = parentLabel
            this.parentId = parentId
            this.parentTwoId = parentTwoId
            this.parentTwoLabel = parentTwoLabel
            this.tradeId = tradeId || 0
            this.layer = parseInt(layer || 1)
            this.maxLayer = parseInt(maxLayer || 2)
        },
        onShow: function() {},
        methods: {
            cityClick(item) {
                console.log('items', item, this.layer, this.maxLayer)
                if (this.layer === this.maxLayer) {
                    this.selectCity(item)
                } else {
                    switch (this.layer) {
                        case 1:
                            this.goCityInfo(item)
                            break
                        case 2:
                            this.goCityInfoTwo(item)
                            break
                    }

                }
            },
            selectCity(item) {
                this.id = item.id;
                this.label = item.name;
            },
            goCityInfoTwo(item) {
                this.twoId = item.id;
                this.twoLabel = item.name;
                uni.navigateTo({
                    url: `./skillLevel?layer=${this.layer + 1}&maxLayer=${this.maxLayer}&parentId=${this.parentId
                }&parentLabel=${this.parentLabel}&parentTwoId=${item.id}&parentTwoLabel=${item.name}`
                })
            },
            goCityInfo(item) {
                uni.navigateTo({
                    url: `./skillLevel?layer=${this.layer + 1}&maxLayer=${this.maxLayer}&parentId=${item.id}&parentLabel=${item.name}`
                })
            },
            comfirm: function() {
                if (this.id) {
                    uni.$emit('setSkill', {
                        detail: {
                            id: this.id,
                            label: this.label,
                            parentLabel: this.$route.query.parentLabel,
                            parentTwoLabel: this.$route.query.parentTwoLabel
                        },
                    })
                    uni.navigateBack({
                        delta: this.layer
                    })
                } else {
                    uni.showToast({
                        title: "请选择类别",
                        icon: "none"
                    })
                }
            },

        }
    }
</script>

<style>
    .bottombtn {
        background-color: #1B66FF;
        color: #fff;
        text-align: center;
        border-radius: 10rpx;
        font-family: PingFangSC-Medium;
        font-size: 32rpx;
        height: 90rpx;
        line-height: 90rpx;
    }

    .btn {
        background-color: #fefefe;
        width: 690rpx;
        padding: 30rpx;
        padding-bottom: 80rpx;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .cityList image {
        width: 32rpx;
        height: 32rpx;
    }

    .cityList {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #333333;
        padding: 30rpx;
        padding-left: 0;
        margin-left: 30rpx;
        width: 690rpx;
        border-bottom: 1rpx solid #dddddd;
    }

    .location {
        font-family: PingFangSC-Regular;
        font-size: 32rpx;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 30rpx;
    }

    .comfirm {
        margin-left: auto;
    }

    .location image {
        width: 40rpx;
        height: 40rpx;
    }

    .title {
        font-family: PingFangSC-Regular;
        font-size: 28rpx;
        color: #999999;
        background-color: #f6f6f6;
        padding: 30rpx;
    }

    page {
        background-color: #fefefe;
    }
</style>