// 业委会成员列表
<template>
  <div class="routerWapper">
    <div class="portalDetailTitle" v-if="$route.name=='members'">
      	<span class="title"> 业委会成员列表 </span>
			<div class="detailOperations">
				<a-button @click="backPage"> 返回 </a-button>
			</div>
		</div>
    <div v-if="$route.name=='members'" class="layoutMargin layoutPadding">
       <a-form :form="form" class="protalForm" >
        <a-row v-if="customKeyEnable && customKeyEnable == 'true' && keyCodeList.length>0" class="formItem" type="flex" align='top' :gutter="18">
          <template v-if="customKeyEnable">
            <a-col span="8"  v-for="i in searchList" :key="i.id" >
              <a-form-item :label="i.keyName" class="formItem" :label-col="{span:10}" :wrapper-col="{span:14}">
                <a-select @change="handleChangeZdy(i.keyCode,$event)" v-if="i.compntType == 'select' || i.compntType == 'radio'" showSearch allowClear placeholder="请选择查询内容" v-decorator="[i.keyCode]">
                  <a-select-option v-for="(item) in JSON.parse(i.sltJson)" :key="item" :value="item">{{ item }}</a-select-option>
                </a-select>
                <a-select @change="handleChangeZdy(i.keyCode,$event)" mode="multiple" v-else-if="i.compntType =='checkbox'"  placeholder="请选择查询内容(多选)" v-decorator="[i.keyCode]">
                  <a-select-option v-for="(item) in JSON.parse(i.sltJson)" :key="item" :value="item">{{ item }}</a-select-option>
                </a-select>
                <a-date-picker @change="handleChangeZdy(i.keyCode,$event)" v-else-if="i.compntType =='date'"  v-decorator="[i.keyCode]"  />
                <a-input v-else-if="i.compntType =='num'" type="tel" placeholder="请输入查询内容" v-decorator="[i.keyCode]" />
                <a-input v-else placeholder="请输入查询内容" v-decorator="[i.keyCode]" />
              </a-form-item>
            </a-col>
          </template>
          <a-col span="24" class="algin-right">
            <a-button @click="reset">重置</a-button>
            <a-button type="primary" @click="search">搜索</a-button>
            <!-- <a-button type="primary" @click="exportList">导出数据</a-button> -->
          </a-col>
        </a-row>
      </a-form>
      <!-- <p class="gayLine noline" /> -->
      <div class="portalTableOperates">
        <tableAndMut ref="childTab" :tableData="tableData" :pagination="pagination" :tbl="tbl" />
      </div>
    </div>
  <RouterWapper v-else></RouterWapper>
  </div>
</template>

<script>
export default {
  name:'member',
  data() {
    return {
      customKeyEnable:false,    // cookie里存的是否开启自定义字段
      tbl:'tbl_ic_member',      // 当前表名,
      searchList:[],            // 动态渲染的搜索列表
      keyCodeList:[],           // 动态搜索的keycode列表
      searchParams:{},          //搜索的列表
      searchForm:{},
      columns: [                //未开启自定义字段展示的列
        {
          title: '职位',
          dataIndex: 'dirDuty',
          key: 'dirDuty'
        },
        {
          title: '姓名',
          dataIndex: 'dirName',
          key: 'dirName'
        }, {
          title: '性别',
          dataIndex: 'dirSex',
          key: 'dirSex'
        },
        {
          title: '联系方式',
          dataIndex: 'phone',
          key: 'phone'
        },
        {
          title: '政治面貌',
          dataIndex: 'dirPoliticsStatus',
          key: 'dirPoliticsStatus'
        },
        {
          title: '身份证号码',
          dataIndex: 'IDNum',
          key: 'IDNum'
        },   {
          title: '出生年月',
          dataIndex: 'dirBirthDate',
          key: 'dirBirthDate'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 160,
          scopedSlots: {
            customRender: 'action'
          }
        }
      ],
      pagination: {             // 分页信息
        pageNo: 1,
        pageSize: 20,
        total: 0,
        current: 1,
        defaultCurrent: 20,
        showTotal: total => `总条数: ${total}`,
        defaultPageSize:2,
        showQuickJumper: true,
        onChange: this.pageChange,
        showSizeChanger:true,
        onShowSizeChange:this.showSizeChange,
        pageSizeOptions:['10','20','50','100'],
      },
      tableData:[],
    }
  },
  beforeCreate() {    // 页面进来创建form
    this.form = this.$form.createForm(this)
  },
  created () {   // 进页面获取数据
    this.customKeyEnable=this.$cookie.get('customKeyEnable')
    if(this.customKeyEnable && this.customKeyEnable == 'true'){
      // this.getKeys()
      // this.getAllKeys()
    }else {
      this.getList()
    }
  },
  mounted(){
    if (this.$route.name == 'members') {
      this.$nextTick(function () {
        this.getSearchParams()
      })
    }
  },
  methods:{
    handleChangeZdy(i,e){       // 自定义字段 - 搜索条件的 change
      if (Object.prototype.toString.call(e)== '[object Array]') {
        e = e.join(',')
      } else if (Object.prototype.toString.call(e)== '[object Object]') {
        e = this.$moment(e).format('YYYY-MM-DD')
      }
      this.form.setFieldsValue({         // 传入的i 是i.keyCode   将form表单设置成最新的值
        i:e
      })
      setTimeout(()=>{                    // 延时器,去掉会拿不到最新的value
        this.getList()
      },0)
    },
    pageChange(page, pageSize){        //分页切换
      this.pagination.pageNo = page
      this.pagination.current = page
      this.getList()
    },
    showSizeChange(current, size) {   //每页条数切换
      this.pagination.pageNo = 1
      this.pagination.current = 1
      this.pagination.pageSize = size
      this.getList()
    },
    reset(){  // 重置表单
      this.form.resetFields()
      this.pagination.pageNo = 1
      this.pagination.current = 1
      this.pagination.pageSize = 20
      this.getList()
    },
    search() {    // 搜索按钮
      this.pagination.current = 1
      this.pagination.pageNo = 1
      //需要发送ajax
      this.getList()
    },
    backPage(){    // 返回按钮
      this.$router.back()
    },
    getList(){    // 获取数据
      //处理动态的搜索条件,耦合到搜索列表
      let obj  = {}
      this.keyCodeList.forEach(item => {
        let value  = !this.form.getFieldValue(item)? '':this.form.getFieldValue(item)
        if (Object.prototype.toString.call(value)== '[object Array]') {   //如果是数组
          value = value.join(',')
        }else if(Object.prototype.toString.call(value) === '[object Object]'){
          value = this.$moment(value).format('YYYY-MM-DD')
        }
        this.$set(obj,item,value)
      })

      let searchParams = Object.assign({
        'hocId':this.$route.query.id,
        // 'sectType_in': '1',
      },obj)

      this.searchParams = searchParams

      this.$ajax.get({
        url: this.$api.GET_MEMBERS_LIST,
        params: Object.assign({},searchParams, {
          pageSize:this.pagination.pageSize,
          pageNo:this.pagination.pageNo,
        })
      }).then(res => { 
        if (res.code === '200') {
          /**
           *
           *      在请求数据的成功的时候   保存请求的各项数据及token   后面下载用
           *
           */
          searchParams.token = this.$cookie.get('token')
          let a = this.tbl + '?'
          for(let k in searchParams){
            a = a+k+'='+ searchParams[k]+ '&'
          }
          this.exportParams = a


          // 正常请求数据得到的结果
          this.pagination.total= this.$com.confirm(res, 'data.totalRows', 0)
          this.tableData = this.$com.confirm(res, 'data.content', [])


          //处理展示的字段
          this.tableData.forEach(col=>{

            if (col.dirDuty == '1') {
              col.dirDuty = '主任'
            } else if(col.dirDuty == '2') {
              col.dirDuty = '预留印鉴副主任'
            }else if(col.dirDuty == '3') {
              col.dirDuty = '副主任'
            }else if(col.dirDuty == '4') {
              col.dirDuty = '业委会成员'
            }

            if (col.dirSex == 'f') {
              col.dirSex = '女'
            } else if(col.dirSex == 'm') {
              col.dirSex = '男'
            }

            if (col.dirPoliticsStatus == '01') {
              col.dirPoliticsStatus = '中共党员'
            } else if(col.dirPoliticsStatus == '02') {
              col.dirPoliticsStatus = '中共预备党员'
            }else if(col.dirPoliticsStatus == '03') {
              col.dirPoliticsStatus = '共青团员'
            }else if(col.dirPoliticsStatus == '04') {
              col.dirPoliticsStatus = '明革党员'
            }else if(col.dirPoliticsStatus == '05') {
              col.dirPoliticsStatus = '民盟盟员'
            }else if(col.dirPoliticsStatus == '06') {
              col.dirPoliticsStatus = '民建会员'
            }else if(col.dirPoliticsStatus == '07') {
              col.dirPoliticsStatus = '民进会员'
            }else if(col.dirPoliticsStatus == '08') {
              col.dirPoliticsStatus = '农工党党员'
            }else if(col.dirPoliticsStatus == '09') {
              col.dirPoliticsStatus = '致公党党员'
            }else if(col.dirPoliticsStatus == '10') {
              col.dirPoliticsStatus = '九三学社社员'
            }else if(col.dirPoliticsStatus == '11') {
              col.dirPoliticsStatus = '台盟盟员'
            }else if(col.dirPoliticsStatus == '12') {
              col.dirPoliticsStatus = '业委会成员'
            }else if(col.dirPoliticsStatus == '13') {
              col.dirPoliticsStatus = '群众'
            }else if(col.dirPoliticsStatus == '14') {
              col.dirPoliticsStatus = '港澳同胞'
            }

          })
        }
        //
        // 存储当前页面列表的搜索信息
        //
        this.$com.storeSearchParams(
          this.$route.name,
          this.pagination,
          Object.assign({},obj,{
            'hocId':this.$route.query.id
          })
        )
      })
    },
    /**
     * 从vuex中或已存储的搜索条件，判断此条件是否为当前路由的 。如果是则使用
     */
    getSearchParams(){
      let searchParams = !this.$store.state.listSearchParams?null:this.$store.state.listSearchParams[this.$route.name]
      if(!!searchParams && !!searchParams.routeName && (this.$route.name == searchParams.routeName)){
        if(!!searchParams.pagination){
          if(!!searchParams.pagination.pageNo){
            this.pagination.pageNo = searchParams.pagination.pageNo
            this.pagination.current = searchParams.pagination.current
            this.pagination.pageSize = searchParams.pagination.pageSize
          }
        }
      }
      this.getList()
    },
    toView(params){      // 操作里面去详情
      this.$router.push({path: `/houseData/member/${params.id}`})
    },
  },

}
</script>

<style scoped>
  .nowNum{
   position: absolute;
    width: 15px;
    top: 31px;
    right: 13px;
    z-index: 9;
    color: red;
  }
</style>

