<template>
  <div class="app-container">
    <div class="box-container">
      <div class="contain-title">特约专家列表</div>
    </div>
    <div class="content-container">
      <complex-table :tableData="tableData" :tableItem="tableItem" :operatingList='operatingList' :total='total'
        v-on:sortSingleExpert="sortSingleExpert" :jump="'expert'" v-on:current="current"></complex-table>
    </div>
    <expertSort ref="sort" v-on:rearrange="rearrange"></expertSort>
  </div>
</template>

<script>
  import complexTable from '@/components/complexTable'
  import expertSort from './expertSort'
  import { expertListUrl } from '@/api/specialExpert' //  expertUserUrl
  import { parseTime } from '@/utils/index'
  import ret from '@/utils/comTable'
  import crossDomin from '@/utils/CrossDomain'
  export default {
    data() {
      return {
        searchText: '',
        selectMode: '',
        formData: {},
        operatingList: [ // 在子组件中遍历事件
          {
            text: '排序',
            event: 'sortSingleExpert',
            icon: 'primary'
          }
        ],
        dataList: [], //  拉去专家数据存到dataList这个数组里面
        tableData: [], //  每一页的存储的数据
        total: 0, //  页码总数
        tableItem: [ // 表头信息
          {
            prop: 'level',
            tit: '专家序号'
          },
          {
            prop: 'name',
            tit: '真实姓名',
            active: 'active' // 点击加颜色，加此选项
          },
          {
            prop: 'title',
            tit: '职称',
            width: '160'
          },
          {
            prop: 'orgName',
            tit: '所在机构',
            width: '160'
          },
          {
            prop: 'address',
            tit: '所在城市',
            width: '160'
          },
          {
            prop: 'phone',
            tit: '联系电话',
            width: '160'
          },
          {
            prop: 'email',
            tit: '联系邮箱',
            width: '160'
          },
          {
            prop: 'assTime',
            tit: '入驻时间',
            width: '160'
          },
          {
            operate: 'edit',
            width: '200'
          }
        ]
      }
    },
    created() {
      this.expertList()
    },
    components: {
      complexTable, //  表子页面
      expertSort //  专家排序页面
    },
    methods: {
      expertList() {
        this.$http.get(expertListUrl, '', (response) => { //  拉去专家信息列表，总数据存在dataList，tableData存每一页的信息
          if (response.success && response.data) {
            const epData = response.data
            let j = 0
            for (let i = 0; i < epData.length; i++) {
              epData[i].assTime = parseTime(epData[i].assTime).substr(0, 16)
              j++
              crossDomin.getUserInfo(epData[i].id, data => {
                j--
                Object.assign(epData[i], data)
                if (j === 0) {
                  this.dataList = epData
                  this.total = epData.length
                  if (this.total >= 20) {
                    this.tableData = this.dataList.slice(0, 20)
                  } else {
                    const array = this.dataList
                    if (epData.length !== 0) {
                      ret.gapFilling(array)
                    }
                    this.tableData = array
                  }
                }
              })
            }
            if (epData.length === 0) {
              this.dataList = []
              this.tableData = []
              this.total = 0
            }
          } else {
            this.$sort.total = 0
            this.tableData = []
          }
        })
      },
      rearrange() {
        this.expertList()
      },
      sortSingleExpert(obj) {
        this.$refs.sort.dialogFormVisible = true
        this.$refs.sort.form = { ...obj }
      },
      current(val) { // 点击页码
        if (val <= Math.ceil(this.total / 20)) {
          this.tableData = this.dataList.slice(20 * (val - 1), 20 * val)
          if (val === Math.ceil(this.total / 20)) {
            ret.gapFilling(this.tableData)
          }
        } else {
          const array = this.dataList.slice(20 * val)
          ret.gapFilling(array)
          this.tableData = array
        }
      }
    }
  }
</script>