<template>
  <div class="app-container">
    <el-card class="topCard">
      <div style="float: left">
        <el-card style="width: 500px;">
          <div>
            <div>
              <calendar :events="calendar1.events" :value="calendar1.value" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" @search="search" @select="select" />
            </div>
          </div>
        </el-card>
        <!--<el-card style="width: 500px">
          <div style="display: flex">
            <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
            <el-button type="success" plain style="height: 40px;margin-top: 90px;margin-left: 10px" @click="handleAdd">确认上传</el-button>
          </div>
          <div style="margin-top: 20px">
            <el-table
              v-loading="loading"
              :data="tableData"
              :header-cell-style="{background:'#F5F5F5'}"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.2)"
              stripe
              tooltip-effect="dark"
              style="width: 100%"
              height="100%"
              border
              size="mini">
              <el-table-column align="center" label="日期" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.日期 }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="是否上班" min-width="90" show-overflow-tooltip>
                <template slot-scope="scope">
                  {{ scope.row.是否上班 }}
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 10px; width: 90px">
              <el-pagination
                v-if="!loading"
                :current-page="pageList"
                :page-sizes="[30, 60, 90, 120]"
                :page-size="pageSize"
                :total="total"
                small
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
            </div>
          </div>
        </el-card>-->
      </div>
      <div style="float: left">
        <el-card style="width: 1100px">
          <el-button type="primary" plain @click="setWork">上班</el-button>
          <el-button type="success" plain @click="setRest">休息</el-button>
          <el-button type="warning" plain @click="setToday">返回今天</el-button>
          <el-divider direction="vertical" />
          <el-button type="success" icon="el-icon-plus" plain @click="addedShow">新增班次</el-button>
          <el-table v-loading="loadingShift" :data="tableDataShift" border stripe class="tableCustomization" height="625px">
            <el-table-column type="index" align="center" label="序号" width="80px"/>
            <el-table-column width="120px" label="班次名称" align="center">
              <template slot-scope="scope">
                {{ scope.row.班次名称 }}
              </template>
            </el-table-column>
            <el-table-column width="100px" label="班次代码" align="center">
              <template slot-scope="scope">
                {{ scope.row.班次代码 }}
              </template>
            </el-table-column>
            <el-table-column width="200px" label="开始时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.开始时间 }}
              </template>
            </el-table-column>
            <el-table-column width="200px" label="结束时间" align="center">
              <template slot-scope="scope">
                {{ scope.row.结束时间 }}
              </template>
            </el-table-column>
            <el-table-column label="班次描述" align="center">
              <template slot-scope="scope">
                {{ scope.row.班次描述 }}
              </template>
            </el-table-column>
            <el-table-column label="启用" align="center" width="80px">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.是否启用" @change="update(scope.row)"/>
              </template>
            </el-table-column>
            <el-table-column min-width="150px" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="mini" icon="el-icon-edit" style="margin-left: 20px" @click="editDialog(scope.row)">编辑</el-button>
                <el-button type="text" size="mini" icon="el-icon-delete" style="color: #ff0000" @click="openDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
      <el-dialog :title="title" :visible.sync="addDialogFormVisible" center width="370px">
        <el-form ref="form" :model="addedForm" :rules="addedRules" label-position="right" class="demo-ruleForm" label-width="90px" style="width: 90%;margin: auto">
          <el-form-item label="班次名称" prop="ShiftName">
            <el-input v-model="addedForm.ShiftName" style="width: 200px" size="small"/>
          </el-form-item>
          <el-form-item label="班次代码" prop="ShiftCode">
            <el-input-number v-model="addedForm.ShiftCode" :min="0" style="width: 200px" size="small"/>
          </el-form-item>
          <el-form-item style="text-align: right" label="开始时分" prop="startTime">
            <el-date-picker
              v-model="addedForm.startTime"
              :picker-options="{
              }"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 200px"
              placeholder="开始时间点"/>
          </el-form-item>
          <el-form-item style="text-align: right" label="结束时分" prop="endTime">
            <el-date-picker
              v-model="addedForm.endTime"
              :picker-options="{
              }"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              style="width: 200px"
              placeholder="结束时间点"/>
          </el-form-item>
          <el-form-item label="是否启用" prop="ShiftUsed">
            <el-checkbox v-model="addedForm.ShiftUsed"/>
          </el-form-item>
          <el-form-item label="班次描述" prop="ShiftExplain">
            <el-input
              v-model="addedForm.ShiftExplain"
              :rows="2"
              type="textarea"
              style="width: 200px"
              size="small"/>
          </el-form-item>
          <el-button style="margin-left: 70px" size="small" @click="addedCallOff()">取消</el-button>
          <el-button style="margin-left: 50px" size="small" type="primary" @click="addedSubmit()">确 定</el-button>
        </el-form>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="editDialogFormVisible" center width="370px">
        <el-form ref="form" :model="editForm" :rules="editRules" label-position="right" class="demo-ruleForm" label-width="90px" style="width: 90%;margin: auto">
          <el-form-item label="班次名称" prop="ShiftName">
            <el-input v-model="editForm.ShiftName" style="width: 200px" size="small"/>
          </el-form-item>
          <el-form-item label="班次代码" prop="ShiftCode">
            <el-input-number v-model="editForm.ShiftCode" :min="0" style="width: 200px" size="small"/>
          </el-form-item>
          <el-form-item style="text-align: right" label="开始时分" prop="startTime">
            <el-date-picker
              v-model="editForm.startTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 200px"
              placeholder="开始时间点"/>
          </el-form-item>
          <el-form-item style="text-align: right" label="结束时分" prop="endTime">
            <el-date-picker
              v-model="editForm.endTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 200px"
              placeholder="结束时间点"/>
          </el-form-item>
          <el-form-item label="是否启用" prop="ShiftUsed">
            <el-checkbox v-model="editForm.ShiftUsed"/>
          </el-form-item>
          <el-form-item label="班次描述" prop="ShiftExplain">
            <el-input
              v-model="editForm.ShiftExplain"
              :rows="2"
              type="textarea"
              style="width: 200px"
              size="small"/>
          </el-form-item>
          <el-button style="margin-left: 70px" size="small" @click="editCallOff()">取消</el-button>
          <el-button style="margin-left: 50px" size="small" type="primary" @click="editSubmit()">确 定</el-button>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { initClendar, changeState } from '@/api/BasicData/FactoryCalendar'
import calendar from '@/components/Calendar/calendar.vue'
import UploadExcelComponent from '@/views/BasicData/FactoryCalendar/UploadExcel.vue'
import { ExecDatabase } from '@/main'
import { mapGetters } from 'vuex'
export default {
  components: {
    calendar,
    UploadExcelComponent
  },
  data() {
    return {
      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.fetchData()
  },
  methods: {
    select(val) { // 选择
      this.selectDate = val[0] + '-' + val[1] + '-' + val[2]
      this.searchTableShift(this.selectDate)
    },
    setToday() { // 返回今天
      this.fetchData()
    },
    fetchData() { // 日历初始化
      var date = new Date()
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
      this.day = date.getDate()
      this.calendar1.value = [this.year, this.month, this.day] // 当前日期!
      var events = Object() // 声明events是object对象
      initClendar(this.year, this.month).then(response => {
        for (let i = 0; i < response.data.length; i++) { // 这个循环是将时间1900-01-01转成1900-1-1型
          var str = response.data[i].工作日期
          var str1 = str.substr(0, 10)
          var nian = str.substr(0, 4)
          var yue = str.substr(5, 2)
          var ri = str.substr(8, 2)
          if (str.substr(5, 1) === '0') {
            yue = yue.replace('0', '')
          }
          if (str.substr(8, 1) === '0') {
            ri = ri.replace('0', '')
          }
          var x = nian + '-' + yue + '-' + ri
          events[x] = response.data[i].是否工作
          this.arr.push(x)
          this.arr1.push(str1)
        }
        this.select([this.year, this.month, this.day])
        this.calendar1.events = events
      })
    },
    search(year1, month1) { // ！子组件的，上下月，改变年
      var events = Object() // 声明events是object对象
      initClendar(year1, month1).then(response => {
        this.serNum = []
        this.arr = []
        this.arr1 = []
        for (let i = 0; i < response.data.length; i++) { // 这个循环是将时间1900-01-01转成1900-1-1型
          var str = response.data[i].工作日期
          var str1 = str.substr(0, 10)
          var nian = str.substr(0, 4)
          var yue = str.substr(5, 2)
          var ri = str.substr(8, 2)
          if (str.substr(5, 1) === '0') {
            yue = yue.replace('0', '')
          }
          if (str.substr(8, 1) === '0') {
            ri = ri.replace('0', '')
          }
          var x = nian + '-' + yue + '-' + ri
          this.arr.push(x)
          this.arr1.push(str1)
          events[x] = response.data[i].是否工作
        }
        this.calendar1.events = events
      })
    },
    setWork() { // 上班
      this.code = 1
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i] === this.selectDate) {
          this.time = this.arr1[i]
          break
        }
      }
      changeState(this.time, this.code).then(response => {
        if (response.data[0].result === '1') {
          this.fetchData()
          this.$message.success('更改状态成功')
        } else {
          this.$message.error('更改状态失败')
        }
      })
    },
    setRest() { // 休息
      this.code = 0
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i] === this.selectDate) {
          this.time = this.arr1[i]
          break
        }
      }
      changeState(this.time, this.code).then(response => {
        if (response.data[0].result === '1') {
          this.fetchData()
          this.$message.success('更改状态成功')
        } else {
          this.$message.error('更改状态失败')
        }
      })
    },
    beforeUpload(file) {
      return true
      // const isLt1M = file.size / 1024 / 1024 < 1
      // if (isLt1M) {
      //   return true
      // }
      // this.$message({
      //   message: 'Please do not upload files larger than 1m in size.',
      //   type: 'warning'
      // })
      // return false
    },
    handleSuccess({ results, header }) {
      this.tableData = []
      this.loading = true
      // 创建数据库表
      var Data = this.CreateData('7', '日历上传临时表', results, header)
      ExecDatabase(Data).then(() => {
        this.pageList = 1
        this.pageSize = 10
        this.searchTable() //  此处之前写的是 exchangeTableTime()
      })
    },
    handleAdd() {
      if (this.tableData.length === 0) {
        this.$message.error('内容为空')
      } else {
        var param = []
        param[0] = ['人员代码', this.id] // 此处修改 发现数据库里需要人员代码的ID所以在此添加此参数
        var Data = this.CreateData('12', 'KKI_日历确认导入_新增', param)
        ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '导入成功',
              type: 'success'
            })
            this.fetchData()
          } else {
            this.$message({
              message: '导入失败，注意格式',
              type: 'error'
            })
          }
          this.tableData = []
        })
      }
    },
    // 查询
    searchTable() {
      var param = []
      param[0] = ['PageCurrent', this.pageList]
      param[1] = ['PageSize', this.pageSize]
      param[2] = ['PageCount', '1111', 'int', '1']
      param[3] = ['ItemCount', '1111', 'int', '1']
      var Data = this.CreateData('11', 'KKI_日历确认导入前_查询', param) // 此处有修改 因为用原来的存储过程查不出来数据 故又重新创建了个
      ExecDatabase(Data).then(response => {
        this.tableData = response.data.result
        this.total = parseInt(response.data.output[0].ItemCount) // 此处有修改
        this.loading = false
      })
    },
    searchTableShift(selectDate) {
      this.tableDataShift = []
      this.loadingShift = true
      const param = []
      param[0] = ['ShiftDate', selectDate]
      const Data = this.CreateData('11', 'SP_ShiftManagement_Query', param)
      this.ExecDatabase(Data).then(response => {
        for (let i = 0; i < response.data.length; i++) {
          this.tableDataShift.push({
            班次代码: response.data[i].班次代码,
            班次名称: response.data[i].班次名称,
            开始时间: response.data[i].开始时间,
            结束时间: response.data[i].结束时间,
            班次描述: response.data[i].班次描述,
            ID: response.data[i].ID,
            是否启用: !!parseInt(response.data[i].是否启用)
          })
        }
        this.loadingShift = false
      })
    },
    addedShow() {
      this.addDialogFormVisible = true
      this.addedForm.ShiftCode = ''
      this.addedForm.ShiftName = ''
      this.addedForm.startTime = ''
      this.addedForm.endTime = ''
      this.addedForm.ShiftUsed = true
      this.addedForm.ShiftExplain = ''
      this.addedForm.ShiftDate = this.selectDate
      this.title = `新增班次(${this.selectDate})`
    },
    addedCallOff() {
      this.addedForm.ShiftCode = ''
      this.addDialogFormVisible = false
      this.addedForm.startTime = ''
      this.addedForm.endTime = ''
      this.addedForm.ShiftName = ''
      this.addedForm.ShiftExplain = ''
      this.addedForm.ShiftDate = this.selectDate
      this.addedForm.ShiftUsed = true
    },
    addedSubmit() {
      const time1 = new Date(this.addedForm.startTime).getTime()
      const time2 = new Date(this.addedForm.endTime).getTime()
      if (time1 > time2) {
        this.$message({
          message: '班次开始时间大于结束时间！',
          type: 'warning'
        })
        return
      }
      const param = []
      param[0] = ['ShiftDate', this.addedForm.ShiftDate]
      param[1] = ['ShiftName', this.addedForm.ShiftName]
      param[2] = ['startTime', this.addedForm.startTime]
      param[3] = ['endTime', this.addedForm.endTime]
      param[4] = ['ShiftExplain', this.addedForm.ShiftExplain]
      param[5] = ['ShiftUsed', this.addedForm.ShiftUsed ? 1 : 0]
      param[6] = ['ShiftCode', this.addedForm.ShiftCode]
      const Data = this.CreateData('12', 'SP_ShiftManagement_Added', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '班次新增成功',
            type: 'success'
          })
          this.addedCallOff()
          this.searchTableShift(this.selectDate)
        } else {
          this.$message.error('班次新增失败')
        }
      })
    },
    editDialog(data) {
      console.log(data)
      this.editForm.ShiftDate = this.selectDate
      this.editForm.startTime = data.开始时间
      this.editForm.endTime = data.结束时间
      this.editForm.ShiftCode = data.班次代码
      this.editForm.ShiftName = data.班次名称
      this.editForm.ShiftExplain = data.班次描述
      this.editForm.ShiftUsed = data.是否启用
      this.editForm.ID = data.ID
      this.editDialogFormVisible = true
      this.title = `编辑班次(${this.selectDate})`
    },
    editCallOff() {
      this.editDialogFormVisible = false
      this.editForm.ShiftDate = this.selectDate
      this.editForm.startTime = ''
      this.editForm.endTime = ''
      this.editForm.ShiftCode = ''
      this.editForm.ShiftName = ''
      this.editForm.ShiftExplain = ''
      this.editForm.ShiftUsed = true
      this.editForm.ID = ''
      this.title = ''
    },
    editSubmit() {
      const time1 = new Date(this.editForm.startTime).getTime()
      const time2 = new Date(this.editForm.endTime).getTime()
      if (time1 > time2) {
        this.$message({
          message: '班次开始时间大于结束时间！',
          type: 'warning'
        })
        return
      }
      const param = []
      param[0] = ['ID', this.editForm.ID]
      param[1] = ['ShiftName', this.editForm.ShiftName]
      param[2] = ['startTime', this.editForm.startTime]
      param[3] = ['endTime', this.editForm.endTime]
      param[4] = ['ShiftExplain', this.editForm.ShiftExplain]
      param[5] = ['ShiftUsed', this.editForm.ShiftUsed ? 1 : 0]
      param[6] = ['ShiftCode', this.editForm.ShiftCode]
      param[7] = ['CurrentDay', this.editForm.ShiftDate]
      const Data = this.CreateData('12', 'SP_ShiftManagement_Edit', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '班次编辑成功',
            type: 'success'
          })
          this.editCallOff()
          this.searchTableShift(this.selectDate)
        } else {
          this.$message.error('班次编辑失败')
        }
      })
    },
    update(row) {
      const param = []
      param[0] = ['Enable', row.是否启用 ? 1 : 0]
      param[1] = ['ID', row.ID]
      const Data = this.CreateData('12', 'SP_ShiftManagement_EditEnable', param)
      this.ExecDatabase(Data).then(response => {
        if (response.data[0].result === '1') {
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.searchTableShift(this.selectDate)
        } else {
          this.$message.error('设置失败')
        }
      })
    },
    openDelete(data) {
      this.$confirm('当前班次信息将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = []
        param[0] = ['ID', data.ID]
        const Data = this.CreateData('12', 'SP_ShiftManagement_Delete', param)
        this.ExecDatabase(Data).then(response => {
          if (response.data[0].result === '1') {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.searchTableShift(this.selectDate)
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pageList = 1
      this.pageSize = val
      this.searchTable()
    },
    handleCurrentChange(val) {
      this.pageList = val
      this.searchTable()
    }
  }
}
</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>
