<!-- 请假参数 -->
<template>
  <div>
    <Row justify="center" style="position: relative;" type="flex">
      <Col style="margin-top: 24px;">
        <RadioGroup
          @on-change="changeData"
          size="large"
          style="margin:0px 0px 20px 400px"
          type="button"
          v-if="reciSiteData.length>0"
          v-model="chosenBtn">
          <Radio
            :key="item.wmSiteId"
            :label="index"
            v-for="(item,index) in reciSiteData"
          >{{item.wmName}}</Radio>
        </RadioGroup>
        <Form :label-width="100" 
        :model="formLeaveParam" 
        :rules="ruleValidate"
        ref="formLeaveParam">
          <div class="font">请假参数</div>
          <el-divider></el-divider>
          <FormItem :label-width="154" label="助经审批时长上限" prop="leaveHour1">
            <Row>
              <Col span="18">
                <InputNumber
                  :disabled="inputDisalbed"
                  :max="999999"
                  :min="0"
                  :precision="0"
                  style="width: 50%"
                  v-model="formLeaveParam.leaveHour1"
                ></InputNumber>
                <label>小时</label>
              </Col>
            </Row>
          </FormItem>
          <Row>
            <p
              style="margin:0 0 16px 30px;color: #ed4014; font-weight: bold"
            >注 请假时长为上限内的由助经审批，上限时长以上的由经理审批</p>
          </Row>
          <FormItem :label-width="154" label="出勤率" prop="attendRate">
            <Row>
              <Col span="18">
                <InputNumber
                  :disabled="inputDisalbed"
                  :max="100"
                  :min="0"
                  placeholder
                  style="width: 50%"
                  v-model="formLeaveParam.attendRate"
                ></InputNumber>
                 <label style="margin-left: 3px;">%</label>
              </Col>
              <!-- <Col span="1" style="text-align: right">%</Col> -->
            </Row>
          </FormItem>
          <div class="font">调休假参数</div>
          <el-divider></el-divider>
          <div v-for="item in formLeaveParam.configVacationList" :key="item.period">
          <Row>
            <Col span="10">
              <FormItem :label-width="80" :label="labelArc(item.period)" prop="date">：
                <Input disabled style="width: 40%; text-align: center; " 
                :value="dateArc(item.startTime)"/> —— <Input disabled style="width: 40%;" :value="dateArc(item.endTime)"/>
              </FormItem>
            </Col>
            <Col span="7">
              <Form-item :label-width="82" label="有效日期：" prop="validTime">
                <el-date-picker
                :editable="false"
                placeholder="有效日期"
                :picker-options="item.validOptions"
                :disabled="inputDisalbed"
                placement="bottom-start"
                type="date"
                v-model="item.validTime"
                value-format="yyyy-MM-dd"
                size="small"
              ></el-date-picker>
              </Form-item>
            </Col>
            <Col span="7">
              <Form-item :label-width="82" label="失效日期：" prop="invalidTime">
                <el-date-picker
                :editable="false"
                placeholder="失效日期"
                :picker-options="item.invalidOptions"
                :disabled="inputDisalbed"
                placement="bottom-start"
                type="date"
                v-model="item.invalidTime"
                value-format="yyyy-MM-dd"
                size="small"
              ></el-date-picker>
              </Form-item>
            </Col>
          </Row>
          </div>
          
          <FormItem :label-width="400" style="margin-top: 30px;">
            <Button
              :disabled="isDisableEditBtn"
              :loading="loading"
              @click="handleSubmit('formLeaveParam')"
              type="primary"
              v-permission:edit
            >{{btnName}}</Button>
            <Button
              :disabled="inputDisalbed"
              @click="handleReset('formLeaveParam')"
              style="margin-left: 8px"
              v-permission:edit
            >重置</Button>
          </FormItem>
        </Form>
      </Col>
      <Spin fix v-if="spinShow"></Spin>
    </Row>
  </div>
</template>

<script>
import { APPROVER } from '@conf/dict'
import WmSitesAPI from '@api/common/wmSites'
import LeaveConfigAPI from '@api/common/leaveConfig'
import cloneDeep from 'lodash/cloneDeep'
import configValue from '@conf/index'
import { parse, format, startOfMonth} from 'date-fns'

export default {
  name: 'leave-params',
  data () {
    return {
      btnName: '编辑',
      spinShow: true,
      isDisableEditBtn: true,
      loading: false,
      chosenBtn: 0,
      inputDisalbed: true,
      approverArr: APPROVER,
      formLeaveParam: {
        leaveHour1: 0,
        attendRate: 0,
        configVacationList: [],
      },
      options1: {
       
      },

      ruleValidate: {
        leaveHour1: [
          {
            required: true,
            type: 'integer',
            min: 0,
            max: 999999,
            trigger: 'blur',
            message: '不能为空'
          }
        ],
        attendRate: [
          {
            required: true,
            min: 0,
            type: 'integer',
            trigger: 'blur',
            max: 100,
            message: '输入0-100之间整数数字'
          }
        ],
        // date: [
        //   {
        //     required: true,
        //   }
        // ],
        // validTime: [
        //   {
        //     required: true,
        //     type: 'date',
        //     trigger: 'change',
        //     message: '选择有效日期'
        //   }
        // ],
        // invalidTime: [
        //   {
        //     required: true,
        //     type: 'date',
        //     trigger: 'change',
        //     message: '选择失效日期'
        //   }
        // ]
      },
      reciSiteData: [],
      reciLeaveConfigData: {},
      deepCloneData: {},
    }
  },
  computed : {
    
   labelArc(){
      return function(id){
        if(id == 1) {
          return '第一季度'
        } else if(id == 2) {
          return '第二季度'
        } else if(id == 3) {
          return '第三季度'
        } else if(id == 4) {
          return '第四季度'
        }
      }
    },
    dateArc () {
      return function(value){
        return format(
          new Date(value),
          this.$config. DAY_FORMAT
        )
      }
    },
  },

  created () {
    this.btnName = '编辑'
    WmSitesAPI.listOwer().then(({ data }) => {
      if (data.status === 'success') {
        this.reciSiteData = data.data
        this.chosenBtn = 0
        let id = ''
        if (data.data.length > 0) {
          if (data.data[0].wmSiteId !== undefined) {
            id = data.data[0].wmSiteId
            this.isDisableEditBtn = false
            this.queryData(id)
            return
          }
        }
        this.$Message.destroy()
        this.$Message.warning('未查到中心')
        this.spinShow = false
      }
    })
  },
  methods: {
    timepicker(date) {
      this.formLeaveParam.configVacationList[0].validOptions = {
        disabledDate: date=> {
          let time1 = (new Date(2020,0,1))
          let time2 = (new Date(2020,2,31))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[1].validOptions = {
        disabledDate: date=> {
          let time1 = (new Date(2020,3,1))
          let time2 = (new Date(2020,5,30))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[2].validOptions = {
        disabledDate: date=> {
          let time1 = (new Date(2020,6,1))
          let time2 = (new Date(2020,8,30))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[3].validOptions = {
        disabledDate: date=> {
          let time1 = (new Date(2020,9,1))
          let time2 = (new Date(2020,11,31))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[0].invalidOptions = {
        disabledDate: date=> {
          let time1 = (new Date(this.formLeaveParam.configVacationList[0].validTime))
          let time2 = (new Date(time1.valueOf()+24*60*60*365*1000))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[1].invalidOptions = {
        disabledDate: date=> {
          let time1 = (new Date(this.formLeaveParam.configVacationList[1].validTime))
          let time2 = (new Date(time1.valueOf()+24*60*60*365*1000))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[2].invalidOptions = {
        disabledDate: date=> {
          let time1 = (new Date(this.formLeaveParam.configVacationList[2].validTime))
          let time2 = (new Date(time1.valueOf()+24*60*60*365*1000))
          return date > time2 || date < time1
        }
      }
      this.formLeaveParam.configVacationList[3].invalidOptions = {
        disabledDate: date=> {
          let time1 = (new Date(this.formLeaveParam.configVacationList[3].validTime))
          let time2 = (new Date(time1.valueOf()+24*60*60*365*1000))
          return date > time2 || date < time1
        }
      }
    },

    // 表单提交
    handleSubmit (name) {
      if (!this.inputDisalbed) {
        this.$refs[name].validate(valid => {
          if (valid) {
            this.loading = true
            if (
              this.reciLeaveConfigData.data === undefined ||
              this.reciLeaveConfigData.data === null
            ) {
              let datas = {
                configApproveList: [
                  {
                    approverTime: this.formLeaveParam.leaveHour1
                  },
                ],
                configVacationList: this.formLeaveParam.configVacationList
              }

              datas.shiftSetAdd = this.formLeaveParam.attendRate
              let siteId = this.reciSiteData[this.chosenBtn].wmSiteId
              datas.orgCode = siteId
              LeaveConfigAPI.add(datas)
                .then(({ data }) => {
                  if (data.status === 'success') {
                    this.inputDisalbed = true
                    this.btnName = '编辑'
                    this.loading = false
                    this.$Message.destroy()
                    this.$Message.success('数据新增成功')
                    this.queryData(siteId)
                  }
                })
                .catch(() => {
                  this.loading = false
                })
            } else {
              let tmpData = this.reciLeaveConfigData.data
              let list = tmpData.configApproveList
              if (list[0]) {
                list[0].approverTime = this.formLeaveParam.leaveHour1
              }
              let list2 = this.formLeaveParam.configVacationList
              console.log(this.reciLeaveConfigData,'188')
              let datas = {
                configVacationList: list2,
                configApproveList: list,
                shiftSetAdd: this.formLeaveParam.attendRate,
                uuid: tmpData.uuid
              }
              console.log(datas,'274')
              LeaveConfigAPI.edit(datas)
                .then(({ data }) => {
                  if (data.status === 'success') {
                    this.inputDisalbed = true
                    this.btnName = '编辑'
                    this.loading = false
                    this.$Message.destroy()
                    this.$Message.success('数据修改成功')
                    let siteId = this.reciSiteData[this.chosenBtn].wmSiteId
                    this.queryData(siteId)
                  }
                })
                .catch(() => {
                  this.loading = false
                })
            }
          }
        })
      } else {
        this.inputDisalbed = false
        this.btnName = '保存'
      }
    },
    // 表单重置
    handleReset (name) {
      // this.$refs[name].resetFields()
      this.formLeaveParam = cloneDeep(this.deepCloneData)
    },
    changeData (e) {
      this.queryData(this.reciSiteData[parseInt(e)].wmSiteId)
    },
    queryData (wmSiteId) {
      if (wmSiteId === undefined) {
        this.$Message.destroy()
        return
      }
      this.inputDisalbed = true
      this.btnName = '编辑'
      LeaveConfigAPI.info({ wmSiteId }).then(({ data }) => {
        this.spinShow = false
        if (data.status === 'success') {
          this.reciLeaveConfigData = data
          console.log(this.reciLeaveConfigData,'237')
          if (data.data === undefined || data.data === null) {
            this.formLeaveParam.leaveHour1 = 0
            this.formLeaveParam.attendRate = 0
            return
          }

          this.formLeaveParam.attendRate = data.data.shiftSetAdd
          var tmp0 = data.data.configApproveList[0]
          this.formLeaveParam.leaveHour1 = tmp0.approverTime
          this.formLeaveParam.configVacationList = data.data.configVacationList
          this.deepCloneData = cloneDeep(this.formLeaveParam)
          this.timepicker()
          this.$Message.destroy()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-divider {
  width: 1000px;
}
.font {
 color: #17508a;
 font-weight: bold;
}
</style>
