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

<!--
<class-select
  :workClassShow="workClassShow"
  :classesId="classesId"
  @hideDetailDialog="hideDetailDialog">
</class-select>

import classSelect from '@/components/app/dailyAttendance/class-select.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="请输入班次名称" maxlength="50" 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 :data="tableData" style="width: 100%">
        <el-table-column label="" width="50">
          <template slot-scope="scope">
            <el-radio v-model="selClassesId" :label="scope.row.classesId">{{ '' }}</el-radio>
          </template>
        </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',
  components: {},
  props: {
    workClassShow: {
      type: Boolean,
      default: false
    },
    classesId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      enterpriseId: JSON.parse(localStorage.getItem('userInfos')).enterpriseId,
      userId: JSON.parse(localStorage.getItem('userInfos')).userId,
      selClassesId: this.classesId,
      customDialog: false,
      tableData: [],
      classesName: ''
    };
  },
  methods: {
    /**
     * 输入
     */
    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;
      that.customDialog = false;
      if (!that.selClassesId && that.selClassesId != -1) {
        showMsg.showmsg('请选择班次', 'warning');
        return false;
      }
      let obj = {};
      that.tableData.forEach(ele => {
        if (ele.classesId == that.selClassesId) {
          obj = ele;
        }
      });
      that.$emit('hideClassDialog', obj);
      that.$nextTick(() => {
        that.selClassesId = '';
      });
    }, 300),
    /**
     *   关闭
     */
    handleClose(done) {
      const that = this;
      done();
      that.hideDialog();
    },

    /**
     *  取消
     */
    customCancel() {
      const that = this;
      that.hideDialog();
    },
    /**
     * 隐藏弹出层
     */
    hideDialog() {
      const that = this;
      that.customDialog = false;
      that.$emit('hideClassDialog');
      that.$nextTick(() => {
        that.selClassesId = '';
      });
    },
    /**
     * 获取班次
     */
    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.tableData.push({ workType: false, classesName: '休息', classesId: '-1', classessTimesJson: [] });
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    workClassShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    classesId(newData) {
      const that = this;
      if (newData || newData == '-1') {
        that.selClassesId = newData;
      } else {
        that.selClassesId = '';
      }
    }
  },
  mounted() {
    const that = this;
    that.getClassifyData();
    if (that.classesId || that.classesId == '-1') {
      that.selClassesId = that.classesId;
    } else {
      that.selClassesId = '';
    }
    that.customDialog = that.workClassShow;
  }
};
</script>
<style lang="less" scoped></style>
