<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-12-17 09:40:42
 * @LastEditors  : 无尘
 * @LastEditTime : 2019-12-25 14:25:47
 -->

<!--
<class-select-mult
  :workClassMultShow="workClassMultShow"
  :classesData="classesData"
  @hideMultClassDialog="hideMultClassDialog">
</class-select-mult>

import classSelectMult from '@/components/app/dailyAttendance/class-select-mult.vue'
 -->

<template>
  <el-dialog class="edit-dialog" title="选择班次" :visible.sync="customDialog" width="600px" :before-close="handleClose">
    <div class="edit-dialog-body">
      <div class="m-b-20">
        <el-input placeholder="请输入班次名称" v-model="classesName" class="w-264" style="width: 264px;" prefix-icon="el-icon-search" @keyup.native="value => toInput(value, classesName)" clearable @clear="clearInput"></el-input>
      </div>
      <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" height="350" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="imageUrl" label="班次名称" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.classesName }}
          </template>
        </el-table-column>
        <el-table-column prop="titleName" label="考勤时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.classessTimesJson" :key="index + 'time'">{{ item.startTime }}-{{ item.endTime }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click.stop="customCancel">取消</el-button>
      <el-button type="primary" @click.stop="customConfirm('ruleForm')">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getRequest } from '@/api/api';
import errMsg from '@/common/js/error';
import showMsg from '@/common/js/showmsg';
import { _debounce } from '@/common/js/public';
export default {
  name: 'class-select-mult',
  components: {},
  props: {
    workClassMultShow: {
      type: Boolean,
      default: false
    },
    classesData: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      enterpriseId: JSON.parse(localStorage.getItem('userInfo')).enterpriseId,
      userId: JSON.parse(localStorage.getItem('userInfo')).userId,
      selClassesData: JSON.parse(JSON.stringify(this.classesData)) || [],
      customDialog: false,
      tableData: [],
      classesName: '',
      multipleSelection: []
    };
  },
  methods: {
    toggleSelection(rows) {
      const that = this;
      if (rows) {
        that.$nextTick(() => {
          rows.forEach(row => {
            that.$refs.multipleTable.toggleRowSelection(row, true);
          });
        });
      }
    },
    handleSelectionChange(val) {
      const that = this;
      that.multipleSelection = val;
      that.selClassesData = JSON.parse(JSON.stringify(val));
    },
    /**
     * 输入
     */
    toInput: _debounce(function(e, value) {
      const that = this;
      that.getClassifyData();
    }, 500),
    // 搜索清除
    clearInput() {
      const that = this;
      that.currentPage = 1;
      that.getClassifyData();
    },
    customConfirm: _debounce(async function() {
      const that = this;

      if (!that.selClassesData.length) {
        showMsg.showmsg('请选择班次', 'warning');
        return false;
      }
      if (that.selClassesData.length > 10) {
        showMsg.showmsg('最多选择10个班次', 'warning');
        return false;
      }
      // 判断是否移除
      let removeArr = [];
      if (that.classesData.length) {
        const classesIds = that.selClassesData.map(ele => ele.classesId);
        that.classesData.forEach(ele => {
          if (!classesIds.includes(ele.classesId)) {
            removeArr.push(ele.classesName);
          }
        });
      }
      if (removeArr.length && that.$route.query.attenceGroupId) {
        that
          .$confirm('移除后，排班周期将自动去掉该班次，但不影响排班表中已排的班次', '确定从考勤组移除' + removeArr.join('-'), {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(() => {
            let returnObj = [];
            that.selClassesData.forEach(ele => {
              returnObj.push({
                classesId: ele.classesId,
                classesName: ele.classesName,
                classessTimesJson: ele.classessTimesJson
              });
            });
            that.$emit('hideMultClassDialog', returnObj);
            that.customDialog = false;
            that.$nextTick(() => {
              // that.selClassesData = [];
            });
          })
          .catch(() => {});
        return false;
      }
      let returnObj = [];
      that.selClassesData.forEach(ele => {
        returnObj.push({
          classesId: ele.classesId,
          classesName: ele.classesName,
          classessTimesJson: ele.classessTimesJson
        });
      });
      that.$emit('hideMultClassDialog', returnObj);
      that.customDialog = false;
      that.$nextTick(() => {
        // that.selClassesData = [];
      });
    }, 300),
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },
    /**
     * 隐藏弹出层
     */
    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideMultClassDialog');
      that.$nextTick(() => {
        // that.selClassesData = [];
      });
    },
    handleData() {
      const that = this;
      let ids = that.selClassesData.map(ele => ele.classesId);
      let rows = [];
      if (that.selClassesData.length) {
        that.tableData.forEach(ele => {
          if (ids.includes(ele.classesId)) {
            rows.push(ele);
          }
        });
        that.toggleSelection(rows);
      }
    },
    /**
     * 获取班次
     */
    getClassifyData() {
      const that = this;
      let para = {
        enterpriseId: that.enterpriseId,
        classesName: that.classesName
      };
      getRequest('/haoban-app-attence-web/attence-classes-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                if (ele.classessTimesJson) {
                  ele.classessTimesJson = JSON.parse(ele.classessTimesJson);
                }
              });
            }
            that.tableData = resData.result || [];
            that.handleData();
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    workClassMultShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
      that.getClassifyData();
    },
    classesData(newData) {
      const that = this;
      if (newData) {
        that.selClassesData = JSON.parse(JSON.stringify(newData));
      } else {
        that.selClassesData = [];
      }
    }
  },
  mounted() {
    const that = this;
    that.getClassifyData();
    if (that.classesData) {
      that.selClassesData = JSON.parse(JSON.stringify(that.classesData));
    } else {
      that.selClassesData = [];
    }
    that.customDialog = that.workClassMultShow;
  }
};
</script>
<style lang="less" scoped></style>
