<template>
  <div>
    <Breadcrumb :list="breadcrumbList"/>
    <div class="table">
      <el-table
          v-loading="loading"
          :data="list"
          element-loading-background="rgba(0,0,0,0.5)"
          element-loading-spinner="el-icon-loading"
          element-loading-text="加载中..."
      >
        <el-table-column label="序号" type="index" width="80"/>
        <el-table-column label="地点" prop="address"/>
        <el-table-column label="工单号" prop="workOrderNum" show-overflow-tooltip/>
        <el-table-column label="所属社区" prop="gridName"></el-table-column>
        <el-table-column label="事件分类" prop="categoryName" show-overflow-tooltip></el-table-column>
        <el-table-column label="投诉内容" prop="eventContent" show-overflow-tooltip min-width="220px"></el-table-column>
        <el-table-column label="接收时间" prop="happenTime"></el-table-column>
        <el-table-column label="联系人" prop="name"></el-table-column>
        <el-table-column label="联系电话" prop="mobile"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 'processing'">处理中</span>
            <span v-else-if="scope.row.status === 'closed_case'">已完成</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="详情">
          <template slot-scope="data">
            <el-button type="text" @click="handleView(data.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EventDetails :id="rowId" :showDialog="showDialog" @close="showDialog = false"/>

    <Pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNo" :total="total"
                @pagination="getList"/>
  </div>
</template>

<script>
import Breadcrumb from "@/views/dataBoard/satisfactionEval/components/Breadcrumb";
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
import EventDetails from "@/views/dataBoard/overview/components/EventDetail.vue";
import {requestPost} from "@/js/dai/request";

export default {
  name: "TddtlxsjDetail",
  components: {Breadcrumb, Pagination, Title, EventDetails},
  data() {
    return {
      showDialog: false,
      rowId: "",
      queryParams: {
        pageNo: 1,
        pageSize: 13,
      },
      total: 0,
      orgOptions: [],
      breadcrumbList: [
        {
          path: "/dataBoard/satisfactionEval/index",
          name: "满意度评价",
        },
        {
          path: "/dataBoard/satisfactionEval/Problem/tyry",
          name: "同一人员重复投诉问题列表",
        },
        {
          path: "",
          name: "详情",
        },
      ],
      list: [],
      title: "",
      loading: false,
      recId: "",
      departId: "",
      address: "",
      mobile: "",
    };
  },
  activated() {
    // this.breadcrumbList[2].name = this.address + ''
    this.recId = this.$route.query.recId;
    this.departId = this.$route.query.departId;
    this.address = this.$route.query.address;
    this.mobile = this.$route.query.mobile;
    this.getList();
  },
  methods: {
    search() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let params = {
        ...this.queryParams,
      }
      try {
        const url = "/governance/dwdEvent/list";
        if(this.recId){
          params.secondIdList = [this.recId];
        }

        if(this.departId){
          params.departId = this.departId;
        }

        if(this.address){
          params.content = this.address;
        }

        if(this.mobile){
          params.mobile = this.mobile;
        }

        const { data, code, msg } = await requestPost(url, {
          ...params,
        });
        if (code == 0) {
          this.total = data.total;
          this.list = data.list;
          this.loading = false;
        } else {
          console.log(err);
        }
      } catch (err) {
        console.log(err);
      }
    },
    handleView({icEventId}) {
      this.showDialog = true;
      this.rowId = icEventId;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/dataBoard/table.scss";

.screen {
  margin: 25px 0 40px;

  .el-select,
  .el-input {
    width: 150px;
    margin-right: 4px;
    border: 1px solid #126ac5;
    border-radius: 2px;

    /deep/ .el-input__inner {
      color: #fff;
      border: none;
      background: none;
    }
  }

  .btn {
    height: 32px;
    margin-left: 46px;
  }
}

.main-title {
  margin: 25px 0 32px;
}

.table {
  margin-top: 32px;
}
</style>
