<template>
  <div>
    <tableAndMut :tableData="tableData" :pagination="pagination" ></tableAndMut>
  </div>
</template>

<script>
export default {
  name: 'demo',
  data(){
    return {
      // formTab : this.$form.createForm(this),
      form: this.$form.createForm(this),
      // nowNum:0,
      // arr:{},
      // formLayout: 'horizontal',
      columns: [ // 表格展示的列
        {
          title: '门牌幢',
          dataIndex: 'unitNo',
          key: 'unitNo',
          width: '15%'
        },
        {
          title: '门牌幢地址',
          dataIndex: 'unitAddr',
          key: 'unitAddr',
          width: '40%'
        },
        {
          title: '门牌属性',
          dataIndex: 'unitKind',
          key: 'unitKind',
          width: '15%',
          customRender: text => {
            if (text == '1') {
              return '高层'
            } else if(text == '2'){
              return '多层'
            } else if(text == '3'){
              return '小高层'
            } else if(text == '4'){
              return '联体别墅'
            } else if(text == '5'){
              return '单体别墅'
            } else {
              return ' '
            }
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: '20%',
          scopedSlots: {
            customRender: 'action'
          }
        }
      ], 
      pagination: { // 分页信息
        pageNo: 1,
        pageSize: 10,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        defaultPageSize: 20,
        showQuickJumper: true,
        onChange: this.pageChange,
        showSizeChanger: true,
        showTotal: total => `总条数: ${total}`,
        onShowSizeChange: this.showSizeChange,
        pageSizeOptions: ['10', '20', '50', '100'],
      }, 

      postParams: [],
      customKeyEnable: false, // cookie里存的 是否开启自定义字段
      tbl: 'tbl_building', // 当前表名,
      keyCodeList: [], // 动态搜索的keycode列表
      searchParams: {}, //搜索的列表 
      tableData: [], 
    }
  },
  mounted(){ 
    this.$nextTick(function () {
      this.getSearchParams()
    }) 
  }, 
  methods: {
    pageChange(page, pageSize){ //分页切换
      this.pagination.pageNo = page
      this.pagination.current = page
      this.pagination.pageSize = pageSize
      this.getList()
    },
    showSizeChange(current, size) { //切换展示条数
      this.pagination.pageNo = 1
      this.pagination.current = 1
      this.pagination.pageSize = size
      this.getList()
    }, 
    getList(){ // 获取数据
      //处理动态的搜索条件,耦合到搜索列表
      const obj = {}
      this.keyCodeList.forEach(col => {
        let a = this.form.getFieldValue(col) || ''
        if (a.constructor === Array) { //如果是数组(用逗号隔开放进入参)
          a = a.join('、')
        }
        this.$set(obj, col, a)
      })
      const searchParams = Object.assign({}, {
        'unitAddr_l': this.form.getFieldValue('unitAddr_l') || '',
      }, {
        'sectId': 1706011138324078
      }, obj)
      this.searchParams = searchParams
      this.$ajax.get({
        url: this.$api.GET_BUILDINGS_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')
          this.pagination.total= this.$com.confirm(res, 'data.totalRows', 0)
          this.tableData = this.$com.confirm(res, 'data.content', [])
          this.tableData.forEach(col => {
            if (col.unitKind == '1') {
              col.unitKind = '高层'
            } else if(col.unitKind == '2') {
              col.unitKind = '多层'
            }else if(col.unitKind == '3') {
              col.unitKind = '小高层'
            }else if(col.unitKind == '4') {
              col.unitKind = '联体别墅'
            }else if(col.unitKind == '5') {
              col.unitKind = '单体别墅'
            }
            if (col.unitFlag == false) {
              col.unitFlag = '无'
            } else {
              col.unitFlag = '有'
            }
          })
        }
        //
        // 存储当前页面列表的搜索信息
        //

        this.$com.storeSearchParams(
          this.$route.name,
          this.pagination,
          searchParams
        ) 

      })
    },
    /**
     * 从vuex中或已存储的搜索条件，判断此条件是否为当前路由的 。如果是则使用store里面的数据
     */
    getSearchParams(){
      const 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 && searchParams.pagination.pageNo!=1){
            this.pagination.pageNo = searchParams.pagination.pageNo
            this.pagination.current = searchParams.pagination.pageNo
          }
        }
      }
      this.getList()
    },
  },
}
</script>

<style>

</style>
