<template>
  <div>
    <Breadcrumb :list="breadcrumbList" />
    <div class="table">
      <el-table :data="list"
                v-loading="loading"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0,0,0,0.5)"
      >
        <el-table-column label="序号" type="index" width="80" />

        <el-table-column prop="name" label="月度" />

        <el-table-column prop="communityName" label="所属社区"> </el-table-column>

        <el-table-column prop="scopeName" label="所属类型"/>

        <el-table-column prop="problemDesc" label="问题" />

        <el-table-column prop="name" label="上报人" />

        <el-table-column prop="mobile" label="上报人电话">
          <template slot-scope="scope">
            {{ $sensitive(scope.row.mobile, 3, 7) }}
          </template>
        </el-table-column>
        
        <el-table-column prop="periodStart" label="提交时间" />

        <el-table-column show-overflow-tooltip label="是否完成">已完成</el-table-column>

        <el-table-column label="消除风险">是</el-table-column>

        <el-table-column sortable label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="handleView(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <Pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" />
    <province :showDialog="showDialog" :id="rowId" @close="close" />
  </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 province from "@/views/dataBoard/satisfactionEval/potentialPeople/details/sjwjj.vue";

export default {
  name: "dissatisfied",
  components: { Breadcrumb, Pagination, Title, province },
  data() {
    return {
      queryParams: {
        mobile: this.$route.query.mobile,
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      breadcrumbList: [
        {
          path: "/dataBoard/overview/index",
          name: "书记看板",
        },
        {
          path: "/dataBoard/overview/potentialPeople",
          name: "不满意风险人员",
        },
        {
          path: "",
          name: "满意度调查不满意",
        }
      ],
      list: [],
      showDialog: false,
      rowId: "",
      loading: true
    };
  },
  activated() {
    this.queryParams.mobile = this.$route.query.mobile;
    this.queryParams.pageNo = 1;
    this.getList();
  },
  methods: {
    search() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    getList() {
      this.loading = true

      this.$http.post('/governance/provinceEvaluationRecord/pageInfo', this.queryParams).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.list = res.data.list;
          this.total = res.data.total;
          this.loading = false
        }
      }).catch(() => {
        return this.$message.error('网络错误')
      })

    },
    handleView({icEventId}) {
      this.showDialog = true;
      this.rowId = icEventId;
    },
    close() {
      this.showDialog = false;
    },
  },
};
</script>

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

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