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

<!--
<cycle-set
  :rangeShow="rangeShow"
  :attenceGroupId="attenceGroupId"
  @hideCycleDialog="hideCycleDialog">
</cycle-set>

import cycleSet from '@/components/app/dailyAttendance/cycle-set.vue'
 -->

<template>
  <el-dialog class="edit-dialog" title="选择班次" :visible.sync="customDialog" width="600px" :before-close="handleClose">
    <div class="edit-dialog-body">
      <el-form :model="ruleFormData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="周期名称：" prop="rangeName">
          <limitInput :inputWidth="305" :inputValue.sync="ruleFormData.rangeName" :holder="'请输入周期名称'" :getByType="'word'" :maxLength="15"> </limitInput>
        </el-form-item>
        <el-form-item label="每个周期天数：" prop="day">
          <div>
            <el-input-number v-model="ruleFormData.day" controls-position="right" @change="handleRangeDay" :step="1" :step-strictly="true" :min="3" :max="31"></el-input-number>
            <span class="font-12 color-909399">以3天为周期进行循环，最大周期天数为31天</span>
          </div>

          <div class="range-classes">
            <ul>
              <li v-for="(item, index) in ruleFormData.classesList" :key="index + 'class'">
                <span>第{{ index + 1 }}天：</span>
                <el-select v-model="item.classesId" placeholder="请选择" @change="changeClass($event, item)">
                  <el-option v-for="item in tableData" :key="item.classesId" :label="item.classesName" :value="item.classesId"> </el-option>
                </el-select>
              </li>
            </ul>
          </div>
        </el-form-item>
      </el-form>
    </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 limitInput from '@/components/limit-input.vue';
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: 'cycle-set',
  components: { limitInput },
  props: {
    rangeShow: {
      type: Boolean,
      default: false
    },
    attenceGroupId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      enterpriseId: JSON.parse(localStorage.getItem('userInfo')).enterpriseId,
      userId: JSON.parse(localStorage.getItem('userInfo')).userId,
      selClassesId: this.attenceGroupId,
      customDialog: false,
      tableData: [],
      classesName: '',
      ruleFormData: {
        classesRangeId: '',
        day: 3,
        rangeName: '',
        classesList: [
          {
            classesId: '',
            classesName: ''
          },
          {
            classesId: '',
            classesName: ''
          },
          {
            classesId: '',
            classesName: ''
          }
        ]
      }
    };
  },
  methods: {
    /**
     * 修改班次
     */
    changeClass(e, item) {
      const that = this;
      that.tableData.forEach(ele => {
        if (ele.classesId == e) {
          item.classesName = ele.classesName;
        }
      });
    },
    /**
     * 修改周期
     */
    handleRangeDay(e) {
      const that = this;
      const length = that.ruleFormData.classesList.length;
      if (e - length > 0) {
        for (let index = 0; index < e - length; index++) {
          that.ruleFormData.classesList.push({
            classesId: '',
            classesName: ''
          });
        }
      }

      if (e - length < 0) {
        // console.log(e, length, length - e);
        that.ruleFormData.classesList.splice(e - 1, length - e);
      }
    },
    /**
     * 输入
     */
    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) {
        showMsg.showmsg('请选择班次', 'warning');
        return false;
      }
      let obj = {};
      that.tableData.forEach(ele => {
        if (ele.attenceGroupId == 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);
                }
              });
            }
            // console.log(resData.result);
            that.tableData = resData.result || [];
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取周期
     */
    getRangeData() {
      const that = this;
      let para = {
        enterpriseId: that.enterpriseId,
        attenceGroupId: that.attenceGroupId
      };
      getRequest('/haoban-app-attence-web/attence-range-list', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.tableData = resData.result || [];
          }
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  watch: {
    rangeShow: function(newData, oldData) {
      const that = this;
      that.customDialog = newData;
    },
    attenceGroupId(newData) {
      const that = this;
      if (newData) {
        that.getRangeData();
      }
    }
  },
  mounted() {
    const that = this;
    // console.log(that.attenceGroupId);
    that.getClassifyData();
    if (that.attenceGroupId) {
      that.getRangeData();
    }
    that.customDialog = that.rangeShow;
  }
};
</script>
<style lang="less" scoped></style>
