<template>
    <div class="page">
        <headNav title="任务执行"></headNav>
        <div class="content" v-if="info">
            <van-cell-group v-if="info.enforce_obj">
                <van-cell title="单位名称" :value="info.enforce_obj_name" />
                <van-cell title="单位地址" :value="info.enforce_obj.enforce_obj_address" />
                <van-cell title="单位法人" :value="info.enforce_obj.legal_person" />
                <van-cell title="联系方式" :value="info.enforce_obj.legal_person_phone" />
            </van-cell-group>
            <van-cell-group class="mt">
                <van-cell title="下发单位" :value="info.enforce_org_name" />
                <van-cell title="编号" :value="info.job_no" />
                <van-cell title="检查时间" :value="info.start_time" />
                <van-cell title="检查类型" value="乡镇检查" />
            </van-cell-group>
            <template v-if="checkList">
                <template v-for="(group, groupIndex) in checkList">
                    <van-cell-group :key="groupIndex" :title="group.name">
                        <template v-for="item in group.childs">
                            <van-cell :key="item.id" :title="item.handBook.enforce_content" class="my">
                                <div class="items">
                                    <template v-if="item.handBook.result_options">
                                        <van-radio-group direction="horizontal" v-model="item.check_options" disabled>
                                            <van-radio v-for="(option, optionIndex) in item.handBook.result_options" :key="optionIndex" :name="option">{{option}}</van-radio>
                                        </van-radio-group>
                                    </template>
                                    <!-- <template v-if="item.handBook.other_enforce_item">
                                        <van-field v-for="(option, optionIndex) in item.handBook.other_enforce_item" :key="optionIndex" :v-model="option.v" :label="option.k" placeholder="请输入" />
                                    </template> -->
                                    <template v-for="(file, fileIndex) in item.records">
                                        <div :key="fileIndex" v-if="file.fileList && file.fileList.length > 0">
                                            <van-uploader
                                                v-model="file.fileList"
                                                :max-count="1"
                                                :deletable="false"
                                            />
                                        </div>
                                    </template>
                                </div>
                            </van-cell>
                        </template>
                    </van-cell-group>
                </template>
            </template>
            <van-cell-group v-if="otherRemark" :title="otherRemark.enforce_obj_class" class="remark">
                <div class="remark-title">其他说明</div>
                <van-field
                    v-model="otherRemark.item_content"
                    rows="2"
                    autosize
                    readonly
                    type="textarea"
                    placeholder="请输入"
                />
            </van-cell-group>
            <van-cell-group class="mt">
                <van-cell title="检查结论">
                    <van-radio-group direction="horizontal" v-model="info.enforce_result" disabled>
                        <van-radio name="PASS">合格</van-radio>
                        <van-radio name="NOT_PASS">不合格</van-radio>
                    </van-radio-group>
                </van-cell>
            </van-cell-group>
        </div>

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

<script>
import headNav from "@/components/headNav.vue";
import baiduMap from "@/components/baiduMap.vue";
import mask_overLay from "@/components/overLay_xy.vue";
import { dateFormat, isEmpty } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';
import { Dialog } from 'vant';

export default {
    components: {
        headNav,
        baiduMap,
        "v-mask": mask_overLay,
    },
    computed: {
        taskId() {
            return this.$route.params.ID
        },
        taskStart() {
            if (this.info) {
                const s = this.info.job_status;
                return s == 'TODO' || s == 'DOING' || s == 'REJECT';
            }
            return false
        }
    },
    data() {
        return {
            info: null,
            showOverLay: false,
            tipMsg: '加载中...',
            checkList: [],
            otherRemark: null,
        }
    },
    mounted() {
        if (this.taskId) {
            this.loadTaskDatas();
        }
    },
    methods: {
		handleImgUrl(imageId) {
			return handleProblemImgs(imageId);
		},
        async loadTaskDatas() {
            this.showOverLay = true;
            const res = await this.$http.get(`/v2/api/enforce-job/${this.taskId}`);
            if (res.data) {
                const obj = Object.assign({}, res.data);
                if (obj.start_time) {
                    obj.start_time = dateFormat('YYYY-mm-dd', new Date(obj.start_time));
                }
                if (obj.check_nodes) {
                    const nodes = obj.check_nodes;
                    nodes.forEach((node, nodeIndex) => {
                        node.text = node.node_name;
                        let nodeItems = [];
                        if (node.items) {
                            node.items.forEach(itemRes => {
                                let item = Object.assign({}, itemRes);
                                item.check_result = item.check_result + '';
                                item.handBook = {
                                    request: true,
                                };
                                if (item.records && item.records.length > 0) {
                                    item.records.map(record => {
                                        let pics = [];
                                        if (record.pictures) {
                                            record.pictures.split(',').map(fileId => {
                                                const url = this.handleImgUrl(fileId);
                                                pics.push({
                                                    url,
                                                    isImage: true
                                                });
                                            });
                                        }
                                        record.fileList = pics;
                                    });
                                }
                                else {
                                    item.records = [];
                                }
                                nodeItems.push(item);
                            })
                        }
                        node.items = nodeItems;
                    });
                    let arr = [];
                    const bookRes = await this.$http.get("/v2/api/enforce-handbook?page=1&size=100000&sort=sort asc&query=enforce_type==1");
                    const bookList = bookRes && bookRes.data && bookRes.data.data || [];
                    for (let index = 0; index < nodes.length; index++) {
                        const node = nodes[index];
                        if (node.items && node.items.length > 0) {
                            for (let j = 0; j < node.items.length; j++) {
                                const item = node.items[j];
                                if (item.item_type == '1') {
                                    this.otherRemark = item;
                                    node.items.splice(j, 1);
                                    j--;
                                    continue;
                                }
                                // const bookRes = await this.$http.get(`/v2/api/enforce-handbook/${item.item_id}`);
                                const bookFilter = bookList.filter(book => book.id == item.item_id);
                                if (bookFilter.length > 0) {
                                    const book = bookFilter[0];
                                    this.handleBookItem(item, book);
                                    item.handBook.request = false;
                                    item.handBook = Object.assign(item.handBook, book);
                                }
                            }
                            node.items = this.handleBookDatas(node.items);
                            arr = arr.concat(node.items);
                        }
                    }
                    this.checkList = arr;
                }
                this.info = obj;
            }
            this.showOverLay = false;

            // this.$http.get("/v2/api/enforce-handbook?page=1&size=100000&query=enforce_type==1").then(res => {
            //     console.log('res: ', res.data);
            // });
        },
        handleBookDatas(data) {
            const cls = new Set();
            data.map((item) => {
                if (item.handBook) {
                    cls.add(item.handBook.enforce_class);
                }
            });
            const list = [...cls];
            const res = [];
            const vm = this;
            list.map((item) => {
                const childs = data.filter((obj) => item === obj.handBook.enforce_class);
                const obj = {
                    id: item,
                    name: item,
                    childs: childs,
                };
                res.push(obj);
            });
            return res;
        },
        handleBookItem(result, data) {
            if (result) {
                data.check_result = result.check_result;
            }
			if (data.problems) {
				data.problems.map(item => {
					let arr = [];
					if (item.problem_images) {
						item.problem_images.split(',').map(imageId => {
							arr.push(this.handleImgUrl(imageId.trim()));
						});
					}
					item.problem_images = arr;
				})
			}
            if (data.result_options) {
                const options = []
                data.result_options = data.result_options.replace(/，/g, ',');
                data.result_options.split(',').map(item => {
                    let str = item.trim().replace('/', '');
					str = str.replace('#', ',');
					options.push(str);
                })
                data.result_options = options;
            }
            if (data.other_enforce_item) {
                const list = [];
                const others = data.other_enforce_item.replace('，', ',');
                const otherItems = others.split(',');
                otherItems.map((other, index) => {
                    const item = other.replace('/', '');
                    if (item && item.length > 0) {
                        const obj = {
                            k: item,
                            v: ''
                        };
                        if (result && result.enforce_job_node_item && result.enforce_job_node_item.length > index) {
                            obj.v = result.enforce_job_node_item[index];
                        }
                        list.push(obj);
                    }
                })
                data.other_enforce_item = list
            }
        },
    }
}
</script>

<style lang="scss">
.my {
    .van-cell__title {
        width: 150px;
        max-width: 150px;
    }
    .van-cell__value {
        white-space: normal;
    }
}
.remark {
    .van-cell {
        padding: 0;
    }
}
</style>

<style lang="scss" scoped>
.mt {
    margin-top: 16px;
}
.mg {
    margin: 16px;
}
.items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.remark {
    padding: 10px 16px;
}
.remark-title {
    font-size: 14px;
    color: #353535;
}
</style>
