<template>
  <div class="check">
    <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-option label="九小场所" value="5"></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="place_type">
          <el-select v-model="formData.place_type" clearable placeholder="请选择">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="item in placeType" :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_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-button type="primary" icon="el-icon-plus" @click="handleAddConfig">新增</el-button>
      </el-form>
    </form-option>
    <div class="custom-table">
      <el-table
        :data="list"
        border
        v-loading="loading">
        <el-table-column type="index" align="center" label="序号" width="80"/>
        <el-table-column prop="template_name" label="模板名称" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row.id)">{{ scope.row.template_name }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="unitSize" show-overflow-tooltip label="单位规模"/>
        <el-table-column prop="place" label="场所类型" show-overflow-tooltip align="center"/>
        <el-table-column prop="sum_nodes" label="检查节点" align="center" width="120"/>
        <el-table-column prop="sum_items" label="检查项目数" show-overflow-tooltip align="center"/>
        <el-table-column prop="usage_status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.usage_status == 1">
              <el-tag type="success">启用</el-tag>
            </template>
            <template v-else>
              <el-tag type="danger">停用</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="updateDate" label="更新时间" align="center" show-overflow-tooltip/>
        <el-table-column prop="update_user_name" label="更新人员" align="center" show-overflow-tooltip/>
        <el-table-column prop="action" label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleDetail(scope.row.id)">查看</el-button>
            <el-button type="text" size="small" @click="handleCopy(scope.row.id)">复制</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="custom-pagination">
        <div class="info">
          <span>共 {{ total }} 条记录</span>
          <span>第 {{ query.page }} / {{ pageTotal }} 页</span>
        </div>
        <el-pagination
          background
          class="custom-page"
          layout="prev, pager, next, sizes"
          :page-sizes="[10, 20, 50, 100]"
          :current-page="query.page"
          :page-size="query.size"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="选择人员" :visible.sync="showUserDialog" class="custom-dialog">
      <choose-user @changeUser="handleUserChanged"></choose-user>
    </el-dialog>
  </div>
</template>

<script>
import FormOption from '@/component/FormOption'
import ChooseUser from '@/component/ChooseUser'

import { resourceMixin } from '@/mixin/resource'
import { getCheckList, removeCheck } from '@/api/check'
import { formatDate } from '@/utils/tool'
import { DateTime } from 'luxon'
import {getPlaceTypes} from "@/api/resource";

export default {
  mixins: [resourceMixin],
  components: {
    FormOption,
    ChooseUser
  },
  data () {
    return {
      formData: {
        template_name: '',
        enforce_obj_type: '',
        place_type: '',
        usage_status: '',
        update_time: '',
        update_user_id: '',
        update_user_name: '',
      },
      query: {
        page: 1,
        size: 10,
        query: ''
      },
      showUserDialog: false,
      total: 0,
      list: [],
      loading: false
    }
  },
  computed: {
    pageTotal () {
      const page = Math.ceil(this.total / this.query.size)
      return page > 0 ? page : 1
    }
  },
  mounted () {
    this.getPlaceTypesAll();
    this.handleQuery()
  },
  methods: {
    async getPlaceTypesAll() {
      const list = await getPlaceTypes();
      if (list && list.length > 0) {
        this.placeType=list;
      }
    },
    handleQuery2() {
      this.query.page = 1
      this.handleQuery()
    },
    resetForm () {
      this.$refs.form.resetFields()
      this.formData.update_user_id = null
      this.handleQuery()
    },
    handleSizeChange (val) {
      this.query.size = val
      this.handleQuery()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.handleQuery()
    },
    handleUserChanged (data) {
      if (data) {
        this.formData.update_user_id = data.uid;
        this.formData.update_user_name = data.name;
      }
      this.showUserDialog = false
    },
    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') + ' 23:59:59\'')
      }

      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
      })
    },
    handleAddConfig () {
      this.$router.push('/monitor/check/add')
    },
    handleDetail (id) {
      this.$router.push({
        path: '/monitor/check/detail',
        query: {
          id
        }
      })
    },
    handleEdit (id) {
      this.$router.push({
        path: '/monitor/check/edit',
        query: {
          id
        }
      })
    },
    handleCopy (id) {
      this.$router.push({
        path: '/monitor/check/copy',
        query: {
          id
        }
      })
    },
    handleDelete (data) {
      this.$confirm(`是否删除检查模版 ${data.template_name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeCheck(data.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.handleCurrentChange(1)
        })
      })
    },
  }
}
</script>

<style lang="scss">
  .check {
    .option .el-select .el-input__inner {
      padding-right: 15px;
    }
  }
</style>