<template>
  <div>
    <el-card style="width: 840px">
      <div style="padding: 10px;background-color:#F5F5F5;width: 800px">
        <el-button style="margin-left: 90%;font-size: 30px" type="text" icon="el-icon-circle-plus-outline" @click="AddClass('form')"/>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="tableHeader"
        :cell-style="tableCell"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)"
        tooltip-effect="dark"
        style="width: 800px;margin-top: 0px"
        height="500">
        <el-table-column align="center" label=" 班次名称" prop="班次名称" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.班次名称 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="  开始时间" prop="开始时间" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.开始时间 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="结束时间" prop="结束时间" min-width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.结束时间 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编辑" min-width="150px">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="ShiftManagement(scope.row)"/>
            <el-button type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible" :title="title" width="650px">
      <el-form ref="form" :model="form" :rules="rules" label-position="top" style="width: 100%;margin: auto">
        <el-form-item label="班次名称" prop="ClassName" style="margin-left: 0px;margin-top: 5px;">
          <el-input v-model="form.ClassName" class="input12" style="height:50px;margin-left: 0px;width: 100%" placeholder=""/>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="form.special" active-color="#006699" inactive-color="#DCDFE6" active-text="特殊班次" style="margin-top: 20px" @change="getSpecial()"/>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="form.isDay" :disabled="isAble1" active-color="#006699" inactive-color="#DCDFE6" active-text="是否跨天" style="margin-top: 20px"/>
        </el-form-item>
        <el-row style="margin-top: 40px">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="StartTime" style="margin-bottom:0px">
              <el-time-picker
                :defaulthour ="defaultHour"
                :defaultminute="defaultMinute"
                v-model="form.StartTime"
                :disabled="isAble1"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                class="input2"
                format="HH:mm"
                value-format="HH:mm"
                size="small"
                label-position="top"
                label-width="100"
                style="margin-top:20px;width: 75%"
                placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="EndTime" style="margin-bottom:0px">
              <el-time-picker
                v-model="form.EndTime"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                :disabled="isAble1"
                class="input2"
                prop="EndTime"
                format="HH:mm"
                value-format="HH:mm"
                size="small"
                label-position="top"
                label-width="100"
                style="margin-top:20px;width: 75%"
                placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="block" style="margin-top:25px">
            <span class="demonstration" style="font-size:17px">图示颜色</span>
            <span style="margin-left:45px;padding: 12px 5px 3px 5px;background-color:rgb(247 247 247);border-bottom: 1px solid rgb(207,208,209)">
              <colorPicker v-model="form.color" style="margin-left:5px;margin-right:5px;margin-top:5px;border: 1px solid rgb(119,119,119);"/>
            </span>
          </div>
        </el-form-item>
        <el-form-item label-width="120px" style="margin-left: 400px">
          <el-button class="button12" @click="callOff('form')">取消</el-button>
          <el-button class="button11" @click="submit('form')">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible1" :title="title1" width="650px">
      <el-form ref="form1" :model="form1" :rules="rules1" label-position="left" style="width: 100%;margin: auto">
        <el-form-item label="班次名称" prop="ClassName1" style="margin-left: 0px;margin-top: 5px;">
          <el-input v-model="form1.ClassName1" class="input12" style="height:50px;margin-left: 0px;width: 100%" placeholder=""/>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="form1.special1" active-color="#006699" inactive-color="#DCDFE6" active-text="特殊班次" style="margin-top: 20px" @change="getSpecial1()"/>
        </el-form-item>
        <el-form-item>
          <el-switch v-model="form1.isDay1" :disabled="isAble2" active-color="#006699" inactive-color="#DCDFE6" active-text="是否跨天" style="margin-top: 20px"/>
        </el-form-item>
        <el-row style="margin-top: 40px">
          <el-col :span="12">
            <el-form-item label="开始时间" prop="StartTime1" style="margin-bottom:0px">
              <el-time-picker
                v-model="form1.StartTime1"
                :disabled="isAble2"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                class="input2"
                format="HH:mm"
                value-format="HH:mm"
                size="small"
                label-position="top"
                label-width="100"
                color="black"
                style="margin-top:40px;width: 75%"
                placeholder=""/>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height:100px">
            <el-form-item label="结束时间" prop="EndTime1" style="margin-bottom:0px">
              <el-time-picker
                v-model="form1.EndTime1"
                :disabled="isAble2"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                class="input2"
                prop="EndTime"
                format="HH:mm"
                value-format="HH:mm"
                size="small"
                label-position="top"
                label-width="100"
                style="margin-top:40px;width: 75%"
                placeholder=""/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <div class="block" style="margin-top:25px">
            <span class="demonstration" style="font-size:17px">图示颜色</span>
            <span style="margin-left:45px;padding: 12px 5px 3px 5px;background-color:rgb(247 247 247);border-bottom: 1px solid rgb(207,208,209)">
              <colorPicker v-model="form1.color1" style="margin-left:5px;margin-right:5px;margin-top:5px;border: 1px solid rgb(119,119,119);"/>
            </span>
          </div>
        </el-form-item>
        <el-form-item label-width="120px" style="margin-left: 300px">
          <el-button class="button12" @click="callOff1('form1')">取消</el-button>
          <el-button class="button11" @click="submit1('form1')">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="DeleteDialogFormVisible" width="300px">
      <div style="margin-top:-90px;margin-left: 75px;margin-bottom: 40px;">
        <img :src="img" style="height: 75px;width: 100px;">
      </div>
      <span style="font-size: 30px;font-weight: 400;margin-left: 20px;">确实要删除吗？</span>
      <el-button class="button11" style="margin-top: 80px;margin-left:100px;" @click="deletesubmit()">是</el-button>
      <el-button class="button12" @click="deletecalloff">否</el-button>
    </el-dialog>
  </div>
</template>
<script>
import VueClockPicker from '@pencilpix/vue2-clock-picker'
import '@pencilpix/vue2-clock-picker/dist/vue2-clock-picker.min.css'
import img from '@/assets/404_images/20.png'
import { ExecDatabase } from '@/main'
export default {
  components: {
    VueClockPicker
  },
  data() {
    return {
      img,
      tableData: [],
      loading: false,
      dialogFormVisible: false,
      title: '',
      form: {
        ClassName: '',
        StartTime: '',
        EndTime: '',
        special: '',
        color: '',
        isDay: false
      },
      rules: {
        ClassName: [{ required: true, message: '请输入班次名称', trigger: 'blur' }],
        StartTime: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
        EndTime: [{ required: true, message: '请输入结束时间', trigger: 'blur' }]
      },
      defaultHour: new Date().getHours(),
      defaultMinute: new Date().getMinutes(),
      isAble1: false, // 禁用开始时间
      dialogFormVisible1: false,
      title1: '',
      isAble2: false, // 禁用开始时间
      form1: {
        ClassName1: '',
        StartTime1: '',
        EndTime1: '',
        ClassNum1: '',
        special1: false,
        isDay1: false,
        color1: ''
      },
      rules1: {
        ClassName1: [{ required: true, message: '请输入班次名称', trigger: 'blur' }],
        StartTime1: [{ required: true, message: '请输入开始时间', trigger: 'blur' }],
        EndTime1: [{ required: true, message: '请输入结束时间', trigger: 'blur' }]
      },
      DeleteDialogFormVisible: false,
      a: ''
    }
  },
  created() {
    this.searchTable()
  },
  methods: {
    // 查询
    searchTable() {
      this.tableData = []
      this.loading = true
      var param = []
      var Data = this.CreateData('11', '基础数据_维修班次_查询_分页', param)
      ExecDatabase(Data).then(response => {
        response.data.map(v => {
          if (v.是否跨天 === 1) {
            v.开始时间 = v.开始时间.split(',')
            v.结束时间 = v.结束时间.split(',')
            this.tableData.push({
              班次名称: v.班次名称,
              班次代码: v.班次代码,
              是否特殊班次: v.是否特殊班次,
              示例颜色: v.示例颜色,
              是否跨天: v.是否跨天,
              开始时间: v.开始时间[0],
              结束时间: v.结束时间[1]
            })
          } else {
            this.tableData.push({
              班次名称: v.班次名称,
              班次代码: v.班次代码,
              是否特殊班次: v.是否特殊班次,
              示例颜色: v.示例颜色,
              是否跨天: v.是否跨天,
              开始时间: v.开始时间,
              结束时间: v.结束时间
            })
          }
        })
        this.loading = false
      })
    },
    // 修改table的样式
    tableHeader() {
      return 'background-color: rgb(250, 250, 250);' +
        'border-bottom: 3px rgb(170, 170, 170) solid;' +
        'color: rgb(35, 35, 35);' +
        'font-weight: 5000;' +
        'padding: 10px 5px'
    },
    tableCell() {
      return 'border-color: #E8E8E8;padding: 0px'
    },
    // 新增
    AddClass(formName) {
      if (this.$refs['form'] !== undefined) {
        this.$refs['form'].resetFields()
      }
      this.title = '维修班次管理'
      this.dialogFormVisible = true
      this.form.special = false
      this.form.isDay = false
      this.form.ClassName = ''
      this.form.EndTime = ''
      this.form.StartTime = ''
      this.form.color = '#00FFFF'
      this.getSpecial()
    },
    // 新增switch特殊班次开关
    getSpecial() {
      if (this.form.special === true) {
        this.form.isDay = false
        this.isAble1 = true
        this.rules.StartTime[0].required = false
        this.rules.EndTime[0].required = false
      } else {
        this.isAble1 = false
        this.rules.StartTime[0].required = true
        this.rules.EndTime[0].required = true
      }
    },
    // 新增确定
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['班次名称', this.form.ClassName]
          param[1] = ['班次开始时间', this.form.StartTime]
          param[2] = ['班次结束时间', this.form.EndTime]
          param[3] = ['是否特殊班次', this.form.special ? 1 : 0]
          param[4] = ['是否跨天', this.form.isDay ? 1 : 0]
          param[5] = ['示例颜色', this.form.color]
          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.error('信息增加失败')
            }
          })
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    // 新增取消
    callOff(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    // 编辑
    ShiftManagement(row) {
      if (this.$refs['form1'] !== undefined) {
        this.$refs['form1'].resetFields()
      }
      this.title1 = '维修班次管理'
      this.dialogFormVisible1 = true
      this.form1.ClassNum1 = row.班次代码
      this.form1.ClassName1 = row.班次名称
      this.form1.StartTime1 = row.开始时间
      this.form1.EndTime1 = row.结束时间
      this.form1.special1 = row.是否特殊班次
      this.form1.color1 = row.示例颜色
      this.form1.isDay1 = row.是否跨天
      if (this.form1.special1 === 1) {
        this.form1.special1 = true
      } else {
        this.form1.special1 = false
      }
      if (this.form1.isDay1 === 1) {
        this.form1.isDay1 = true
      } else {
        this.form1.isDay1 = false
      }
      this.getSpecial1()
    },
    // 编辑switch特殊班次开关
    getSpecial1() {
      if (this.form1.special1 === true) {
        this.isAble2 = true
        this.rules1.StartTime1[0].required = false
        this.rules1.EndTime1[0].required = false
      } else {
        this.isAble2 = false
        this.rules1.StartTime1[0].required = true
        this.rules1.EndTime1[0].required = true
      }
    },
    // 编辑确定
    submit1(form1Name) {
      this.$refs[form1Name].validate((valid) => {
        if (valid) {
          var param = []
          param[0] = ['班次名称', this.form1.ClassName1]
          param[1] = ['班次开始时间', this.form1.StartTime1]
          param[2] = ['班次结束时间', this.form1.EndTime1]
          param[3] = ['是否特殊班次', this.form1.special1 ? 1 : 0]
          param[4] = ['是否跨天', this.form1.isDay1 ? 1 : 0]
          param[5] = ['示例颜色', this.form1.color1]
          param[6] = ['班次代码', this.form1.ClassNum1]
          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.error('信息修改失败')
            }
          })
          this.dialogFormVisible1 = false
        } else {
          return false
        }
      })
    },
    // 编辑取消
    callOff1(form1Name) {
      this.dialogFormVisible1 = false
      this.$refs[form1Name].resetFields()
    },
    // 删除
    handleDelete(row) {
      this.DeleteDialogFormVisible = true
      this.a = row.班次代码
    },
    // 删除确定
    deletesubmit() {
      var param = []
      param[0] = ['班次代码', this.a]
      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.error('删除失败')
        }
      })
      this.DeleteDialogFormVisible = false
    },
    // 删除取消
    deletecalloff() {
      this.DeleteDialogFormVisible = false
      this.$message({
        type: 'info',
        message: '已取消删除'
      })
    }
  }
}
</script>

<style scoped>
 .divcss5{ border-left:2px solid rgb(138,138,138);border-right:2px solid rgb(138,138,138);border-bottom:2px solid rgb(138,138,138) }
 .line-left-right {
   padding: 0 0px 0px;
   margin: 0 0px;
   line-height: 0px;
   border-left: 20px solid rgb(138,138,138);
   border-right: 440px solid rgb(138,138,138);
   text-align: center;
   height: 2px;
 }
</style>
<style>
  .input2 .el-input__inner {
    /*background-color: rgb(239,239,240);*/
    color: #606266;
    border-bottom: 1px solid rgb(207,208,209);
    border-top: 1px solid rgb(255,255,255);
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
    height: 50px;
    line-height: 40px;
    padding: 0 15px;
    width: 100%;
    border-radius: 0px;
  }
  .input3 .el-input__inner {
    background-color: rgb(247,247,247);
    color: #606266;
    border-bottom: 1px solid rgb(207,208,209);
    border-top: 1px solid rgb(255,255,255);
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
    height: 50px;
    line-height: 40px;
    padding: 0 15px;
    width: 100%;
    border-radius: 0px;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: white;
    border-bottom-color: #efeff0;
    border-top-color: #ffffff;
    border-left-color: #ffffff;
    border-right-color: #ffffff;
    color: #C0C4CC;
    cursor: not-allowed;
  }
  .el-icon-time:before {
     content: '';
   }
  .el-form-item.is-success .el-input__inner, .el-form-item.is-success .el-input__inner:focus, .el-form-item.is-success .el-textarea__inner, .el-form-item.is-success .el-textarea__inner:focus {
    border-bottom: 1px solid rgb(207,208,209);
    border-top: 1px solid rgb(255,255,255);
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
  }
  .m-colorPicker .colorBtn[data-v-11842410] {
    width: 20px;
    height: 17px;
  }
  .el-input-number.is-controls-right .el-input-number__decrease, .el-input-number.is-controls-right .el-input-number__increase {
    height: 12px;
    line-height: 19px;
  }
  .el-input-number--small .el-input-number__decrease, .el-input-number--small .el-input-number__increase {
    width: 24px;
    font-size: 10px;
    /* height: 5px; */
  }
  .el-input-number__increase {
    right: 10px;
    margin-top: 12px;
    border-radius: 0 0 0 0;
    border-left: 0px solid #DCDFE6;
    background-color: rgb(241 241 241);
    color: black;
  }
  .el-input-number__decrease {
    right: 10px;
    margin-bottom: 12px;
    border-radius: 0 0 0 0;
    border-left: 0px solid #DCDFE6;
    background-color: rgb(241 241 241);
    color: black;
  }
  .el-input-number__decrease:hover, .el-input-number__increase:hover {
    background: rgb(210 210 210);
    color: black;
  }
  .el-input-number.is-controls-right .el-input-number__increase {
    border-radius: 0 0 0 0;
    border-bottom: 0px solid #DCDFE6
  }
  .el-input-number.is-controls-right .el-input-number__decrease {
    right: 10px;
    bottom: 1px;
    top: auto;
    left: auto;
    border-right: none;
    border-left: 0px solid #DCDFE6;
    border-radius: 0 0 0 0;
  }
  .el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled), .el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled) {
    border-bottom: 1px solid rgb(207,208,209);
    border-top: 1px solid rgb(255,255,255);
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
  }
  input::-webkit-input-placeholder{text-align: left;}
  .clock-picker__input--has-value .clock-picker__input {
    border-bottom: 1px solid rgb(207,208,209);
    border-top: 1px solid rgb(255,255,255);
    border-left: 1px solid rgb(255,255,255);
    border-right: 1px solid rgb(255,255,255);
    background: white;
  }
  .clock-picker__input {
       border-bottom: 1px solid rgb(207,208,209);
       border-top: 1px solid rgb(255,255,255);
       border-left: 1px solid rgb(255,255,255);
       border-right: 1px solid rgb(255,255,255);
       background: white;
     }

  .m-colorPicker .hd .defaultColor[data-v-11842410] {
    width: 60px;
    float: right;
    text-align: center;
    border: 1px solid #ffffff;
    cursor: pointer;
    color: #333;
  }
  .m-colorPicker .hd .colorView[data-v-11842410] {
    width: 36px;
    height: 30px;
    border: 1px solid black;
    float: left;
    -webkit-transition: background-color .3s ease;
    transition: background-color .3s ease;
  }
  .m-colorPicker .box[data-v-11842410] {
    position: absolute;
    width: 212px;
    background: #fff;
    border: 1px solid #ddd;
    visibility: hidden;
    border-radius: 2px;
    margin-top: 2px;
    padding: 10px;
    padding-bottom: 5px;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
    box-shadow: 0 0 3px rgba(0,0,0,.15);
    opacity: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
  }
  .m-colorPicker .box.open[data-v-11842410] {
    visibility: visible;
    opacity: 1;
  }
</style>

