<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'
          }
        }
      ],
      // newColumns:[],            //开启自定义字段展示的列(根据多选框变化的展示列)
      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'],
      },
      // allKeys:[],           // 所有可展示的字段(对象数组,含keyname 和key)
      // selKeys:[],           // 选中展示字段(含key和keyName)
      // selKeysList:[],       // 选中展示字段(仅key), 给多选框用
      // maxLength:6,          // 最大展示的数量

      postParams : [],
      customKeyEnable:false,       // cookie里存的 是否开启自定义字段
      tbl:'tbl_building',      // 当前表名,
      // extList:[],          // ext请求到的所有自定义字段列表
      // resourceId:'',           // 当前小区的id
      // selectList:[] ,      // 批量操作小区id数组
      // isSingle: true,      // 批量还是单个
      // isAll: true,         // 全量还是已选中
      // searchList:[],         // 动态渲染的搜索列表
      keyCodeList:[],         // 动态搜索的keycode列表
      searchParams:{},         //搜索的列表
      // formTab : this.$form.createForm(this),
      tableData:[],
      // selectedRowKeys: [],
    }
  },
  created () {   // 进页面获取数据
    // this.customKeyEnable=this.$cookie.get('customKeyEnable')
    // if(this.customKeyEnable && this.customKeyEnable == 'true'){
    //   this.getKeys()
    //   this.getAllKeys()
    // }else {
    // this.getList()
    // } 

  },
  watch:{
    // pagination:{
    //   handler(newValue, oldValue) { 
    //   },
    //   deep:true,
    // }
  },
  mounted(){
    // if (this.$route.name == 'demo') { 
    this.$nextTick(function () {
      this.getSearchParams()
    })
    // }
  },
  // computed: {
  //   rowSelection() {
  //     const { selectedRowKeys } = this
  //     return {
  //       selectedRowKeys,
  //       onChange: this.onSelectChange,
  //       onSelection: this.onSelection,
  //     }
  //   },
  // },
  methods:{
    // toView(params){  // 查看详情
    //   this.$router.push({path: `/houseData/buildings/${params.id}`})
    // },
    // search() {      // 点击搜索按钮
    //   //需要发送ajax
    //   this.pagination.current = 1
    //   this.pagination.pageNo = 1
    //   this.getList()
    // },
    // reset(){       // 重置表单
    //   this.pagination.pageNo = 1
    //   this.pagination.current = 1
    //   this.form.resetFields()
    //   this.getList()
    // },
    // backPage(){    // 返回按钮
    //   this.$router.back()
    // },
    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()
    },
    // selKeysNew(val) {         //重新赋值选中项数组
    //   this.selKeysList = val
    // },
    // /**
    //  * 重新赋值展示的列 和当前选中数
    //  */
    // changeColumnsList(value){
    //   // 当前已选中数
    //   this.nowNum = value.length-1
    //   // 重新赋值给展示的列  newColumns
    //   this.newColumns = value
    //   // 存入cookie
    //   this.$com.saveColumnsCookie(this.tbl,this.selKeysList, this.allKeys)
    // },

    // onSelectChange(selectedRowKeys) {   // 被勾选的数据 
    //   this.selectedRowKeys = selectedRowKeys
    // },
    getList(){    // 获取数据
      //处理动态的搜索条件,耦合到搜索列表
      let obj  = {}
      this.keyCodeList.forEach(col => {
        let  a  = this.form.getFieldValue(col) || ''
        if (a.constructor === Array) {   //如果是数组(用逗号隔开放进入参)
          a = a.join('、')
        }
        this.$set(obj,col,a)
      })
      let 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(){
      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.params){
        //   Object.keys(searchParams.params).forEach(elem=>{
        //     switch (elem) {
        //     case 'unitAddr_l':
        //       this.form.setFieldsValue({ 'unitAddr_l': searchParams.params[elem] })
        //       break
        //     default:
        //       break
        //     }
        //   })
        // }
        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()
    },
    // getKeys(){   // 获取可显示全部表格字段 和 maxlength
    //   this.$ajax.get({
    //     url: this.$api.GET_KEYS.replace('{table}',this.tbl),
    //   }).then(res=>{
    //     if (res.code == 200) {
    //       this.maxLength = !!this.$com.confirm(res, 'data.content.maxLength', []) ? this.$com.confirm(res, 'data.content.maxLength', []) : this.maxLength
    //       this.allKeys = this.$com.confirm(res, 'data.content.allKeys', []) // 全部字段存入allkeys
    //       // 优先获取本地已选字段,没有则取allkeys里面的
    //       this.selKeys =  this.$cookie.get(this.tbl) ? JSON.parse(this.$cookie.get(this.tbl)) : this.allKeys.slice(0,this.maxLength)

    //       // 判断本地的已选字段是否在全部字段当中,被删除的自定义字段会被删除 (处理可能被删除的自定义字段)
    //       let newArr= []
    //       this.selKeys.forEach(col=>{
    //         this.allKeys.forEach(item=>{
    //           if (col.key == item.key) {
    //             newArr.push(col)
    //             return
    //           }
    //         })
    //       })
    //       // 重新赋值已选中字段 (处理可能被删除的自定义字段)
    //       this.selKeys = newArr
    //       // 此时得到了allkeys和selkeys (带key 和 keyName)  需要变成 只有key的数组(多选框要用)
    //       this.selKeys.forEach(col=>{
    //         this.selKeysList.push(col.key)
    //       })
    //       // 已选中的数根据selkeys的长度实时展示
    //       this.nowNum = this.selKeys.length
    //       // 1.根据allkeys重写全部的列
    //       this.columns = []
    //       this.allKeys.forEach(col=>{
    //         if(col.key.indexOf('&') != -1){        // 如果有& 就取xx.xx
    //           this.columns.push(   {
    //             title: col.keyName,
    //             dataIndex: col.key.split('&')[0] +'.'+ col.key.split('&')[1],
    //             key: col.key.split('&')[0] +'.'+ col.key.split('&')[1]
    //           },)
    //         }else{
    //           this.columns.push(   {
    //             title: col.keyName,
    //             dataIndex: col.key,
    //             key: col.key
    //           },)
    //         }
    //       })

    //       // 2.根据selkeys重写选中的列
    //       this.newColumns = []
    //       this.selKeys.forEach(col=>{
    //         if(col.key.indexOf('&') != -1){      // 如果有& 就取xx.xx
    //           this.newColumns.push(   {
    //             title: col.keyName,
    //             dataIndex: col.key.split('&')[0] +'.'+ col.key.split('&')[1],
    //             key: col.key.split('&')[0] +'.'+ col.key.split('&')[1]
    //           },)
    //         }else{
    //           this.newColumns.push(   {
    //             title: col.keyName,
    //             dataIndex: col.key,
    //             key: col.key
    //           },)
    //         }
    //       })
    //       // 增加 操作
    //       this.newColumns.push({
    //         title: '操作',
    //         dataIndex: 'action',
    //         width: 160,
    //         scopedSlots: {
    //           customRender: 'action'
    //         }
    //       })
    //     }
    //   })
    // },
    // showModal(row) {    //展开模态框
    //   this.resourceId = row.id
    //   this.isAll = false
    //   this.isSingle = true
    //   this.getExtKey(row)
    // },
    // async getExtKey(row){
    //   //  处理过的返回数值
    //   await this.$ajax.get({
    //     url: this.$api.GET_SAFE_EXT.replace('{table}',this.tbl).replace('{id}',row.id),
    //   }).then(res=>{
    //     if (res.code == 200) {
    //       this.extList  = this.$com.confirm(res, 'data.content', [])
    //       this.$refs.modal.isShow = true
    //     }
    //   })
    //   this.$refs.modal.seeData()
    // },
    // async getAllKeys(){         // 获取当前列表下所有的自定义字段
    //   await this.$ajax.get({
    //     url: this.$api.GET_TBLS_KEYS,
    //     params:{
    //       tbl:this.tbl
    //     }
    //   }).then(res=>{
    //     if (res.code == 200) {
    //       this.searchList = []
    //       this.extList  = this.$com.confirm(res, 'data.content', [])
    //       this.extList.forEach(col=>{        // 遍历所有字段拿到 支持搜索的所有字段
    //         if (col.canSearch==true) {
    //           if (col.compntType == 'checkbox' || col.compntType == 'radio'||col.compntType == 'date'||col.compntType == 'select') {
    //           } else {
    //             col.keyCode =  col.keyCode+ '_l'
    //           }
    //           this.searchList.push(col)
    //         }
    //       })
    //       this.keyCodeList =[]
    //       this.searchList.forEach(col=>{      // 支持搜索的字段遍历,取出keyCode
    //         this.keyCodeList.push(col.keyCode)
    //       }) 
    //     }
    //   })
    // },
    // saveSingleKeys(params){           // post保存一条自定义数据
    //   this.$ajax.post({
    //     url: this.$api.POST_EXT,
    //     params:params,
    //   }).then(res => {
    //     this.getList()
    //     this.$refs.modal.isShow = false
    //     this.$refs.modal.formExt.resetFields()
    //   })
    // },
    // saveSomeKeys(params){           // 批量post保存自定义
    //   this.$ajax.post({
    //     url: this.$api.POST_EXT_BATCH,
    //     params:params,
    //   }).then(res => {
    //     if (res.code== '200') {
    //       this.$refs.modal.formExt.resetFields()
    //       this.getList()
    //       this.$refs.modal.isShow = false
    //     }
    //   })
    // },
    // chooseAll(){
    //   this.isAll = true
    //   this.isSingle = false
    //   this.$refs.modal.isShow = true
    //   this.$refs.modal.seeData()         // 打开弹窗恢复默认的选项
    // },
    // choose(){
    //   this.isAll = false
    //   this.isSingle = false
    //   if (this.selectedRowKeys.length <1) {
    //     this.$message.error('请勾选至少一条数据')
    //   }else{
    //     this.$refs.modal.isShow = true
    //   }
    //   this.$refs.modal.seeData()       // 打开弹窗恢复默认的选项
    // },
  },
}
</script>

<style>

</style>
