<template>
  <div>
    <div style="margin: 20px 10px 30px 40px">
      <el-form v-model="queryParam" :inline="true">
        <el-form-item label="姓名：">
          <el-input
            clearable
            size="medium"
            placeholder="请输入姓名"
            v-model="queryParam.params.name"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="移动电话：">
          <el-input
            size="medium"
            clearable
            placeholder="请输入移动电话号"
            v-model="queryParam.params.mobilePhone"
            style="width: 200px"
          ></el-input>
        </el-form-item>
            <el-form-item label="责任人组织：">
              <el-cascader
                :show-all-levels="false"
                :options="parentIds"
                v-model="queryParam.params.orgId"
                :props="{value: 'id', label: 'name', children: 'children'}"
                @change="onparentIds"
                placeholder="请选择责任人组织"
                clearable
              ></el-cascader>
            </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="onClickSearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div class="btn-content" style="margin-bottom: 10px">
        <el-button
          size="mini"
          icon="el-icon-plus"
          type="primary"
          @click="openFormDiao"
          >新增</el-button
        >
        <el-button
          :disabled="!multipleSelection.length"
          size="mini"
          icon="el-icon-delete"
          type="danger"
          @click="deleteSelect"
          >删除</el-button
        >
      </div>
    </div>
    <div>
      <div class="table-content" style="padding: 0 40px 0 40px">
        <template>
          <el-table
            ref="multipleSelection"
            v-loading="loading"
            border
            :data="tableData"
            :row-style="{height: '61px'}"
            style="width: 100%"
            :row-key="getRowKey"
            @selection-change="handleSelectionChange"
            :header-cell-style="{'text-align': 'center'}"
            :cell-style="{'text-align': 'center'}"
          >
            <el-table-column
              type="selection"
              width="55"
              :reserve-selection="true"
            ></el-table-column>
            <el-table-column
              width="120"
              fixed
              sortable
              prop="name"
              label="姓名"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              width="160"
              sortable
              fixed
              prop="sex"
              label="性别"
              show-overflow-tooltip
            >
              <template slot-scope="scope" v-if="scope.row.sex">
                 {{ scope.row.sex === '1' ? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column
              width="180"
              sortable
              prop="orgName"
              label="负责人组织"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="180"
              sortable
              prop="mobilePhone"
              label="移动电话"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="180"
              sortable
              prop="position"
              label="职务"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="180"
              sortable
              prop="dept"
              label="单位"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              width="120"
              sortable
              prop="createBy"
              label="创建人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              width="200"
              sortable
              prop="createTime"
              label="创建时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              width="120"
              sortable
              prop="updateBy"
              label="修改人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              width="180"
              sortable
              prop="updateTime"
              label="修改时间"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column width="200" fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="infoUpdate(scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination
          align="right"
          style="margin-top: 30px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.pageBean.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="queryParam.pageBean.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <personFormDialog
      v-if="showFormDia"
      @closeFormDiao="closeFormDiao"
      @refList="getDateList"
      :showFormDia="showFormDia"
      :title="title"
      :pId="pId"
    ></personFormDialog>
  </div>
</template>
<script>
import personFormDialog from './components/personForm-dialog.vue'
import perSon from '@/api/perSon.js'
import req from '@/request.js'
export default {
  name: 'headPersonManager',
  components: {
    personFormDialog,
  },
  data() {
    return {
      loading: false,
      multipleSelection: [], // 复选框
      queryParam: {
        pageBean: {
          pageSize: 10,
          page: 1,
        },
        params: {
          mobilePhone:null,//移动电话
          name:null,//组织名称
          orgId:null,//组织id
        },
      },
      total: 0,
      title: '',
      showFormDia: false,
      tableData: [],
      pId: '',
      parentIds: [], //组织树数组:
    }
  },
  //    {"pageBean":{"page":1,"pageSize":50,"total":0},"sorter":[{"direction":"DESC","property":"createTime"}]}
  computed: {
    // ...mapState({
    //   userInfo: state => state.user.name, // 获取当前登录用户信息
    //   roleValue: state => state.user.roles // 获取当前登录用户角色
    // })
  },
  created() {
    this.getDateList()
    // 组织树查询
    perSon.getPerson({}, (res) => {
      this.parentIds = res.value;
    })
  },
  methods: {
    onparentIds(val) {
      if (val) {
        this.queryParam.params.orgId = val.pop()
      }
    },
    getDateList() {
      this.loading = true
      this.tableData = []
      perSon.ListGet(this.queryParam, (res) => {
        if (res.state) {
          this.tableData = res.value.rows
          this.total = res.value.total
          this.loading = false
        }
      })
    },
    openFormDiao() {
      this.title = '新增';
      this.showFormDia = true;
    },
    closeFormDiao() {
      this.showFormDia = false;
      this.getDateList();
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val;
      this.getDateList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val;
      this.getDateList()
    },
    // // 修改
    infoUpdate(row) {
      this.title = '修改';
      this.pId = row.id;
      this.showFormDia = true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id;
      })
    },
    // // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id;
    },
    // // 批量删除
    deleteSelect() {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      })
        .then(() => {
          perSon.remove(this.multipleSelection, (res) => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000,
                  // offset: 80
                })
                this.$refs.multipleSelection.clearSelection()
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch((res) => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80,
              })
              this.getDateList()
            })
        })
        .catch(() => {})
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('确定删除选中数据？', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        type: 'warning',
      })
        .then(() => {
          perSon.remove(row.id, (res) => {
              if (res.state) {
                this.$notify({
                  type: 'success',
                  message: '删除成功',
                  duration: 2000,
                  // offset: 80
                })
                this.queryParam.pageBean.page = 1
                this.getDateList()
              }
            })
            .catch((res) => {
              this.$notify({
                type: 'error',
                message: res.message,
                duration: 2000,
                offset: 80,
              })
              this.getDateList()
            })
        })
        .catch(() => {})
    },
    // // 点击查询
    onClickSearch() {
      this.queryParam.pageBean.page = 1;
      this.getDateList();
    },
    // 重置
    resetQuery() {
      this.queryParam.params = {}
      this.onClickSearch()
    },
  },
}
</script>
<style lang="scss" scoped>
.btn-content {
  display: flex;
}
.el-select-dropdown__item span {
  color: rgb(51, 51, 51) !important;
}
.el-select-dropdown__item {
  color: #9a9a9a !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f5f7fa;
}
.btn-content :first-child {
  margin: 0 0 0 0 !important;
}
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 6px;
//   height: 15px;
// }
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}
::-webkit-scrollbar {
  background: #fff !important;
}
</style>
