<template>
  <section class="AppReportAtWill">
    <ai-list v-if="!detail">
      <template #title>
        <ai-title title="随手拍" isShowArea isShowBottomBorder v-model="areaId" :instance="instance" @change="page.current=1,getTableData()"></ai-title>
      </template>
      <template #content>
        <ai-search-bar>
          <template #left>
            <el-select size="small" v-model="search.status" placeholder="处理状态" clearable  @change="page.current=1,getTableData()">
              <el-option v-for="(op,i) in handleStatusOps" :key="i" v-bind="op"/>
            </el-select>
            <el-select
              size="small"
              v-model="search.publicityStatus"
              placeholder="公示状态"
              clearable
              @change="page.current = 1, getTableData()">
              <el-option v-for="(op,i) in publicityStatusOps" :key="i" v-bind="op"/>
            </el-select>
            <el-select
              size="small"
              v-model="search.reportType"
              placeholder="类型"
              clearable
              @change="page.current = 1, getTableData()">
              <el-option v-for="(op,i) in reportTypeOps" :key="i" v-bind="op"/>
            </el-select>
          </template>
          <template #right>
            <el-input
              size="small"
              v-model="search.address"
              clearable suffix-icon="iconfont iconSearch"
              placeholder="内容描述/上报居民/联系方式"
              @keyup.enter.native="page.current = 1, getTableData()"
              @clear="page.current = 1, getTableData(), search.address = ''" />
          </template>
        </ai-search-bar>
        
        <ai-table :tableData="tableData" :colConfigs="colConfigs" :total="page.total" :current.sync="page.current" :size.sync="page.size" @getList="getTableData">
          <el-table-column slot="options" label="操作" fixed="right" width="140" align="center">
            <div class="table-options" slot-scope="{row}">
              <el-button
                type="text"
                v-if="!permissions('app_appreportatwillinfo_edit') && row.publicityStatus == 0"
                :disabled="row.status !== '1'"
                title="公示"
                @click="handlePublic(row)">
                公示
              </el-button>
              <el-button
                type="text"
                :disabled="row.status !== '1'"
                v-if="!permissions('app_appreportatwillinfo_edit') && row.publicityStatus == 1"
                title="取消公示"
                @click="handlePublic(row)">
                取消公示
              </el-button>
              <el-button type="text" title="详情" @click="showDetail(row)">详情</el-button>
              <ai-wechat-selecter ref="selecter" :isMultiple="false" :instance="instance" v-model="userList" @change="v => handleAppoint(v, row)">
                <el-button type="text" title="指派" :disabled="!permissions('app_appreportatwillinfo_edit') && row.status==0">指派</el-button>
              </ai-wechat-selecter>
            </div>
          </el-table-column>
        </ai-table>
      </template>
    </ai-list>
    <report-at-will-detail :dict="dict" :id="id" :instance="instance" :permissions="permissions" v-else :is="detail" @back="goBack"/>
  </section>
</template>

<script>
  import ReportAtWillDetail from './reportAtWillDetail'
  import { mapState } from 'vuex'

  export default {
    name: 'AppReportAtWill',
    label: "随手拍",
    components: {
      ReportAtWillDetail
    },
    provide() {
      return {
        report: this
      }
    },
    props: {
      instance: { type: Function, default: null, required: true},
      dict: { type: Object, default: null, required: false},
      permissions: Function
    },
    data() {
      return {
        userList: [],
        search: {},
        tableData: [],
        page: {current: 1, size: 10, total: 0},
        dialog: false,
        content: "",
        detail: "",
        areaId: "",
        id: ''
      }
    },
    computed: {
      ...mapState(['user']),
      colConfigs() {
        return [
          {prop: 'areaName', label: '上报时间'},
          {prop: 'reportType', label: '内容描述' },
          {prop: 'nickName', label: '事件类型'},
          {prop: 'explain', label: '所属网格'},
          {prop: 'phone', label: '上报居民'},
          {prop: 'createTime', label: '联系方式'},
          {prop: 'handleUserName', label: '处理时长'},
          {prop: 'handleTime', label: '处理时间'},
          {slot: 'options'}
        ]
      },
      publicityStatusOps() {
        return this.dict.getDict("reportAtWillPublicityStatus").map(e => ({label: e.dictName, value: e.dictValue}))
      },
      reportTypeOps() {
        return this.dict.getDict("atWillReportType").map(e => ({label: e.dictName, value: e.dictValue}))
      },
      handleStatusOps() {
        return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue}))
      }
    },

    created() {
      this.areaId = this.user.info.areaId
      this.dict.load("reportAtWillPublicityStatus", "reportAtWillHandleStatus", "atWillReportType")
      this.getTableData()
    },

    methods: {
      getTableData() {
        let params = {...this.search, dateRange: this.search.dateRange?.join(','), areaId: this.areaId}
        this.instance.post("/app/appreportatwillinfo/list", null, {
          params: {...params, ...this.page}
        }).then(res => {
          if (res?.data) {
            this.tableData = res.data.records
            this.page.total = res.data.total
          }
        })
      },
      submitUserNotice() {
        this.instance.post("/app/appreportatwillconfig/addOrUpdate", {content: this.content}).then(res => {
          if (res?.code == 0) {
            this.$message.success("保存成功!")
            this.dialog = false
          }
        })
      },
      getUserNotice() {
        this.instance.post("/app/appreportatwillconfig/query-new").then(res => {
          if (res?.data) this.content = res.data.content
        })
      },
      handlePublic(ev) {
        this.$confirm(`是否对该事件${ev.publicityStatus == 0 ? '进行公示' : '取消公示'}`).then(() => {
          this.instance.post("/app/appreportatwillinfo/publicity", null, {params: {id: ev.id}}).then(res => {
            if (res?.code == 0) {
              this.$message.success("操作成功!")
              this.getTableData()
            }
          })
        }).catch(() => 0)
      },
      showDetail(row) {
        this.detail = 'ReportAtWillDetail'
        this.id = row.id
        // this.$router.push({query: {id: row.id}})
      },
      goBack() {
        this.detail = ''
        // this.$route.query.id && this.$router.push({query: {}})
        this.getTableData()
      },
      handleAppoint(person, row) {
        this.instance.post("/app/appreportatwillinfo/assign", {
          handleUserId: person?.[0].id,
          handleUserName: person?.[0].name,
          infoId: row.id
        }).then(res => {
          this.userList = []
          if (res?.code == 0) {
            this.$message.success("指派成功!")
            this.getTableData()
          }
        }).catch(() => {
          this.userList = []
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.AppReportAtWill {
  height: 100%;

  .table-options {
    display: flex;
    align-items: center;
    justify-content: center;

    ::v-deep .AiPeople {
      line-height: 1;
      margin-left: 8px;
    }
  }

  ::v-deep .tableOptions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    .el-button--text {
      padding: 0;

      i {
        color: #89b;
        font-size: 16px;
      }

      & + .el-button {
        margin-left: 0;
      }
    }
  }

  ::v-deep .ai-list__content--right-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  ::v-deep .aititle-right__btns {
    display: flex;
    align-items: center;
    gap: 16px;

    .el-button + .el-button {
      margin-left: 0 !important;
    }
  }

  .table-options {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
