<template>
  <div class="context">
    <div class="panel">
      <h5>{{ pageTitle }}</h5>
    </div>
    <div class="panel-body">
      <div class="panel_control">
        <el-row :gutter="20">
          <el-col :span="5">
            <em>
              <span style="color: red">*</span> 课程表名称:
            </em>
            <el-input v-model="panel.name" placeholder="请输入课程表名称" :disabled="panel.inputState"/>
          </el-col>
          <el-col :span="5">
            <em>
              <span style="color: red">*</span> 课程表时间:
            </em>
            <el-date-picker v-model="panel.week" type="week" :picker-options="{ 'firstDayOfWeek': 1 }"
                            @change="changeWeek()"
                            format="yyyy 第 WW 周" placeholder="选择周" :disabled="panel.inputState"/>
          </el-col>
          <el-button type="default" class="seeTemp" @click="$router.push('/lessonTableManage')">返回课程表</el-button>
        </el-row>
      </div>
    </div>
    <br/>

    <el-row :gutter="1">
      <el-col :span="10">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="星期一" name="1"></el-tab-pane>
          <el-tab-pane label="星期二" name="2"></el-tab-pane>
          <el-tab-pane label="星期三" name="3"></el-tab-pane>
          <el-tab-pane label="星期四" name="4"></el-tab-pane>
          <el-tab-pane label="星期五" name="5"></el-tab-pane>
          <el-tab-pane label="星期六" name="6"></el-tab-pane>
          <el-tab-pane label="星期天" name="7"></el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="3">
        <em v-if="activeDate">
          <span style="height: 40px;line-height: 40px">当前选中日期:  {{ activeDate }} </span>
        </em>
      </el-col>
    </el-row>

    <div class="table">
      <el-table v-for="tab in tabs" :data="tab.tableData" v-if="tab.days == activeName" border
                is-horizontal-resize :default-sort="{ prop: 'date', order: 'descending' }"
                element-loading-background="rgba(0, 0, 0, 0.8)" class
                @selection-change="handleSelectionChange">
        <el-table-column prop="timeScope" label="时间" width="230px" align="center">
          <template slot-scope="scope">
            <el-time-picker is-range v-model="scope.row.timeLong" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" placeholder="选择时间范围" :readonly="scope.row.locking == 1"/>
          </template>
        </el-table-column>
        <el-table-column prop="class_id" label="课程" align="center">
          <!--locking是1的不可编辑课程和时间-->
          <template slot-scope="scope">
            <el-select v-model="scope.row.class_id" @change="getLessonInfo(scope.row)"
                       :disabled="scope.row.locking == 1">
              <el-option v-for="item in panel.options" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="order_toplimit" label="预约名额" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.order_toplimit" :min="1" :max="9999" label/>
          </template>
        </el-table-column>
        <el-table-column prop="consume_hour" label="消耗课时" align="center">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.consume_hour" :min="0" :max="9999" label/>
          </template>
        </el-table-column>
        <el-table-column prop="Status" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="text" class="gary" @click="lessonRowEdit(scope)">编辑</el-button>
            <el-button type="text" class="red" @click="lessonRowDelete(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="rowBottom">
        <el-button type="default" @click="$router.push('/lessonTableManage')">返回课程表</el-button>
        <!--ID为0是新建,不为0是修改-->
        <el-button type="primary" class="pull-right" @click="confirmAddLessonTable"
                   v-if="this.$route.query.id == 0" :disabled="searchBtnStatus">提交
        </el-button>
        <el-button type="primary" class="pull-right" @click="confirmEditLessonTable"
                   v-if="this.$route.query.id != 0" :disabled="searchBtnStatus">提交
        </el-button>
        <el-button type="primary" class="pull-right" @click="addRow">新增课表</el-button>
      </div>
      <div>
        <br/>
        <em class="red wrning">*所有操作提交后生效</em>
      </div>
    </div>
    <br/>
    <el-dialog title="课程编辑" :visible.sync="dialogLessonVisable" width="720px">

      <el-form ref="form" :model="form" label-width="145px">
        <div style="float:left;" align="left">
          <h4>预约设置</h4>
          <hr/>
          <div style="margin-left: -40px">
            <el-form-item label="微信可见" style="float: left;">
              <el-switch
                  v-model="form.wx_visible"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9"
                  style="z-index: 1">
              </el-switch>
            </el-form-item>

            <el-form-item label="开放预约" style="float: left;">
              <el-switch
                  v-model="form.wx_order"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9"
                  style="z-index: 1">
              </el-switch>
            </el-form-item>

            <el-form-item label="是否拼课">
              <el-switch
                  v-model="form.is_classgroup"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9"
                  style="z-index: 1">
              </el-switch>
            </el-form-item>

            <span v-if="form.is_classgroup">
            <el-form-item label="最小拼课人数">
              <el-input-number v-model="form.order_minilimit" :min="0" :max="99999" label="（天）"></el-input-number>
            </el-form-item>
            <el-form-item label="拼课截止时间" :required="true">
              <el-date-picker v-model="form.last_classon" type="datetime" placeholder="选择日期时间" align="right"
                              :picker-options="pickerOptions"/>
            </el-form-item>
            </span>
          </div>
        </div>
        <div style="float:right;">
          <h4>课程设置</h4>
          <hr/>
          <div style="margin-left: -30px">
            <el-form-item label="心率课" style="float: left">
              <el-switch
                  v-model="form.is_hr"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9"
                  style="z-index: 1">
              </el-switch>
            </el-form-item>
            <el-form-item label="评分课" style="float: left">
              <el-switch
                  v-model="form.is_score"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#409EFF"
                  inactive-color="#D9D9D9"
                  style="z-index: 1">
              </el-switch>
            </el-form-item>

            <el-form-item label="课程类型" :required="true">
              <el-select style="width: 180px" v-model="form.course_type" align="left">
                <el-option v-for="item in courseOptions" :key="item.value" :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="dialogFooter">
        <el-button type="primary" @click="confirmEditRow()" size="small">确定</el-button>
        <el-button @click="dialogLessonVisable = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Global from '../../Global.js'

import {
  StandardRequest
} from "@/grpc/base_pb";

let qs = require('qs');
export default {
  data() {
    return {
      pageTitle: '新增课程表',
      dialogLessonVisable: false,
      temId: '',
      activeName: '1',
      activeDate: '',
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }]
      },
      // panel 配置项目
      panel: {
        inputState: false,
        name: '',
        week: '',
        taskstatus: 99,
        draw: 1,
        start: 0,
        recordsTotal: 0,
        tableData: [],
        allTableData: [],
        limit: '10',
        multipleSort: false,
        loading: false,
        fileList: [],
        multipleSelection: [],
        options: [],
        time1: globalBt(),
      },
      multipleSelection: [],
      pageination: {
        pageItem: 10,
        pageoptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
      testRow: {
        timeLong: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 23, 59)],
        begin_str: '08:30',
        end_str: '23:59',
        class_id: '',
        order_toplimit: 10,
        consume_hour: 2,
        wx_visible: 1,
        wx_order: 1,
        is_score: 0,
        is_hr: 1,
        course_type: 1,
        is_classgroup: 0,
        order_minilimit: 0,
        last_classon: getDate(new Date(), 0, 0, 0),
        curr_date: getDate(new Date(), 0, 0, 0)
      },
      tabs: [
        {
          tableData: [], days: '1'
        },
        {
          tableData: [], days: '2'
        },
        {
          tableData: [], days: '3'
        },
        {
          tableData: [], days: '4'
        },
        {
          tableData: [], days: '5'
        },
        {
          tableData: [], days: '6'
        },
        {
          tableData: [], days: '7'
        },
      ],
      form: {
        wx_visible: 0,
        wx_order: 0,
        is_score: 0,
        is_hr: 0,
        course_type: 1,
        is_classgroup: 0,
        order_minilimit: 0,
        last_classon: '',
        curr_date: ''
      },
      searchBtnStatus: false,
      courseOptions: courseOptions()
    }
  },
  mounted() {
    // 加载课程选项
    this.panelSelect();
    if (parseInt(this.$route.query.id) == 0) {
      console.log('新增课程表');
      this.pageTitle = '新增课程表'
      this.deepValue();
      this.panel.name = '';
      this.panel.week = '';
      this.panel.inputState = false
    } else {
      console.log('编辑课程表');
      this.pageTitle = '编辑课程表'
      this.getTableQuery();
      this.panel.inputState = true;
      this.activeDate = getDate(this.panel.week, 0, 0, parseInt(this.activeName) - 2);
    }
  },
  watch: {
    $route(to) {
      if (to.name == 'lessonTableManageEdit') {
        this.temId = this.$route.query.id;
        console.log('新增课程表');
        this.panelSelect();
        if (parseInt(this.temId) == 0) {
          this.pageTitle = '新增课程表'
          this.deepValue();
          this.panel.name = '';
          this.panel.week = '';
          this.panel.inputState = false
        } else {
          this.pageTitle = '编辑课程表'
          this.panel.week = '';
          this.getTableQuery();
          this.panel.inputState = true
          this.activeDate = getDate(this.panel.week, 0, 0, parseInt(this.activeName) - 2);
        }
      }
    },
  },
  methods: {
    changeWeek() {
      let that = this;
      if (that.panel.week != '') {
        that.activeDate = getDate(that.panel.week, 0, 0, parseInt(that.activeName) - 2);
        console.log(that.activeDate);
      }
    },
    // 加载选项
    panelSelect() {
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId,
        classType: 1,
        start: 1,
        tableMax: 9999,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            if (res.rs != null) {
              that.panel.options = turnClassResToOption(res.rs)
            } else {
              return false
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 选择课程后，获取当前课程的建议上课人数和课时消耗
    getLessonInfo(row) {
      let that = this;
      const jsonStr = {
        shopId: localStorage.shopId,
        classId: row.class_id
      };
      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.classSimpleQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            row.order_toplimit = res.rs[0].top_limit;
            row.consume_hour = res.rs[0].consume_hour;
            row.wx_visible = res.rs[0].wx_visible;
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    confirmEditLessonTable() {
      let id = this.$route.query.id
      // 提交课程内容,不再修改课程名称和时间的信息
      this.EditLessonTable(id);
    },
    // 删除
    lessonRowDelete(scope) {
      if (!scope.row.std_id) {
        let delIndex = parseInt(scope.$index)
        let curIndex = parseInt(this.activeName) - 1;
        this.tabs[curIndex].tableData.splice(delIndex, 1)
      } else {
        this.checkDelRow(scope)
      }
    },
    // 检测课表中课程可否删除
    checkDelRow(scope) {
      let that = this;
      const jsonStr = {
        UUStdId: scope.row.uu_std_id
      };
      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTDetailAllowDelCheck(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            let delIndex = parseInt(scope.$index)
            let curIndex = parseInt(this.activeName) - 1;
            this.tabs[curIndex].tableData.splice(delIndex, 1)
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 提交课程
    confirmAddLessonTable() {
      if (!this.panel.name) {
        this.$message.error('名称不能为空');
        return false
      }
      if (this.panel.name.length < 3) {
        this.$message.error('名称不能小于3个字符');
        return false
      }
      if (this.panel.name.length > 20) {
        this.$message.error('名称不能大于20个字符');
        return false
      }
      if (!this.checkData()) {
        return false
      }

      let that = this;

      that.serachBtnStatus = true;
      let totalTime = 2
      let clock = window.setInterval(() => {
        totalTime--
        if (totalTime < 0) {
          totalTime = 2;
          that.serachBtnStatus = false;
        }
      }, 1000)

      const jsonStr = {
        shopId: localStorage.shopId,
        name: this.panel.name,
        incomingDate: nonTfmtDatetoLength(this.panel.week, 10)//对应日期 字符串 年-月-日 格式
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTBasicAdd(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.panel.tabId = res.newid;
            // 提交课程内容
            that.EditLessonTable(res.newid);
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    // 保存课程
    EditLessonTable(planId) {
      let that = this;
      // 校验提交的数据
      if (!this.checkData()) {
        return false
      }
      // 提交数据
      let planRs = [];
      let thisRow = {};
      for (let i = 0; i < this.tabs.length; i++) {
        for (let j = 0; j < this.tabs[i].tableData.length; j++) {
          thisRow = this.tabs[i].tableData[j];
          thisRow.lesson_index = parseInt(j + 1);
          if (planId) {
            thisRow.stb_id = parseInt(planId);
          } else {
            thisRow.stb_id = parseInt(this.$route.query.id);
          }
          thisRow.std_id = thisRow.std_id ? thisRow.std_id : 0;
          thisRow.week_day = parseInt(i + 1);
          thisRow.begin_str = getHoursAndMin(thisRow.timeLong[0]);
          thisRow.end_str = getHoursAndMin(thisRow.timeLong[1]);
          console.log(thisRow.last_classon, thisRow.curr_date);
          thisRow.last_classon = nonTfmtDate(thisRow.last_classon);
          thisRow.curr_date = nonTfmtDate(thisRow.curr_date).toString().substring(0, 10);
          this.$delete(thisRow, 'Base');
          this.$delete(thisRow, 'SpdId');
          planRs.push(thisRow);
        }
      }

      const jsonStr = {
        stbId: planId,
        stbRs: planRs,
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTBasicDetailBatchSave(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            that.$message({
              showClose: true,
              message: '课程已上传成功！',
              type: 'success'
            });
            this.$router.push({
              path: '/lessonTableManage'
            });
            // 提交后清掉内存里的课表
            this.clearTableRAM();
            // this.getTableQuery();
          } else {
            this.$router.push({
              path: '/lessonTableManage'
            });
            // 提交后清掉内存里的课表
            this.clearTableRAM();
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
    clearTableRAM() {
      this.tabs = [
        {
          tableData: [], days: '1'
        },
        {
          tableData: [], days: '2'
        },
        {
          tableData: [], days: '3'
        },
        {
          tableData: [], days: '4'
        },
        {
          tableData: [], days: '5'
        },
        {
          tableData: [], days: '6'
        },
        {
          tableData: [], days: '7'
        },
      ];

    },
    checkData() {
      let res = true
      for (let i = 0; i < this.tabs.length; i++) {
        for (let j = 0; j < this.tabs[i].tableData.length; j++) {
          if (!this.tabs[i].tableData[j].class_id) {
            let days = numberToWeekdays(i + 1);
            let lessonIndex = j + 1;
            this.$message.error(days + '第' + lessonIndex + '节课有课程未选择，请选择后再提交')
            res = false
            break;
          }
        }
      }
      return res
    },
    // 检查数据
    checkData2() {
      // todo
      let tableDate = this.tabs;
      tableDate.map(function (item) {
        console.log(item);
      })
    },
    // 新增一行
    addRow() {
      // 读取当前周几
      let index = parseInt(this.activeName) - 1;
      let rows = this.testRow;
      let res = this.deepClone(rows);
      this.tabs[index].tableData.push(res);
    },
    //深拷贝赋初始值
    deepValue() {
      let that = this;
      let values = [
        this.testRow
      ];
      this.tabs.map(function (item) {
        let res = that.deepClone(values);
        item.tableData = res;
      })
    },
    deepClone(obj) {
      let _obj = JSON.stringify(obj),
          objClone = JSON.parse(_obj);
      return objClone
    },
    handleClick: function (tab, event) {
      let that = this;
      if (that.panel.week != '') {
        that.activeDate = getDate(that.panel.week, 0, 0, parseInt(that.activeName) - 2);
        console.log(that.activeDate);
      }
    },
    // 编辑课表行
    lessonRowEdit(scope) {
      let that = this;
      that.form = scope.row
      that.dialogLessonVisable = true
      if (that.panel.week != '') {
        that.form.last_classon = getDate(that.panel.week, 0, 0, parseInt(that.activeName) - 2);//动态生成拼课截止时间为当天课程
        that.form.curr_date = getDate(that.panel.week, 0, 0, parseInt(that.activeName) - 2);//动态生成拼课截止时间为当天课程
        console.log(that.form.last_classon);
      }
    },
    //确认标记课表行
    confirmEditRow() {
      let that = this;
      that.dialogLessonVisable = false
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      // 只能读取，不能修改
      this.panel.name = this.$route.query.name;
      this.panel.week = this.$route.query.week;

      const jsonStr = {
        stbId: this.$route.query.id
      };

      let paraRequest = new StandardRequest();
      paraRequest.setShopid(localStorage.shopId);
      paraRequest.setJsonstr(JSON.stringify(jsonStr));
      paraRequest.setSign(getSignStr(jsonStr));
      console.log(paraRequest);
      that.client.sTTDetailListQuery(paraRequest, {"Token": localStorage.token}, (err, StandardReply) => {
        if (err == null) {
          console.log(StandardReply.getJsonrst());
          let res = JSON.parse(StandardReply);
          if (res.code === 0) {
            let Rs = res.rs
            let bt = '';
            let et = '';
            that.loading = false;
            // 清掉上次的记录
            for (let i = 0; i < that.tabs.length; i++) {
              that.tabs[i].tableData = []
            }
            if (Rs) {
              // 遍历分配
              Rs.map(function (item) {
                for (let i = 0; i < 7; i++) {
                  if (item.week_day == i + 1) {
                    bt = new Date(2016, 9, 10, item.begin_str.substr(0, 2), item.begin_str.substr(3, 2));
                    et = new Date(2016, 9, 10, item.end_str.substr(0, 2), item.end_str.substr(3, 2));
                    item.timeLong = [bt, et];
                    that.tabs[i].tableData.push(item);
                  }
                }
              })
            } else {
              that.allTableData = [];
              that.recordsTotal = 0;
            }
          } else {
            that.$message.error(res.memo + ',错误代码：' + res.code);
          }
        } else {
          let res = err;
          that.$message.error(res.message + ',错误代码：' + res.code);
          console.log(res);
        }
      });
    },
  },
}
</script>

<style scoped>
@import "../../assets/css/panel.css";

em {
  font-style: normal;
}

.context {
  overflow: hidden;
  /* height: 770px; */

  overflow-y: scroll;
  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  min-height: 100%;
  padding: 30px;
  padding-bottom: 10px;
}

.panel-body {
  padding: 20px;
  background: #f0f2f5;
}

.change {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.change button {
  float: left;
}

.change button.pull-right {
  float: right;
}

.dialogLessonVisable .pull-left {
  width: 40%;
  float: left;
}


/deep/ .el-transfer-panel__item .el-checkbox__input {
  left: 40px;
}

.dialogFooter {
  width: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.dialogFooter button {
  margin-top: 20px;
}

/deep/ .panel_control .el-input {
  width: 200px;
  float: left;
}

.panel_control em {
  float: left;
  font-size: 14px;
  color: #545454;
  line-height: 45px;
  margin-right: 10px;
}

.seeTemp {
  /*position: relative;*/
  float: right;
  bottom: 0px;
  z-index: 222;
}

.table {
  position: relative;
  /*top: -50px;*/
  top: 0px;
}

.el-range-editor.el-input__inner {
  width: 220px;
  padding: 3px 6px;
}

.rowBottom {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.rowBottom button {
  float: left;
  margin-right: 10px;
}

.wrning {
  float: right;
  font-size: 12px;
}

.rowBottom button.pull-right {
  float: right;
}

.gary {
  color: #8c939d;
}

@media (min-width: 320px) and (max-width: 1366px) {
  /deep/ .el-range-editor.el-input__inner {
    width: 180px;
  }

  /deep/ .el-input-number {
    width: 140px;
  }
}
</style>
