<template>
  <ai-list>
    <template #title>
      <ai-title title="随手拍" isShowBottomBorder>
        <el-button type="primary" slot="rightBtn" @click="toSetting">设置</el-button>
      </ai-title>
    </template>
    <template #content>
      <ai-search-bar>
        <template #left>
          <ai-select
            v-model="search.eventStatus"
            clearable
            placeholder="处理状态"
            :selectList="dict.getDict('clapEventStatus')"
            @change="search.current = 1, getList()">
          </ai-select>
        </template>
        <template #right>
          <el-input
            v-model="search.content"
            class="search-input"
            size="small"
            @keyup.enter.native="search.current = 1, getList()"
            placeholder="请输入内容描述/上报居民/联系方式"
            clearable
            @change="getList"
            @clear="search.current = 1, search.content = '', getList()"
            suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList">
        <el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
          <div class="table-options" slot-scope="{row}">
            <el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
          </div>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'

  export default {
    name: 'List',
    label: "随手拍",

    props: {
      instance: Function,
      dict: Object
    },

    data() {
      return {
        userList: [],
        search: {
          current: 1,
          size: 10,
          eventStatus: '',
          content: ''
        },
        total: 0,
        tableData: [],
        content: '',
        id: ''
      }
    },

    computed: {
      ...mapState(['user']),

      colConfigs() {
        return [
          {prop: 'content', label: '内容描述', width: '300px' },
          {prop: 'groupName', label: '事件类型', align: 'center'},
          {prop: 'girdName', label: '所属网格', align: 'center'},
          {prop: 'createTime', label: '上报时间', align: 'center'},
          {prop: 'name', label: '上报居民', align: 'center'},
          {prop: 'phone', label: '联系方式', align: 'center'},
          { prop: 'eventStatus', label: '处理状态', align: 'center', formart: v => this.dict.getLabel('clapEventStatus', v) },
          {slot: 'options'}
        ]
      },

      handleStatusOps() {
        return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue}))
      }
    },

    created () {
      this.dict.load('clapEventStatus').then(() => {
        this.getList()
      })
    },

    methods: {
      getList () {
        this.instance.post(`/app/appclapeventinfo/list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      toDetail (id) {
        this.$emit('change', {
          type: 'Detail',
          params: {
            id: id || ''
          }
        })
      },

      toSetting () {
        this.$emit('change', {
          type: 'Setting',
          params: {
            id: ''
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
