<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

          ref="compnayInfoForm"

          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >

               <div style="padding-left: 58px;font-size: 16px;color:#303133;margin-bottom: 12px;">
                 　 上班
              </div>
                  <el-form-item  label="第一名,额外加">
                　　　
                <el-input v-model="compnayInfoForm[2].value" style="width:80px;"></el-input>
                分</el-form-item>

              <el-form-item  label="第二名，额外加">
                　　
                <el-input v-model="compnayInfoForm[3].value" style="width:80px;"></el-input>
                分 </el-form-item>

              <el-form-item  label="第三名，额外加">
                　
                <el-input v-model="compnayInfoForm[4].value" style="width:80px;"></el-input>
                分
               </el-form-item>
                  <el-form-item   label="早上班前三名,上班提前" class="distance">

                <el-input v-model="compnayInfoForm[5].value" style="width:80px;"></el-input>
                分钟有效
                  </el-form-item>

                  <div  style="padding-left: 70px;font-size: 16px;color:#303133;margin-bottom: 12px;">下班</div>

                    <el-form-item  label="第一名，额外加">
                　　
                <el-input v-model="compnayInfoForm[6].value" style="width:80px;"></el-input>
                分</el-form-item>

              <el-form-item  label="第二名，额外加">
                　　
                <el-input v-model="compnayInfoForm[7].value" style="width:80px;"></el-input>
                分 </el-form-item>

              <el-form-item  label="第三名，额外加">
                　　
                <el-input v-model="compnayInfoForm[8].value" style="width:80px;"></el-input>
                分
               </el-form-item>
                  <el-form-item class="distance" label="晚下班后三名,下班延迟后">
                　
                <el-input v-model="compnayInfoForm[9].value" style="width:80px;"></el-input>
                分钟有效
                  </el-form-item>
                  
            <div style="padding-left: 75px;font-size: 16px;color:#303133;margin-bottom: 12px;">出勤</div>
             <el-form-item label="月度全勤,加"><el-input v-model="compnayInfoForm[0].value" style="width:80px;"></el-input> 分</el-form-item>
             <el-form-item  label="正常打卡,加"><el-input v-model="compnayInfoForm[1].value" style="width:80px;"></el-input>分</el-form-item>

          <el-form-item style="text-align: center; width: 70%;margin-top: 15px;">
            <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

          ref="compnayInfoForm"

          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >
              <div style="padding-left: 62px;font-size: 16px;color:#303133;margin-bottom: 12px;">
                 　  缺卡
              </div>

              <el-form-item label="缺卡扣">
                　　　　　　　　　
                <el-input v-model="compnayInfoForm[10].value" style="width:80px;"></el-input>
                分
              </el-form-item>

               <el-form-item label="补卡扣">
                　　　　　　　　　
                <el-input v-model="compnayInfoForm[11].value" style="width:80px;"></el-input>
                分
              </el-form-item>

              <div style="padding-left: 62px;font-size: 16px;color:#303133;margin-bottom: 12px;">
                 　  迟到早退
              </div>

                <el-form-item label="迟到早退">
                   <el-input v-model="compnayInfoForm[12].value" style="width:80px;"></el-input>
               分钟内，扣
                <el-input v-model="compnayInfoForm[13].value" style="width:80px;"></el-input>
                分
              </el-form-item>


              <el-form-item label="迟到早退超过">
                {{compnayInfoForm[12].value}}
                <!-- <el-input v-model="compnayInfoForm[14].value" style="width:80px;"></el-input> -->
               分钟，每超过
                <el-input v-model="compnayInfoForm[15].value" style="width:80px;"></el-input>
                分钟，　扣除
                <el-input v-model="compnayInfoForm[16].value" style="width:80px;"></el-input>
                分
              </el-form-item>

               <el-form-item label="迟到最高扣">

                <el-input v-model="compnayInfoForm[17].value" style="width:80px;"></el-input>
                分
              </el-form-item>


             <div style="padding-left: 62px;font-size: 16px;color:#303133;margin-bottom: 12px;">
                 　 无故缺勤
              </div>
               <el-form-item label="">
                 当天无打卡记录的，视为无故缺勤，无故缺勤扣除
                <el-input v-model="compnayInfoForm[19].value" style="width:80px;"></el-input>
                分
              </el-form-item>


          <el-form-item style="text-align: center; width: 70%;margin-top: 15px;">
            <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

          ref="compnayInfoForm"

          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >


              <el-form-item label="工作日加班每小时加">
                　　　
                <el-input v-model="compnayInfoForm[20].value" style="width:80px;"></el-input>
                分

              </el-form-item>

              <el-form-item label=" 节假日加班每小时加">

                <el-input v-model="compnayInfoForm[21].value" style="width:80px;"></el-input>
                分
              </el-form-item>

               <el-form-item label=" 月度加班超过">

                <el-input v-model="compnayInfoForm[22].value" style="width:80px;"></el-input>
                小时，<span style="margin-right:4px;">额外加</span><el-input v-model="compnayInfoForm[23].value" style="width:80px;"></el-input><span style="margin-left:4px;">分</span>
              </el-form-item>

          <el-form-item style="text-align: center; width: 70%;margin-top: 15px;">
            <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

          ref="compnayInfoForm"
          label-width="50px"
          style="width:590px; padding-top:30px;"
          class="demo-ruleForm"
        >
         <div style="margin-bottom: 20px;">请假奖扣分规则设置  请按以下步骤操作</div>
              <div>【考勤】→【假期管理】→【编辑】→【奖扣积分】</div>
        </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) {
      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,
        // },

          compnayInfoForm: [
          {
            key:　'value_1',
            value: 100
          },
          {
            key:　'value_2',
            value: 100
          },
          {
            key:　'value_3',
            value: 100
          },
          {
            key:　'value_4',
            value: 100
          },
          {
            key:　'value_5',
            value: 100
          },
          {
            key:　'value_6',
            value: 100
          },
          {
            key:　'value_7',
            value: 100
          },
          {
            key:　'value_8',
            value: 100
          },
          {
            key:　'value_9',
            value: 100
          },
          {
            key:　'value_10',
            value: 100
          },
          {
            key:　'value_11',
            value: 100
          },

          {
            key:　'value_12',
            value: 100
          },{
            key:　'value_13',
            value: 100
          },
          {
            key:　'value_14',
            value: 100
          },
          {
            key:　'value_15',
            value: 100
          },

          {
            key:　'value_16',
            value: 100
          },
          {
            key:　'value_17',
            value: 100
          },{
            key:　'value_18',
            value: 100
          },
          {
            key:　'value_19',
            value: 100
          },
          {
            key:　'value_20',
            value: 100
          },
           {
            key:　'value_21',
            value: 100
          },
          {
            key:　'value_22',
            value: 100
          },
          {
            key:　'value_23',
            value: 100
          },
          {
            key:　'value_24',
            value: 100
          },
          //  {
          //   key:　'value_25',
          //   value: 100
          // },
          // {
          //   key:　'value_25',
          //   value: 100
          // },
          //  {
          //   key:　'value_26',
          //   value: 26
          // },
          //  {
          //   key:　'value_27',
          //   value: 100
          // }
        ],

        send_site_info_loading: false,

      }
    },

    methods: {
      chenge() {
        this.activeName2 = 'first'
        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) {
      },

      handleClick(tab, event) {
      },
      get_sys_data() {
      },

      load_site_info() {
        this.loading = true;
        const self = this

        this.$jtoken({
          url: this.serveAd + '/ad/group/get_point_setting',
          method: 'post',
          data: qs.stringify( {group_id: this.group }),
        }).then(
          res => {
            self.loading = false
            if (res.data.code == '1') {

              let data = JSON.parse(res.data.data);
              var arr = []
              for (let i in data) {
                  let o = {};
                  o[i] = data[i];
                  arr.push(o)
              }
              let company = self.compnayInfoForm;
               for(let i = 0 ; i < company.length; i ++) {
                 self.compnayInfoForm[i].value = arr[i][company[i].key]
              }
              self.activeName2 = 'first';
            }
          }
        )
      },
      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
        }
            self.send_site_info_loading = true
            if (form) {
              let send_data = []
              send_data.push({
                data: self.compnayInfoForm
              })
              self.$jtoken({
                  url: this.serveAd +'/ad/group/point_setting_save',
                  method: 'post',
                  data: qs.stringify({group_id: this.group, data: self.compnayInfoForm}),
                  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.activeName2 = 'first';
                      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>
/deep/ .el-form-item {
  padding-left: 80px;
}
/deep/ .el-form-item .el-form-item__label {
  font-weight: normal;
}
.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;
  }
  /deep/ .el-form-item__content {
    margin-left: 0px!important;
  }
  /deep/ .el-tabs__item {
    font-size: 16px;
    color: #303133;
  }
</style>

