<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <div style="padding: 15px; background: #fff; margin-top: -15px">
        <el-row :gutter="24" type="flex" style="flex-wrap: wrap;margin-left: -5px;">
          <el-select v-model="params.vehicleCode" placeholder="请选择机车名称" style="width: 220px;" clearable>
            <el-option v-for="item in locomotiveNameList" :key="item.vehicleCode" :label="item.vehicleName"
              :value="item.vehicleCode" />
          </el-select>
          <el-select v-model="params.railwayCode" placeholder="请选择线路" style="width: 220px" clearable>
            <el-option v-for="item in lineWayData" :key="item.railwayCode" :label="item.railwayName"
              :value="item.railwayCode" />
          </el-select>
          <el-select v-model="params.lineDir" placeholder="请选择行别" style="width: 220px" clearable>
            <el-option v-for="item in lineDirData" :key="item.dictValue" :label="item.dictLabel"
              :value="item.dictValue" />
          </el-select>
          <div v-if="searchShow == true" :span="6" justify="end" style="display: flex; margin-top: 2px" type="flex">
            <div class="search_btn" style="margin-left: 10px;cursor: pointer;" @click="searchLog">
              查询
            </div>
            <div class="reset_btn" style="margin-left: 10px;cursor: pointer;" @click="reset">
              重置
            </div>
            <el-button v-if="searchShow == false" type="text" style="color: #2766dd !important; margin-left: 10px"
              icon="el-icon-arrow-up" @click="searchShow = true">收起</el-button>
            <el-button v-if="searchShow == true" style="color: #2766dd; margin-left: 10px" type="text"
              icon="el-icon-arrow-down" @click="searchShow = false">展开</el-button>
          </div>
        </el-row>


        <el-row :gutter="24" type="flex" style="flex-wrap: wrap;margin-left: -5px;">
          <div v-if="searchShow == false" :span="12">
            <div style="display: flex; align-items: center; margin-top: 6px">
              <el-select v-model="params.status" placeholder="请选择状态" style="width: 220px" clearable>
                <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </div>
          <el-col style="width: 470px" />
          <el-col v-if="searchShow == false" :span="6" justify="end" type="flex" style="width: 300px;">
            <div class="search_btn" style="margin-left: 10px;position: relative;top: 0px;display: inline-block;"
              @click="searchLog">
              查询
            </div>
            <div class="reset_btn" style="margin-left: 10px;position: relative;top: 0px;display: inline-block;"
              @click="reset">
              重置
            </div>
            <el-button v-if="searchShow == false" type="text" icon="el-icon-arrow-up"
              style="color: #2766dd !important; margin-left: 10px;display: inline-block;"
              @click="searchShow = true">收起</el-button>
            <el-button v-if="searchShow == true" type="text"
              style="color: #2766dd; margin-left: 10px;display: inline-block;" icon="el-icon-arrow-down"
              @click="searchShow = false">展开</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <div style="padding: 20px; background: #fff; margin-top: 15px">
      <div class="cardHeadr">
        <!-- <div style="font-size: 18px;height: 30px;float: left;position: relative;top: 17px;">
          机车总数:<span style="font-size: 24px; color: red">{{
            total
          }}</span>
        </div> -->
        <div style="font-size: 18px; float: left;">
          <div class="addBtn" @click="exportVehicleLog()">
            <span class="icon font_family">&#xe605;</span>
            导出
          </div>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="vehicleCode" label="车号" align="center" />
        <el-table-column prop="vehicleName" label="机车名称" align="center" />
        <el-table-column prop="railwayName" label="车辆行驶线路" align="center" />
        <el-table-column prop="lineDirName" label="车辆行驶行别" align="center" />
        <el-table-column prop="travelMileFormat" label="车辆行驶位置m" align="center" />
        <el-table-column prop="deptName" label="终端状态" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.status == '1'">在线</div>
            <div v-else>离线</div>
          </template>
        </el-table-column>
        <el-table-column prop="railwayCode" label="车载终端编码" align="center" />
        <el-table-column prop="currenTime" label="更新时间" align="center" />
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-row>
    </div>
  </div>
</template>
  
<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from 'vuex'
import { getLineWayList, getLineDir } from '@/api/account/camera'
import {
  getLogList,
  exportVehicleLog,
  listNoPage
} from '@/api/sysManage'

export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['name'])
  },
  data() {
    return {
      lineWayData: [],
      searchShow: true,
      tableData: [],
      total: 0,
      params: {
        pageNum: 1,
        pageSize: 10,
        vehicleCode: '',//机车编码
        railwayCode: '',//线路编码
        lineDir: '',//行别
        status: ''//车载状态
      },
      lineDirData: [],
      status: [
        {
          label: '在线',
          value: '1'
        },
        {
          label: '离线',
          value: '2'
        }
      ],
      locomotiveNameList: []
    }
  },
  watch: {

  },
  created() {
    this.getLineWayList()
    this.getLineTypeList()
    this.listNoPage()
    this.getLogList(this.params)
  },
  methods: {
    searchLog() {
      this.getLogList(this.params)
    },
    reset() {
      this.params = {
        pageNum: 1,
        pageSize: 10,
        vehicleCode: '',//机车编码
        railwayCode: '',//线路编码
        lineDir: null,//行别
        status: null//车载状态
      }
      this.getLogList(this.params)
    },
    //获取机车名称
    listNoPage() {
      listNoPage().then(res => {
        this.locomotiveNameList = res.data
      })
    },
    // 行别下拉
    getLineTypeList() {
      getLineDir({}).then((res) => {
        this.lineDirData = res.data
      })
    },
    getLineWayList() {
      getLineWayList({}).then((res) => {
        this.lineWayData = res.data
      })
    },
    handleSizeChange(val) {
      this.params.pageSize= val
      this.getLogList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getLogList(this.params)
    },
    getLogList(params) {
      getLogList(params).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    //导出
    exportVehicleLog() {
      exportVehicleLog('/monitor/vehicleposition/export', {
        vehicleCode: this.params.vehicleCode,
        railwayCode: this.params.railwayCode,
        lineDir: this.params.lineDir,
        status: this.params.status,
      }).then(res => {
        // const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
        // const url = window.URL.createObjectURL(blob);
        // const a = document.createElement('a');
        // a.href = url;
        // a.download = '机车行驶日志.xlsx';
        // a.click();
        // window.URL.revokeObjectURL(url);


        if (res.type == "application/json") {
          const reader = new FileReader(); 
          reader.readAsText(res, 'utf-8'); 
          reader.onload = function () {
            const msg = JSON.parse(reader.result);
            if(msg.code == 200){
              const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = '机车行驶日志.xlsx';
              a.click();
              window.URL.revokeObjectURL(url);
            } else{
              Message({
                type: 'error',
                message: msg.msg
              });
            }      
          }
        }else{
          const blob = new Blob([res], { type: 'text/plain;charset=utf-8' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '机车行驶日志.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
        }

      })
    }
  }

}
</script>
  
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 45px 30px 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-text {
  .el-select {
    margin: 0 10px;
  }
}

.cardHeadr {
  margin-top: -20px;
  // display: flex;
  // justify-content: space-between;
}

.search_btn {
  cursor: pointer;
  background-color: #2766dd;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.search_btna {
  cursor: pointer;
  background-color: #2766dd !important;
  color: #f7f8fb;
  font-size: 14px;
  width: 80px;
  height: 40px;
  text-align: center;
}

.search_btna,
.search_btn:hover {
  background-color: #4d85f4;
}

.reset_btn {
  cursor: pointer;
  color: #565656;
  font-size: 14px;
  border: 1px solid #d7d7d7;
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.reset_btn:hover {
  color: #1f9fff;
  border: 1px solid #1f9fff;
  background: none;
}

.addBtn {
  margin: 15px 20px 15px 0;
  cursor: pointer;
  float: left;
  text-align: center;
  width: 98px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid #ABC7FD;
  line-height: 34px;
  font-weight: 400;
  font-size: 14px;
  color: #2250C8;
  background-color: #E7EEFF;
}

.addBtn:hover {
  color: #FFFFFF;
  background-color: #2250C8;
  border: 1px solid #2250C8;
}

.addBtn:active {
  color: #FFFFFF;
  background-color: #194DA4;
  border: 1px solid #194DA4;
}

.operateBtn {
  display: flex;
  justify-content: center;
  color: #2866dd;

  div {
    font-size: 14px;
    margin: 0 5px;
    cursor: pointer;
  }
}

.el-tooltip__popper {
  max-width: 30%;
  padding-bottom: 5px !important;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 15;
  -webkit-box-orient: vertical;
}

.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  background: rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}

.xzmba {
  color: #2766dd;
  text-decoration: underline;
  cursor: pointer;
}

.hxj {
  width: 100%;
  text-align: center;
  padding: 0 !important;
}

::v-deep .el-dialog__header {
  padding: 0 20px 10px !important;
}

::v-deep .el-dialog__body {
  padding: 20px 20px !important;
}

::v-deep .el-upload__tip {
  margin-top: -17px;
}

::v-deep .el-upload-dragger .el-upload__text {
  margin-top: -10px;
}

.dialog-footer {
  text-align: center;
}

.detailDia {
  div {
    padding-left: 100px;
  }
}

::v-deep .el-input__inner,
.el-input--suffix .el-input__inner {
  padding-right: 0 !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #606266;
}

::v-deep .el-textarea .el-input__count {
  bottom: -40px;
}

::v-deep .el-input__icon {
  // line-height: 47px;
}

</style>
  