<template>
    <div>
      <!-- 弹出框表单 -->
      <el-drawer
              title="假期使用记录"
              :visible.sync="open"
              :direction="direction"
              size="50%">
          <div style="padding:20px">
            <div class="mt20">
                <span>当前假期余额：{{days}}天</span>
                <el-button type="success" size="mini" class="ml20" @click="editFn">修改余额</el-button>
            </div>
            <div class="mt20">
                  <el-steps direction="vertical">
                        <el-step :title="item.createTime" 
                        v-for="(item,index) in recordList" :key="index"
                        >
                        <i class="el-icon-timer" slot="icon"></i>

                        <template slot="description">
                          <div>
                            <span style="color:#000">{{item.subAddType ==1? '+':'-'}} {{item.subOrAddDays}}</span>
                            <span class="ml20" v-if="item.validityPeriod">{{item.validityPeriod}}有效</span>                          
                          </div>
                          <div>
                            <span style="color:#000">{{item.content}}</span>
                          </div>
                          <div>
                            <span style="color:#000">理由： {{item.reason}}</span>
                          </div>
                        </template>
                        </el-step>
                  </el-steps>
            </div>
            <div class="tips mt20">
                当前病假规则：每年1月1日自动发放 30天
            </div>          
          </div>
      </el-drawer>
      <el-dialog title="修改余额" :show-close="false" :visible.sync="isedit">
          <el-form ref="form" :model="editParams" :rules="rules" label-width="120px">

            <el-form-item label="修改类型" prop="subAddType">
              <el-select v-model="editParams.subAddType">
                <el-option
                  v-for='($label, $value) in dict.subAddType'
                  :key="$value"
                  :label="$label"
                  :value="$value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="修改天数" prop="subOrAddDays">
              <el-input v-model="editParams.subOrAddDays" style="width:220px"></el-input>
              <span> 天</span>
            </el-form-item>
            <el-form-item label="修改理由" prop="reason">
              <el-input type="textarea" placeholder="请输入理由" 
              v-model="editParams.reason"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="subMit" type="primary" size="mini">确认</el-button>
              <el-button @click="cancle" size="mini">取消</el-button>
            </el-form-item>
          </el-form>
      </el-dialog>  
    </div>

</template>
<script>
import {timestampToTime} from '@/assets/utils/dateFormat'
export default {
  name: "AttendanceVacationBalanceDetail",
  components: {},
  created() {
    // this.changePath("attendance/vacation/record")
  },
  data() {
    var day = (rule, value, callback) => {
      if(!value) return callback();
      if (/^[0-9]+\.{0,1}[0-9]{0,1}$/.test(value)) {
          callback();
      } else {
          callback(new Error('请输入正确的金额如 1.5'));
      }
    }
    return {
      days:0,
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "员工假期余额信息",
      // 是否显示弹出层
      open: false,
      isedit:false,
      direction:"rtl",
      toString:[
      ],
      toDate:[
        "entryTime",
      ],
      // 表单校验
      rules: {
        subAddType:[
          {required: true,message: "请选择类型",trigger:'change'},
        ],
        subOrAddDays:[
          {required: true,message: "请输入天数"},
          {validator: day, trigger: 'blur' }
        ],
        reason:[
          {
            required:true,message:'请输入理由'
          }
        ]
      },
      recordList:[],
      editParams:{
        // id:'',
        staffId:"",
        type:'',
        subAddType:"",
        subOrAddDays:'',
        reason:"",
      },
      dict:{},//字典
    }
  },

  methods: {
    /** 查看*/
    view(row) {
      this.editParams.type = row.type
      this.editParams.staffId = row.staffId
      // this.editParams.id = row.id
      this.days = row.val
      this.$post("/attendance/vacation/record/list", {
        page: 1,
        size: -1,
        type:row.type,
        staffId:row.staffId
        })
      .then((res) => {
        if (res.code == 1) {
          this.open = true
          let arr = res.data.data
          this.recordList = arr.map(item => {
            item.createTime = timestampToTime(item.createTime,6)
            return item
          })
          
          this.dict = res.data.dict
        }
      })
      .catch((error) => {
        this.$message.error(error.msg);
      })
    },
    // 修改余额
    editFn(){
      this.isedit = true
    },
    subMit(){
      this.$refs['form'].validate((valid) => {
        if(valid){
          this.$post('attendance/vacation/record/save',this.editParams).then(res => {
            if(res.code == 1){
              this.afterSubmit()
            }else{
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    cancle(){
      this.editParams.subAddType = ''
      this.editParams.subOrAddDays = ''
      this.editParams.reason = ''
      this.isedit = false
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },
    afterSubmit(data) {
      this.isedit = false
      this.open = false;
      this.$emit("ok");
    }
  }
}
</script>
<style scoped lang="less">
.tips{
    font-size: 14px;
    color: #999;
}
</style>
