<template>
<el-dialog title="积分设置 " width="700px" height="700px":visible.sync="showSon" :before-close="chenge" >
  <el-tabs v-model="activeName2" @tab-click="handleClick" class="sysSetting">
    <el-tab-pane label="基础分" name="first">
      <div style="padding:15px; background-color: #fff;" v-loading="loading">
        <el-form
          :model="compnayInfoForm"
          ref="compnayInfoForm"
          label-width="50px"
          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >


              <el-form-item v-if="false">
                　月度基础分
                <el-input v-model="compnayInfoForm.value_1" style="width:80px;"></el-input>
              </el-form-item>

              <el-form-item>
                月度迟到超过
                <el-input v-model="compnayInfoForm.value_2" style="width:80px;"></el-input>
                次，扣除
                <el-input v-model="compnayInfoForm.value_3" style="width:80px;"></el-input>
                分
              </el-form-item>
              <el-form-item>
                月度请假超过
                <el-input v-model="compnayInfoForm.value_4" style="width:80px;"></el-input>
                天，扣除
                <el-input v-model="compnayInfoForm.value_5" style="width:80px;"></el-input>
                分
              </el-form-item>





          <el-form-item>
            <el-button type="primary" :loading="send_site_info_loading" @click="send_site_info">保 存</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>

    <el-tab-pane label="迟到/早退" name="second">
      <div style="padding:15px; background-color: #fff;" v-loading="loading">
        <el-form
          :model="compnayInfoForm"
          ref="compnayInfoForm"
          label-width="50px"
          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >


              <el-form-item>
                　　　　　　　　　迟到、早退
                <el-input v-model="compnayInfoForm.value_6" style="width:80px;"></el-input>
                分钟内，扣除
                <el-input v-model="compnayInfoForm.value_7" style="width:80px;"></el-input>
                分
              </el-form-item>

              <el-form-item>
                迟到、早退超过{{compnayInfoForm.value_6}}分钟的，每超过
                <el-input v-model="compnayInfoForm.value_8" style="width:80px;"></el-input>
                分钟，　扣除
                <el-input v-model="compnayInfoForm.value_9" style="width:80px;"></el-input>
                分
              </el-form-item>
              <el-form-item label-width="200px">
                <el-checkbox v-model="compnayInfoForm.value_10">迟到、早退，累计加倍</el-checkbox>
              </el-form-item>




          <el-form-item>
            <el-button type="primary" :loading="send_site_info_loading" @click="send_site_info">保 存</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="加班" name="third">
      <div style="padding:15px; background-color: #fff;" v-loading="loading">
        <el-form
          :model="compnayInfoForm"
          ref="compnayInfoForm"
          label-width="50px"
          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >


              <el-form-item>
                　　　加班每小时加
                <el-input v-model="compnayInfoForm.value_11" style="width:80px;"></el-input>
                分

              </el-form-item>

              <el-form-item>
                节假日加班每小时加
                <el-input v-model="compnayInfoForm.value_12" style="width:80px;"></el-input>
                分
              </el-form-item>




          <el-form-item>
            <el-button type="primary" :loading="send_site_info_loading" @click="send_site_info">保 存</el-button>

          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
    <el-tab-pane label="出勤" name="fourth">
      <div class="work" style="padding:15px; background-color: #fff;" v-loading="loading">
        <el-form
          :model="compnayInfoForm"
          ref="compnayInfoForm"
          label-width="50px"
          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >
             <el-form-item>
                　　　　月度全勤加
                <el-input v-model="compnayInfoForm.value_16" style="width:80px;"></el-input>
                分


              </el-form-item>
             <el-form-item>
                　无故缺勤扣除
                <el-input v-model="compnayInfoForm.value_17" style="width:80px;"></el-input>
                分
              </el-form-item>
               <el-form-item>
                 　　事假每小时扣除
                <el-input v-model="compnayInfoForm.value_18" style="width:80px;"></el-input>
                分
              </el-form-item>
               <el-form-item>
            　补卡每次扣除
            <el-input v-model="compnayInfoForm.value_20" style="width:80px;"></el-input>
            分
            </el-form-item>
           <el-form-item style="width: 100%;">
            　　　上班准时打卡
            <el-input v-model="compnayInfoForm.value_19" style="width:80px;"></el-input>
            分
          </el-form-item>
            <div class="commonClass">
              <el-form-item>
                　　　上班第一名加
                <el-input v-model="compnayInfoForm.value_13" style="width:80px;"></el-input>
                分</el-form-item> <el-form-item>晚下班第一名加 <el-input v-model="compnayInfoForm.value_21" style="width:80px;"></el-input> 分
              </el-form-item>

              <el-form-item>
                　　　上班第二名加
                <el-input v-model="compnayInfoForm.value_14" style="width:80px;"></el-input>
                分 </el-form-item>  <el-form-item>晚下班第二名加<el-input v-model="compnayInfoForm.value_22" style="width:80px;"></el-input> 分
              </el-form-item>

              <el-form-item>
                　　　上班第三名加
                <el-input v-model="compnayInfoForm.value_15" style="width:80px;"></el-input>
                分</el-form-item> <el-form-item> 晚下班第三名加<el-input v-model="compnayInfoForm.value_23" style="width:80px;"></el-input> 分
              </el-form-item>

                <el-form-item class="distance">
                　上班第前三名提前
                <el-input v-model="compnayInfoForm.value_24" style="width:80px;"></el-input>
                分钟有效 </el-form-item> <el-form-item style="margin-left: -33px;">晚下班后三名下班后 <el-input v-model="compnayInfoForm.value_25" style="width:80px;"></el-input>  分钟有效
              </el-form-item>
            </div>


          <el-form-item style="text-align: center; width: 90%;">
            <el-button type="primary" :loading="send_site_info_loading" @click="send_site_info">保 存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
  </el-dialog>
</template>

<script>

  import qs from 'qs'
  import {getToken} from '@/utils/auth'

  export default {
    props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    group_id: {
      type: Number,
      default: ''
    },
  },
  watch: {
    group_id(val) {
      this.group = val;

    },
    showDialog(val) {
      console.log(val);
      this.showSon = val;
       this.load_site_info()
    },
  },
   created(){
      this.load_site_info()
      this.get_sys_data()
    },
    components: {},
    data() {
      const validateTel = (rule, value, callback) => {
        const validValue = value
          ? value.replace(/\s/g, '').replace(/&nbsp;/gi, '')
          : value
        if (!validValue) {
          return callback(new Error('请填写手机号码'))
        }
        const pattern = /^1\d{10}$/
        if (pattern.test(value)) {
          callback()
        } else {
          return callback(new Error('无效的手机号，请重新输入'))
        }
      }
      return {
        group: 0,
        showSon: this.showDialog,
        sys_info: null,
        activeNameSetting: 'first',
        maxPeople: this.$store.getters.user_info.company_info.user_count_max,
        // employeeTotalCount: 0,
        value: 0,
        fileListMini: [],
        fileList: [],
        logoUrl: '',
        logoUrlMini: '',
        Xtoken: {'X-Token': getToken()},
        loading: false,
        activeName2: 'first',
        compnayInfoForm: {
          value_1: 100,
          value_2: 3,
          value_3: 100,
          value_4: 3,
          value_5: 100,
          value_6: 10,
          value_7: 5,
          value_8: 3,
          value_9: 100,
          value_10: true, //
          value_11: 10,
          value_12: 10,
          value_13: 5,
          value_14: 3,
          value_15: 2,
          value_16: 100,
          value_17: 500,
          value_18: 10,
          value_19: 2,
          value_20: 2,
          value_21: 3,
          value_22: 2,
          value_23: 1,
        },
        send_site_info_loading: false,

      }
    },

    methods: {
      chenge() {
        this.$emit('changDialog');
      },
      resetLogo() {
        if (this.logoUrl) {
          this.logoUrl = ''
          this.$refs.upload.clearFiles()
        }
      },
      resetLogoMini() {
        if (this.logoUrlMini) {
          this.logoUrlMini = ''
          this.$refs.uploadMini.clearFiles()
        }
      },
      handleFilesSuccessMini(res, file) {
        this.logoUrlMini = res.url
      },
      onFileRemoveMini() {
        this.logoUrlMini = ''
      },
      handleFilesSuccess(res, file) {
        // this.$refs.upload.clearFiles()
        this.logoUrl = res.url
      },
      beforeFilesUpload(file) {
        const $ext_list =  ['jpg', 'png', 'bmp', 'jpeg','JPG','PNG']
        const $ext_name = file.name.split('.')[1]
        if ($ext_list.indexOf($ext_name) === -1) {
          this.$message.warning('不支持的文件格式')
          return false
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${
            files.length
            } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        )
      },
      handleExceedMini(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${
            files.length
            } 个文件，共选择了 ${files.length + fileListMini.length} 个文件`
        )
      },
      onFileRemove() {
        this.logoUrl = ''
      },
      employee_check(row) {
        console.log(row)
      },

      handleClick(tab, event) {
        console.log(tab, event)
      },
      get_sys_data() {
        console.log("ddfspoijaep9");
      },

      load_site_info() {
        console.log("ohjfoif");
        this.loading = true;
        const self = this
        this.$http('get','/integral.php/attendance_config/get_config',{
            name:'point_convert_config',
            group_id: this.group}).then(
          ret => {
            self.loading = false
            if (ret.status == '200') {
              const data = ret.data.data
              self.compnayInfoForm = JSON.parse(data)
            }
          }
        )
      },
      send_site_info() {
        var form = this.$refs['compnayInfoForm']
        var self = this
        if (this.logoUrl) {
          this.compnayInfoForm.logo_url = this.logoUrl
        }
        if (this.logoUrlMini) {
          this.compnayInfoForm.logo_min_url = this.logoUrlMini
        }
        form.validate(valid => {
          if (valid) {
            self.send_site_info_loading = true
            if (form) {

              let send_data = []

              send_data.push({
                name:'point_convert_config',
                group_id: this.group,
                value:JSON.stringify(self.compnayInfoForm)
              })


              self.$http('post', '/integral.php/attendance_config/save.html',qs.stringify({data: send_data}),
                  // headers: {
                  //   'Content-Type': 'application/x-www-form-urlencoded'
                  // }
                  )
                .then(ret => {
                  self.send_site_info_loading = false

                  if (ret.status != '200') {
                    self.$message({
                      message: '网络错误',
                      type: 'error'
                    })
                  } else {
                    if (ret.data.code == 1) {
                      form.clearValidate()
                      this.resetLogo()
                      this.resetLogoMini()
                      // 如果有logo上传 即刷新
                      this.$store.dispatch('GetUserInfo').then(res => {
                      })
                      this.$emit('changDialog');
                      self.$message({
                        message: ret.data.msg,
                        type: 'success'
                      })
                    } else {
                      self.$message({
                        message: ret.data.msg,
                        type: 'error'
                      })
                    }
                  }
                })
            }
          } else {
            return false
          }
        })
      },

    },
  }
</script>
<style lang="scss" scoped>
.el-form-item__content {

}
.work .el-form-item {
  float: left;
  width: 50%;
}
.work .el-form-item--medium{
  float: left;
  width: 48%;
}
.work  .el-form-item__content {
  float: left;
  width: 100%;
}

  .sysSetting .el-slider__runway.disabled .el-slider__bar {
    /* background: #409EFF; */
  }

  .sysSetting .el-slider__runway.disabled .el-slider__button {
    /* border-color: #409EFF; */
  }

  .PointSettingTab .el-tabs__content {
    padding-top: 50px;
  }
  .distance .el-form-item__content {
    margin-left: 20px!important;
  }
  .commonClass .el-input--medium {
    margin: 0 2px;
  }
  .el-form {
    width: 688px !important;
  }
</style>

