<template>
  <div style="margin: 0">
    <el-card style="width: 800px">
      <!--      <el-row style="margin: 5px">-->
      <!--        <span style="margin-right: 5px">当前规则：</span>-->
      <!--        <el-radio-group v-model="form_addCheckOrderExecRulers.rulerType" @input="changeValue">-->
      <!--          <el-radio :label="1">按台下发</el-radio>-->
      <!--          <el-radio :label="2">定时下发</el-radio>-->
      <!--          <el-radio :label="3">停止下发</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-row>-->
      <!--      <el-divider content-position="left">按台下发</el-divider>-->
      <!--      <el-row style="margin: 5px">-->
      <!--        <span style="margin-right: 5px">频次(台)：</span>-->
      <!--        <el-input-number v-model="form_addCheckOrderExecRulers.numberPart" :min="1" :step="1" controls-position="right" size="mini" style="width: 100px" />-->
      <!--        <span>每上线{{ form_addCheckOrderExecRulers.numberPart }}台车，自动下发1次检查单</span>-->
      <!--      </el-row>-->
      <!--      <el-divider content-position="left">定时下发</el-divider>-->
      <!--      <el-row style="margin: 5px">-->
      <!--        <span style="margin-right: 5px">频次(时)：</span>-->
      <!--        <el-input-number v-model="form_addCheckOrderExecRulers.hourPart" :min="1" :step="1" controls-position="right" size="mini" style="width: 100px" />-->
      <!--        <span>每{{ form_addCheckOrderExecRulers.hourPart }}h，自动下发1次检查单</span>-->
      <!--      </el-row>-->
      <el-row style="margin: 5px">
        <el-col :span="12">
          <el-row style="margin: 5px 0">
            <span style="margin-right: 5px">白班下发时间1：</span>
            <el-time-picker
              v-model="form_addCheckOrderExecRulers.beat1_1"
              :clearable="false"
              is-range
              size="small"
              style="width: 220px"
              range-separator="-"
              format="HH:mm"
              value-format="HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="setBeat(1)"/>
          </el-row>
          <el-row style="margin: 5px 0">
            <span style="margin-right: 5px">白班下发时间2：</span>
            <el-time-picker
              v-model="form_addCheckOrderExecRulers.beat1_2"
              :clearable="false"
              is-range
              size="small"
              style="width: 220px"
              range-separator="-"
              format="HH:mm"
              value-format="HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="setBeat(2)"/>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row style="margin: 5px 0">
            <span style="margin-right: 5px">夜班下发时间1：</span>
            <el-time-picker
              v-model="form_addCheckOrderExecRulers.beat2_1"
              :clearable="false"
              is-range
              size="small"
              style="width: 220px"
              range-separator="-"
              format="HH:mm"
              value-format="HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="setBeat(3)"/>
          </el-row>
          <el-row style="margin: 5px 0">
            <span style="margin-right: 5px">夜班下发时间2：</span>
            <el-time-picker
              v-model="form_addCheckOrderExecRulers.beat2_2"
              :clearable="false"
              is-range
              size="small"
              style="width: 220px"
              range-separator="-"
              format="HH:mm"
              value-format="HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              @change="setBeat(4)"/>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="margin: 5px">
        <el-row style="margin: 5px 0">
          <span style="margin-right: 5px">白班下发部门：</span>
          <el-select v-model="form_addCheckOrderExecRulers.beat1_department" placeholder="部门" size="small" style="width:200px" @change="setDepartment">
            <el-option
              v-for="item in department"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-row>
        <el-row style="margin: 5px 0">
          <span style="margin-right: 5px">夜班下发部门：</span>
          <el-select v-model="form_addCheckOrderExecRulers.beat2_department" placeholder="部门" size="small" style="width:200px" @change="setDepartment1">
            <el-option
              v-for="item in department"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-row>
      </el-row>
    </el-card>

  </div>
</template>
<script>
import calendar from '@/components/Calendar/calendar.vue'
import UploadExcelComponent from './UploadExcel.vue'
import { ExecDatabase } from '@/main'
import { mapGetters } from 'vuex'
export default {
  components: {
    calendar,
    UploadExcelComponent
  },
  data() {
    return {
      form_addCheckOrderExecRulers: {
        rulerType: 0,
        numberPart: 0,
        hourPart: 0,
        beat1_1: ['', ''],
        beat1_2: ['', ''],
        beat1_department: '',
        beat2_1: ['', ''],
        beat2_2: ['', ''],
        beat2_department: ''
      },
      department: [],
      value1: '',
      editForm: {
        ID: '',
        ShiftCode: '',
        ShiftDate: '',
        ShiftName: '',
        startTime: '',
        endTime: '',
        ShiftUsed: '',
        ShiftExplain: ''
      },
      editRules: {
        startTime: [{ required: true, message: '请选择开始时分', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择结束时分', trigger: 'blur' }],
        ShiftCode: [{ required: true, message: '请输入班次代码', trigger: 'blur' }],
        ShiftName: [{ required: true, message: '请输入班次名称', trigger: 'blur' }],
        ShiftUsed: [{ required: true, message: '请选择是否启��', trigger: 'blur' }]
      },
      title: '',
      addedForm: {
        ShiftCode: '',
        ShiftDate: '',
        ShiftName: '',
        startTime: '',
        endTime: '',
        ShiftUsed: '',
        ShiftExplain: ''
      },
      addedRules: {
        ShiftName: [{ required: true, message: '请输入班次名称', trigger: 'blur' }],
        startTime: [{ required: true, message: '请选择开始时分', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择结束时分', trigger: 'blur' }],
        ShiftCode: [{ required: true, message: '请输入班次代码', trigger: 'blur' }],
        ShiftUsed: [{ required: true, message: '请选择是否启用', trigger: 'blur' }]
      },
      year: '', // 年
      month: '', // 月
      selectDate: '', // 选择的日期
      time: '',
      serNum: [], // 工作日流水号
      serNumValue: '', // 工作日流水号值
      arr: [], // 日期数组
      arr1: [], // 日期数组
      calendar1: {
        value: [],
        weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], // 周的显示
        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], // 月的显示
        events: {} // 上不上班
      },
      tableData: [],
      tableDataShift: [],
      tableHeader: [],
      loading: false,
      loadingShift: false,
      addDialogFormVisible: false,
      editDialogFormVisible: false,
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      a: 2, // 每页显示条数
      pageList: 1 // 后台获取页
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'token'
    ])
  },
  created() {
    this.searchBeat()
    this.searchTable()
    this.searchDepartmentBase()
  },
  methods: {
    changeValue() {
      var param = []
      param[0] = ['启用规则', this.form_addCheckOrderExecRulers.rulerType]
      param[1] = ['按天频次', this.form_addCheckOrderExecRulers.numberPart]
      param[2] = ['定时频次', this.form_addCheckOrderExecRulers.hourPart]
      var Data = this.CreateData('12', '质检_检验规则_设定', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.searchTable()
        } else {
          this.$message({
            message: '设置失败',
            type: 'error'
          })
        }
      })
    },
    // 查询
    searchTable() {
      var param = []
      var Data = this.CreateData('11', '质检_检验规则_查询', param) // ��处有修改 因为用原来的存储过程查不出来数据 故又重新创建了个
      ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          this.form_addCheckOrderExecRulers.hourPart = response.data[0]['定时频次']
          this.form_addCheckOrderExecRulers.numberPart = response.data[0]['按台频次']
          this.form_addCheckOrderExecRulers.rulerType = response.data[0]['启用规则']
        }
      })
    },
    // 查询
    searchDepartmentBase() {
      this.department = []
      var param = []
      var Data = this.CreateData('11', '质检_工单_新增_查询部门', param) // ��处有修改 因为用原来的存储过程查不出来数据 故又重新创建了个
      ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          for (let i = 0; i < response.data.length; i++) {
            this.department.push({
              label: response.data[i]['子部门名称'],
              value: response.data[i]['考核部门编号']
            })
          }
        }
      })
    },

    // 查询
    searchBeat() {
      var param = []
      var Data = this.CreateData('11', '质检_检验班次_查询', param)
      ExecDatabase(Data).then(response => {
        if (response.data.length > 0) {
          console.log(response.data)
          this.form_addCheckOrderExecRulers.beat1_department = response.data[0]['部门id']
          this.form_addCheckOrderExecRulers.beat2_department = response.data[2]['部门id']

          this.form_addCheckOrderExecRulers.beat1_1 = [
            this.formatTimeString(response.data[0]['开始时间']),
            this.formatTimeString(response.data[0]['结束时间'])
          ]

          this.form_addCheckOrderExecRulers.beat1_2 = [
            this.formatTimeString(response.data[1]['开始时间']),
            this.formatTimeString(response.data[1]['结束时间'])
          ]
          this.form_addCheckOrderExecRulers.beat2_1 = [
            this.formatTimeString(response.data[2]['开始时间']),
            this.formatTimeString(response.data[2]['结束时间'])
          ]
          this.form_addCheckOrderExecRulers.beat2_2 = [
            this.formatTimeString(response.data[3]['开始时间']),
            this.formatTimeString(response.data[3]['结束时间'])
          ]
        }
        console.log(this.form_addCheckOrderExecRulers)
      })
    },
    formatTimeString(timeStr) {
      if (!timeStr) return ''

      if (/^\d{2}:\d{2}:\d{2}$/.test(timeStr)) {
        return timeStr.slice(0, 5) + ':00'
      }

      if (/^\d{2}:\d{2}$/.test(timeStr)) {
        return timeStr + ':00'
      }

      const date = new Date(timeStr)
      if (!isNaN(date)) {
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        return `${hours}:${minutes}:00`
      }

      console.warn('Invalid time format:', timeStr)
      return ''
    },
    setBeat(beatId) {
      var param = []
      let startTime = ''
      let endTime = ''

      switch (beatId) {
        case 1:
          startTime = this.form_addCheckOrderExecRulers.beat1_1[0]
          endTime = this.form_addCheckOrderExecRulers.beat1_1[1]
          break
        case 2:
          startTime = this.form_addCheckOrderExecRulers.beat1_2[0]
          endTime = this.form_addCheckOrderExecRulers.beat1_2[1]
          break
        case 3:
          startTime = this.form_addCheckOrderExecRulers.beat2_1[0]
          endTime = this.form_addCheckOrderExecRulers.beat2_1[1]
          break
        case 4:
          startTime = this.form_addCheckOrderExecRulers.beat2_2[0]
          endTime = this.form_addCheckOrderExecRulers.beat2_2[1]
          break
      }

      startTime = startTime.length === 5 ? startTime + ':00' : startTime
      endTime = endTime.length === 5 ? endTime + ':00' : endTime

      param[0] = ['班次ID', beatId]
      param[1] = ['开始时间', startTime]
      param[2] = ['结束时间', endTime]

      var Data = this.CreateData('12', '质检_检验班次_设定', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.searchBeat()
        } else {
          this.$message({
            message: '设置失败',
            type: 'error'
          })
        }
      })
    },
    setDepartment() {
      var param = []
      param[0] = ['班次id', 1]
      param[1] = ['部门id', this.form_addCheckOrderExecRulers.beat1_department]
      var Data = this.CreateData('12', '质检_检验规则_部门_设定', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.searchBeat()
        } else {
          this.$message({
            message: '设置失败',
            type: 'error'
          })
        }
      })
    },
    setDepartment1() {
      var param = []
      param[0] = ['班次id', 2]
      param[1] = ['部门id', this.form_addCheckOrderExecRulers.beat2_department]
      var Data = this.CreateData('12', '质检_检验规则_部门_设定', param)
      ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.searchBeat()
        } else {
          this.$message({
            message: '设置失败',
            type: 'error'
          })
        }
      })
    }
  }
}
</script>

<style>
  /*demo*/
  .flex{
    box-sizing: border-box;

    display: -webkit-box;
    -webkit-box-pack: start;
    -webkit-box-align: start;

    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -webkit-align-items: top;

    display: flex;
    justify-content: space-between;
    align-items: top;
    flex-flow:row wrap
  }
  .flex>div{
    margin:10px;
    padding:20px;
    width:25%;
    min-width:300px;
    border-radius: 2px;
    position: relative;
  }
  .flex>div>span{
    position: absolute;
    left:0px;
    top:0px;
    padding:2px 10px;
    font-size:10px;
    border-radius:0 0 2px 0;
    background:#ea6151;
    color:#fff;
  }
  .flex>div>input{
    box-sizing: border-box;
    width:100%;
    margin-top:20px;
    border-radius: 2px;
    border:1px solid #dedede;
    padding:10px;
    font-size: 16px;
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWwpAZm9udC1mYWNlIHsgZm9udC1mYW1pbHk6IGlmb250OyBzcmM6IHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUuZW90PyNpZWZpeCIpIGZvcm1hdCgiZW1iZWRkZWQtb3BlbnR5cGUiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzE0NDIzNzM4OTZfNDc1NDQ1NS53b2ZmIikgZm9ybWF0KCJ3b2ZmIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xNDQyMzczODk2XzQ3NTQ0NTUudHRmIikgZm9ybWF0KCJ0cnVldHlwZSIpLCB1cmwoIi8vYXQuYWxpY2RuLmNvbS90L2ZvbnRfMTQ0MjM3Mzg5Nl80NzU0NDU1LnN2ZyNpZm9udCIpIGZvcm1hdCgic3ZnIik7IH0KCl1dPjwvc3R5bGU+PC9kZWZzPjxnIGNsYXNzPSJ0cmFuc2Zvcm0tZ3JvdXAiPjxnIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUsIDAuMDE1NjI1KSI+PHBhdGggZD0iTTcxMS4zMDYyIDI5MC42OTcyYzI0LjI4MjEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTU0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMjYgMC00My45ODggMTkuNzI4NC00My45ODggNDQuMDUzNXYyMDAuMTA0OTZDNjY3LjMxODMgMjcwLjk5MDMgNjg3LjAwMzYgMjkwLjY5NzIgNzExLjMwNjIgMjkwLjY5NzJ6TTYyMy40ODA4IDExMy40MjAzSDQwMC43NjQ5Mjh2NjYuNTEzOTJoMjIyLjcxNTkwNDAwMDAwMDAyVjExMy40MjAyODh6TTg4NC4wNTMgMTEzLjQyMDNoLTgyLjc3NDAxNnY2Ni4xNDUyOGg4NS45NDAyMjRjMjUuMjc4NSAwIDQ2LjYxMTUgMjEuMzc2IDQ2LjYxMTUgNDYuNjc3djE1My45Mjc2OEg5MC40Mzg2NTYwMDAwMDAwMXYtMTUzLjkyNzY4YzAtMjUuMyAyMS4zMzMtNDYuNjc3IDQ2LjYxMTUtNDYuNjc3aDg2LjUwMzQyNFYxMTMuNDIwMjg4aC04Mi42NDI5NDRjLTY0LjA4NiAwLTExNi41MDc2IDUyLjUwODctMTE2LjUwNzYgMTE2LjcwMzJ2Njc2LjgwMTUzNTk5OTk5OTljMCA2NC4xNzQxIDUwLjQ5MTQgMTE2LjY4MDcgMTE0LjU3NzQgMTE2LjY4MDdIODg0LjA1Mjk5MmM2NC4wNjI1IDAgMTE2LjUwNjYtNTIuNTA2NiAxMTYuNTA2Ni0xMTYuNjgwN1YyMzAuMTIzNTE5OTk5OTk5OThDMTAwMC41NTk2IDE2NS45MjkgOTQ4LjExNDQgMTEzLjQyMDMgODg0LjA1MyAxMTMuNDIwM3pNOTMzLjgyOTYgOTEwLjM1MTRjMCAyNS4zLTIxLjMzMyA0Ni42NzYtNDYuNjExNSA0Ni42NzZIMTM3LjA1MDExMTk5OTk5OTk4Yy0yNS4yNzg1IDAtNDYuNjExNS0yMS4zNzYtNDYuNjExNS00Ni42NzZWNDQ2LjQ0NTU2OEg5MzMuODI5NjMyVjkxMC4zNTEzNnpNMjY3LjEwODQgNjQ2LjE4MTljMzYuODc3MyAwIDY2Ljc1MjUtMjkuOTM5NyA2Ni43NTI1LTY2Ljg4MTUgMC0zNi45MjI0LTI5Ljg3NTItNjYuODYxMS02Ni43NTI1LTY2Ljg2MTEtMzYuODU0OCAwLTY2Ljc1MjUgMjkuOTM5Ny02Ni43NTI1IDY2Ljg2MTFDMjAwLjM1NTggNjE2LjI0MjIgMjMwLjI1MjUgNjQ2LjE4MTkgMjY3LjEwODQgNjQ2LjE4MTl6TTUxMS41NDg0IDY0Ni4xODE5YzM2Ljg1NTggMCA2Ni43NTI1LTI5LjkzOTcgNjYuNzUyNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTU3LTY2Ljg2MTEtNjYuNzUyNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzQ0NC43OTU5IDYxNi4yNDIyIDQ3NC42NzExIDY0Ni4xODE5IDUxMS41NDg0IDY0Ni4xODE5ek0yNjUuOTE2NCA4OTAuNzA5YzM2Ljg3NzMgMCA2Ni43NTE1LTI5LjkzOTcgNjYuNzUxNS02Ni44NjExIDAtMzYuOTQyOC0yOS44NzQyLTY2Ljg4MjYtNjYuNzUxNS02Ni44ODI2LTM2Ljg1NTggMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44ODI2QzE5OS4xNjM5IDg2MC43NjkzIDIyOS4wNTk2IDg5MC43MDkgMjY1LjkxNjQgODkwLjcwOXpNNTExLjU0ODQgODkwLjcwOWMzNi44NTU4IDAgNjYuNzUyNS0yOS45Mzk3IDY2Ljc1MjUtNjYuODYxMSAwLTM2Ljk0MjgtMjkuODk1Ny02Ni44ODI2LTY2Ljc1MjUtNjYuODgyNi0zNi44NzczIDAtNjYuNzUyNSAyOS45Mzk3LTY2Ljc1MjUgNjYuODgyNkM0NDQuNzk1OSA4NjAuNzY5MyA0NzQuNjcxMSA4OTAuNzA5IDUxMS41NDg0IDg5MC43MDl6TTc1NS42NDEzIDY0Ni4xODE5YzM2Ljg1NjggMCA2Ni43NTM1LTI5LjkzOTcgNjYuNzUzNS02Ni44ODE1IDAtMzYuOTIyNC0yOS44OTY3LTY2Ljg2MTEtNjYuNzUzNS02Ni44NjExLTM2Ljg3NzMgMC02Ni43NTI1IDI5LjkzOTctNjYuNzUyNSA2Ni44NjExQzY4OC44ODk5IDYxNi4yNDIyIDcxOC43NjQgNjQ2LjE4MTkgNzU1LjY0MTMgNjQ2LjE4MTl6TTMxMS43MDM2IDI5MC42OTcyYzI0LjI4MTEgMCA0NS4zNzY1LTE5LjcwNjkgNDUuMzc2NS00NC4wMzJWNDYuNTYwMjU1OTk5OTk5OTk1YzAtMjQuMzI1MS0yMS4wOTQ0LTQ0LjA1MzUtNDUuMzc2NS00NC4wNTM1LTI0LjMwMTYgMC00My45ODkgMTkuNzI4NC00My45ODkgNDQuMDUzNXYyMDAuMTA0OTZDMjY3LjcxNDYgMjcwLjk5MDMgMjg3LjQwMiAyOTAuNjk3MiAzMTEuNzAzNiAyOTAuNjk3MnoiIGZpbGw9IiM1ZTdhODgiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg==) no-repeat 8px 10px;
    padding-left: 36px;
    color:#666;
  }

  /*transition*/
  .fade-enter-active,
  .fade-leave-active {
    transition: all .5s ease-in-out;
  }
  .fade-enter,.fade-leave-active{
    opacity: 0;
    transform: translateY(-10px);

  }

  /*下拉框*/
  .calendar-dropdown{
    background: #fff;
    position: absolute;
    left:0;
    top:0;
    padding:20px;
    border: 1px solid #eee;
    border-radius: 2px;
  }
  .calendar-dropdown:before {
    position: absolute;
    left:30px;
    top: -10px;
    content: "";
    border:5px solid rgba(0, 0, 0, 0);
    border-bottom-color: #DEDEDE;
  }
  .calendar-dropdown:after {
    position: absolute;
    left:30px;
    top: -9px;
    content: "";
    border:5px solid rgba(0, 0, 0, 0);
    border-bottom-color: #fff;
  }

  /*弹出框*/
  .calendar-dialog{
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
  }

  .calendar-dialog-mask{
    background:rgba(255,255,255,.5);
    width:100%;
    height:100%;
  }

  .calendar-dialog-body{
    background: #fff;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    padding:20px;
    border: 1px solid #eee;
    border-radius: 2px;
  }
</style>
