<template>
  <div class="app-history">
    <div class="search">
      <el-date-picker v-model="table.getdataListParm.parammaps.date" type="date" placeholder="请选择历史记录时间" :clearable="false" style="width: 230px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd" @change="changeDate" />
    </div>

    <div class="table">
      <el-table
        id="table"
        :key="table.tableKey"
        ref="table"
        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-key="id"
      >
        <el-table-column label="车次" width="85px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="TMR编号" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.tmrname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="描述" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.display }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生效" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.sel" disabled 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">
            <span>{{ scope.row.timesstr }}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.begintime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最大重量" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.maxweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="合计重量" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.sumweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="模板配方" width="120px" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.ftname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否提前小料拆分" width="100px" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.issplit" :disabled="scope.row.NoEdit" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" disabled />
          </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.arrList" class="list-group2" draggable=".item" group="a" :move="move2" @change="changeLog2(scope.row)" @start="start2" @end="end2(scope.row)">
              <div v-for="element in scope.row.arrList" :key="element.name" class="list-group-item2 item">
                <div class="arr-l">
                  <div class="arr-l-t">
                    <div class="arr-l-t-t" />
                    <el-select v-model="element.tmrid" placeholder="撒料设备" class="arr-l-t-b el-icon-arrow-down" @change="(value)=> {changeEquipment(value, scope.row,element.fttype,element.id)}">
                      <el-option v-for="item in equipmentList" :key="item.id" :label="item.tmrmix" :value="item.id" />
                    </el-select>
                  </div>
                  <div class="arr-l-b">
                    <el-tooltip placement="top" class="list-group-item1 item" style="height: 18px;line-height: 18px;">
                      <div slot="content">{{ element.tmrname }}</div>
                      <div class="tmrname">{{ element.tmrname }}</div>
                    </el-tooltip>
                  </div>
                </div>
                <div class="arr-r">
                  <div class="arr-r-l">
                    <el-tooltip placement="top">
                      <div slot="content">{{ element.barname }}</div>
                      <div class="barname">{{ element.barname }}</div>
                    </el-tooltip>
                  </div>
                  <div class="arr-r-c">-</div>
                  <div class="arr-r-r">
                    <el-tooltip v-show="!element.isWeight" placement="top">
                      <div slot="content">{{ element.weight }}</div>
                      <div class="weight" @dblclick="dbclickWeight(element)">{{ element.weight }}</div>
                    </el-tooltip>
                    <el-tooltip v-show="element.isWeight" placement="top">
                      <div slot="content">{{ element.weight }}</div>
                      <input ref="weight" v-model="element.weight" v-focus="element.focusState" type="number" placeholder="重量" step="0.01" class="filter-item2" style="display: inline-block;height:16px;padding:4px 0px; font-size:12px;width: 95%;border: 1px solid #e6e6e6;" @blur="(value)=> {blurWeight(scope.row,element.fttype,element.id)}">
                    </el-tooltip>
                  </div>
                </div>
                <div class="arr-t" :style="{'background':element.background}">
                  <i class="el-icon-close" style="position: absolute;right: 0;" @click="handleFLDelete(element,scope.row)" />
                </div>
              </div>
            </draggable>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { GetDataByName, postJson } from '@/api/common'
import draggable from 'vuedraggable'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
export default {
  name: 'MaterialIssuancePlan',
  display: 'Two list header slot',
  order: 14,
  components: { draggable },
  data() {
    return {
      table: {
        getdataListParm: {
          name: 'getLppListdate',
          name1: 'getLppdListdate',
          page: 1,
          offset: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            date: parseTime(new Date(), '{y}-{m}-{d}')
          }
        },
        list: [],
        total: 0,
        tableKey: 0,
        listLoading: false,
        temp: {},
        changeList: [],
        startObj: {}
      },
      requestParams2: {
        name: 'getTMRListEnable', offset: 0, parammaps: { pastureid: Cookies.get('pastureid'), eqtype: '1' }
      },
      equipmentList: [], // 撒料设备
      height: document.body.clientHeight - 255 - 50, // table高度
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getList()
    this.getDownList()
  },
  methods: {
    changeDate() {
      this.getList()
    },
    getDownList() {
      GetDataByName(this.requestParams2).then(response => {
        this.equipmentList = response.data.list
      })
    },
    getList() {
      this.table.listLoading = true
      const url = 'authdata/GetArrList'
      const data = this.table.getdataListParm
      postJson(url, data).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            if (response.data.list[i].arrList == null) {
              this.$set(response.data.list[i], 'arrList', [])
            }
          }
          this.table.list = response.data.list
          this.table.changeList = []
          this.table.startObj = {}
          if (response.data.total) {
            this.table.total = response.data.total
          }
        } else {
          this.table.list = []
        }

        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
 .search{margin-bottom: 10px;}
</style>
