<template>
    <div class="template">
        <el-row>
            <el-col :span="17">
                <el-input v-model="queryString" @keyup.enter.native="seachTemplate" placeholder="请输入搜索关键词"></el-input>
            </el-col>
            <el-col :span="6" style="margin-left: 14px;">
                <el-button type="primary" @click="seachTemplate">查找</el-button>
                <el-button @click="resetSearch">重置</el-button>
            </el-col>
        </el-row>
        <el-table
            :data="list"
            class="res"
            border
            v-loading="loading">
            <el-table-column prop="enforce" label="类型" show-overflow-tooltip align="center" />
            <el-table-column prop="template_name" label="模板名称" show-overflow-tooltip />
            <el-table-column prop="unitSize" label="单位规模" show-overflow-tooltip />
            <el-table-column prop="place" show-overflow-tooltip label="适用场所" />
            <el-table-column prop="arc" show-overflow-tooltip label="建筑类型" />
            <el-table-column prop="area" label="适用面积" show-overflow-tooltip align="center" />
            <el-table-column prop="res" label="消防安全" align="center" />
            <el-table-column prop="status" label="状态" align="center" />
            <el-table-column prop="action" label="操作" fixed="right" align="center" width="80">
                <template slot-scope="scope">
                    <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="params.page"
                :page-size="params.size"
                :total="total"
                @current-change="handlePageChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getCheckList } from '@/api/check'

import { resourceMixin } from '@/mixin/resource'
import {getPlaceTypes} from "@/api/resource";

export default {
    name: 'ChooseTemplate',
    mixins: [resourceMixin],
    data () {
        return {
            params: {
                query: "usage_status==1",
                page: 1,
                size: 10
            },
            queryString: null,
            loading: false,
            total: 0,
            list: [],
        }
    },
    mounted () {
        this.getPlaceTypesAll();
        this.getTemplates()
    },
    methods: {
      async getPlaceTypesAll() {
        const list = await getPlaceTypes();
        if (list && list.length > 0) {
          this.placeType=list;
        }
      },
        getTemplates() {
            this.loading = true
            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"
          } else {
            this.params.query = "usage_status==1"
          }

          this.getTemplates()

        },
        resetSearch() {
            this.queryString = null
          this.params.query = "usage_status==1"
            this.params.page = 1
          this.getTemplates()
        },
        handlePageChange(v) {
            this.params.page = v
            this.getTemplates()
        },
        handleConfirm(row) {
            this.$emit('changeTemplate', row)
        }
    }
}
</script>

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