
<template>
  <div >
    <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 30px">
      <div slot="header" class="clearfix">
        <span>筛选搜索</span>
        <el-button style="float: right; padding: 3px 30px" type="text" @click="findShop">查询结果</el-button>
        <el-button style="float: right; padding: 3px 10px" type="text" @click="chong">重置</el-button>
      </div>
      <div class="text item">
        <el-form ref="form" :model="information" label-width="100px">
          <el-form-item>
            车辆唯一VIN：<el-input v-model="information.carInformationVIN" placeholder="商品名称" style="width: 180px;margin-right: 50px"></el-input>
            启用状态：
            <el-select v-model="information.carInformationState" placeholder="请选择状态" style="margin-right: 30px" clearable>
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
            <br><br>
            车辆类型：<el-input v-model="information.carInformationType" placeholder="编号" style="width: 180px;margin-right: 50px"></el-input>
            车辆电子围栏：<el-input v-model="information.carInformationFence" placeholder="编号" style="width: 180px;margin-right: 50px"></el-input>
            <br><br>
            车辆电机厂商：<el-input v-model="information.carInformationMotorManufacturer" placeholder="车辆电机厂商" style="width: 180px;margin-right: 50px"></el-input>
            车辆电机型号：<el-input v-model="information.carInformationMotorModel" placeholder="车辆电机型号" style="width: 180px;margin-right: 50px"></el-input>
            <br><br>
            车辆电池厂商：<el-input v-model="information.carInformationBatteryManufacturer" placeholder="车辆电池厂商" style="width: 180px;margin-right: 50px"></el-input>
            车辆电池型号：<el-input v-model="information.carInformationBatteryModel" placeholder="车辆电池型号" style="width: 180px;margin-right: 50px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>


    <el-card class="box-card" style="width: 94%;transform: translateX(3%);margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>数据列表</span>
        <button @click="addCarInformation(1)" style="float: right; padding: 3px 10px" type="text">添加</button>
        <button style="float: right; padding: 3px 10px" type="text" @click="getOut">导出</button>
      </div>

      <el-table :data="arr" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="35"></el-table-column>
        <el-table-column   label="车辆ID" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carInformationId }}</span>
          </template>
        </el-table-column>
          <el-table-column  label="车辆唯一VIN" width="190" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px"> {{ scope.row.carInformationVin }}</span>
            </template>
          </el-table-column>
          <el-table-column label="车牌号" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carInformationLicensePlate }}</span>
            </template>
          </el-table-column>

        <el-table-column align="center" label="车辆信息">
          <el-table-column label="车辆类型" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carTypeName}}</span>
            </template>
          </el-table-column>
            <el-table-column prop="province" label="车辆品牌" width="90" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.carInformationBrand }}</span>
              </template>
            </el-table-column>
            <el-table-column label="车辆颜色" width="80" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.carInformationColor }}</span>
              </template>
            </el-table-column>
          <el-table-column label="车辆电机厂商" width="150" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carInformationMotorManufacturer}}</span>
            </template>
          </el-table-column>
          <el-table-column label="车辆电机型号" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carInformationMotorModel}}</span>
            </template>
          </el-table-column>
          <el-table-column label="车辆电池厂商" width="150" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carInformationBatteryManufacturer}}</span>
            </template>
          </el-table-column>
          <el-table-column label="车辆电池型号" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carInformationBatteryModel}}</span>
            </template>
          </el-table-column>
          <el-table-column label="车检到期日期" width="120" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.carInformationExamineEnddata}}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="车辆驾驶员" width="100" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.carInformationDriver }}</span>
          </template>
        </el-table-column>
          <el-table-column label="车辆电子围栏" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name}}</span>
            </template>
          </el-table-column>

     <el-table-column label="是否重点车辆" width="60" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px" v-if="scope.row.carInformationFocus==1">是</span>
              <span style="margin-left: 10px" v-if="scope.row.carInformationFocus==0">否</span>
            </template>
          </el-table-column>

            <el-table-column label="启用状态" width="80" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px" v-if="scope.row.carInformationState==1">在线</span>
                <span style="margin-left: 10px" v-if="scope.row.carInformationState==2">离线</span>
                <span style="margin-left: 10px" v-if="scope.row.carInformationState==3">已断开</span>
                <span style="margin-left: 10px" v-if="scope.row.carInformationState==4">待连接</span>
                <span style="margin-left: 10px" v-if="scope.row.carInformationState==5">维修中</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="updatecarInformation(scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="delBycarInformationId(scope.row)">删除</el-button>

              </template>
            </el-table-column>


      </el-table>
      <el-pagination style="float: right"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="information.pageNum"
                     :page-sizes="[5, 10, 50, 100]"
                     :page-size="information.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="information.total">
      </el-pagination>
    </el-card>

    <el-dialog
      :title="addtitle"
      :visible.sync="addordersoff"
      width="50%"
      :before-close="handleClose">
      <div v-if="this.index==1">
        <h2>车辆添加</h2><br>
        <el-form :model="ordersForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="车辆唯一VIN：" prop="ordersNum">
            <el-input type="text" v-model="ordersForm.carInformationVIN" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车牌号：" prop="ordersProduct">
            <el-input type="text" v-model="ordersForm.carInformationLicensePlate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆品牌：" prop="ordersUser">
            <el-input type="text" v-model="ordersForm.carInformationBrand" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆颜色：" prop="ordersPrice">
            <el-input type="text" v-model="ordersForm.carInformationColor" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆驾驶员：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationDriver" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车检到期日期：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationExamineEnddata" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆电机厂商：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationMotorManufacturer" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆电机型号：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationMotorModel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆电池厂商：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationBatteryManufacturer" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆电池型号：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationBatteryModel" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆电子围栏外键ID：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationFence" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车辆类型外键ID：" prop="ordersSpecification">
            <el-input type="text" v-model="ordersForm.carInformationType" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <center>
          <el-button @click="addordersoff = false">取 消</el-button>
          <el-button type="primary" @click="addCarInformation(ordersForm)">提 交</el-button>
        </center>
      </div>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

  </div>
</template>


<script>
import {
  selectCarInformationList,
  addCarInformation,
  delBycarInformationId
} from '@/api/car/information'
import axios from 'axios'



//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
export default {

  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      information:{
        pageNum:1,
        pageSize:10,
        total:1
      },
      arr:[],
      type:[],

      Cascader:{ expandTrigger:'hover',value:'id',label:'typeName',children:'parentPOS' },
      typeId:[],
      startDate: null,
      endDate: null,

      index:'',
      addtitle:'',
      addordersoff:false,
      ordersForm:{},
      productInfo: null,

      options: [{
        value: ' ',
        label: '全选'
      }, {
        value: '1',
        label: '在线'
      }, {
        value: '2',
        label: '离线'
      }, {
        value: '3',
        label: '已断开 '
      } ,{
        value: '4',
        label: '待连接 '
      },{
        value: '5',
        label: '维修中 '
      }]
    };
  },
  //计算属性 类似于data概念",
  computed: {
    item() {
      return item
    }
  },
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    // 多选框
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //商品列表
    selectCarInformationList() {
      selectCarInformationList(this.information).then(
        res => {
          console.log(res)
          this.arr = res.data.records
          this.information.total = res.data.total
        }
      )
    },
    // 删除
    delBycarInformationId(row){
      const result = window.confirm(`你确定要执行此操作吗？`);
      if (result) {
        delBycarInformationId(row.carInformationId).then(
          res => {
            this.$message.success(res.msg)
            this.selectCarInformationList()
          }
        )
        location.reload();
        // 用户点击确定后的逻辑处理，这里可以使用传入的 id
        console.log(`用户点击了确定，ID 为 ${row.ordersId}`);
      } else {
        // 用户点击取消后的逻辑处理
        console.log('用户点击了取消');
      }

    },
    // 分页
    handleSizeChange(val) {
      this.information.pageSize=val
      this.selectCarInformationList()
    },
    handleCurrentChange(val) {
      this.information.pageNum=val
      this.selectCarInformationList()
    },
    // 重置
    chong(){
      this.information={}
      this.selectCarInformationList()
    },
    // 查询
    findShop(){
      this.selectCarInformationList()
    },
    // 添加跳转路径
    add(index){
      this.index=index
      if (this.index === 1) {
        this.addtitle= '添加订单';
      }
      // else if (this.index === 2) {
      //   this.dialogtitle= '';
      // }
      this.addordersoff=true
    },
     addCarInformation(ordersForm){
       addCarInformation(ordersForm).then(response=>{
        alert(response.msg)
        if (response.code==200){}
        this.addordersoff=false
      })
      location.reload();
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 修改跳转路径
    ordersUpdate(row){
      this.$router.push({path:"/updorders/index",query:{information:row}})
    },

    // pay(row){
    //
    //   console.log(row)
    //   updateByordersState1(this.information).then(res =>{
    //       this.information.ordersId=this.information.ordersId;
    //       this.information.productId=this.information.productId;
    //       window.open("http://21.12.0.10:80/prod-api/market/alipay/pay?productName="+row.productName +"&ordersNum="+row.ordersNum+"&ordersPrice="+row.ordersPrice)
    //       this.$message.success('付款成功')
    //     }
    //   )
    // },

    getOut(){
      this.download('system/operlog/export', {
        ...this.queryParams
      }, `operlog_${new Date().getTime()}.xlsx`)

    },

    reclaim(){
      this.$router.push({path:"/reclaim/index"})
    }

    // getOut(){
    //   axios.get('/market/information/getOutAll').
    //   then(response =>{
    //     if(response.data && response.data instanceof ArrayBuffer)
    //     {
    //      const blob = new Blob([response.data],{type:'application/octet-stream'});
    //      saveAs(blob ,'订单信息表');
    //     }else{
    //       console.error("导出失败:" ,error);
    //     }
    //   })
    // }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    // this.diGui()
    this.selectCarInformationList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>

