<template>
  <div class="question-infos">
    <el-dialog :title="id? '编辑作息模版':'新增作息模版'" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
      custom-class="gxDialog" width="75%" top="10vh" append-to-body>
<!--      <div class="p-5 work-time-modify">-->
        <el-form
            label-width="140px"
            :rules="rules"
            label-suffix=":"
            label-position="left">
          <el-form-item>
            <span slot="label"> <span style="color: red"> * </span>机构 </span>
            <org-tree-select
                ref="tree"
                multiple
                orgTypeFilter
                :strictly="true"
                :active-value="formData.orgIdList"
                v-model="data.orgIdList"
                :disabled="data.disabled"
                :clearable="!data.disabled"
                :style="id? 'background-color: #f5f7fa;color: #c0c4cc;': ''"
            ></org-tree-select>
          </el-form-item>
          <el-form-item >
            <span slot="label"> <span style="color: red"> * </span>生效日期 </span>
            <el-date-picker  v-model="formData.effectiveDate"  :disabled="data.disabled"
                             :clearable="!data.disabled" :picker-options="startDatepickerOptions"  popper-class="no-atTheMoment"  type="date" placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <div style="color: red">
            （保存后生成或更新本月或下月生效日期后的每日作息）
          </div>
          <!--  -->
          <div class="grid">
            <div class="title">
              <span style="color: red"> * </span>作息设置(勾选表示当日正常上班)
            </div>
            <div class="box">
              <el-table class="w-auto" border :data="formData.dayOfWeeks">
                <el-table-column label="星期" width="60px" prop="dayOfWeekText">
                </el-table-column>
                <el-table-column label="营业状态" width="180px">
                  <template slot-scope="r">
                    <el-radio-group
                        v-model="r.row.isWorkday"
                        @change="onEnableChange(r.row)"
                    >
                      <el-radio text-color="#48bb78" :label="true">营业</el-radio>
                      <el-radio text-color="#f56565" :label="false">歇业</el-radio>
                    </el-radio-group>
                  </template>
                </el-table-column>
                <el-table-column label="上班时间">
                  <template slot-scope="r">
                    <el-time-select
                        :picker-options="pickerOptions"
                        :disabled="!r.row.isWorkday || r.row.isWorkday === false"
                        v-model="r.row.workTime"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="营业时间">
                  <template slot-scope="r">
                    <el-time-select
                        :picker-options="pickerOptions"
                        :disabled="!r.row.isWorkday || r.row.isWorkday === false"
                        v-model="r.row.openTime"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="午休开始">
                  <template slot-scope="r">
                    <el-time-select
                        :picker-options="pickerOptions"
                        :disabled="!r.row.isWorkday || r.row.isWorkday === false"
                        v-model="r.row.noonbreakStart"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="午休结束">
                  <template slot-scope="r">
                    <el-time-select
                        :picker-options="pickerOptions"
                        :disabled="!r.row.isWorkday || r.row.isWorkday === false"
                        v-model="r.row.noonbreakEnd"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="营业终了">
                  <template slot-scope="r">
                    <el-time-select
                        :picker-options="pickerOptions"
                        :disabled="!r.row.isWorkday || r.row.isWorkday === false"
                        v-model="r.row.closeTime"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="下班时间">
                  <template slot-scope="r">
                    <el-time-select
                        :picker-options="pickerOptions"
                        :disabled="!r.row.isWorkday || r.row.isWorkday === false"
                        v-model="r.row.workOffTime"
                    />
                  </template>
                </el-table-column>

              </el-table>

            </div>
          </div>
        </el-form>
<!--      </div>-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="onHide">取消</el-button>
        <btn-tip tip="确定要提交吗?" type="primary" @click="onSubmit">保存</btn-tip>
      </div>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible="centerDialogVisible"
        width="25%"
        @close="centerDialogVisible=false"
        center>
      <span>所选机构中在当前生效日期内已有按指定日期配置的作息数据，是否覆盖按指定日期配置的作息数据?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitData(0)">不覆盖</el-button>
        <el-button type="primary" @click="submitData(1)">覆盖</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="提示"
        :visible="centerDialogVisiblea"
        width="25%"
        @close="centerDialogVisiblea=false"
        center>
      <span>已存在其他生效的配置，将会生成{{checkMsg}}的作息，是否提交?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDataMsg(0)">取消</el-button>
        <el-button type="primary" @click="checkDataMsg(1)">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import BtnTip from "@/components/btnTip";
import OrgTreeSelect from '@/components/orgTreeSelect'
//import { timeCheck } from "@/util/util";
export default {
  components:{BtnTip,OrgTreeSelect},
  data() {
    let { params, query } = this.$route;
    return {
      isShow: false,
      id:null,
      orgId:null,
      orgTree:null,
      formData: {
        orgIdList: [],
        dayOfWeeks: [],
      },
      data: {
        orgIdList: [],
        disabled: false,
      },
      rules: {
        orgIdList: [
          {
            required: true,
            message: "请选择机构",
            trigger: "change",
          },
        ],
      },
      options: [
        {
          value: new Date().getFullYear(),
          label: new Date().getFullYear(),
        },
        {
          value: new Date().getFullYear() + 1,
          label: new Date().getFullYear() + 1,
        },
      ],
      pickerOptions: {
        start: "00:00",
        step: "00:10",
        end: "24:00",
      },
      startDatepickerOptions: {
        disabledDate(time) {
          const date = new Date();
          date.setTime(date.getTime() );
          return time.getTime() < date;
        },
      },
      centerDialogVisible: false,
      centerDialogVisiblea:false,
      checkData:null,
      checkMsg:null,
    };
  },
  props: {},
  watch: {
    year() {
      this.getData();
    },
  },
  mounted() {
    this.getData();
  },
  computed: {},
  methods: {
    add(tree){
      this.orgTree = tree;
      this.isShow = true;
    },
   // ...mapMutations([]),
    async refresh() {},

    async show(id,orgId, other = {}) {
      console.log("show",id,orgId);
      this.isShow = true;
      this.id=id;
      this.orgId=orgId;
      this.getData();
    },
    async onSubmit() {

      this.formData.orgIds = this.data.orgIdList;

      if (this.data.orgIdList.length < 1) {
        this.$message.error("机构不能为空");
        return;
      }
      if (!this.formData.effectiveDate ) {
        this.$message.error("生效日期不能为空");
        return;
      }
      let d=this.formData;
      if (
          this.formData.dayOfWeeks.filter((w) => w.isWorkday ===true || w.isWorkday)
              .length === 0
      ) {
        this.$message.error("工作日不能为空");
        return;
      }

      for (let i=0;i< this.formData.dayOfWeeks.length;i++ ) {
        let dayOfWeek=this.formData.dayOfWeeks[i];
        if(!dayOfWeek.isWorkday && dayOfWeek.isWorkday!=true){
          continue;
        }
        if (
            !(
                dayOfWeek.workTime &&
                dayOfWeek.openTime &&
                dayOfWeek.closeTime &&
                dayOfWeek.workOffTime
            )
        ) {
          this.onError(`${dayOfWeek.dayOfWeekText}的上班时间、营业时间未配置完整`);
          return;
        }

        if (!dayOfWeek.noonbreakStart ^ !dayOfWeek.noonbreakEnd) {
          this.onError(`${dayOfWeek.dayOfWeekText}的午休开始及结束时间必须同时配置`);
          return;
        }
        if (
            !timeCheck([
              dayOfWeek.workTime,
              dayOfWeek.openTime,
              dayOfWeek.noonbreakStart,
              dayOfWeek.noonbreakEnd,
              dayOfWeek.closeTime,
              dayOfWeek.workOffTime,
            ])
        ) {
          this.onError(
              `${dayOfWeek.dayOfWeekText}的上班时间<=营业时间<=午休开始<=午休结束<=营业终了<=下班时间`
          );
          return false;
        }
      }

      let data  = await this.$api.workTime.checkData(this.formData);
      this.checkData=data.checkData
      this.checkMsg=data.checkMsg

      if((data.checkData==null||data.checkData==0)&&data.checkMsg==null) {
        // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
        //   this.$emit("success");
        //   this.onHide();
        // });

      }else{
        this.checkDataDialog();
      }
    },

    checkDataDialog(){
      if(this.checkMsg!=null){
        this.centerDialogVisiblea=true;
        return;
      }
      if(this.checkData>0){
        this.centerDialogVisible=true;
        return;
      }
    },
    checkDataMsg(tyep){
      if(tyep==0){
        this.centerDialogVisiblea=false;
        this.checkData=null;
        this.checkMsg=null;
        return;
      }else{
        if(this.checkData>0){
          this.centerDialogVisible=true;
          return;
        }else{
          // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
          //   this.$emit("success");
          //   this.onHide();
          // });
        }
      }

    },
    async submitData(result){
      this.centerDialogVisible=false;
      this.centerDialogVisiblea=false;
      this.formData.checkDataResult =result;
      // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
      //   this.$emit("success");
      //   this.onHide();
      // });

    },

    async getData() {
      console.log("this.formData.id",this.formData.id);
      console.log("this.formData.orgId",this.formData.orgId);
      // this.formData = await this.$api.workTimeMonth.holiday({
      //   id: this.id,
      // });

      // this.data.orgIdList =[];
      if (this.id != 0) {
        this.data.disabled=true;
        this.data.orgIdList = [this.formData.orgId];
        console.log(this.formData.orgIdList);
        if (this.orgId) {
          this.data.orgIdList = [this.formData.orgId];
          console.log(this.data.orgIdList);
        }
      } else {
        this.data.orgIdList = [];
        this.data.disabled= false;
      }
    },
    onEnableChange(workTime) {
      if (workTime.isWorkday === false) {
        workTime.openTime = null;
        workTime.closeTime = null;
        workTime.noonbreakStart = null;
        workTime.noonbreakEnd = null;
        workTime.workTime = null;
        workTime.workOffTime = null;
      }
    },
    handleClose() {

      this.id=null;
      this.formData = {
        orgIdList: [],
        effectiveDate: null,
        checkDataResult:null,
      };
      this.checkData=null;
      this.checkMsg=null;
      this.centerDialogVisiblea=false;
      this.centerDialogVisible=false;
      this.isShow = false;
    },
    onHide() {
      this.id=null;
      this.formData = {
        orgIdList: [],
        effectiveDate: null,
        checkDataResult:null,
      };
      this.checkData=null;
      this.checkMsg=null;
      this.centerDialogVisiblea=false;
      this.centerDialogVisible=false;
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.work-time-modify {
  .red {
    color: red;
  }
  .grid {
    width: 100%;
    margin-bottom: 20px;
    .title {
    }
    .box {
      padding: 20px;
      border: 1px solid #000000;
      background: #ffffff;
      .time {
      }
    }
  }
  //
  .el-input {
    width: 400px;
  }

  .el-table {
    .el-date-editor.el-input {
      width: 100%;
    }
  }
  .el-dialog__body {
    overflow-y: auto;
    min-height: 200px;
  }
}
</style>
