<template>
  <div>
    <Breadcrumb :list="breadcrumbList"/>
<!--    <div class="main-title">
      <Title :text="`“${title}”画像匹配同类不满意人员`" noBg/>
    </div>-->
    <div class="table">
      <el-table :data="list">
        <el-table-column
            label="序号"
            type="index"
            width="80"/>

        <el-table-column
            prop="gridName"
            width="118"
            label="所属组织"/>

        <el-table-column
            prop="restName"
            label="姓名">
        </el-table-column>

        <el-table-column
            prop="mobile"
            label="电话"/>


        <el-table-column
            prop="categoryNames"
            label="人员性质"/>

        <el-table-column
            prop="gender"
            label="性别">
          <template slot-scope="{row}">
            {{row.gender === '1'?'男':row.gender === '2'?'女':row.gender === '0'?'未知':''}}
          </template>
        </el-table-column>

        <el-table-column
            prop="age"
            label="年龄"/>

        <el-table-column
            prop="cultureLevel"
            label="学历"/>

        <el-table-column
            prop="marriageName"
            label="婚姻"/>

        <el-table-column
            prop="monthIncomeLevel"
            label="月收入"/>

        <el-table-column label="详情" width="90" align="center">
          <template slot-scope="data">
            <el-button type="text" @click="handleView(data.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"
    />
  </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"


export default {
  name: "dissatisfied",
  components: {Breadcrumb, Pagination, Title},
  data() {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      breadcrumbList: [{
        path: '/dataBoard/satisfactionEval/index',
        name: '满意度评价'
      }, {
        path: '',
        name: '画像匹配同类不满意人员'
      }],
      monthOptions: new Array(12).fill(0).map((_, index) => {
        return {label: (index - 0 + 1) + '月', value: (index - 0 + 1)}
      }),
      list: [],
      title: ''
    }
  },
  activated() {
    this.title = this.$route.query.title
    let searchParams = JSON.parse(this.$route.query.searchParams)
    console.log(searchParams)
    this.queryParams = {
      ...this.queryParams,
      ...searchParams
    }
    this.getList()
  },
  methods: {
    getList() {
      this.$http.get('/governance/satisfactionOverview/satisfactionCrowdList?' + this.$paramsFormat(this.queryParams)).then(({data: {data}}) => {
        this.list = data.list
        this.total = data.total
      })
    },
    handleView({restName,restId}) {
      this.$router.push('/dataBoard/satisfactionEval/dissatisfiedPersonnel/detail?name='+restName+'&user_id='+restId)
    }
  }
}
</script>

<style scoped lang="scss">
@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 {
      background: none;
      border: none;
      color: #fff;
    }
  }

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

.main-title {
  margin: 25px 0 32px;
}
.table {
  margin-top: 32px;
}
</style>