<template>
  <div class="app-container">
    <div class="search">
      <el-select v-model="table.getdataListParm.parammaps.pastureId" filterable
:placeholder="$t('supplier.mc')" class="filter-item" style="width: 150px;" clearable>
        <el-option v-for="item in pastureList" :key="item.pastureid" :label="item.pastureName" :value="item.pastureid" />
      </el-select>
      <el-select v-model="table.getdataListParm.parammaps.msgtype"
:placeholder="$t('supplier.sjlx')" class="filter-item" style="width: 150px;" clearable>
        <el-option v-for="item in dataTypeList" :key="item.Id" :label="item.value" :value="item.Id" />
      </el-select>
      <el-date-picker v-model="table.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" :range-separator="$t('common.to')"  :start-placeholder="$t('common.startTime')" :end-placeholder="$t('common.endTime')" style="width: 250px;" />
      <el-button class="successBorder" @click="handleSearch">{{$t('common.query')}}</el-button>
      <el-button class="successBorder" @click="handleRefresh">{{$t('common.reset')}}</el-button>
    </div>
    <div class="table">
      <el-table
        :key="table.tableKey"
        v-loading="table.listLoading"
        :element-loading-text="$t('common.tableMsg')"
        :data="table.list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
      >
        <el-table-column :label="$t('feedingEfficiency.mc')"min-width="90px" align="center" prop="pastureName" />
        <el-table-column
:label="$t('supplier.sjlx')" min-width="90px" align="center"  prop="msgtypeName">
          <template slot-scope="scope">
            <span >{{scope.row.msgtypeName}}</span>
            <!-- <span @click="clickType(scope.row)">{{scope.row.msgtypeName}}</span> -->
          </template>
        </el-table-column>
        <el-table-column
:label="$t('supplier.qqcs')" min-width="120px" align="center">
          <template slot-scope="scope">
              <el-tooltip placement="top" :open-delay="1000">
                <div slot="content">
                  <div> {{ scope.row.request }} </div>
                </div>
                <div style="width: 100%;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.request }}</div>
              </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column
:label="$t('supplier.xycs')" min-width="120px" align="center">
          <template slot-scope="scope">
              <el-tooltip placement="top" :open-delay="1000">
                <div slot="content">
                  <div> {{ scope.row.response }} </div>
                </div>
                <div style="width:100%;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ scope.row.response }}</div>
              </el-tooltip>
            </template>
        </el-table-column>
        <el-table-column
:label="$t('supplier.fhzt')" min-width="90px" align="center" prop="status" />
        <el-table-column
:label="$t('supplier.xxwb')" min-width="90px" align="center" prop="msgtext" />
        <el-table-column
:label="$t('supplier.qqdz')" min-width="90px" align="center" prop="url" />
        <el-table-column
:label="$t('supplier.cjsj')" min-width="90px" align="center" prop="createTime" />
      </el-table>
    </div>

    <!-- 数据类型 -->
    <el-dialog :title="textMap[type.dialogStatus]"  :visible.sync="type.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="app-type">
        <div class="table" v-if="type.temp.msgtypeName == '搅拌'">
          <el-table
            :key="type.table.tableKey"
            v-loading="type.table.listLoading"
            :element-loading-text="$t('common.tableMsg')"
            :data="type.table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column :label="$t('formulationEvaluation.xh')" min-width="90px" align="center" prop="pastureName" />
            <el-table-column :label="$t('errorAnalysis.date')" min-width="90px" align="center" prop="status" />
            <el-table-column :label="$t('errorAnalysis.isTrainNumber')"  min-width="90px" align="center" prop="msgtext" />
            <el-table-column :label="$t('errorAnalysis.projname')" min-width="90px" align="center" prop="url" />
            <el-table-column label="配方" min-width="90px" align="center" prop="createTime" />
            <el-table-column label="原料" min-width="90px" align="center" prop="createTime" />
            <el-table-column label="原料顺序" min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.llzl')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.acWeight')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('errorAnalysis.startTime')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('errorAnalysis.endTime')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.Driver')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column label="自拌料-饲料顺序" min-width="90px" align="center" prop="createTime" />
            <el-table-column label="自拌料-饲料名称" min-width="90px" align="center" prop="createTime" />
            <el-table-column label="自拌料-饲料重量" min-width="90px" align="center" prop="createTime" />
            <el-table-column label="实际重量修改记录" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('formulationEvaluation.xgsj')" min-width="90px" align="center" prop="createTime" />
          </el-table>
        </div>
        <div class="table" v-else-if="type.temp.msgtypeName == '配方'">
          <el-table
            :key="type.table.tableKey"
            v-loading="type.table.listLoading"
            :element-loading-text="$t('common.tableMsg')"
            :data="type.table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column :label="$t('formulationEvaluation.xh')" min-width="90px" align="center" prop="pastureName" />
            <el-table-column  :label="$t('errorAnalysis.feedName')"  min-width="90px" align="center" prop="status" />
            <el-table-column
:label="$t('supplier.ylbm')" min-width="90px" align="center" prop="msgtext" />
            <el-table-column
:label="$t('supplier.ylmc')" min-width="90px" align="center" prop="url" />
            <el-table-column
:label="$t('supplier.yllx')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('premixedPlan.weight')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('formulationEvaluation.sort')" min-width="90px" align="center" prop="createTime" />
            <el-table-column
:label="$t('supplier.yxwcc')" min-width="90px" align="center" prop="createTime" />
          </el-table>
        </div>
        <div class="table" v-else-if="type.temp.msgtypeName == '发料'">
          <el-table
            :key="type.table.tableKey"
            v-loading="type.table.listLoading"
            :element-loading-text="$t('common.tableMsg')"
            :data="type.table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column :label="$t('formulationEvaluation.xh')" min-width="90px" align="center" prop="pastureName" />
            <el-table-column :label="$t('errorAnalysis.date')" min-width="90px" align="center" prop="status" />
            <el-table-column :label="$t('errorAnalysis.isTrainNumber')"  min-width="90px" align="center" prop="msgtext" />
            <el-table-column :label="$t('errorAnalysis.projname')" min-width="90px" align="center" prop="url" />
            <el-table-column :label="$t('errorAnalysis.pen')" min-width="90px" align="center" prop="createTime" />
            <el-table-column
:label="$t('supplier.ccl')" min-width="90px" align="center" prop="createTime" />
            <el-table-column
:label="$t('supplier.flsx')" min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.llzl')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.acWeight')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('errorAnalysis.startTime')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('errorAnalysis.endTime')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.Driver')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column  :label="$t('errorAnalysis.feedName')"  min-width="90px" align="center" prop="createTime" />
            <el-table-column
:label="$t('supplier.slsx')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('InventoryManagement.silc')"    min-width="90px" align="center" prop="createTime" />
            <el-table-column
:label="$t('supplier.wlzl')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('supplier.zbl1')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('supplier.zbl2')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('supplier.zbl3')" min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('supplier.sjzljz')"min-width="90px" align="center" prop="createTime" />
            <el-table-column :label="$t('formulationEvaluation.xgsj')" min-width="90px" align="center" prop="createTime" />
          </el-table>
        </div>
        <div class="table" v-else>
          <el-table
            :key="type.table.tableKey"
            v-loading="type.table.listLoading"
            :element-loading-text="$t('common.tableMsg')"
            :data="type.table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column :label="$t('formulationEvaluation.xh')" min-width="90px" align="center" prop="pastureName" />
            <el-table-column :label="$t('errorAnalysis.date')" min-width="90px" align="center" prop="status" />
            <el-table-column :label="$t('errorAnalysis.pen')" min-width="90px" align="center" prop="msgtext" />
            <el-table-column :label="$t('premixedPlan.weight')" min-width="90px" align="center" prop="url" />
          </el-table>
        </div>
        <span v-if="type.table.listLoading == false" style="margin-right: 30px;margin-top: 10px;font-size: 14px;">{{$t('processAnalysis.total')}}{{ type.table.total }}{{$t('processAnalysis.tiao')}}</span>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelClose1" @click="type.dialogFormVisible = false;getList()">{{$t('common.closed')}}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import { GetDataByName,GetDataByNames  } from '@/api/common'
  import { parseTime } from '@/utils/index.js'
  import Cookies from 'js-cookie'
export default {
  name: 'SapLog',
  data() {
    return {
      table:{
        getdataListParm:{
          name: 'getSaplogList',
          page: 1,
          offset: 1,
          pagecount: parseInt(Cookies.get('pageCount')),
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            startTime:'',
            endTime:'',
            inputDatetime:''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        temp: {}
      },
      requestParams:[
        { name: 'getSapPullDown', offset: 0, pagecount: 0, parammaps: { pastureid: Cookies.get('pastureid') }},
        { name: 'getPastureList', offset: 0, pagecount: 0, parammaps: { pastureid: Cookies.get('pastureid') }},
      ],
      dataTypeList:[],pastureList:[],
      textMap: {
        type: '搅拌数据类型详情',
      },
      type:{
        dialogFormVisible: false,
        dialogStatus: '',
        table:{
          tableKey: 0,
          list: [],
          total: 0,
          listLoading: false,
        },
        temp:{}
      },
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' },
    }
  },
  created() {
    this.getDownList()
    this.getList()
  },

  methods: {
    getDownList(){
      GetDataByNames(this.requestParams).then(response => {
        this.dataTypeList = response.data.getSapPullDown.list
        this.pastureList = response.data.getPastureList.list
      })
    },
    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
        } else {
          this.table.list = []
        }
        this.table.total = response.data.total
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    handleSearch(){
      if (this.table.getdataListParm.parammaps.inputDatetime !== '' && this.table.getdataListParm.parammaps.inputDatetime !== null) {
        this.table.getdataListParm.parammaps.startTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
        this.table.getdataListParm.parammaps.endTime = parseTime(this.table.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
      } else {
        this.table.getdataListParm.parammaps.inputDatetime = ''
        this.table.getdataListParm.parammaps.startTime = ''
        this.table.getdataListParm.parammaps.endTime = ''
      }
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh(){

    },
    clickType(row){
      this.type.temp = Object.assign({},row)
      this.type.temp.msgtypeName = '搅拌'
      this.type.dialogStatus = 'type'
      this.type.dialogFormVisible = true
    }
  }
}
</script>
