<template>
  <div class="app-history" style="height: 550px;overflow: auto;">
    <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 ref="template" class="template">
      <!-- <p class="recipeTemplate" /> -->
      <div class="recipeTemplate">
        <p>日执行计划</p>
      </div>
      <div class="table">
        <el-table
          :key="table.tableKey"
          v-loading="table.listLoading"
          element-loading-text="给我一点时间"
          :data="table.list"
          border
          fit
          highlight-current-row
          style="width: 98%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
          @row-click="tableRowClick"
        >
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="计划名称" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.projname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="计划类型" prop="weight" min-width="130px" align="center" :formatter="lpplantype" />
          <el-table-column label="TMR编号" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.tmrtname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="驾驶员" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.driver }}</span>
            </template>
          </el-table-column>
          <el-table-column label="已执行" min-width="130px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.havebutton }}</span>
            </template>
          </el-table-column>
          <el-table-column label="班次" min-width="180px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.times }}</span>
            </template>
          </el-table-column>
          <el-table-column label="理论量" min-width="180px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.lweight }}</span>
            </template>
          </el-table-column>
          <el-table-column label="时间" min-width="180px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.plantime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发料位" min-width="180px" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.barnames }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="content">
      <div class="table2">
        <p class="contentOperation" />
        <div class="contentOperation">
          <p>计划内容<br>操作详情</p>
        </div>
        <div class="content-table">
          <el-table
            :key="table2.tableKey"
            v-loading="table2.listLoading"
            element-loading-text="给我一点时间"
            :data="table2.list"
            fit
            highlight-current-row
            style="width: 100%;"
            height="450"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label="操作序号" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="饲料名称" prop="fname" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column label="设计重量（KG）" prop="weight" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.weight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <div class="table3">
        <p class="stallRetails" />
        <div class="contentOperation">
          <p>计划内容<br>栏舍详情</p>
        </div>
        <div class="content-table">
          <el-table
            :key="table3.tableKey"
            v-loading="table3.listLoading"
            element-loading-text="给我一点时间"
            :data="table3.list"
            height="450"
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label=" 操作序号" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sort }}</span>
              </template>
            </el-table-column>
            <el-table-column label="栏舍编号" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.fname }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="table3.getdataListParm.parammaps.lpplantype == 3" label="转投栏舍" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.useinbar }}</span>
              </template>
            </el-table-column>
            <el-table-column v-else label="设计重量（KG）" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.weight }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { GetDataByName } from '@/api/common'
import { parseTime } from '@/utils/index.js'
import Cookies from 'js-cookie'
export default {
  name: 'MaterialIssuancePlan',
  display: 'Two list header slot',
  data() {
    return {
      table: {
        getdataListParm: {
          name: 'getDownloadedplanList',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            barid: '',
            mydate: parseTime(new Date(), '{y}-{m}-{d}'),
            times: '',
            lpplantype: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false
      },

      // 计划内容操作详情
      table2: {
        getdataListParm: {
          name: 'getDownloadplandtl1ListV2',
          page: 1,
          offset: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            date: '',
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false
      },

      // 计划内容 舍栏详情
      table3: {
        getdataListParm: {
          name: 'getDownloadplandt2ListV2',
          page: 1,
          offset: 1,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            date: '',
            id: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: false
      },
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    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.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
          this.table.total = response.data.total
          this.table2.getdataListParm.parammaps.id = response.data.list[0].id
          this.table3.getdataListParm.parammaps.id = response.data.list[0].id
          this.table3.getdataListParm.parammaps.lpplantype = response.data.list[0].lpplantype
          this.getList2()
          this.getList3()
        } else {
          this.table.list = []
          this.table2.getdataListParm.parammaps.id = ''
          this.table3.getdataListParm.parammaps.id = ''
          // this.getList2()
          // this.getList3()
          this.table2.list = []
          this.table3.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },

    lpplantype: function(cellValue) {
      if (cellValue.lpplantype == 2) {
        return '撒料'
      } else if (cellValue.lpplantype == 4) {
        return '预混'
      } else if (cellValue.lpplantype == 3) {
        return '剩料'
      }
    },
    changeDate(val) {
      console.log('选择了日期', val)
      this.getList()
      this.getList2()
      this.getList3()
    },

    // 日执行计划行点击
    tableRowClick(row, column, event) {
      console.log(row, column, event)
      this.table2.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.mydate
      this.table2.getdataListParm.parammaps.id = row.id
      this.table3.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.mydate
      this.table3.getdataListParm.parammaps.id = row.id
      this.table3.getdataListParm.parammaps.lpplantype = row.lpplantype
      this.getList2()
      this.getList3()
    },

    // 计划内容操作详情
    getList2() {
      this.table2.listLoading = true
      this.table2.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.mydate

      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table2.list = response.data.list
          const arr = []
          var a = 0
          let b = this.table2.list[0].sort
          let c = 0
          for (let i = 0; i < this.table2.list.length; i++) {
            if (b !== parseInt(this.table2.list[i].sort)) {
              b = this.table2.list[i].sort
              arr.push({ 'sort': '小计', 'weight': a.toFixed(2) })
              a = 0
            }
            a = a + parseFloat(this.table2.list[i].weight)
            c = c + parseFloat(this.table2.list[i].weight)
            arr.push(this.table2.list[i])
          }
          arr.push({ 'sort': '小计', 'weight': a })
          arr.push({ 'sort': '总计', 'weight': c.toFixed(2) })
          this.table2.list = arr
          console.log(this.table2.list)
          this.table2.pageNum = response.data.pageNum
          this.table2.pageSize = response.data.pageSize
          this.table2.total = response.data.total
        } else {
          this.table2.list = []
        }
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },

    // 计划内容栏舍详情
    getList3() {
      this.table3.listLoading = true
      this.table3.getdataListParm.parammaps.date = this.table.getdataListParm.parammaps.mydate

      GetDataByName(this.table3.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.table3.list = response.data.list
          this.table3.pageNum = response.data.pageNum
          this.table3.pageSize = response.data.pageSize
          this.table3.total = response.data.total
        } else {
          this.table3.list = []
        }
        setTimeout(() => {
          this.table3.listLoading = false
        }, 100)
      })
    }

  }
}
</script>

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

 .template{
   background: #fff;
   position: relative;
   // .recipeTemplate{
   //   width: 72px;
   //   height: 70px;
   //   position: absolute;
   //   background: url(../../../assets/images/bg3.jpg) no-repeat;
   //   right: 0;
   //   top: 0;
   //   margin: 0;
   // }
   .recipeTemplate{
     position: absolute;
     width: 120px;
     height: 120px;
     right: -38px;
     top: -50px;
     margin: 0;
     background: url(../../../assets/images/sanjiao.png) no-repeat;
     // border: 50px solid transparent;
     // border-top-color: #019966;
     // transform:rotate(225deg);
     // -webkit-transform: rotate(225deg);/*Safari 4+,Google Chrome 1+ */
     // -moz-transform: rotate(225deg);/*Firefox 3.5+*/
     // filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
     
     z-index: 5;
     p{
       position: absolute;
       z-index: 1;
       color: #fff;
       right: 40px;
       top: 15px;
       width: 70px;
       // transform:rotate(180deg);
       -webkit-transform: rotate(45deg);/*Safari 4+,Google Chrome 1+ */
       -moz-transform: rotate(45deg);/*Firefox 3.5+*/
       filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
       font-size: 10px;
     }
   }
 }
 .table2{
    float: left;width: 49%;margin-right: 1%;background: red;
    background: #fff;
    position: relative;
    .content-table{margin-top: 70px;}
  }
  .table3{
    float: left;
    width: 49%;
    background: #fff;
    position: relative;
    .content-table{margin-top: 70px;}
  }

</style>