<template>
  <div class="initiate-assessment commonFont">
    <el-form
      :model="formData"
      :rules="formRules"
      ref="formData"
      label-width="150px"
      label-position="left"
      label-suffix="："
      size="mini"
    >
      <div class="title">基本信息</div>
      <el-form-item
        label="周期类型"
        prop="cycleTimeType"
      >
        <el-radio-group v-model="formData.cycleTimeType">
          <el-radio :label="0">月度</el-radio>
          <el-radio :label="1">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="时间周期"
        required
        prop="rangDate"
      >
        <el-date-picker
          @change="handleChangeRangDate"
          v-model="formData.rangDate"
          :type="formData.cycleTimeType === 0 ? 'month' : 'monthrange'"
          :key="formData.cycleTimeType === 0 ? 'month' : 'monthrange'"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        v-if="formData.rangDate"
        label="考核合并"
        prop="mergeType.name"
      >
        <el-radio
          v-model="formData.mergeType.type"
          :label="1"
        >新发起考核
          <el-input
            v-model="formData.mergeType.name"
            :disabled="formData.cycleTimeType===0"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-radio>
      </el-form-item>

      <div class="choose-group">
        <div class="title">被考核对象</div>
        <el-form-item
          label="参与考评组"
          prop="assessmentList"
        >
          <div>
            <el-button @click="handleChooseGroup">请选择</el-button>
          </div>
          <div class="line-space">
            <el-table
              v-if="formData.assessmentList.length>0"
              :data="formData.assessmentList"
              :header-cell-style="{ 'background-color': '#f5f5f5' }"
              max-height="440px"
            >
              <el-table-column
                label="考核组名称"
                prop="name"
              ></el-table-column>
              <el-table-column
                label="参与人数"
                prop="counts"
              ></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native.prevent="
                      handleGroupDelete(scope.$index, formData.assessmentList)
                    "
                    size="small"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="line-space">
            <el-button
              type="primary"
              @click="handleSubmit"
            >确定</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div>
      <popup-right
        v-if="showChooseList"
        @cancel='handleCancelPopup'
        @submit="handleSubmitPopup"
        :title="popupRightTitle"
        class="popup"
      >
        <div slot="content">
          <div class="popup-search">
            <el-input
              v-model="rqAssessmentParameter.searchName"
              @change="handlePopupSearchChange"
              prefix-icon="el-icon-search"
              placeholder="搜索考评组"
              size="mini"
            ></el-input>
          </div>
          <div class="popup-table">
            <el-table
              v-if="popupData.tableList.length"
              :data="popupData.tableList"
              @selection-change="handleSelectionChange"
              tooltip-effect="dark"
            >
              <el-table-column
                type="selection"
                width="40"
              ></el-table-column>
              <el-table-column
                label="全选"
                width="250"
              ><template slot-scope="scope">{{scope.row.name}}</template></el-table-column>
              <el-table-column
                width="80"
                align="right"
              ><template slot-scope="scope">{{scope.row.counts}}人</template></el-table-column>
            </el-table>
            <div
              v-else
              class="popup-empty"
            >
              <img
                src=""
                style="height: 150px; width: 150px;"
              />
              <div>暂无考评组</div>
              <div>考评组用于自定义配置“被考核人”的考核指标和考核流程</div>
              <el-button
                @click="handlePopupCreat"
                type="text"
              >新建考评组</el-button>
            </div>
          </div>
          <el-pagination
            :hide-on-single-page="true"
            :current-page.sync="rqAssessmentParameter.currPage"
            :page-size="rqAssessmentParameter.pageSize"
            :total="rqAssessmentParameter.totalCount"
            :page-count="rqAssessmentParameter.totalPage"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </div>
        <div
          slot="footer-left"
          class="popup-footer-left"
        >已选择：{{popupData.selectedList.length}}个</div>
      </popup-right>
      <el-dialog
        title="发起考核"
        :visible.sync="dialogSendVisible"
        width="30%"
      >
        <span>确认发起{{this.formData.mergeType.name}}绩效考核？</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="handleDialogSend"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import PopupRight from '@/components/PopupRight'
import { getWorkList, sendAssessmentInfo } from '@/api/workbench'
export default {
  data () {
    return {
      dialogSendVisible: false,
      popupRightTitle: '选择考评组（月度）考核',
      showChooseList: false,
      formData: {
        cycleTimeType: 0,
        rangDate: '',
        assessmentList: [], // 考核对象
        mergeType: { // 考核合并类型
          type: 1,
          name: '' // 合并 id  新发起无效
        }
      },
      formRules: {
        cycleTimeType: [{ required: true, message: '请选择周期类型', trigger: 'blur' }],
        rangDate: [{ required: true, message: '请选择时间周期', trigger: 'change' }],
        assessmentList: [{ type: 'array', required: true, message: '请选择参与考评组', trigger: 'change' }],
        'mergeType.name': [{ required: true, message: '请填写新建考核名称', trigger: 'blur' }]

      },
      popupData: {
        tableList: [],
        selectedList: []
      },
      rqAssessmentParameter: {
        currPage: 1,
        pageSize: 100,
        searchName: '',
        totalCount: 1,
        totalPage: 1
      }
    }
  },
  components: {
    PopupRight
  },
  watch: {
    'formData.cycleTimeType': function (newVal, oldVal) {
      // console.log(this.formData.cycleTimeType)
      this.formData.rangDate = ''
    }
  },
  created () {
    this.handleGainAssessmentGroupList()
  },
  methods: {
    handleChangeRangDate (chgVal) {
      let nameStr = this.$format(chgVal, 'yyyy年MM月绩效考核')
      if (this.formData.cycleTimeType === 1) {
        // 自定义
        nameStr = chgVal[0] + '至' + chgVal[1] + '绩效考核'
      }
      this.formData.mergeType.name = nameStr
    },
    handleChooseGroup () {
      this.popupData.selectedList = []
      this.showChooseList = !this.showChooseList
    },
    handleGroupDelete (index, rows) {
      console.log('删除----', rows)
      rows.splice(index, 1)
    },
    handleSubmit () {
      console.log('提交')
      this.$refs['formData'].validate((val) => {
        this.dialogSendVisible = val
        console.log('1111111111111111')
      })
    },
    handleDialogSend () {
      // 发起考核
      const groupIdList = this.formData.assessmentList.map((item, index) => {
        return item.id
      })
      let para = {
        cycleType: this.formData.cycleTimeType,
        groupIds: '24',
        // groupIds: groupIdList.join(),
        name: this.formData.mergeType.name
      }
      if (this.formData.cycleTimeType === 0) {
        para['startTime'] = this.$format(this.formData.rangDate, 'yyyy-MM-dd hh:mm:ss')
      } else {
        para['startTime'] = this.$format(this.formData.rangDate[0], 'yyyy-MM-dd hh:mm:ss')
        para['endTime'] = this.$format(this.formData.rangDate[1], 'yyyy-MM-dd hh:mm:ss')
      }
      sendAssessmentInfo(para).then(res => {
        this.dialogSendVisible = false
        // this.$router.push({ name: 'assessment' })
        this.$message({
          message: '发起考核成功',
          type: 'success'
        })
      })
    },
    handlePopupSearchChange (val) {
      console.log('搜索' + val)
      // 去搜搜
      this.handleGainAssessmentGroupList()
    },
    handleSelectionChange (val) {
      //  全选
      this.popupData.selectedList = val
    },
    handlePopupCreat () {
      this.showChooseList = false
      // 新建考评组
    },
    handleCancelPopup () {
      this.showChooseList = false
    },
    handleSubmitPopup () {
      this.showChooseList = false
      const list = this.popupData.selectedList
      this.formData.assessmentList = this.popupData.selectedList
    },
    handleCurrentChange (val) {
      this.handleGainAssessmentGroupList(val)
    },
    // 获取数据
    handleGainAssessmentGroupList (currPage) {
      currPage = currPage > 0 ? currPage : this.rqAssessmentParameter.currPage
      let para = {
        pageSize: this.rqAssessmentParameter.pageSize,
        currPage: currPage,
        name: this.rqAssessmentParameter.searchName
      }
      getWorkList(para).then(res => {
        this.rqAssessmentParameter.totalPage = res.totalPage
        this.rqAssessmentParameter.totalCount = res.totalCount
        this.currPage = res.currPage
        this.popupData.tableList = res.list
      })
    }
  }
}
</script>
<style lang="less" scoped>
.initiate-assessment {
    padding: 25px;
    background-color: white;
    min-height: 600px;
    .title {
        margin-bottom: 25px;
    }
    .choose-group {
        margin-top: 150px;
    }
    .line-space {
        margin-top: 20px;
    }
    .popup {
        &-search {
            margin-bottom: 20px;
        }
        &-empty {
            padding-top: 100px;
            height: 500px;
            width: 410px;
            font-size: 14px;
            text-align: center;
            display: block;
            align-content: center;
            justify-content: center;
        }

        &-footer-left {
            color: @fontBlue;
        }
    }
}
</style>
