<template>
    <div class="page">
        <headNav title="搜索"></headNav>

        <div class="content">
            <div class="search">
                <van-search
                    v-model="searchValue"
                    placeholder="请输入搜索关键词"
                    input-align="center"
                    @search="searchItems"
                    @cancel="onCancel"
                />
            </div>
            <div class="list" v-if="list && list.length > 0">
                <div class="item" v-for="(item, index) in list" :key="item.id" @click="showDetail(item)">
                    <div class="info">
                        <div class="txt">
                            <div class="title">
                                <span>{{index+1}}.</span>
                                <span>{{ item.item_type == 1 ? '其他' : item.enforce_class}}</span>
                                <span v-if="item.nodeName && item.nodeName.length > 0">【{{item.nodeName}}】</span>
                            </div>
                            <div class="other">{{item.enforce_item}}</div>
                        </div>
                        <div class="txt">
                            <span class="other">{{item.enforce_content}}</span>
                        </div>
                    </div>
                    <div class="add">
                        <van-button v-if="item.job_id > 0" plain icon="edit" size="small" type="info" />
                        <van-button v-else plain icon="plus" size="small" type="info" />
                    </div>
                </div>
            </div>
            <van-empty v-else description="没有搜索到相关数据" />
        </div>

        <v-mask :showOverLay="showOverLay"></v-mask>
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue"
import { isEmpty } from '@/utils/tool'
import mask_overLay from "@/components/overLay_xy.vue"
import { Notify } from 'vant';
import BUS from '@/bus'

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
    },
	computed: {
		dailyId() {
			return this.$route.params.ID
		},
		enforceId() {
			return this.$route.params.objId
		}
	},
    data () {
        return {
            query: {
                page: 1,
                size: 1000,
            },
            showOverLay: false,
            searchValue: '',
            list: [],
            taskItems: null,
        }
    },
    mounted () {
        this.initData();
    },
    methods: {
        initData() {
            if (this.dailyId) {
                this.loadTaskData();
            }
        },
        loadTaskData() {
            this.$http.get(`/v2/api/enforce-job/${this.dailyId}`).then(res => {
                const arr = res.data && res.data.check_nodes || [];
                let items = [];
                arr.map(node => {
                    if (node.items) {
                        node.items.map(item => {
                            item.nodeName = node.node_name;
                        });
                        items = items.concat(node.items);
                    }
                });
                this.taskItems = items;
            });
        },
        onCancel() {
            this.$router.back();
        },
        checkItemCanEdit(book) {
            const res = this.taskItems.filter(item => book.id === item.item_id);
            if (res && res.length > 0) {
                book.record = JSON.parse(JSON.stringify(res[0]));
            }
        },
        searchItems() {
            const word = this.searchValue && this.searchValue.trim() || '';
            if (isEmpty(word)) {
                Notify({ type: 'warning', message: '请输入搜索关键词' });
                return
            }
            this.showOverLay = true;
            const url = `/v2/api/enforce_template_handbook/search/job/${this.dailyId}?query=enforce_item=='*${word}*'`;
            this.$http.get(url).then(res => {
                const list = res.data || [];
                list.map(item => {
                    if (item.job_id > 0 && this.taskItems) {
                        const result = this.taskItems.filter(obj => obj.id == item.job_item_id);
                        if (result.length > 0) {
                            item.nodeName = result[0].nodeName;
                        }
                    }
                    else {
                        item.nodeName = '';
                    }
                });
                this.list = list;
                this.showOverLay = false;
            })
        },
        showDetail(row) {
            const data = Object.assign({}, row);
            if (this.taskItems && this.taskItems.length > 0) {
                const res = this.taskItems.filter(item => item.id == data.job_item_id);
                if (res.length > 0) {
                    data.record = res[0];
                }
            }
            const params = {
                dailyId: this.dailyId,
                enforceId: this.enforceId,
                data: data,
            }
            this.$router.push({
                name: 'specialExecAdd',
                params
            });
            const vm = this;
            BUS.$on('updateItem', function() {
                vm.initData();
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.list {
    background-color: #FFFFFF;
    .item {
        display: flex;
        padding: 10px 0;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #F5F5F5;
        .info {
            display: flex;
            flex-direction: column;
        }
        .txt {
            margin-left: 14px;
            font-size: 14px;
            color: #565656;
            .title {
                color: #343434;
                font-size: 16px;
                font-weight: bolder;
            }
            .other {
                margin: 4px 14px;
            }
        }
        .add {
            margin-right: 14px;
        }
    }
}
</style>