<template>
  <div class="app-container">
    <div ref="list" class="list">
      <div class="list-t">
        <span>班次：</span>
        <el-radio-group v-model="menuRadio" size="small" @change="changeMenu">
          <el-radio-button label="全部">全部</el-radio-button>
          <el-radio-button label="早班">早班</el-radio-button>
          <el-radio-button label="中班">中班</el-radio-button>
          <el-radio-button label="晚班">晚班</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 拖拽列表 -->
      <ul class="draggableList">
        <li v-for="element in MenuList" :key="element.name">
          <span class="draggableTitle">{{ element.title }}:</span>
          <draggable id="1" data-source="juju1" :list="element.MenuList" class="list-group1" draggable=".item" group="a" :move="move" @change="log" @start="start" @end="end">
            <div v-for="item in element.MenuList" :key="item.name" :style="{'background':item.background}" class="list-group-item1 item" style="width: 100px;float: left;margin:5px 5px;height: 28px;">
              <el-tooltip placement="top">
                <div slot="content">{{ item.name }}</div>
                <div class="draggableName">{{ item.name }}</div>
              </el-tooltip>
              <div class="draggableWeight">{{ item.weight }}</div>
            </div>
          </draggable>
        </li>
      </ul>
    </div>

    <div ref="listRight" class="list-r">
      <div v-if="isLeftButton" class="rightButton" @click="handleLeftButton">
        <i class="el-icon-arrow-left left" />
        <span>栏舍统计</span>
      </div>
      <div v-if="isRightButton" class="rightButton" @click="handleRightButton">
        <i class="el-icon-arrow-right right" />
        <div class="smallTable">
          <el-table slot="reference" :data="smallMenu.list" header-align="center" :cell-style="cellStyle2" :row-style="rowStyle2" :header-row-style="headerRowStyle2" :header-cell-style="headerCellStyle2" :height="150">
            <template v-for="(item,index) in smallMenu.titlelist">
              <el-table-column :key="index" show-overflow-tooltip :prop="item.column_name" :label="item.label" :width="item.width" />
            </template>
          </el-table>
        </div>
      </div>
    </div>

    <div class="operation">
      <el-button class="success" style="float:left;" @click="handleNewTrains">新增车次</el-button>
      <el-button class="danger" style="float:left;" @click="handleReduceTrains">减少车次</el-button>
      <el-button class="success" style="float:left;" @click="handleAutomaticGeneration">自动生成</el-button>
      <el-button class="success" style="float:left;" @click="handleCheck">校验</el-button>
      <el-button class="import" style="float:right;" @click="handleHistoryRecord">历史记录</el-button>
    </div>

    <div class="table">
      <el-table
        id="table"
        :key="table.tableKey"
        v-loading="table.listLoading"
        element-loading-text="给我一点时间"
        :data="table.list"
        border
        highlight-current-row
        style="width: 100%;"
        :height="height"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
        :row-class-name="tableRowClassName"
        row-key="id"
        @cell-click="tabClick"
        @selection-change="handleSelect"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="车次" width="85px" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.index === table.tabClickIndex && table.tabClickLabel === '车次'" ref="input1" v-model="scope.row.pastureName" type="number" placeholder="车次" class="filter-item" style="display: inline-block;width: 95%;" @blur="handleBlur" />
            <span v-else>{{ scope.row.pastureName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="TMR编号" width="110px" align="center">
          <template slot-scope="scope">
            <el-select v-if="scope.row.index === table.tabClickIndex && table.tabClickLabel === 'TMR编号'" ref="input2" v-model="scope.row.status" placeholder="TMR编号" class="filter-item" style="width:95%;" @change="handleSelectChange()">
              <el-option v-for="item in TMRNumberList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="110px" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.index === table.tabClickIndex && table.tabClickLabel === '描述'" ref="input3" v-model="scope.row.pastureName" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" placeholder="描述" maxlength="255" class="filter-item" style="display: inline-block;width: 95%;" @blur="handleBlur" />
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生效" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="handleTakeEffectChange(scope.$index, scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="班次" width="100px" align="center">
          <template slot-scope="scope">
            <el-select v-if="scope.row.index === table.tabClickIndex && table.tabClickLabel === '班次'" ref="input4" v-model="scope.row.status" placeholder="班次" class="filter-item" style="width:95%;" @change="handleSelectChange()">
              <el-option v-for="item in frequencyList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="150px" align="center">
          <template slot-scope="scope">
            <el-time-picker v-if="scope.row.index === table.tabClickIndex && table.tabClickLabel === '时间'" ref="input5" v-model="scope.row.pastureName" :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }" placeholder="选择时间" style="display: inline-block;width: 95%;" @change="handleTimeChange" />
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最大重量" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合计重量" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.status }}</span>
          </template>
        </el-table-column>
        <el-table-column label="模板配方" width="120px" align="center">
          <template slot-scope="scope">
            <el-select v-if="scope.row.index === table.tabClickIndex && table.tabClickLabel === '模板配方'" ref="input6" v-model="scope.row.status" placeholder="模板配方" class="filter-item" style="width:95%;" @change="handleSelectChange">
              <el-option v-for="item in templateFormulationList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <span v-else>{{ scope.row.status }}</span>
          </template>
        </el-table-column>

        <el-table-column label="发料" width="950px" align="center">
          <template slot-scope="scope">
            <draggable id="2" data-source="juju" :list="scope.row.list" class="list-group2" draggable=".item" group="a" :move="move2" @change="log2" @start="start2" @end="end2">
              <div v-for="element in scope.row.list" :key="element.name" :style="{'background':element.background}" class="list-group-item2 item" style="width: 100px;float: left;border-radius:5px;margin: 5px 5px;padding: 0;height: 60px;">
                <span :style="{'background':element.background}" style="display: block;height:20px;line-height: 20px;border-radius:5px;position: relative;color:#fff;">
                  {{ element.name }}
                  <i class="el-icon-close" style="position: absolute;right: 0;" @click="handleDelete(element.name)" />
                </span>
                <div style="margin-top: 7px;">
                  <el-tooltip placement="top">
                    <div slot="content">{{ element.brandName }}</div>
                    <el-select v-model="element.brandName" placeholder="发料设备" class="filter-item2" style="display: inline-block;width: 55px;">
                      <el-option v-for="item in equipmentList" :key="item.id" :label="item.name" :value="item.name" />
                    </el-select>
                  </el-tooltip>
                  <el-tooltip placement="top">
                    <div slot="content">{{ element.weight }}</div>
                    <el-input v-model="element.weight" type="number" placeholder="重量" class="filter-item2" style="display: inline-block;width: 40px;" />
                  </el-tooltip>
                </div>
              </div>
            </draggable>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 自动生成 -->
    <el-dialog :title="textMap[automaticGeneration.dialogStatus]" :destroy-on-close="true" :visible.sync="automaticGeneration.dialogFormVisible" :close-on-click-modal="false" width="40%">
      <div class="app-automaticGeneration" style="margin: 0 auto;">
        <div style="width: 210px;margin:60px auto 100px;">
          请选择自动生成方式<br>
          1、清空计划生产新计划<br>
          2、当前计划基础上继续生成计划<br>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancel" @click="automaticGeneration.dialogFormVisible = false; ">关闭</el-button>
          <el-button class="success" :disabled="isokDisable" @click="continueData()">继续生成</el-button>
          <el-button class="success" :disabled="isokDisable" @click="emptyPlanData()">清空计划</el-button>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { GetDataByName } from '@/api/common'
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
// const id = 1
export default {
  name: 'MaterialIssuancePlan',
  display: 'Two list header slot',
  order: 14,
  components: { draggable },
  data() {
    return {
      equipmentList: [{ id: 0, name: '发料设备01' }, { id: 1, name: '发料设备02' }], // 发料设备
      TMRNumberList: [{ id: 0, name: 'TMR编号01' }, { id: 1, name: 'TMR编号02' }], // TMR编号
      frequencyList: [{ id: 0, name: '早班' }, { id: 1, name: '中班' }, { id: 2, name: '晚班' }], // 班次
      templateFormulationList: [{ id: 0, name: '泌乳牛高产' }, { id: 1, name: '高产日粮' }, { id: 2, name: '青年牛' }], // templateFormulationList

      table: {
        getdataListParm: {
          name: 'getAssetList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            enable: ''
          }
        },
        list: [],
        total: 0,
        tableKey: 0,
        listLoading: false,
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '' // 当前点击的列名
      },
      selectList: [], // 选中数据

      menuRadio: '全部', // 全部/早班/中班/晚班
      MenuList: [], // 配单列表
      allMenuList: [
        { 'title': '配方1', 'MenuList': [{ background: '#909', name: '全部1', id: 1, 'weight': 100 }, { background: '#909', name: '全部2', id: 2, 'weight': 99 }, { background: '#909', name: '全部3', id: 3, 'weight': 98 }, { background: '#909', name: '全部4', id: 4, 'weight': 90 }] },
        { 'title': '配方2', 'MenuList': [{ background: '#9f0', name: '全部11', id: 1, 'weight': 100 }, { background: '#9f0', name: '全部22', id: 2, 'weight': 99 }, { background: '#9f0', name: '全部33', id: 3, 'weight': 98 }, { background: '#9f0', name: '全部44', id: 4, 'weight': 90 }, { background: '#9f0', name: '全部55全部55全部55全部55', id: 5, 'weight': 55 }, { background: '#9f0', name: '全部66', id: 6, 'weight': 80 }] },
        { 'title': '配方3', 'MenuList': [{ background: '#909', name: '全部77', id: 7, 'weight': 100 }, { background: '#909', name: '全部88', id: 8, 'weight': 99 }, { background: '#909', name: '全部99', id: 9, 'weight': 98 }, { background: '#909', name: '全部10', id: 10, 'weight': 90 }, { background: '#909', name: '全部11', id: 11, 'weight': 55 }, { background: '#909', name: '全部12', id: 12, 'weight': 80 }, { background: '#909', name: '全部13', id: 13, 'weight': 70 }] },
        { 'title': '配方4', 'MenuList': [{ background: '#9f0', name: '全部14', id: 14, 'weight': 100 }, { background: '#9f0', name: '全部15', id: 15, 'weight': 99 }, { background: '#9f0', name: '全部16', id: 16, 'weight': 98 }, { background: '#9f0', name: '全部17', id: 17, 'weight': 90 }] },
        { 'title': '配方5', 'MenuList': [{ background: '#909', name: '全部18', id: 18, 'weight': 100 }, { background: '#909', name: '全部19', id: 19, 'weight': 99 }, { background: '#909', name: '全部20', id: 20, 'weight': 98 }, { background: '#909', name: '全部21', id: 21, 'weight': 90 }] }
      ],
      morningMenuList: [{ 'title': '配方1', 'MenuList': [{ name: '早班1', id: 1 }, { name: '早班2', id: 2 }, { name: '早班3', id: 3 }] }, { 'title': '配方2', 'MenuList': [{ name: '早班11', id: 1 }, { name: '早班22', id: 2 }, { name: '早班33', id: 3 }] }],
      middleMenuList: [{ 'title': '配方1', 'MenuList': [{ name: '中班1', id: 1 }, { name: '中班2', id: 2 }, { name: '中班3', id: 3 }] }, { 'title': '配方2', 'MenuList': [{ name: '中班11', id: 1 }, { name: '中班22', id: 2 }, { name: '中班33', id: 3 }] }],
      eveningMenuList: [{ 'title': '配方1', 'MenuList': [{ name: '晚班1', id: 1 }, { name: '晚班2', id: 2 }, { name: '晚班3', id: 3 }] }, { 'title': '配方2', 'MenuList': [{ name: '晚班11', id: 1 }, { name: '晚班22', id: 2 }, { name: '晚班33', id: 3 }] }],

      isLeftButton: true, // 向左
      isRightButton: false, // 向右
      rowStyle2: { maxHeight: 20 + 'px', height: 20 + 'px' },
      cellStyle2: { padding: 0 + 'px' },
      headerRowStyle2: { maxHeight: 20 + 'px', height: 20 + 'px' },
      headerCellStyle2: { padding: 0 + 'px' },
      smallMenu: { // 栏舍统计table
        getdataListParm: {
          name: 'getAssetList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            enable: ''
          }
        },
        total: 0,
        tableKey: 0,
        listLoading: false,
        'list': [],
        'titlelist': []
      },
      // 自动生成
      automaticGeneration: {
        dialogFormVisible: false,
        dialogStatus: ''
      },

      textMap: {
        automaticGeneration: '提示'
      },

      height: document.body.clientHeight - 255 - 50, // table高度
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    if (this.menuRadio === '全部') {
      this.MenuList = this.allMenuList
    }
    this.getList()
    this.getSmallMenuList()
  },
  methods: {
    getSmallMenuList() {
      this.smallMenu.listLoading = true
      GetDataByName(this.smallMenu.getdataListParm).then(response => {
        console.log('smallMenu数据', response.data.list)
        if (response.data.list !== null) {
          // this.smallMenu.list = response.data.list
          this.smallMenu.list = [
            { 'a1': '总数', 'a2': '11-1', 'a3': '12-1', 'a4': '13-1', 'a5': '14-1', 'a6': '15-1', 'a7': '16-1' },
            { 'a1': '早班未分配', 'a2': '11-2', 'a3': '12-2', 'a4': '13-2', 'a5': '14-2', 'a6': '15-2', 'a7': '16-2' },
            { 'a1': '中班未分配', 'a2': '11-3', 'a3': '12-3', 'a4': '13-3', 'a5': '14-3', 'a6': '15-3', 'a7': '16-3' },
            { 'a1': '晚班未分配', 'a2': '11-4', 'a3': '12-4', 'a4': '13-4', 'a5': '14-4', 'a6': '15-4', 'a7': '16-4' }
          ]
          this.smallMenu.titlelist = [
            { 'label': '配方/班次', 'column_name': 'a1' },
            { 'label': '总栏舍', 'column_name': 'a2' },
            { 'label': '配方1', 'column_name': 'a3' },
            { 'label': '配方2', 'column_name': 'a4' },
            { 'label': '配方3', 'column_name': 'a5' },
            { 'label': '配方4', 'column_name': 'a6' },
            { 'label': '配方5', 'column_name': 'a7' }
          ]
          is.table.total = response.data.total
        } else {
          this.smallMenu.list = []
        }

        setTimeout(() => {
          this.smallMenu.listLoading = false
        }, 100)
      })
    },

    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table.list = response.data.list
          this.table.list = [
            { 'id': 0, 'eqName': '潜污泵', 'pastureName': '双城牧场1', 'purpose': '0', 'specification': '"Q=150t/h', 'status': '正常', 'list': [{ 'name': 'John 1', 'myid': 1, 'background': '#d9d' }, { 'name': 'John 2', 'myid': 2, 'background': '#d9d' }, { 'name': 'John 3', 'myid': 3, 'background': '#d9d' }]
            }, {
              'id': 1, 'eqCode': '24.QWB074', 'eqName': '潜污泵', 'pastureName': '双城牧场2', 'specification': '"Q=150t/h', 'status': '正常', 'list': [{ 'name': 'John 4', 'myid': 4, 'background': '#0f5' }, { name: 'John 5', 'myid': 5, 'background': '#0f5' }, { 'name': 'John 6', 'myid': 6, 'background': '#0f5' }]
            }, {
              'id': 2, 'eqCode': '24.QWB074', 'eqName': '潜污泵', 'pastureName': '双城牧场3', 'specification': '"Q=150t/h', 'status': '正常', 'list': []
            }, {
              'id': 3, 'eqCode': '24.QWB074', 'eqName': '潜污泵', 'pastureName': '双城牧场4', 'specification': '"Q=150t/h', 'status': '正常', 'list': []
            }, {
              'id': 4, 'eqCode': '24.QWB074', 'eqName': '潜污泵', 'pastureName': '双城牧场5', 'specification': '"Q=150t/h', 'status': '正常', 'list': []
            }, {
              'id': 5, 'eqCode': '24.QWB074', 'eqName': '潜污泵', 'pastureName': '双城牧场6', 'specification': '"Q=150t/h', 'status': '正常', 'list': []
            }
          ]
          this.rowDrop()
          if (response.data.total) {
            this.table.tal = response.data.total
          }
        } else {
          this.table.list = []
        }

        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    // 行拖拽
    rowDrop() {
      console.log(document.querySelector('#table .el-table__body-wrapper tbody'))
      const tbody = document.querySelector('#table .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = that.table.list.splice(oldIndex, 1)[0]
          that.table.list.splice(newIndex, 0, currRow)
          console.log('索引', newIndex)
          console.log('拖动数据', currRow)
          console.log('上', that.table.list[newIndex - 1])
          console.log('下', that.table.list[newIndex + 1])
        }
      })
    },
    handleSelect(val) {
      console.log('勾选数据', val)
      this.selectList = val
    },
    // 增加车次
    handleNewTrains() {
      this.table.list.unshift({})
    },
    // 减少车次
    handleReduceTrains() {
      if (this.selectList.length !== 1) {
        this.$message({ type: 'error', message: '请选择车次', duration: 2000 })
        return false
      } else {
        // 减少对应车次
      }
    },
    // 自动生成
    handleAutomaticGeneration() {
      this.automaticGeneration.dialogStatus = 'automaticGeneration'
      this.automaticGeneration.dialogFormVisible = true
    },
    continueData() {
      console.log('点击继续生成')
    },
    emptyPlanData() {
      console.log('点击清空计划')
    },
    // 检验
    handleCheck() {
      console.log('点击检验')
    },
    // 历史记录
    handleHistoryRecord() {
      console.log('点击历史记录')
    },

    // 配方
    log: function(evt) {
      window.console.log(evt)
    },
    start(evt) {},
    end(evt) {},
    move(evt, originalEvent) {
      if (originalEvent.target.className === 'list-group-item1 item') {
        return false
      } else {
        console.log(222)
      }
    },

    // 发料位
    log2: function(evt) {
      window.console.log(evt)
    },
    start2(evt) { },
    end2(evt) { },
    move2(evt, originalEvent) {
      console.log(evt, originalEvent)
      if (originalEvent.target.className === 'list-group-item1 item') {
        return false
      }
    },

    // 点击编辑
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex // 把每一行的索引放进row
    },
    tabClick(row, column) {
      console.log()
      switch (column.label) {
        case '车次':
          this.table.tabClickIndex = row.index
          this.table.tabClickLabel = column.label
          this.$nextTick(() => {
            this.$refs.input1.focus()
          })
          break
        case 'TMR编号':
          this.table.tabClickIndex = row.index
          this.table.tabClickLabel = column.label
          this.$nextTick(() => {
            this.$refs.input2.focus()
          })
          break
        case '描述':
          this.table.tabClickIndex = row.index
          this.table.tabClickLabel = column.label
          this.$nextTick(() => {
            this.$refs.input3.focus()
          })
          break
        case '班次':
          this.table.tabClickIndex = row.index
          this.table.tabClickLabel = column.label
          this.$nextTick(() => {
            this.$refs.input4.focus()
          })
          break
        case '时间':
          this.table.tabClickIndex = row.index
          this.table.tabClickLabel = column.label
          this.$nextTick(() => {
            this.$refs.input5.focus()
          })
          break
        case '模板配方':
          this.table.tabClickIndex = row.index
          this.table.tabClickLabel = column.label
          this.$nextTick(() => {
            this.$refs.input6.focus()
          })
          break

        default: return
      }
    },
    // 失去焦点/选择保存
    handleBlur(index, row) {
      this.table.tabClickIndex = null
      this.table.tabClickLabel = ''
      console.log(index, row)
    },
    handleSelectChange(index, row) {
      this.table.tabClickIndex = null
      this.table.tabClickLabel = ''
    },
    handleTimeChange() {
      this.table.tabClickIndex = null
      this.table.tabClickLabel = ''
    },
    handleTakeEffectChange() {
      console.log('点击了生效')
    },

    // 删除
    handleDelete(val) {
      console.log(val, '点击了发料删除')
    },

    // 早中晚班
    changeMenu(val) {
      console.log(val)
      if (this.menuRadio === '全部') {
        this.MenuList = this.allMenuList
      } else if (this.menuRadio === '早班') {
        this.MenuList = this.morningMenuList
      } else if (this.menuRadio === '中班') {
        this.MenuList = this.middleMenuList
      } else if (this.menuRadio === '晚班') {
        this.MenuList = this.eveningMenuList
      }
    },
    handleLeftButton() { // 向左
      this.isLeftButton = false
      this.isRightButton = true
      this.$refs.listRight.style.zIndex = 4
    },
    handleRightButton() { // 向右
      this.isLeftButton = true
      this.isRightButton = false
      this.$refs.listRight.style.zIndex = 1
    }

  }
}
</script>
<style lang="scss">
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
      color: #fff;
      background-color: #ccc;
      border-color: #ccc;
      -webkit-box-shadow: -1px 0 0 0 #ccc;
      box-shadow: -1px 0 0 0 #ccc;
  }
</style>
<style lang="scss" scoped>
  .list{
    position: fixed; height: 150px;z-index: 3;width: 60%;
    .list-t{position: fixed;z-index: 1;height:32px;}
    .draggableList{ width: 100%; height: 117px; list-style: none;margin-top:32px;padding-left:0;padding-right:0;overflow: auto;
      .draggableTitle{float: left;width: 100px;margin:5px 5px;text-align: center;color:#000;height: 28px;line-height: 36px;}
      li{
        margin: 3px 0;text-align: center;color:#fff;
        .draggableName{display:block;font-size: 12px;overflow: hidden; width: 100px;text-overflow:ellipsis; white-space: nowrap;}
        .draggableWeight{display:block;font-size: 10px;}
      }
    }
  }
  $width:24%;
  $width2:calc(24% - 50px);
  .list-r{
    position: fixed; height: 150px;z-index: 1;width: $width;right: 0;
    .rightButton{
      height: 150px;position: fixed;
      .left{font:40px/150px '';position: fixed;background: #fff;width: 50px;right: 0;}
      span{width: 20px;font:500 16px/16px '';display: inline-block;position: fixed;right: 0;margin-top: 42px;}
      .right{font:40px/150px '';background: #fff;width: 50px;right: $width;}
      .smallTable{position: fixed; top: 95px; width: $width2; margin-left: 50px;}
    }
  }
  .operation{margin-top: 150px;height: 50px;}
  .table{clear:both;}
</style>
<style lang="scss">
  // 下拉框
  .filter-item2 .el-input--suffix .el-input__inner{
    height: 30px !important;
    font-size: 8px;
    padding: 0 2px;
  }
  .filter-item2 .el-input--suffix .el-input__suffix .el-input__suffix-inner .el-input__icon{
    line-height: 30px !important;
  }
  // 输入框
  .filter-item2 .el-input__inner{
    height: 30px !important;
    font-size: 8px;
    padding: 0 2px;
  }
</style>