<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="聘级链路图" name="first" v-if="permission.hasPermission(`atlas/emp-user-line`)">
          <div class="filter-user">
            <el-input v-model="mainUserName" size="small" style="width:300px;">
              <template slot="prepend">会员编号</template>
            </el-input>
            <el-input v-model="periodNum" size="small" style="width:150px;">
              <template slot="prepend">期数</template>
            </el-input>
            <el-button type="primary" size="small" @click="getMainData()">确定</el-button>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(timeLine, index) in timeLineData"
              :key="index"
              icon="el-icon-top"
              type="primary"
              size="large">
              <el-tag>会员编号：{{timeLine.USER_NAME}}</el-tag>
              <el-tag type="success">姓名：{{timeLine.REAL_NAME}}</el-tag>
              <el-tag type="warning">级别：{{timeLine.DEC_LV_NAME}}</el-tag>
              <el-tag type="warning">聘级：{{timeLine.EMP_LV_NAME}}</el-tag>
              <el-tag>加入期数：{{timeLine.PERIOD_AT}}</el-tag>
              <el-tag type="danger">区位：{{timeLine.LOCATION}}</el-tag>
              <el-tag>状态：{{timeLine.STATUS_NAME}}</el-tag>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="聘级网络列表" name="two" v-if="permission.hasPermission(`atlas/emp-user-list`)">
          <div class="filter-user">
            <el-input v-model="filterForm.userName" size="small" style="width:300px;">
              <template slot="prepend">会员编号</template>
            </el-input>
            <el-input v-model="filterForm.periodNum" size="small" style="width:150px;">
              <template slot="prepend">期数</template>
            </el-input>
            <el-button type="primary" size="small" @click="handleFilter">确定</el-button>
          </div>
          <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight()">
            <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
              <template slot-scope="scope">
                <template v-if="scope.row[tableHeader.index].other.tag" >
                  <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
                </template>
                <template v-else-if="scope.row[tableHeader.index].other.progress" >
                  <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
                               :width="50"
                               :stroke-width="3"></el-progress>
                </template>
                <template v-else>
                  <div v-html="scope.row[tableHeader.index].value"></div>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <div class="white-box-footer">
            <el-button type="success" size="small" @click="handleExport"
                       v-show="permission.hasPermission(`atlas/emp-user-list-export`)">Export Excel
            </el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import store from '@/utils/vuexStore'
  import permission from '@/utils/permission'
  import Pagination from '@/components/Pagination'
  import baseInfo from '@/utils/baseInfo'

  export default {
    name: 'atlas_emp-user-line',
    mounted() {
      this.periodNum = baseInfo.nowPeriodNum()
      this.filterForm.periodNum = baseInfo.nowPeriodNum()
    },
    data() {
      return {
        loading: false,
        tabActiveName: 'first',
        permission: permission,
        timeLineData: null,
        tableHeaders: null,
        tableData: null,
        tool: tool,
        expandDeep: 2,
        topDeep: 0,
        mainUserName: '',
        periodNum: null,
        filterForm: {
            userName: null,
            periodNum: null,
        },
        tool: tool,
      }
    },
    methods: {
      getMainData() {
        this.$message({
          message: '正在获取数据，请稍后',
        })
        let thisObj = this
        let requestData = {
          periodNum: this.periodNum
        }
        if (this.mainUserName !== null) {
          requestData = {userName: this.mainUserName, periodNum: this.periodNum}
        }
        network.getData('atlas/emp-user-line', requestData).then(response => {
          thisObj.timeLineData = response.list
          thisObj.loading = false
        }).catch(response => {
          thisObj.loading = false
        })
      },
      countTopDeep(deep, topDeep) {
        return Number(deep) - Number(topDeep)
      },
      handleFilter () {
          this.loading = true
          this.getData()
      },
      getData () {
          network.getData('atlas/emp-user-list', this.filterForm).then((response)=>{
              this.tableData = response.list
              this.listPeriodNum = response.periodNum
              this.tableHeaders = response.columnsShow ? response.columnsShow : []
              this.loading = false
          }).catch(response => {
              this.loading = false
          })
      },
      handleExport(){
          this.$confirm(`Are you sure you want to export the current data？`, 'Notice', {
              confirmButtonText: 'confirm', // 确定
              cancelButtonText: 'cancel', // 取消
              type: 'warning'
          }).then(() => {
              return network.getData(`atlas/emp-user-list-export`, this.filterForm)
          }).then(response => {
              this.$message({
                  message: response,
                  type: 'success'
              })
          }).catch(response => {

          })
      },
    }
  }

</script>

<style>
  .filter-user {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .filter-user:after {
    content: '';
    display: table;
    clear: both;
  }

  .filter-user .el-input-group {
    position: relative;
  }

  .filter-user .el-input-group, .filter-user .el-button {
    float: left;
    margin-right: 15px;
  }

  .el-timeline {
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 14px;
    overflow-x: auto;
  }

  .el-timeline .el-tag {
    height: 20px;
    line-height: 18px;
    vertical-align: middle;
  }
</style>
