<template>
    <van-form validate-first @submit="onSubmit" :show-error="false" class="popup-transfer controller">
        <van-field
            :label="'节点'"
            clickable
            :placeholder="'请选择节点'"
            clear-trigger="always"
            v-model="node_txt"
            readonly
            name="node_id"
            required
            @click="onSelect('node')"
            :rules="[{ required: true, message: '请选择节点', trigger: 'onSubmit' }]"
        >
            <template #right-icon>
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
            </template>
        </van-field>
        <van-field
            :label="'用户'"
            clickable
            readonly
            :placeholder="'请选择用户'"
            clear-trigger="always"
            v-model="user_txt"
            name="user_id"
            required
            @click="showSelectUser = true"
            :rules="[{ required: true, message: '请选择用户', trigger: 'onSubmit' }]"
        >
            <template #right-icon>
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
            </template>
        </van-field>
        <van-field
            label="备注"
            name='remarks'
            v-model="ruleForm.remarks"
            type="textarea"
            clearable
            row="5"
            :autosize=" { maxHeight: 120, minHeight: 80 }"
            :placeholder="'请输入备注'"
        />
        <van-button type="info" round native-type="submit">确认</van-button>

        <van-popup v-model="showSelect" position="bottom">
            <van-picker
                show-toolbar
                :columns="popupList"
                @confirm="onConfirm"
                :default-index="defaultIndex"
                visible-item-count="4"
                @cancel="showSelect = false"
            />
        </van-popup>

        <van-popup v-model="showSelectUser" position="bottom" style="height: 60%">
            <search class="transferSearch" @onSearch="onSearch" placeholder="请输入用户名" />
            <div class="userList">
                <template v-for="(item, index) in columnList">
                    <div class="userItem" v-show="!item.hidden" :key="index" @click="onTeacherSelect(item)">
                        <div class="userItem-title">
                            <img v-if="item.avatar" class="logo" :src="item.avatar" fit="cover" />
                            <img
                                v-else
                                class="logo"
                                src="@/assets/images/icon_teacher.png"
                                alt=""
                            />
                        </div>
                        <div class="userItem-content">
                            <div class="userItem-content-name">
                                <span>{{item.text}}</span>
                            </div>
                            <div class="userItem-content-desc">
                                <span>{{item.phone}}</span>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
            <!-- <van-picker
                show-toolbar
                :columns="popupList"
                @confirm="onConfirm"
                :default-index="defaultIndex"
                visible-item-count="4"
                @cancel="showSelect = false"
            /> -->
        </van-popup>
    </van-form>
</template>
<script>
import search from '@/components/Search.vue'
import { inversionWorkOrder } from '../api'
export default {
    name: 'transfer',
    props: ['popupForm', 'columns', 'nodeList'],
    components: { search },
    data() {
        return {
            node_txt: null,
            nodeIndex: 0,
            user_txt: null,
            userIndex: 0,
            ruleForm: {
                work_order_id: '',
                node_id: '',
                user_id: '',
                remarks: ''
            },
            showSelect: false,
            showSelectUser: false,
            popupList: [],
            popupType: null,
            defaultIndex: 0,
            columnList: []
        }
    },
    async mounted() {
        this.columnList = this.columns
        this.ruleForm = this.popupForm
        if(this.ruleForm.node_id) {
            this.nodeList.forEach(item => {
                if(item.id == this.ruleForm.node_id) {
                    this.node_txt = item.text
                }
            })
        }
    },
    methods: {
        onSearch(val) {
            this.columnList.forEach(item => {
                if(val) {
                    if(item.text.indexOf(val) != -1) {
                        item.hidden = false
                    } else {
                        item.hidden = true
                    }
                } else {
                    item.hidden = false
                }
            })
            this.$forceUpdate()
        },
        async onSubmit() {
            try {
                await inversionWorkOrder({ ...this.ruleForm })
                this.$toast('转交成功')
                this.$router.replace({
                    path: '/myApproval',
                    query: {
                        classify: this.$route.query.classify || 2
                    }
                })
            } catch {
                //
            }
        },
        onTeacherSelect(item) {
            this.ruleForm.user_id = item.id
            this.user_txt = item.text
            this.showSelectUser = false
        },
        onConfirm(value, index) {
            if(this.popupType == 'users') {
                this.userIndex = index
                this.ruleForm.user_id = value.id
                this.user_txt = value.text
            } else if(this.popupType == 'node') {
                this.nodeIndex = index
                this.ruleForm.node_id = value.id
                this.node_txt = value.text
            }
            this.showSelect = false
        },
        onSelect(type) {
            this.popupType = type
            if(type == 'users') {
                this.popupList = this.columns
                this.defaultIndex = this.userIndex
            } else if(type == 'node') {
                this.popupList = this.nodeList
                this.defaultIndex = this.nodeIndex
            }
            this.showSelect = true
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../control/controlCommon.less');
.popup-transfer {
    /deep/.van-cell {
        font-size: .14rem;
    }
    /deep/.van-button {
        width: 90%;
        margin-top: .12rem;
        margin-left: 5%;
        font-size: .16rem;
    }

    .transferSearch {
        /deep/.van-field {
            flex-direction: row;
            padding: 5px 8px 5px 0;
        }
        /deep/.van-field__value {
            padding: 0;
        }
    }

    .userList {
        height: calc(100% - 70px);
        overflow-y: auto;
        overflow-x: hidden;

        .logo {
            width: 0.42rem;
            height: 0.42rem;
            margin-right: 0.12rem;
            border-radius: 100%;
        }
        .userItem {
            padding: 0.08rem 0.15rem 0;
            display: flex;
            align-items: center;
        }
        .userItem-content-name {
            font-size: .15rem;
        }
        .userItem-content-desc {
            font-size: .12rem;
        }
    }
}
</style>