<template>
  <div class="table-bg table-container" :class="table.resizable?'resizable-table':''">

    <div class="report-total-container" v-if="ifTotal===1&&totalShowType===2">
      <total-card :name="item.name" :number="item.value" v-for="(item, index) in totalArr" :key="index"></total-card>
    </div>

    <el-table
      v-loading="loading"
      header-row-class-name="table-head"
      :data="tableData.data"
      @sort-change = "sortChange"
      :border="table.border || table.resizable"
      :empty-text="'暂无数据'"
      @select="handleSelectionChange"
      @select-all="handleSelectionChange"
      :default-sort = "table.defaultSort"
      style="width: 100%">
      <el-table-column v-if="table.select"
                       type="selection"
                       align="center"
                       width="50">
      </el-table-column>
      <el-table-column  v-if="table.index && table.tableLabel.length>0"
                        :label="'序号'"
                        type="index"
                        align="center"
                        width="55"
                        :index="indexMethod">
      </el-table-column>
      <el-table-column
        :resizable = "table.resizable"
        v-for="col in table.tableLabel"
        align="center"
        :key="col.prop"
        :type="col.type"
        :fixed="col.fixed"
        :prop="col.prop"
        :label="col.title"
        :min-width="col.width"
        :sortable="col.sort&&'custom'"
        :show-overflow-tooltip="(col.ellipsis===false)?false:true">
        <template slot-scope="scope">
          <span v-if="col.methods" class="table-link-text" :class="formatteClass(col,scope)"  @click="drillDown(scope.row,col)">
            {{formatter(scope.row, col)||col.prop}}</span>
          <span v-else   class="table-color-text" :class="formatteClass(col,scope)"  >
            {{formatter(scope.row, col)}}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <Page
      v-if="!!ifPage"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      :current-page="pageParam.page"
      :page-sizes="pageParam.pageSizes"
      :page-size="pageParam.pageSize"
      :total="tableData.total"
      :style="table.pageStyle">
    </Page>




  </div>
</template>

<script>
import Page from './page'
import totalCard from './total-card.vue'
export default {
  name: 'tableComponent',
  components:{
    /* 分页组件 */
    Page,
    totalCard
  },
  props: {
    ifPage: {
      default: 1
    },
    ifTotal: {
      default: 0
    },
    totalShowType: {
      default: 1
    },
    tableOption: Object,
    searchParam: Object,
    formatterOptions: Object,
    drillDown:{
      default: ()=>{}
    }
  },
  data: function () {
    return {
      /* 交由组建保管的请求数据 */
      tableData: {
        total: 0,
        data: []
      },
      totalArr: [],
      /* 交由组建保管的分页信息 */
      pageParam: {
        page: 1,
        pageSize: 30,
        pageSizes: [10, 20, 30, 40, 50, 60, 100, 200]
      },
      orderBy: {
        order: '',
        sort: '',
      },
      loading: false
    }
  },
  computed: {
    table: function() {
      let tableOptionDefault = {
        // 配置是否显示网格
        border: false,
        resizable: false,
        // 默认排序 {prop:字段名,order:desc}
        // 分页配置，一般不动
        pageStyle: {
          layout: 'default',
          background: false
        },
        // 是否显示序号
        index:true,
        // 是否显示勾选框
        select:false,
        // 列标签
        tableLabel:[
          {prop:'address',title:'名称',width:'250'},
          {prop:'hasHouse',title:'所属行业',width:'100'},
          {prop:'hasCar',title:'所属客户',width:'100'},
          {prop:'name',title:'创建人',width:'100'},
          {prop:'phone',title:'修改时间',width:'150'}
        ],
        // 操作栏方法
        tableOperate: false ,
      }

      Object.assign(tableOptionDefault, this.tableOption)

      // console.log(this.tableData)
      return tableOptionDefault
    }
  },
  watch: {
    /* 页面传来变化的检索条件 */
    searchParam: function(val){
      let pageParam=Object.assign({},this.pageParam,{page:1})
      this.pageParam=pageParam
      let {sort, order} = val
      this.orderBy = {sort, order}
    },

    /* 分页组件传来变化的分页信息 */
    pageParam: function(val){
      this.getList()
    },

    /* 排序 */
    orderBy: function(val){
      this.getList()
    }
  },
  mounted(){
  },
  methods: {
    // kpi标记
    formatteClass(col, scope){
      let colorOption=col.colorOption ? (col.colorOption.option[scope.row[col.colorOption.depend]]) : ''
      let colorFormatter=''
      let value=scope.row[col.prop]
      if(col.kpiColors && col.queryColorId && value){
        let max=col.queryColorUpper
        let min=col.queryColorLower
        let val=parseFloat(scope.row[col.prop].replace(/,/g, ''))
        if(max===null && min===null){
          colorFormatter=col.kpiColors[col.queryColorId].data
        }else if(max!==null && min!==null && val<=max && val>=min){
          colorFormatter=col.kpiColors[col.queryColorId].data
        }else if(max!==null && min===null && val<=max){
          colorFormatter=col.kpiColors[col.queryColorId].data
        }else if(min!==null && max===null && val>=min){
          colorFormatter=col.kpiColors[col.queryColorId].data
        }
      }
      return colorOption + ' ' + colorFormatter
    },

    // 获取列表
    getList () {
      /* 合成检索条件 */
      Object.assign(this.searchParam, this.orderBy)
      let params = Object.assign({reportType: 0},this.searchParam,this.pageParam,)
      let _this=this
      this.loading=true
      this.$api.report.getReportData(params)
        .then(res => {
          if (res.code == 1) {
            _this.tableData.data = res.data.table.data
            _this.tableData.total  = res.totalNumber
            _this.totalArr  = res.data.table.total
          }
          this.loading=false
        })
    },
    // table组件通用方法
    // table操作栏回调绑定本地事件
    action (obj) {
      let page=this
      page[obj.methods](obj.row)
    },
    // 查询按钮
    search (obj) {
      if (obj) {
        Object.assign(this.searchForm, obj)
      }
      this.getList()
    },
    formatter(row,col){
      let colName=col.prop
      let value=row[colName]
      if(col.formatter == undefined){
      }else if(typeof (col.formatter) === 'string'){
        if(this.formatterOptions && this.formatterOptions[col.formatter]){
          let options = this.formatterOptions[col.formatter]
          for(let o of options){
            if(o.id === value){
              return o.name
            }
          }
          return options[value]
        }
      }else if(typeof (col.formatter) === 'function'){
        value=col.formatter(row,col)
      }
      return value
    },
    btnIsShow(item,obj){
      let btnShow=obj.show
      let btnHide=obj.hide
      let show=true;
      if(btnShow){
        for(let attr in btnShow){
          if(btnShow.hasOwnProperty(attr) && btnShow[attr]!==item[attr]){
            show=false
            break
          }
        }
      }
      if(btnHide){
        for(let attr in btnHide){
          if(btnHide.hasOwnProperty(attr) && btnHide[attr]==item[attr]){
            show=false
            break
          }
        }
      }
      return show
    },
    indexMethod(index) {
      let {ifTotal, totalShowType}=this
      let value= index+1 +(this.pageParam.page-1)*this.pageParam.pageSize;
      if(!!ifTotal && totalShowType === 1){
        let total=this.tableData.total
        if(value>=total){
          value="合计"
        }
      }
      return value
    },
    sortChange(obj){
      let order='';
      let sort='';
      if(obj.order && obj.prop) {
        sort=obj.prop
        if (obj.order.substr(0, 1) === 'a') {
          order='asc'
        }
        if (obj.order.substr(0, 1) === 'd') {
          order='desc'
        }
      }
      this.orderBy={order,sort}
    },
    handleButton(row,methods) {
      this.action({'row':row,'methods':methods});
    },
    handleSizeChange(val) {
      // console.log(val)
      let obj={
        pageSize:val,
        page:1
      }
      this.pageParam=Object.assign({},this.pageParam,obj)
    },
    handleCurrentChange(val) {
      // console.log(val)
      let obj={
        page:val,
      }
      this.pageParam=Object.assign({},this.pageParam,obj)
    },
    handleSelectionChange(val,ele) {
      // this.$emit('selectChange',val,ele);
    }
  },
}
</script>
