<template>
    <div class="template">
        <el-row>
            <form-option title="检查配置">
                <el-form :inline="true" :model="formData" ref="form" label-width="80px">
                    <el-form-item label="模板名称:" prop="template_name">
                        <el-input v-model="formData.template_name" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="单位规模:" prop="enforce_obj_type">
                        <el-select v-model="formData.enforce_obj_type" clearable placeholder="请选择">
                            <el-option
                                    v-for="item in unitSize"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="场所类型:" prop="place_type">
                        <el-select v-model="formData.place_type" clearable placeholder="请选择">
                            <el-option value="" label="全部"></el-option>
                            <el-option v-for="item in placeTypeList" :key="item.code" :label="item.name"
                                       :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                    <!--                    <el-form-item label="状态:" prop="usage_status">-->
                    <!--                        <el-select v-model="formData.usage_status" clearable placeholder="请选择">-->
                    <!--                            <el-option value="" label="全部"></el-option>-->
                    <!--                            <el-option value="1" label="启用"></el-option>-->
                    <!--                            <el-option value="0" label="停用"></el-option>-->
                    <!--                        </el-select>-->
                    <!--                    </el-form-item>-->
                    <el-form-item label="更新时间:" prop="update_time">
                        <el-date-picker v-model="formData.update_time" range-separator="至"
                                        type="daterange" start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item label="更新人员:" prop="update_user_name">
                        <el-select v-model="formData.update_user_name" clearable placeholder="请选择"
                                   @focus="showUserDialog=true"></el-select>
                    </el-form-item>
                    <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery2">查询</el-button>
                </el-form>
            </form-option>
        </el-row>
        <el-table
                :data="list"
                class="res"
                border
                v-loading="loading">
            <el-table-column type="index" align="center" label="序号" width="80"/>
            <el-table-column prop="template_name" label="模板名称" show-overflow-tooltip/>
            <el-table-column prop="unitSize" label="单位规模" show-overflow-tooltip/>
            <el-table-column prop="enforce_obj_name" show-overflow-tooltip label="场所类型">
                <template slot-scope="scope">
                    {{ getPlaceTypeName(scope.row.place_type) }}
                </template>
            </el-table-column>
            <el-table-column prop="sum_nodes" label="检查节点" show-overflow-tooltip/>

            <el-table-column prop="sum_items" label="检查项目数" show-overflow-tooltip/>
            <el-table-column prop="update_time" label="更新时间" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{ formatDate(scope.row.update_time) }}
                </template>
            </el-table-column>
            <el-table-column prop="update_user_name" label="更新人" show-overflow-tooltip/>
            <el-table-column label="操作" fixed="right" align="center" width="120">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleShow(scope.row.id)">查看</el-button>
                    <el-button type="text" size="small" @click="handleConfirm(scope.row)">确定</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="custom-pagination">
            <div class="info">
                <span>共 {{ total }} 条记录</span>
            </div>
            <el-pagination
                    background
                    class="custom-page"
                    layout="prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.size"
                    :total="total"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog title="选择人员" :visible.sync="showUserDialog" class="custom-dialog" append-to-body>
            <choose-user @changeUser="handleUserChanged"></choose-user>
        </el-dialog>
    </div>
</template>

<script>
    import {getCheckList} from '@/api/check'
    import FormOption from '@/component/FormOption'
    import ChooseUser from '@/component/ChooseUser'
    import {resourceMixin} from '@/mixin/resource'
    import {getPlaceTypes} from "@/api/resource";
    import {DateTime} from 'luxon'
    import {formatDate} from '@/utils/tool'

    export default {
        name: 'ChooseTemplate',
        mixins: [resourceMixin],
        components: {
            FormOption,
            ChooseUser
        },
        props: {
            enforce_place_type: {
                type: String,
            },
            enforce_obj_type: {
                type: String,
            },
        },
        data() {
            return {
                showUserDialog: false,
                query: {
                    page: 1,
                    size: 10,
                    query: null
                },
                formData: {
                    template_name: null,
                    enforce_obj_type: null,
                    place_type: null,
                    usage_status: 1,
                    update_time: '',
                    update_user_id: null,
                    update_user_name: null
                },
                loading: false,
                total: 0,
                list: [],
                placeType: [],
                placeTypeList: []
            }
        },
        mounted() {
            this.getPlaceTypesAll();
            this.init();

            this.handleQuery()
        },
        methods: {
            formatDate,
            getPlaceTypeName(placeType) {
                let name = "";
                this.placeTypeList.forEach(item => {
                    if (item.code === placeType) {
                        name = item.name;
                    }
                });
                return name;
            },
            init() {
                this.formData.place_type = this.enforce_place_type;
                this.formData.enforce_obj_type = this.enforce_obj_type;
            },
            async getPlaceTypesAll() {
                const list = await getPlaceTypes();
                if (list && list.length > 0) {
                    this.placeTypeList = list;
                }
            },
            handleUserChanged(data) {
                if (data) {
                    this.formData.update_user_id = data.uid;
                    this.formData.update_user_name = data.name;
                }
                this.showUserDialog = false
            },
            resetForm() {
                this.$refs.form.resetFields()
                this.formData.update_user_id = null
                this.handleQuery()
            },
            handleQuery2() {
                this.query.page = 1
                this.handleQuery()
            },
            handleQueryParam() {
                let queryString = ''
                let expressions = []
                if (this.formData.template_name) {
                    expressions.push(`template_name=="*${this.formData.template_name}*"`)
                }

                if (this.formData.enforce_obj_type) {
                    expressions.push('enforce_obj_type' + '==' + this.formData.enforce_obj_type)
                }

                if (this.formData.place_type) {
                    expressions.push('place_type' + '==' + this.formData.place_type)
                }

                if (this.formData.usage_status) {
                    expressions.push('usage_status' + '==' + this.formData.usage_status)
                }

                if (this.formData.update_user_id) {
                    expressions.push('update_user_id' + '==' + this.formData.update_user_id)
                }

                if (this.formData.update_time && this.formData.update_time.length === 2) {
                    expressions.push('update_time' + '>' + '\'' +
                        DateTime.fromJSDate(this.formData.update_time[0]).toFormat('yyyy-LL-dd HH:mm:ss') + '\'')
                    expressions.push('update_time' + '<' + '\'' +
                        DateTime.fromJSDate(this.formData.update_time[1]).toFormat('yyyy-LL-dd HH:mm:ss') + '\'')
                }

                if (expressions.length !== 0) {
                    queryString = expressions.reduce(function (previousValue, currentValue, index, array) {
                        return previousValue + ';' + currentValue
                    })
                }

                this.query.query = queryString

            },
            handleQuery() {
                this.loading = true
                this.handleQueryParam()
                const vm = this
                getCheckList(this.query).then(res => {
                    if (res) {
                        vm.total = res.total || 0
                        const list = res.data || []
                        list.map(item => {
                            item.updateDate = formatDate(item.update_time)
                            item.unitSize = vm.parseUnitSize(item.enforce_obj_type)
                            item.place = vm.parsePlaceType(item.place_type)
                        })
                        vm.list = list
                    }
                    this.loading = false
                })
            },
            getTemplates() {
                this.loading = true;
                this.params.query = "usage_status==1;place_type==" + this.place_type + ";enforce_obj_type==" + this.enforce_obj_type;
                if (this.queryString) {
                    this.params.query += ";template_name like " + this.queryString + "%";
                }
                getCheckList(this.params).then(res => {
                    if (res && res.data) {
                        this.total = res.total
                        res.data.map(item => {
                            item.enforce = item.enforce_class === 1 ? '城镇' : '双随机'
                            item.unitSize = this.parseUnitSize(item.enforce_obj_type)
                            item.place = this.parsePlaceType(item.place_type)
                            item.arc = this.parseArchitectureType(item.architecture_type)
                            item.res = this.parseResponsibilityType(item.hole_responsibility)
                            item.status = item.usage_status == 1 ? '启用' : '停用'
                        })
                        this.list = res.data
                    }
                    this.loading = false
                })
            },
            seachTemplate() {
                if (this.queryString) {
                    this.params.query = "template_name" + "==" + this.queryString + "*" + ";usage_status==1" + ";place_type==" + this.place_type + ";enforce_obj_type==" + this.enforce_obj_type;
                } else {
                    this.params.query = "usage_status==1" + ";place_type==" + this.place_type + ";enforce_obj_type==" + this.enforce_obj_type;
                }

                this.getTemplates()

            },
            resetSearch() {
                this.queryString = null
                this.params.query = "usage_status==1"
                this.params.page = 1
                this.getTemplates()
            },
            handleCurrentChange(val) {
                this.query.page = val
                this.handleQuery()
            },
            handleConfirm(row) {
                this.$emit('changeTemplate', row)
            },
            handleShow(id) {
                let routeData = this.$router.resolve({ path: '/monitor/check/detail', query: {  id: id, fromResource: 1 } });
                window.open(routeData.href, '_blank');
                // this.$router.push({
                //     path: '/monitor/check/detail',
                //     query: {
                //         id
                //     }
                // })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .res {
        margin-top: 15px;
    }
</style>