<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="select-enineering">
                <view class="all" @click="all">全部工程</view>
                <uni-indexed-list
                    :style="{ top: showAll ? '110rpx' : '0' }"
                    :options="engineeringListFilter"
                    :showSelect="false"
                    @click="confirm"
                >
                </uni-indexed-list>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { pinyin } from 'pinyin-pro'
import { queryEngineering } from '@/common/api/engineering'

export default {
    props: {},
    data() {
        return {
            loading: false,
            engineeringList: [],
            options: {},
            showAll: true,
        }
    },
    computed: {
        engineeringListFilter() {
            let result = []
            this.engineeringList.forEach((item) => {
                let arr = pinyin(item.name[0], { toneType: 'none', type: 'array' })
                let letter = arr[0][0].toUpperCase()
                // console.log(letter)
                let index = result.findIndex((item) => item.letter === letter)
                if (index === -1) {
                    result.push({
                        letter,
                        data: [item.name],
                    })
                } else {
                    result[index].data.push(item.name)
                }
            })
            return result
        },
    },
    onLoad(options) {
        this.options = options
        this.showAll = this.options.showAll ? true : false
        this.engineeringList = uni.getStorageSync('engineeringList')
        this.userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        if (!(this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user')) {
            // 修改buttons
            // #ifdef APP-PLUS
            var webView = this.$mp.page.$getAppWebview()
            // 修改buttons
            webView.setTitleNViewButtonStyle(0, {
                width: '0',
            })
            // #endif
        }
    },
    onShow() {
        queryEngineering().then((res) => {
            this.engineeringList = res.data.sort((a, b) => {
                const nameA = a.name
                const nameB = b.name

                const isANumber = /^\d/.test(nameA)
                const isBNumber = /^\d/.test(nameB)

                if (isANumber !== isBNumber) {
                    return isANumber ? 1 : -1
                }
                return nameA.localeCompare(nameB, 'zh', { sensitivity: 'accent' })
            })
        })
    },
    onNavigationBarButtonTap(e) {
        if (this.userInfo.authorities === 'app_vip_user' || this.userInfo.authorities === 'engineering_user') {
            uni.navigateTo({
                url: `/pages/engineering/new`,
            })
        } else {
            uni.showToast({
                title: '暂无权限',
                icon: 'none',
            })
        }
    },
    methods: {
        all() {
            uni.setStorageSync('onceSelectEngineering', {
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
                id: '',
                name: '',
                userId: null,
                province: '',
                provinceName: '',
                city: '',
                cityName: '',
                description: '',
                status: '1',
            })
            uni.navigateBack()
        },
        confirm(e) {
            console.log(e)

            let engineering = this.engineeringList.find((item) => item.name === e.item.name)
            if (this.options.from === 'once') {
                // 创建项目的时候选择工程 用完即删
                uni.setStorageSync('onceSelectEngineering', engineering)
            } else {
                uni.setStorageSync('engineering', engineering)
            }
            uni.navigateBack()
        },
    },
}
</script>
<style lang="scss">
.index {
    padding: 34rpx;
}
.all {
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 50px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #dedede;
    background-color: #ffffff;
}
</style>
