<template>
    <el-container class="container">
      <el-header class="filter-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
      
          <!-- <div> -->
            <el-form-item label="姓名" class="form-flex" style="margin-top: 10px;">
              <el-input @input="e => formInline.userName = validForbid(e)" :value="formInline.userName" maxlength="20"
                placeholder="请输入内容"></el-input>
            </el-form-item>
            <!-- <el-form-item label="手机号" class="form-flex">
              <el-input @input="e => formInline.userMobile = validForbid(e)" :value="formInline.userMobile" maxlength="20"
                placeholder="请输入内容"></el-input>
            </el-form-item> -->
            <el-form-item label="车牌号" class="form-flex" style="margin-top: 10px;">
              <el-input @input="e => formInline.carNum = validForbid(e)" :value="formInline.carNum" maxlength="20"
                placeholder="请输入内容"></el-input>
            </el-form-item>
          <!-- </div>
          <div> -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">查询</el-button>
              <!-- <el-button type="primary" @click="onOut">导出</el-button> -->
              <el-button type="primary" @click="edit({})">添加</el-button>
               <!-- 导入 -->
                <el-button style="background:#eeeeee;border:0;">
                    <el-upload 
                    class="upload-demo"
                    ref="upload"
                    action
                    :on-change="onchange"
                    :file-list="fileList"
                    :auto-upload="false"
                    :show-file-list="false"
                    multiple
                    >
                    <div class="tolead-click">
                        <el-button
                        slot="trigger"
                        class="search-clcik-class"
                        type="primary"
                        @click="handlePreview"
                        >导入</el-button>
                    </div>
                    </el-upload>
                </el-button>
              <el-button type="primary" @click="onOut()">模板下载</el-button>
            </el-form-item>
          <!-- </div> -->
        </el-form>
      </el-header>
      <!-- max-height="500" -->
      <div class="table">
        <el-table :element-loading-text="loadingMsg" v-loading="loading" :data="tableData" stripe border style="width:100%">
          <el-table-column fixed prop="num" label="序号" min-width="50" width="50">
            <template slot-scope="scope">{{ page.sizePage*((page.limit==0?1:page.limit)-1)+(scope.$index+1) }}</template>
          </el-table-column>
          <el-table-column prop="USER_NAME" label="姓名" min-width="150">
            <template slot-scope="scope">
              <el-popover placement="top-start" title width="200" trigger="hover" :content="scope.row.USER_NAME">
                <div class="maxsize" slot="reference">{{scope.row.USER_NAME}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="CAR_NUM" label="车牌号" min-width="200">
            <template slot-scope="scope">
              <el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.CAR_NUM)">
                <div class="maxsize" slot="reference">{{scope.row.CAR_NUM}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="DEPT_NAME" label="部门" min-width="200">
            <template slot-scope="scope">
              <el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.DEPT_NAME)">
                <div class="maxsize" slot="reference">{{scope.row.DEPT_NAME}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="USER_PHONE" label="手机号" min-width="120">
            <template slot-scope="scope">
              <el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.USER_PHONE)">
                <div class="maxsize" slot="reference">{{scope.row.USER_PHONE}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="PARK_POSITION" label="常停位置" min-width="120">
            <template slot-scope="scope">
              <el-popover placement="top-start" title width="200" trigger="hover" :content="(scope.row.PARK_POSITION)">
                <div class="maxsize" slot="reference">{{scope.row.PARK_POSITION}}</div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200" align="center">
            <template slot-scope="{row}">
              <!-- <el-button type="primary" size="mini" @click="edit(row)">编辑</el-button> -->
              <el-button size="mini"  type="danger" @click="delGreenCar(row)" >删除</el-button  >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="foot-total">
        <Paging @currentChanges="currentChanges" :pageNum="parseInt(page.limit)" :size="parseInt(page.sizePage)" :total="parseInt(page.total)" />
      </div>
      <Popup
        v-if="validation"
        :contents="nav"
        :title="completeTitle"
        :btn="btn"
        @closeDialog="closeDialogDel"
      />
  
      <!-- 编辑 -->
      <Ticketopop
        v-if="isflag"
        :btn="num"
        :title="'车牌号'"
        @closeDialog="closeDialog"
        @submit="submit"
        :row="row"
        :width="500"
      />
    </el-container>
  </template>
  <script>
    import Paging from "@/views/Public/paging.vue";
    import {Own,greenCarList,addGreenCar,delGreenCar,carImportByExcel} from "@/api/getdata";
    import Ticketopop from "./popup/ticketpop.vue";
    import Popup from "@/views/estate/examine/dialog/popup.vue";
    export default {
      data() {
        return {
            fileList:[],
          loading: false, //初始化loading
          loadingMsg: "",
          row: {},
          validation: false,
          food_name: "",
          formInline: {
            userName: "",
            carNum: "",
            // userMobile: "",
            // userDepartment: "",
            // orgName:'',
          },
          page: {
            limit: 0 /** 当前点击*/ ,
            sizePage: 10 /** 当前多少页*/ ,
            total: 0 /**总数 */
          },
          tableData: [],
          isflag: false /**用于设置弹窗 */,
          num:3
        };
      },
      components: {
        Paging,
        Ticketopop,
        Popup
      },
      mounted() {
        this.createLoad();
        if (this.$route.params.index) {
          this.currentChanges(this.$route.params.index);
        } else {
          this.getlist();
        }
      },
      methods: {
        createLoad() {
          this.loading = true;
          this.loadingMsg = "加载中...";
        },
        clearLoad() {
          this.loading = false;
          this.loadingMsg = "";
        },
        // 分页
        currentChanges(val) {
          this.createLoad();
          this.page.limit = val;
          this.getlist();
        },
  
        getlist() {
          var aa = {
            // realName: this.formInline.userName,
            // mobile: this.formInline.userMobile,
            // departmentName: this.formInline.userDepartment,
            // orgName:this.formInline.orgName,
          };
          let Content = {
            userName: this.formInline.userName,
            carNum: this.formInline.carNum,
            currentPage: this.page.limit == 0 ? 1 : this.page.limit,
            pageNum: this.page.limit == 0 ? 1 : this.page.limit,
            pageSize:10,
            // queryObj: aa
          };
          greenCarList(Content)
            .then(res => {
              if (res.returnCode == "1") {
                console.log(res.returnData)
                this.clearLoad();
                this.tableData = res.returnData.data;
                this.page.total = res.returnData.total;
                this.page.limit =  res.returnData.currentPage;
                // this.tableData.id = res.returnData.data.id;
              } else {
                this.$message({
                  message: res.returnMsg,
                  type: "warning"
                });
                setTimeout(() => {
                  this.clearLoad();
                }, 300);
              }
            })
            .catch(err => {
              console.log(err);
              setTimeout(() => {
                this.clearLoad();
              }, 300);
            });
        },
        onSubmit() {
          console.log(this.formInline);
          this.page.limit = 1;
          this.createLoad();
          this.getlist();
        },
        edit(data){
          // this.row = data;
          this.row = Object.assign({}, data);
          this.isflag = true;
        },
        closeDialog(){
          this.isflag = false;
          this.row = {};
        },
        delGreenCar(row) {
          this.row = row;
          this.validation = true;
          this.btn = 3;
          this.completeTitle = "删除";
          this.nav = "是否删除？";
          // console.log(index, row,3)
        },
        closeDialogDel(val) {
          if (val == "1") {
            this.createLoad();
            let Content = {
              carNum: this.row.CAR_NUM,
            };
            delGreenCar(Content)
              .then((res) => {
                if (res.returnCode == "1") {
                  this.$message({
                    message: res.returnMsg,
                    type: "success",
                  });
                  this.page.limit = 1;
                  this.getlist();
                } else {
                  this.$message({
                    message: res.returnMsg,
                    type: "warning",
                  });
                  setTimeout(() => {
                    this.clearLoad();
                  }, 300);
                }
              })
              .catch((err) => {
                console.log("error");
                setTimeout(() => {
                  this.clearLoad();
                }, 300);
              });
          } 
  
          this.validation = false;
        },
        
        submit(e){
          addGreenCar(e)
          .then(res => {
            if(res.returnCode == '1'){
                this.$message({
                message:res.returnMsg,
                type: "success"
              });
              // this.options = res.returnData;
              this.isflag = false;
              this.getlist();
              this.row = {};
            }else{
               this.$message({
                message:res.returnMsg,
                type: "warning"
              });
            }
          })
        },
        // 模板下载
        onOut() {
            let url = process.env.VUE_APP_BASE_API + "/greenH5/greenWebmodul/rest/greenCar/exportCarModel";
            window.location.href = url;
        },
        //导入
        handlePreview() {
            this.formDate = new FormData();
            this.$refs.upload.clearFiles();
        },
        onchange(file) {
            this.fileList = [];
            this.formDate = new FormData();
            this.formDate.append("file", file.raw);
            this.fileList.push(file);
            let flag = false;
            if (this.fileList.length > 0) {
                flag = false;
                var Lastindex = this.fileList[0].name.lastIndexOf(".");
                if (
                this.fileList[0].name.slice(Lastindex) != ".xls" &&
                this.fileList[0].name.slice(Lastindex) != ".xlsx"
                ) {
                flag = false;
                this.$message({
                    message: "请选择正确的Excel格式",
                    type: "warning"
                });
                return false;
                } else {
                flag = true;
                }
            } else {
                flag = true;
            }

            this.bs64(file.raw).then(bs64 => {
                this.formDate = {
                file: bs64
                };
                if (flag) {
                // console.log(this.formDate,259)
                carImportByExcel(this.formDate)
                    .then(res => {
                    if (res.returnCode == "1") {
                        this.$message({
                        message: res.returnMsg,
                        type: "success"
                        });
                        console.log(res.returnData)
                        this.getlist();
                    } else {
                        this.$message({
                        message: res.returnMsg,
                        type: "warning"
                        });
                    }
                    })
                    .catch(err => {
                    console.log("error");
                    });
                }
            });
        },
        bs64(bs64) {
        var reader = new FileReader();
        reader.readAsDataURL(bs64);
        return new Promise(resolve => {
            reader.onload = function(e) {
            resolve(e.target.result);
            };
        });
        },
      }
    };
  </script>
  <style>
    .filter-container {
      width: 100%;
      height: auto !important;
      /* flex-basis: 120px; */
    }
  
    .block {
      display: inline-block;
    }
  
    .secondrow {
      margin-top: 16px;
    }
  
    .table {
      /* width:  */
      background: #eeeeee;
      padding: 10px;
      margin: 10px;
    }
  
    .upload-demo {
      margin: 0 -21px;
    }
  </style>
  