<template>
  <div class="question-infos">
    <el-dialog title="编辑作息" @close="handleClose" :visible="show" width="800px">
      <div class="page-body">
        <el-form :model="formData" :rules="formData.isEnable?formDataRules:null" size="small" ref="form" label-position="right"
                 label-width="120px" label-prefix=":">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item prop="orgName" label="机构：" >
                <span>{{formData.orgName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期：">
                <span >{{formData.ymdDate}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="星期：">
                <span>{{parseTime(formData.ymdDate,"dddd")}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isEnable" label="状态：">
                <template >
                  <el-radio-group v-model="formData.isEnable" @change="onEnableChange(formData)">
                    <el-radio text-color="#48bb78" :label="1">营业</el-radio>
                    <el-radio text-color="#f56565" :label="0">歇业</el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="workTime" label="上班时间：">
                <template >
                  <el-time-select
                      :picker-options="pickerOptions"
                      v-model="formData.workTime"
                      :disabled="!formData.isEnable || formData.isEnable === false"/>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="workOffTime" label="下班时间：">
                <template >
                  <el-time-select
                    :picker-options="pickerOptions"
                    v-model="formData.workOffTime"
                    :disabled="!formData.isEnable || formData.isEnable === false"/>
                </template>
              </el-form-item>
            </el-col>
              <el-col :span="12">

              <el-form-item prop="noonbreakStart" label="午休开始：">
                <template>
                  <el-time-select
                      :picker-options="pickerOptions"
                      v-model="formData.noonbreakStart"
                      :disabled="!formData.isEnable || formData.isEnable === false"/>
                </template>
              </el-form-item>
              </el-col>
            <el-col :span="12">
              <el-form-item prop="noonbreakEnd" label="午休结束：">
                <template >
                  <el-time-select
                      :picker-options="pickerOptions"
                      v-model="formData.noonbreakEnd"
                      :disabled="!formData.isEnable || formData.isEnable === false"/>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>


import {queryOrgInfo,editWorkTime} from "@/views/system/workTimeSet/api";
import {timeCheck }from '@/utils/ruoyi'
export default {
  data() {
    return {
      //弹窗展示
      show:false,
      //选中的id
      id: null,
      //form数据
      formData: {},
      workTimeId:null,
      //表单验证
      formDataRules: {
        isEnable: [{ required: true, message: "请选择状态" }],
        workTime: [{ required: true, message: "请输入上班时间" }],
        openTime: [{ required: true, message: "请输入营业时间" }],
        closeTime: [{ required: true, message: "请输入营业终了时间" }],
        workOffTime: [{ required: true, message: "请输入下班时间" }],
      },

    };
  },
  created() {
  },
  computed: {
    pickerOptions() {
      return {
        start: "00:00",
        end: "24:00",
        step: "00:10",
      };
    },
  },
  methods: {
    edit(row){
      this.orgId = row.id;
      queryOrgInfo(row.id).then(res=>{
        this.formData = res.data;
        this.show = true;
      })
      console.log(row,'11111')
    },
    reset() {
      return {
        isEnable: 1,
        openTime: null,
        closeTime: null,
        noonbreakStart: null,
        noonbreakEnd: null,
        workTime: null,
        workOffTime: null,
      };
    },
    onEnableChange(workTime) {
      if (workTime.isEnable === false) {
        workTime.openTime = null;
        workTime.closeTime = null;
        workTime.noonbreakStart = null;
        workTime.noonbreakEnd = null;
        workTime.workTime = null;
        workTime.workOffTime = null;
      }
    },
    handleClose() {
      this.show = false;
      this.formData = this.reset();
      this.id=null;
    },
    onSubmit() {
      this.$refs.form.validate((isValidate) => {
        if (!isValidate) return;
        if (!this.formData.noonbreakStart ^ !this.formData.noonbreakEnd) {
          this.$message.warning(`午休开始及结束时间必须同时配置`);
          return;
        }
        if (
            !timeCheck([
              this.formData.workTime,
              this.formData.openTime,
              this.formData.noonbreakStart,
              this.formData.noonbreakEnd,
              this.formData.closeTime,
              this.formData.workOffTime,
            ])
        ) {
          this.$message.warning(
              `时间配置规则：上班时间<=午休开始<=午休结束<=下班时间`
          );
          return false;
        }
        editWorkTime(this.formData).then(res=>{
            this.show = false;
            this.$message.success('操作成功')
            this.$emit('ok')
        })
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.question-infos {
  .el-form {
    padding-top: 10px;

  }
}

.el-rate {
  margin-top: 6px;
}

.change-icon {
  font-size: 18px;
}
</style>
