<!--  -->
<template>
  <div class="step">
    <small-nav :showTitle='false'>
      <div slot="content">
        <el-cascader
          :key="key"
          v-model="startId"
          size="mini"
          :props="props"
          :options="timeOptions"
          @change="handleChange"
        ></el-cascader>
      </div>
    </small-nav>
    <div class="step-content boderAndRadius">
      <div class="step-content-top">
        <div class="step-content-top-left">
          <el-button
            size="small"
            @click="handleChoose"
            plain
          >{{formTitle}}<i
              style="margin-left:10px;"
              class="el-icon-arrow-down"
            ></i></el-button>
          <el-button
            size="small"
            @click="handleKaoping"
            plain
          >{{params.evaluationIds?params.title:'选择考评组'}}<i
              style="margin-left:10px;"
              class="el-icon-arrow-down"
            ></i></el-button>
          <el-input
            clearable
            @change="handleChangeInput"
            @keyup.enter="handleChangeInput"
            size="small"
            style="margin-left:10px;"
            v-model="params.name"
            prefix-icon="el-icon-search"
            placeholder="请输入姓名搜索"
          ></el-input>
        </div>
        <div class="step-content-top-right">
          <el-button
            size="small"
            @click="showChooseList= true"
            type="primary"
          >开始评分</el-button>
          <!-- handleGetList handleChoose -->
          <el-button
            size="small"
            @click="handleMore"
            plain
          >更多</el-button>
        </div>
      </div>
      <div class="step-content-center boderAndRadius">
        <div
          class="step-content-center-item commonFont"
          v-for="(i,index) in titleList"
          :key="i.id"
        >
          <span
            class="hover"
            :class="{active:i.active}"
            @click="handleActive(i)"
            style="cursor: pointer;"
          >{{i.desc}}( {{i.num}} )</span>
          <div
            v-if="index<titleList.length-1"
            class="step-content-center-item-img"
          >
            <div
              v-if="titleList.length>2 && index===0"
              class='shuxian'
            ></div>
            <i
              v-else
              class="el-icon-arrow-right"
            ></i>
          </div>
        </div>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="staffName"
            label="姓名"
            align='center'
          >
          </el-table-column>
          <el-table-column
            prop="departmentName"
            label="部门"
            align='center'
          >
          </el-table-column>
          <el-table-column
            prop="evaluationName"
            label="考评组"
            align='center'
          >
          </el-table-column>
          <el-table-column
            prop="allScore"
            label="考核结果"
            align='center'
          >
          </el-table-column>
          <el-table-column
            prop="scoreLevel"
            label="绩效等级"
            align='center'
          >
          </el-table-column>
          <el-table-column
            prop="address"
            align='center'
            label="操作"
          >
            <template slot-scope="scope">
              <div>
                <el-button
                  @click="handleLook(scope.row.id)"
                  type="text"
                  size="small"
                >
                  查 看
                </el-button>
              </div>
            </template>
          </el-table-column>

        </el-table>
        <div class="footer">
          <el-pagination
            small
            :hide-on-single-page='true'
            @current-change="handleChangePage"
            layout="prev, pager, next"
            :page-size.sync='params.pageSize'
            :current-page.sync='params.currPage'
            :total="params.totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <ChooseInitiate
      :nOSec='true'
      v-if="showChooseList"
      @cb='handleCallBackChoose'
      subumitText='开始评分'
      popupRightTitle='请选择开始评分的考评组'
      :options='options'
      :showChooseList.sync='showChooseList'
    />
    <EvaluationTeamFilter
      v-if="dialogVisible"
      :value='params.evaluationIds'
      :filtersDic="{startId: this.params.startId }"
      :dialogVisible.sync='dialogVisible'
      @submitClick='submitClick'
      @close='dialogVisible = false'
    />
    <getPersonnel
      v-if="form.isShowPersonnel"
      :value.sync='params.staffIds'
      :isShow.sync='form.isShowPersonnel'
      :showDataList.sync='form.personnelList'
    />
    <popupMange
      :showPopup.sync="showPopupMange"
      popupRightTitle="管理绩效考核"
      :startId='options.startId'
      @cb="handlePopupMangeSubmit"
      @remove="showPopupPerson=true"
    />
   <popupRemovePerson
   title="删除被考核人员"
      :showPopup.sync='showPopupPerson'
      :startId='options.startId'
      @cb="handlePopupRemoveListSuccessful"
    />
  </div>
</template>

<script>
import SmallNav from '@/components/kpi-layout/SmallNav'
import getPersonnel from '@/components/getPersonnel'
import popupMange from '@/components/popupMange'
import PopupRight from '@/components/PopupRight'
import EvaluationTeamFilter from '@/components/EvaluationTeamFilter'
import ChooseInitiate from '@/components/ChooseInitiate'
import popupRemovePerson from '@/components/popupPerson'

import { apiManagerDetail, apiChartList, apiAssessManagerToScore } from '@/api/assessment'
import { getStartsData } from '@/api/report'
let id = 0
export default {
  data () {
    return {
      options: {
        startId: this.$route.query.id || ''
      },
      showPopupMange: false, // 显示管理
      showPopupPerson: false, // 删除人员
      showChooseList: false,
      dialogVisible: false,
      form: {
        isShowPersonnel: false,
        personnelList: {
          list: []
        }
      },
      startId: null,
      params: {
        'currPage': 1,
        'evaluationIds': '',
        'flowProcess': null,
        'pageSize': 5,
        'staffIds': '',
        'staffName': '',
        'startId': 10
      },
      key: 0,
      timeOptions: [{
        startId: 0,
        time: '月底',
        children: []
      }, {
        startId: 1,
        time: '自定义',
        children: []
      }],
      //
      props: {
        value: 'startId',
        label: 'time',
        level: true
      },
      tableData: [],
      formInline: {},
      titleList: []
    }
  },
  components: {
    SmallNav,
    getPersonnel,
    popupMange,
    popupRemovePerson,
    PopupRight,
    EvaluationTeamFilter,
    ChooseInitiate
  },
  computed: {
    formTitle () {
      return this.form.personnelList.list.length > 0 ? this.form.personnelList.title + '等' + this.form.personnelList.list.length + '人' : '选择部门'
    }
  },
  beforeMount () { },
  async mounted () {
    this.params.startId = Number(this.$route.query.id)
    await this.handleStartsReq()
  },
  methods: {
    async handleCallBackChoose (item) {
      if (!item.value) return this.$message.info('请选择考评组！')
      const params = {
        evaluationIds: item.value,
        startId: this.$route.query.id
      }
      let res = await apiAssessManagerToScore(params)
      if (res.code !== 200) return this.$message.error(res.msg)
    },
    submitClick (item) {
      this.params.evaluationIds = item.value
      this.params.title = item.title
      this.params.currPage = 1
      this.handleGetListContent()
      this.dialogVisible = false
    },
    // 获取考评组
    async handleKaoping () {
      this.dialogVisible = true
    },
    handleLook (id) {
      // this.handleKaoping()
      this.$router.push({
        name: 'assessment-performance',
        query: { id }
      })
      console.log('id: ', id)
    },
    handleChangeInput () {
      this.params.currPage = 1
      this.handleGetListContent()
    },
    handleChangePage (value) {
      this.params.currPage = value
      this.handleGetListContent()
    },
    async handleGetListContent (params = this.params) {
      console.log('params: ', params)
      let res = await apiManagerDetail(params)
      if (res.code !== 200) return
      this.tableData = res.data.list
      this.params.totalCount = res.data.totalCount
      this.params.currPage = res.data.currPage
      console.log('res: ', res)
    },
    // 为了不分页直接传999
    async handleStartsReq (type, handleNode) {
      let params = {
        currentPage: 1,
        cycleType: type,
        pageSize: 999
      }
      for (let j in this.timeOptions) {
        // params.startId
        try {
          let res = await getStartsData({
            currentPage: 1,
            cycleType: this.timeOptions[j].startId,
            pageSize: 999
          })
          res = res.data
          console.log('res: ', res)
          this.key += 10
          this.timeOptions[j].children = res.list.map(i => {
            if (i.startId === this.params.startId) {
              this.startId = [this.timeOptions[j].startId, i.startId]
            }
            return i
          })
        } catch (error) {
          console.log(error)
        }
      }
      await this.handleGetChartList()
    },
    async handleChange (item) {
      this.params.startId = item[1]
      this.$router.replace({
        name: 'assessment-stepList',
        query: {
          id: item[1]
        }
      })
      this.params.currPage = 1
      this.params.startId = item[1]
      await this.handleGetChartList()
      console.log('this.params: ', this.params)
      console.log('item: ', item)
    },
    handleSubmit () {
      this.kaopingFrom.showRight = false
    },
    handleCancel () {
      this.kaopingFrom.showRight = false
    },
    // 选择部门
    handleChoose () {
      this.form.isShowPersonnel = true
    },
    handleGetList () {
      console.log('1', this.form.personnelList)
    },
    async handleActive (i) {
      if (i.active) return
      this.titleList = this.titleList.map(j => {
        j.active = false
        return j
      })
      this.params.flowProcess = i.flowProcess
      this.params.currPage = 1
      i.active = true
      await this.handleGetListContent()
    },
    // 获取tabbar
    async handleGetChartList (params = this.params) {
      let res = await apiChartList(Object.assign({}, this.params, {
        currPage: 1,
        pageSize: 100
      }))
      if (res.code !== 200) return
      this.titleList = res.data
      if (this.$route.query.step) {
        this.titleList = this.titleList.map(i => {
          if (String(i.flowProcess) === String(this.$route.query.step)) {
            i.active = true
          }
          return i
        })
        this.params.flowProcess = this.$route.query.step
      } else {
        this.titleList[0].active = true
        this.params.flowProcess = this.titleList[0].flowProcess
      }
      this.handleGetListContent()
    },
    handleMore () {
      // this.showPopupPerson = true
      this.showPopupMange = true
    },
    handlePopupMangeSubmit () {
      this.showPopupMange = false
    },
    handlePopupRemoveListSuccessful () {
      // 删除人员成功  页面刷新
      this.showPopupMange = false
      this.showPopupPerson = false
      this.handleGetListContent()
    }
  },
  watch: {
    'params.staffIds' (n, o) {
      this.handleGetListContent()
    }
  }

}

</script>

<style lang='less' scoped>
.step-content {
  .footer {
    text-align: right;
    margin: 20px 0 0 0;
  }
  padding: 28px;
  width: 100%;
  margin: 20px 0;
  min-height: 537px;
  background: #fff;
  width: 100%;
  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-left {
      display: flex;
      align-items: center;
    }
  }
  .shuxian {
    width: 1px;
    height: 16px;
    background: #52575b;
  }
  &-center {
    margin: 30px 0 10px 0;
    padding: 0 40px;
    min-height: 40px;
    background: #f6f6f6;
    display: flex;
    flex-wrap: wrap;
    &-item {
      height: 40px;
      .hover:hover {
        color: @fontBlue;
      }
      .active {
        color: @fontBlue;
      }
      .center();
      &-img {
        .center();
        height: 20px;
        margin: 0 40px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
