<template>
  <!-- 排水防涝子系统 公众服务  投诉意见-->
  <div class="publicContainer">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="举报内容" prop="describ">
        <el-input v-model="queryParams.describ" placeholder="请输入" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="工单状态" prop="orderStatus">
        <el-select clearable v-model="queryParams.orderStatus" placeholder="请选择">
          <el-option label="未转工单" value="0"></el-option>
          <el-option label="已转工单" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>
    <!-- 表格 -->
    <el-table v-loading="tableLoading" :data="tableData" max-height="650">
      <el-table-column label="举报人微信头像" prop="headImg">
        <template #default="scope">
          <el-image :src="scope.row.headImg ? scope.row.headImg : defaultImg" style="width: 100px; height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="举报人微信昵称" prop="nickName" />
      <el-table-column label="举报内容" prop="describ" />
      <el-table-column label="工单状态" prop="orderStatus">
        <template #default="scope">
          {{ scope.row.orderStatus == 0 ? '未转工单' : scope.row.orderStatus == 1 ? '已转工单' : '--' }}
        </template>
      </el-table-column>
      <el-table-column label="举报时间" prop="happenTime" />
      <el-table-column label="操作" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleOrder(scope.row)"
            v-hasPermi="['floodSys:jing:edit']"
            v-if="scope.row.orderStatus == 0"
          >
            转工单
          </el-button>
          <el-button
            link
            type="warning"
            icon="Edit"
            @click="glOrder(scope.row)"
            v-hasPermi="['floodSys:jing:edit']"
            v-if="scope.row.orderStatus == 1"
          >
            关联工单
          </el-button>
          <el-button link type="warning" icon="Delete" @click="handleDetail(scope.row)"> 详情 </el-button>
          <el-button
            link
            type="danger"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['floodSys:jing:remove']"
            v-if="scope.row.orderStatus == 0"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getDataList"
    />
    <!-- 详情弹窗 -->
    <el-dialog title="公众举报详情" v-model="dialogShowDetail" width="600px" append-to-body>
      <div class="publicDetail">
        <div class="part">
          <p class="title">举报人：</p>
          <p class="content">{{ dataDetail.nickName }}</p>
        </div>
        <div class="part">
          <p class="title">举报时间：</p>
          <p class="content">{{ dataDetail.happenTime }}</p>
        </div>
        <div class="part" style="width: 100%">
          <p class="title">举报地点：</p>
          <p class="content">{{ dataDetail.happenAddress }}</p>
        </div>
        <div class="part" style="width: 100%">
          <p class="title">问题照片：</p>
          <p class="content">
            <el-image :src="dataDetail.complaintPhotosFileList.length > 0 ? dataDetail.complaintPhotosFileList[0].url : ''"></el-image>
          </p>
        </div>
        <div class="part" style="width: 100%">
          <p class="title">问题描述：</p>
          <p class="content">{{ dataDetail.describ }}</p>
        </div>
        <el-divider />
      </div>
    </el-dialog>
    <!-- 关联工单详情弹窗 -->
    <el-dialog title="养护工单详情" v-model="dialogShow" width="600px" append-to-body>
      <div class="publicDetail">
        <div class="part">
          <p class="title">工单名称：</p>
          <p class="content">{{ orderDetail.eventName }}</p>
        </div>
        <div class="part">
          <p class="title">养护人员：</p>
          <p class="content">{{ orderDetail.caseHandlersPerson || '--' }}</p>
        </div>
        <div class="part">
          <p class="title">养护要求：</p>
          <p class="content">{{ orderDetail.eventRequirement }}</p>
        </div>
        <div class="part">
          <p class="title">工单状态：</p>
          <p class="content">
            <dict-tag :options="eventStatusType" :value="orderDetail.eventStatus" />
          </p>
        </div>
        <el-divider />
        <div class="part" style="width: 100%">
          <p class="title" style="width: 100%">工单流转历史</p>
          <el-table :data="orderDetail.eventHistoryList" max-height="300px">
            <el-table-column label="步骤名称" prop="operationDesc" />
            <el-table-column label="执行人" prop="createBy" />
            <el-table-column label="创建时间" prop="createTime" />
            <el-table-column label="备注" prop="remark" />
          </el-table>
        </div>
        <el-divider />
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="投诉意见">
import { suggestList, suggestDel, suggestOrder, suggestDetail } from '@/api/publicService/index';
import { eventManageDetail } from '@/api/floodSys/repair';
import defaultImg from '@/assets/images/login/user.png';

const { proxy } = getCurrentInstance();

const tableData = ref([]);
const tableLoading = ref(true);
const total = ref(0);
const showSearch = ref(true);
const dialogShow = ref(false);
const dataDetail = ref({});
const dialogShowDetail = ref(false);
const orderDetail = ref({});
const eventStatusType = proxy.fixDict['eventStatusType']; //事件处理状态

const allData = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderStatus: undefined,
    describ: undefined,
  },
});
const { queryParams } = toRefs(allData);

/** 获取查询数据列表 */
function getDataList() {
  tableLoading.value = true;
  suggestList(queryParams.value).then(response => {
    tableData.value = response.data;
    total.value = response.total;
    tableLoading.value = false;
  });
}
/** 转工单按钮 */
function handleOrder(row) {
  proxy.$modal
    .confirm('确定转维修工单？')
    .then(() => {
      suggestOrder(row.id).then(res => {
        getDataList();
        proxy.$modal.msgSuccess('转维修工单成功');
      });
    })
    .catch(() => {});
}
// 详情
function handleDetail(row) {
  suggestDetail(row.id).then(res => {
    dataDetail.value = res.data;
    dialogShowDetail.value = true;
  });
}
/**关联工单详情 */
function glOrder(row) {
  eventManageDetail(row.eventId).then(res => {
    orderDetail.value = res.data;
    dialogShow.value = true;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getDataList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef');
  handleQuery();
}
/** 删除按钮操作 */
function handleDelete(row) {
  const postIds = row.id;
  proxy.$modal
    .confirm('是否确认删除该数据项？')
    .then(function () {
      return suggestDel(postIds);
    })
    .then(() => {
      getDataList();
      proxy.$modal.msgSuccess('删除成功');
    })
    .catch(() => {});
}

onMounted(() => {
  getDataList();
});
</script>