<template>
  <div class="app-container" style="padding-top:0">
    <!-- <div>{{ list }}</div> -->
    <div class="filter-container">
      <!-- <el-button v-if="list" id="te" type="warning" v-has="'editor'">abc</el-button> -->

      <el-input
        v-model="listQuery.params.name"
        style="width:200px;margin-right:10px"
        class="filter-item"
        placeholder="姓名"
        clearable
      />
      <!-- <el-input
        v-model="listQuery.params.nameZ"
        style="width:200px;margin-right:10px"
        class="filter-item"
        placeholder="姓名（藏语）"
        clearable
      /> -->
      <el-input
        v-model="listQuery.params.phone"
        style="width:200px;margin-right:10px"
        class="filter-item"
        placeholder="手机号"
        clearable
      />
      <el-input
        v-model="listQuery.params.idCard"
        style="width:200px;margin-right:10px"
        class="filter-item"
        placeholder="身份证号"
        clearable
      />
      <!-- isConvenience -->

      <!-- <RegionSelect v-model="regionSearchVal" class="filter-item" /> -->
      <!-- <el-cascader
        v-model="regionSearchVal"
        class="filter-item"
        style="width:240px"
        :options="regions"
        :props="{ checkStrictly: true }"
        placeholder="行政区域"
        clearable
      /> -->

      <!-- <span style="margin-left:10px;margin-right:10px;"
        >是否是便民工作人员</span
      > -->
      <!-- <el-checkbox
        v-model="isStaff"
        style="margin-left:10px"
        @change="handleIsStaff"
      >是否是便民工作人员</el-checkbox> -->
      <!-- <el-switch
        v-model="listQuery.params.isConvenience"
        active-color="#13ce66"
        inactive-color="#ff4949"
      >
      </el-switch> -->

      <el-button
        type="primary"
        style="margin-left:10px"
        @click="handleSearch"
      >搜索</el-button>
    </div>
    <!-- <el-button
      type="primary"
      size="mini"
      style="font-size:12px;padding:10px 20px;margin-bottom:20px"
      @click="handleAdd"
    >新增</el-button> -->
    <el-table v-loading="listLoading" :data="list" style="width: 100%" border>
      <el-table-column prop="name" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>

      <el-table-column prop="nameZ" label="姓名(藏语)">
        <template slot-scope="scope">
          {{ scope.row.nameZ }}
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="手机号">
        <template slot-scope="scope">
          {{ scope.row.phone }}
        </template>
      </el-table-column>

      <el-table-column prop="phone" label="身份证号">
        <template slot-scope="scope">
          {{ scope.row.idCard }}
        </template>
      </el-table-column>

      <!-- <el-table-column prop="phone" label="是否是便民工作人员" width="150">
        <template slot-scope="scope">
          {{ scope.row.isConvenience ? "是" : "否" }}
        </template>
      </el-table-column> -->

      <!-- <el-table-column prop="phone" label="所属行政区域">
        <template slot-scope="scope">
          {{
            scope.row.permanentResidenceRegion +
              (scope.row.permanentResidenceTown
                ? "-" + scope.row.permanentResidenceTown
                : "") +
              (scope.row.permanentResidenceTownShip
                ? "-" + scope.row.permanentResidenceTownShip
                : "")
          }}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="300px" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="joinItems[scope.row.id]"
            type="danger"
            size="mini"
            style="font-size:12px;padding:10px 20px;border-radius:21px"
            @click="handleUpdate(scope.row, false)"
          >移出</el-button>
          <el-button
            v-else
            type="primary"
            size="mini"
            style="font-size:12px;padding:10px 20px"
            @click="handleUpdate(scope.row, true)"
          >添加</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-if="total > 0"
      :total="total"
      :page.sync="listQuery.lastPageIndex"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { getResidentInfoList } from '@/api/residentInformation'
import { updateStaffIds, getStaffListByDeptId } from '@/api/dept'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  data() {
    return {
      pageId: '',
      pageName: '',

      listLoading: false,
      total: 0,
      listQuery: {
        lastPageIndex: 1,
        size: 20,
        params: {
          name: '',
          phone: '',
          idCard: '',
          isConvenience: true,
          // PermanentResidenceRegion: '壤塘县',
          regionIds: '606fb5c63f4fd670fa8a9352'
        }
      },
      list: [],

      joinItems: {}
    }
  },
  async created() {
    const { name, id } = this.$route.query
    this.pageId = id
    this.pageName = name
    await this.getStaffList()
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getResidentInfoList(this.listQuery).then(res => {
        this.list = res.d.list
        this.total = res.d.total
        this.listLoading = false
      })
    },
    async getStaffList() {
      const { d = [] } = await getStaffListByDeptId({ id: this.pageId })
      this.joinItems = d.reduce((prev, curr) => {
        prev[curr.id] = true
        return prev
      }, {})
    },
    handleUpdate(item, add) {
      this.$confirm(`是否把 [${item.name}] ${add ? '添加到' : '移出'} [${this.pageName}] 部门`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateStaffIds({
          id: this.pageId,
          updateParam: [
            {
              add,
              staffId: item.id
            }
          ]
        }).then(() => {
          this.$set(this.joinItems, item.id, add)
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
        })
      })
    },
    handleSearch() {
      this.listQuery.lastPageIndex = 1
      this.getList()
    }
  }
}
</script>

<style></style>
