<template>
  <div class="charge-box">
    <div class="charge-tools">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="车牌号:">
          <el-input
            placeholder="请输入车牌号"
            v-model.trim="queryParams.vehiclePlate"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="来源:">
          <el-select
            v-model="queryParams.source"
            clearable
            placeholder="请选择来源"
          >
            <el-option label="云端" value="1"></el-option>
            <el-option label="站控" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" class="serch actve"
            >查询</el-button
          >
          <el-button type="primary" @click="resetForm" class="serch"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="charge-table">
      <div class="adduser">
        <el-button type="primary" class="addbtn" @click="handleAddCar"
          >新增</el-button
        >
      </div>
      <div class="charge-table-bottom">
        <el-table
          :data="datalist"
          :header-cell-style="{
            background: '#1d283e',
            borderColor: '#2f3c86',
            height: '36px',
            lineHeight: '36px',
            color: 'white',
            fontSize: '16px',
          }"
          stripe
          fit
          :height="tableheight"
          style="width: 100%">
          <el-table-column prop="vehiclePlate" label="车牌号">
          </el-table-column>
          <el-table-column prop="vehicleVin" label="车辆识别码">
          </el-table-column>
          <el-table-column prop="modelDistance" label="电池距离(mm)">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" sortable>
          </el-table-column>
          <el-table-column prop="modelName" label="来源" width="160"> 
              <template slot-scope="{ row }">
                  {{ row.source===0?'站控':'云端' }}
              </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope" v-if="scope.row.source===0">
              <el-button
                type="primary"
                class="handle"
                size="small"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
          <!-- <el-table-column label="状态" align="center">
            <template slot-scope="{ row }">
              <el-badge
                is-dot
                class="item"
                :class="{ disable: row.state === 0 }"
                >{{ row.state === 0 ? "停用" : "启用" }}</el-badge
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="scope">
              <el-button
                type="primary"
                class="handle"
                size="small"
                @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="primary"
                class="handle"
                size="small"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <div class="pageblock">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!--新增车辆弹窗-->
    <div class="rolemanage">
      <el-dialog
        :title="dialogType==='edit'?'编辑':'新增'"
        :visible.sync="dialogCarVisible"
        :destroy-on-close="true"
        @close="dialogClose"
      >
        <el-form
          ref="ruleForm"
          v-loading="loading"
          :model="formData"
          :rules="rules"
        >
          <el-form-item label="车牌号：" :label-width="formLabelWidth" prop="CarPlate">
            <el-input v-model.trim="formData.CarPlate" autocomplete="off" placeholder="请输入车牌号码" />
          </el-form-item>
          <el-form-item label="车辆识别码：" :label-width="formLabelWidth" prop="CarVin">
            <el-input v-model.trim="formData.CarVin" autocomplete="off" placeholder="请输入车辆识别码" />
          </el-form-item>
          <el-form-item label="电池距离：" :label-width="formLabelWidth" prop="CarDistance">
            <el-input v-model.number="formData.CarDistance" :min="1" maxlength="4" autocomplete="off" placeholder="请输入电池距离(mm)" />
          </el-form-item>
          <!-- <el-form-item label="状态：" :label-width="formLabelWidth">
            <el-select v-model="formData.source" placeholder="请选择状态">
              <el-option label="云端" value="1" />
              <el-option label="站控" value="0" />
            </el-select>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="exit" @click="dialogCarVisible = false">取 消</el-button>
          <el-button type="primary" class="save" @click="AddCarinfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--新增车辆弹窗结束-->
  </div>
</template>
  
  <script>
import { vehicleList,SaveVehicle,EditVehicle,DeleteVehicle} from "@/api/car";
import "../permission.scss";
export default {
  name: "CarManage",
  components: {},
  data() {
    return {
      options: [
        {
          value: "01号",
          label: "01号",
        },
        {
          value: "02号",
          label: "02号",
        },
        {
          value: "03号",
          label: "03号",
        },
        {
          value: "04号",
          label: "04号",
        },
        {
          value: "05号",
          label: "05号",
        },
      ],
      datalist: [],
      total: 0, //总条数，
      tableheight: 0, //表格高度设置
      dialogCarVisible: false, // 弹窗显示
      formLabelWidth: '120px',
      // 新增账号弹窗
      formData: {
        CarDistance: undefined,
        CarPlate: undefined,
        CarVin: undefined,
        // state: '1',
        // source:undefined,
        id:0,
      },
      // 表单校验
      rules: {
        CarPlate: [
          { required: true, message: '车牌号不能为空', trigger: 'blur' },
          { min: 4, max: 16, message: '长度在 4 到 16 个字符', trigger: 'blur' }
        ],
        CarVin: [
          { required: true, message: '车辆识别码不能为空', trigger: 'blur' },
          { min: 10, max: 30, message: '长度为10-30个字符', trigger: 'blur' }
        ],
        CarDistance: [
          { required: true, message: '电池距离不能为空', trigger: 'blur' },
          { type: 'number', message: '电池距离必须为数字值'},
        ]
      },
      formLabelWidth: '120px',
      // 新增账号弹窗结束
      dialogType: 'new', // 按钮类型(new、edit)
      loading: false,
      //查询参数
      queryParams: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        vehiclePlate: undefined, //车牌号
        source: undefined, //来源
        orderByField: undefined, //排序字段
        orderByWays: "desc", //排序方式
      },
    };
  },
  mounted() {
    this.vehicleList();
    this.onLoadHeight();
    this.changeWindow();
  },
  methods: {
    //车辆列表，
    vehicleList() {
      const params = this.queryParams;
      vehicleList(params).then((res) => {
        this.datalist = res.data.records;
        this.total = res.data.total;
      });
    },
    /**分页下一页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.vehicleList();
    },
    /**分页选择页数 */
    handleCurrentChange(val) {
      this.queryParams.page = val;
      this.vehicleList();
    },
    //搜索
    handleQuery() {
      this.vehicleList();
    },
    //搜索重置
    resetForm() {
      this.queryParams.vehiclePlate = undefined;
      this.queryParams.source = undefined;
      this.vehicleList();
    },
    // 添加车辆、编辑车辆
    AddCarinfo() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 添加车辆
          if (this.dialogType === 'new') {
            const params={
              modelDistance:this.formData.CarDistance,
              vehiclePlate:this.formData.CarPlate,
              vehicleVin:this.formData.CarVin,
              source:0
            }
            SaveVehicle(params).then(res => {
              if (res.code === 0) {
                this.loading = false
                this.dialogCarVisible = false
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                })
                this.vehicleList()
              } else {
                this.loading = false
                return this.$message.error(res.msg)
              }
            })
          }
          // 修改车辆
          else {
            const params={
              modelDistance:this.formData.CarDistance,
              vehiclePlate:this.formData.CarPlate,
              vehicleVin:this.formData.CarVin,
              state:this.formData.state*1,
              id:this.formData.id
            }
            EditVehicle(params).then(res => {
              if (res.code === 0) {
                this.loading = false
                this.dialogCarVisible = false
                this.$message({
                  type: 'success',
                  message: '操作成功！'
                })
                this.vehicleList()
              } else {
                this.loading = false
                return this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },
    // 添加、编辑、
    handleAddCar() {
      this.dialogType = "new";
      this.dialogCarVisible = true;
    },
    handleEdit(row) {
      this.formData.CarDistance = row.modelDistance;
      this.formData.CarPlate = row.vehiclePlate;
      this.formData.CarVin = row.vehicleVin;
      this.formData.id = row.id;
      this.formData.state=row.state+'';
      this.dialogType = "edit";
      this.dialogCarVisible = true;
    },
    //清空表单
    dialogClose(){
      this.formData.CarDistance = undefined;
      this.formData.CarPlate = undefined;
      this.formData.CarVin = undefined;
      this.formData.id = 0;
      this.formData.state='1';
    },
    //删除车辆
    handleDelete(id) {
      this.$confirm("删除数据将丢失,请确认是否删除", "确认删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await DeleteVehicle(id);
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          this.vehicleList();
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
  <style lang="scss" scoped>
.adduser {
  margin-bottom: 20px;
  .addbtn {
    background-color: #91fdb9;
    color: #111827;
    border: none;
    font-size: 15px;
    font-weight: 600;
    height: 40px;
    width: 70px;
  }
  .addbtn:hover {
    background-color: #69b889;
    border-color: #69b889;
    color: white;
  }
}
</style>