<template>
  <div class="common-page device-manage">

    <div class="option page-row">
      <!--工具栏-->
      <div class="head-container">
        <!-- 搜索 -->
        <label class="el-form-item-label" style="font-weight: 500;">安检表单号</label>
        <el-input v-model="query.formId" clearable size="small" placeholder="请输入安检表单号" style="width:180px;"/>
        <label class="el-form-item-label" style="font-weight: 500;">驾驶人</label>
        <el-input v-model="query.username" clearable size="small" placeholder="请输入驾驶人姓名" style="width:180px;"/>
        <label class="el-form-item-label" style="font-weight: 500;">车牌号</label>
        <el-input v-model="query.carNo" clearable size="small" placeholder="请输入车牌号" style="width:180px;"/>
        <label class="el-form-item-label" style="font-weight: 500;">生成日期</label>
        <el-date-picker
          v-model="query.createTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:MM:SS"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button size="mini" type="success" icon="el-icon-search" @click="toSearch">搜索</el-button>
        <el-button size="mini" icon="el-icon-refresh" @click="clearLimit">重置</el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="panel-bottom page-row">
      <h3>安检报告记录</h3>
      <div class="ctin-box">
        <div class="content-within">
          <div class="content-fix">
            <div class="toolbar">
<!--              <el-button size="mini" type="primary" icon="el-icon-plus" @click="toAdd">新增</el-button>-->
            </div>
            <div class="content">
              <el-table :data="tableData" v-loading="loading" border style="width:auto" :row-class-name="tableRowClassName">
                <el-table-column prop="formId" label="安检表单号" align="center"></el-table-column>
                <el-table-column prop="username" label="驾驶人" align="center"></el-table-column>
                <el-table-column prop="carNo" label="车牌号" align="center"></el-table-column>
                <el-table-column prop="carClass" label="车辆类型" align="center"></el-table-column>
                <el-table-column prop="createTime" label="报告生成日期" align="center"></el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button size="mini" type="success" icon="el-icon-view" @click="toView(scope.row)"></el-button>
<!--                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="toDelete(scope.row)"></el-button>-->
                  </template>
                </el-table-column>
              </el-table>
              <!--分页组件-->
              <el-pagination :total="total" :current-page="page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChange" @current-change="pageChange" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表单渲染 -->
    <el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
      <el-table :data="form.tableList" border style="width:auto" :row-class-name="tableRowClassName">
        <el-table-column prop="anjianClass" label="项目名称" align="center"></el-table-column>
        <el-table-column prop="anjianData" label="检查结果" align="center"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelForm">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { Tools, HttpReq, Dates} from '@/assets/js/common.js';

export default {
  name: 'CheckLog',
  data() {
    return {
      loading: false,
      page: 1,
      size: 10,
      total: 0,
      query:{},
      tableData: [],
      selectList:[],
      terminalList:[],
      carTypeData:[],
      carModelData:[],
      form: {
        title:'新增安检',
        visible:false,
        reqType:'add',
        status:{cu:0},
        item:{
          weight:'',
          alarm:'',
          model:'',
        },
        tableList:[]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.loadData();
    })
  },
  methods: {
    loadData() {
      var sort = 'id,desc';
      var param = this.query;
      param.page = this.page - 1;
      param.pageSize = this.size;
      param.sort = sort;

      this.$nextTick(()=>{
        //获取安检信息
        HttpReq.truckDispatching.ajReportListFind(param).then((res) => {
          if(res.code == 200){
            this.loading = false;
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      })
    },
    tableRowClassName({row, rowIndex}) {
      if (row.projectClass == 2) {
        return 'warning-row';
      } else if (row.projectClass  == 1) {
        return 'success-row';
      }
      return '';
    },
    // 点击搜索
    toSearch() {
      this.page = 1;
      this.loadData();
    },
    // 重置搜索
    clearLimit(){
      this.query = {};
      this.loadData()
    },
    cancelForm(a, b, c){
      this.form.visible = false;
    },
    toView(item){
      this.form.title = '查看报告';
      this.form.visible = true;
      //获取安检报告详情
      HttpReq.truckDispatching.ajReportInfo({formId: item.formId}).then((res) => {
        if(res.code == 200){
          this.form.tableList = res.data.records;
        }
      })
    },
    toDelete(item) {
      var id = item.id;
      this.$confirm( item.carclass == '铲车' ? '该车为铲车，如要删除，请在删除以后为采点管理中对应的采点分配新的铲车！' : '确认删除该条数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: item.carclass == '铲车' ? 'error' : 'warning'
      }).then((e) => {
        this.reqRemoveProject([id],item)
      }).catch((e) => {})
    },
    pageChange(e) {
      this.page = e
      this.loadData()
    },
    sizeChange(e) {
      this.page = 1
      this.size = e
      this.loadData()
    },
    submitForm(validateName, item){
      if(!this.form.status.cu){
        this.form.status.cu = 2;
        this.$refs[validateName].validate(valid => {
          if(valid){
            if(this.form.reqType === 'add'){
              this.reqAddItem(this.form, item)
            }else{
              this.reqUpdateItem(this.form, item)
            }
          }else{
            this.form.status.cu = 0
          }
        });
      }
    },
    currentTime(time){
      var date = new Date(time);
      var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)
      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }
      //获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
      let currentFormatDate = year + "-" + month + "-" + day;
      return currentFormatDate;
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}

.device-manage{
  .panel-bottom{
    .el-button{margin:2px 0;padding:6px 15px;font-size:14px;}
    .btn-groub2{
      display:inline-block;
      .el-button{margin:2px 0;padding:6px 15px;font-size:15px;}
      .el-button--warning {
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
      .el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;}
    }
  }
}

.ecahrt1-dialog{
  display:flex;align-items:center;
  .el-dialog{
    margin-top:inherit !important;display:table !important;width:fit-content;
    .el-form-item{margin-right:0;}
  }

  .el-dialog__header{height:0;padding:0;display:block;}
  .form-body{
    border:1px solid #999;width:800px;height:500px;position:relative;
    >div{position:absolute;top:0;left:0;height:100%;width:100%;}
  }
}
</style>
