<template lang='pug'>
    el-container(style="padding:0px;" :style="{height:currentHeight-65+'px'}")
        el-header(style='height:42px;line-height:42px;border: 1px solid rgba(196, 196, 196, 1);background: #f4f4f4;')
            span.title-bold.title-left-color() 应急团队列表
            el-popover( placement="bottom" width="150")
              el-button( slot="reference" size='mini' type="primary" icon="el-icon-s-tools" style='float:right;transform:translateY(6px)')  筛选
              el-checkbox-group( v-model="checkList")
                el-col( :span="24")
                  el-checkbox( v-for="(item,index) in tableHeader" :label="item" :key="index" )
                    span {{item.label}}
        el-main.box_main
            el-card()
                div.tableCard()
                    el-form( :inline="true" :model="dataForm" size="mini")
                        el-form-item(label="姓名:")
                            el-input( class="inputWidth" v-model="dataForm.name" placeholder="姓名" clearable)
                        el-form-item( label="证件号码:")
                            el-input( class="inputWidth" v-model="dataForm.cardNumber" placeholder="证件号码" clearable)
                        el-form-item( label="移动电话:")
                            el-input( class="inputWidth" v-model="dataForm.mobile" placeholder="移动电话" clearable)
                        el-form-item( label="政治面貌:")
                            el-select( class="inputWidth" v-model="dataForm.politicCountenance" placeholder="请选择" clearable)
                                el-option(v-for="(item, index) in politicCountenances" :key="index" :label="item.name" :value="item.id")
                        el-form-item(label="人员类型")
                            el-select( class="inputWidth"  v-model="dataForm.personnelType" placeholder="请选择" clearable)
                                el-option(label="应急专家" value=1)
                                el-option(label="应急人员" value=2)
                        //el-form-item( label="人员专长:")
                          el-select( class="inputWidth" multiple  v-model="dataForm.types" placeholder="请选择" clearable)
                            el-option(v-for="(item, index) in types" :key="index" :label="item.name" :value="item.id")
                        el-form-item( label="民族:")
                            el-select( class="inputWidth" v-model="dataForm.nation" placeholder="请选择" clearable)
                                el-option(v-for="(item, index) in nations" :key="index" :label="item.name" :value="item.id")
                        el-button(@click="getDataList()" size="mini" icon="el-icon-search" type="primary") 查询
                        el-button(@click="reSet()" size='mini' type="primary" icon="el-icon-refresh-right") 重置
                        el-button(v-if="isAuth('em:proficient:save')" type="primary" size="mini" icon='el-icon-plus' @click="addOrUpdateHandle()" style="float:right;") 新增
                drag-table( :data="dataList" :header="checkList" :isToLine='false' :option="tableOption"  @getDataList="getDataList" v-loading="dataListLoading"  :operationNum="3"  :isShowOperate="true")
                  el-table-column(slot="fixed"  fixed  prop=""  label="序号"  width='80'  header-align="center" align="center")
                    template( slot-scope="scope")
                      span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
                  template(slot='gender' slot-scope='scope')
                    font(v-if='scope.row.gender===0') 女
                    font(v-if='scope.row.gender===1') 男
                  template(slot='politic_countenance' slot-scope="scope")
                    font( v-if="scope.row.politic_countenance === '1'") 共青团员
                    font( v-if="scope.row.politic_countenance === '2'") 预备党员
                    font( v-if="scope.row.politic_countenance === '3'") 党员
                    font( v-if="scope.row.politic_countenance === '4'") 群众
                    font( v-if="scope.row.politic_countenance === '5'") 其它
                  template(slot='personnel_type' slot-scope='scope')
                    font(v-if='scope.row.personnel_type === 1') 应急专家
                    font(v-if='scope.row.personnel_type === 2') 应急人员
                  template( slot='typesName' slot-scope="scope")
                    font(:title="scope.row.typesName") {{scope.row.typesName}}

                  template.operation( slot-scope="scope")
                    //- el-button( type="text"  size="mini" v-if="isAuth('em:proficient:info')" @click="queryHandle(scope.row)") 详情
                    el-button( type="text"  size="mini" @click="queryHandle(scope.row)") 详情
                    el-button( type="text"  size="mini" v-if="isAuth('em:proficient:update') && scope.row.byx1 != '1'" @click="addOrUpdateHandle(scope.row.id)") 编辑
                    el-button( type="text"  size="mini" v-if="isAuth('em:proficient:delete') && scope.row.byx1 != '1'" @click="deleteHandle(scope.row.id)") 删除
                //- el-table(:data="dataList" @sort-change='sortChange' v-loading="dataListLoading" :stripe="true"  @selection-change="selectionChangeHandle"  :header-cell-style="{background:'#EEF8FF',color:'#333333'}")
                    el-table-column( type='index', header-align='center', align='center', label='序号')
                      template(scope="scope")
                        span {{scope.$index+(pageIndex - 1) * pageSize + 1}}
                    el-table-column( prop="name" header-align="center" align="center" label="姓名" sortable='custom')
                    el-table-column( prop="gender" header-align="center" align="center" label="性别" sortable='custom')
                        template(slot-scope='scope')
                            font(v-if='scope.row.gender===0') 女
                            font(v-if='scope.row.gender===1') 男
                    el-table-column( prop="birthday" header-align="center" align="center" label="出生日期" sortable='custom')
                    el-table-column( prop="politic_countenance" header-align="center" align="center" label="政治面貌" sortable='custom')
                        template( slot-scope="scope")
                            font( v-if="scope.row.politic_countenance === '1'") 共青团员
                            font( v-if="scope.row.politic_countenance === '2'") 预备党员
                            font( v-if="scope.row.politic_countenance === '3'") 党员
                            font( v-if="scope.row.politic_countenance === '4'") 群众
                            font( v-if="scope.row.politic_countenance === '5'") 其它
                    el-table-column( prop="nationName" header-align="center" align="center" label="民族" sortable='custom')
                    el-table-column( prop="card_number" header-align="center" align="center" label="证件号码" sortable='custom')
                    el-table-column( prop="mobile" header-align="center" align="center" label="移动电话" sortable='custom')
                    el-table-column( prop="typesName" header-align="center" align="center" label="人员专长" )
                        template(slot-scope='scope')
                            span(:title='scope.row.typesName') {{scope.row.typesName |ellipsis}}
                    el-table-column( prop="personnel_type" header-align="center" align="center" label="人员类型" sortable='custom')
                        template(slot-scope='scope')
                            font(v-if='scope.row.personnel_type === 1') 应急专家
                            font(v-if='scope.row.personnel_type === 2') 应急人员
                    //el-table-column( prop="skill" header-align="center" align="center" label="人员说明" sortable='custom')
                      template(slot-scope='scope')
                        span(:title='scope.row.skill') {{scope.row.skill |ellipsis}}
                    el-table-column( prop header-align="center" align="center" label="操作" width=180)
                        template.operation( slot-scope="scope")
                            el-button( type="text"  size="mini" v-if="isAuth('em:proficient:info')" @click="queryHandle(scope.row)") 详情
                            el-button( type="text"  size="mini" v-if="isAuth('em:proficient:update')" @click="addOrUpdateHandle(scope.row.id)") 编辑
                            el-button( type="text"  size="mini" v-if="isAuth('em:proficient:delete')" @click="deleteHandle(scope.row.id)") 删除
        el-footer.box_footer
            el-pagination(@size-change="sizeChangeHandle" background  @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"  :total="totalPage" layout="total, sizes, prev, pager, next, jumper")
        //- 弹窗, 新增 / 修改
        add-or-update(v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshdatalist="getDataList")
        query-detail(v-if="queryDetailVisible" ref="queryView" @refreshdatalist="getDataList")
        //- config-role(v-if="configRoleVisible" ref="configView" @refreshdatalist="getDataList")
</template>

<script>
import AddOrUpdate from './proficient-add-or-update'
import queryDetail from './query-detail'
import dragTable from '../../components/tab'
// import configRole from './config-role'
export default {
  name: 'em-person',
  components: {
    AddOrUpdate,
    queryDetail,
    dragTable
  },
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 9) {
        return value.slice(0, 9) + '...'
      }
      return value
    }
  },
  computed: {
    currentHeight() {
      return this.$store.state.d2admin.currentHeight.height
    }
  },

  data () {
    return {
      data: [],
      dataForm: {
        types: []
      },
      dataList: [],
      nations: [],
      types: [
          { id: '1', name: '医学救援' },
          { id: '2', name: '消防' },
          { id: '3', name: '抢险' },
          { id: '4', name: '防爆' },
          { id: '5', name: '谈判' },
          { id: '6', name: '人道救援' }
      ],
      politicCountenances: [
        { id: '1', name: '共青团员' },
        { id: '2', name: '预备党员' },
        { id: '3', name: '党员' },
        { id: '4', name: '群众' },
        { id: '5', name: '其它' }
      ],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      sort: '',
      order: '',
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      queryDetailVisible: false,
      configRoleVisible: false,
      checkList: [], //筛选数据
      tableHeader: [
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'gender', slot: true },
        { label: '出生日期', prop: 'birthday' },
        { label: '政治面貌', prop: 'politic_countenance', slot: true },
        { label: '民族', prop: 'nationName' },
        { label: '证件号码', prop: 'card_number' },
        { label: '移动电话', prop: 'mobile' },
        { label: '人员专长', prop: 'typesName', slot: true },
        { label: '人员类型', prop: 'personnel_type', slot: true }
      ],
      tableOption: {
        border: false, //是否边框
        maxHeight: 500 //高度
      }
    }
  },
  watch: {
    totalPage() { //注意这个函数的名字必须和你监听data中的属性的名字一样，这样才能当你data中的属性发生变化时，触发这个函数
      let pages = Math.ceil(this.totalPage / this.pageSize)//新数据总页数
      //总页数小于当前页数则重新加载列表数据
      if (pages < this.pageIndex) {
          this.pageIndex = pages || 1
          this.getDataList()//获取表格数据的方法
      }
    }
  },
  created () {
    this.checkList = [...this.tableHeader]
    this.getDataList()
    this.getNation()
    // this.getAllTypes()
  },
  methods: {
    //重置
    reSet() {
      this.pageIndex = 1
      this.dataForm = {}
      this.getDataList()
    },
    //获取民族信息
    getNation () {
      this.$http({
        url: this.$http.adornUrl('/emPerson/getAllNation'),
        method: 'get'
      }).then(data => {
        // console.log("data", data)
        if (data && data.code === 0) {
          this.nations = data.result
        }
      })
    },
    //获取人员专长
    getAllTypes () {
      this.$http({
        url: this.$http.adornUrl('/emPerson/getAllTypes'),
        method: 'get',
        params: { stationId: localStorage.getItem('stationId') }
      }).then(data => {
        // console.log('data', data)
        if (data && data.code === 0) {
          this.types = data.result
        }
      })
    },
    //获取政治面貌
    // getAllPoliticCountenance () {
    //   this.$http({
    //     url: this.$http.adornUrl('/emPerson/getAllPoliticCountenance'),
    //     method: 'get'
    //   }).then(data => {
    //     // console.log("data", data);
    //     if (data && data.code === 0) {
    //       this.politicCountenance = data.result
    //     }
    //   })
    // },
    //查看当前用户角色信息
    queryHandle (id) {
      this.queryDetailVisible = true
      this.$nextTick(() => {
        this.$refs.queryView.init(id)
      })
    },
    configHandle (row) {
      // console.log("row", row)
      this.configRoleVisible = true
      this.$nextTick(() => {
        this.$refs.configView.init(row)
      })
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.order = 'desc'
      } else {
        this.order = 'asc'
      }
      if (column.column.columnKey) {
        this.sort = column.column.columnKey
      } else {
        this.sort = column.prop
      }
      this.getDataList()
    },
    // 获取数据列表
    getDataList (sort, order) {
      this.dataListLoading = true
      // console.log(this.dataForm.types)
      this.$http({
        url: this.$http.adornUrl('/emProficient/getProficientList'),
        method: 'post',
        data: {
          name: this.dataForm.name,
          card_number: this.dataForm.cardNumber,
          mobile: this.dataForm.mobile,
          politic_countenance: this.dataForm.politicCountenance,
          types: this.dataForm.types,
          nation: this.dataForm.nation,
          personnelType: this.dataForm.personnelType,
          page: this.pageIndex,
          size: this.pageSize,
          sort: sort,
          order: order,
          stationId: localStorage.getItem('stationId')
        }
      }).then(data => {
        console.log('data', data)
        if (data && data.code === 0) {
          this.dataList = data.result.records
          this.totalPage = data.result.total
          this.dataList.forEach(e => {
            if (e.types) {
              let arr = e.types.split(',')
              let typesNameArr = []
              this.types.forEach(type => {
                if (arr.includes(type.id)) {
                  typesNameArr.push(type.name)
                }
              })
              e.typesName = typesNameArr.join(',')
            } else {
              e.typesName = ''
            }
          })
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle (id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle (id) {
      // var userIds = id ? [id] : this.dataListSelections.map(item => {
      //       return item.userId
      //     });
      // console.log("id", id)
      this.$confirm(`确认删除该应急团队?`, '删除应急团队', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/emProficient/deleteProficient'),
            method: 'post',
            data: id
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style lang='scss' scoped>
.inputWidth {
  width: 180px;
}
</style>