<template>
  <div class="componentsSty">
    <el-row style="width: 100%; height: 100%;">
      <el-col :span="24">
        <el-form :model="queryForm" ref="queryForm" :inline="true">
          <el-form-item label="车牌号:">
            <el-input v-model="queryForm.F_cph" placeholder="请输入车牌号" clearable></el-input>
          </el-form-item>
          <el-form-item label="车辆类型:">
            <el-select v-model="queryForm.F_cllx" placeholder="请选择车辆类型" clearable>
              <el-option
                v-for="item in cllxOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="证件编号:">
            <el-input v-model="queryForm.F_zjbh" placeholder="请输入证件编号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" v-if="rowData.fSsczid !==''" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-plus" @click="hanleOpt('add')"> 新增车辆
            </el-button>
            <el-button type="primary" icon="el-icon-refresh"
                       style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                       @click="handleReset" plain>重置
            </el-button>
            <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                       icon="el-icon-search" @click="handleSearch"> 查询
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="height: calc(100% - 95px);overflow: auto;">
        <el-table :data="tableData" border key="table"   ref="multipleTable"   style="width: 100%;" v-loading='loading'>
          <el-table-column prop="shopId" type="index" label="序号" width="80"  align="center">
          </el-table-column>
          <el-table-column prop="F_cph" label="车牌号" min-width="100" :show-overflow-tooltip='true' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_cph">{{scope.row.F_cph}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_cllx" label="车辆类型" min-width="100" :show-overflow-tooltip='true' align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_cllx">{{scope.row.F_cllx}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_clxh" label="车辆型号" min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_clxh">{{scope.row.F_clxh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_trsyrq" label="投入使用日期"  min-width="120"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_trsyrq">{{parseTime(scope.row.F_trsyrq,"{y}-{m}-{d}")}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_jsy" label="驾驶员"  min-width="120"  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_jsy">{{scope.row.F_jsy}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_lxdh" label="联系电话"  min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_lxdh">{{scope.row.F_lxdh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_zjbh"  min-width="120" label="证件编号" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_zjbh">{{scope.row.F_zjbh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_zjyxq" label="证件有效期"  min-width="120" :show-overflow-tooltip="true" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_zjyxq">{{parseTime(scope.row.F_zjyxq,"{y}-{m}-{d}")}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_sfzh" label="身份证号"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_sfzh">{{scope.row.F_sfzh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_clzp" label="车辆图片"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_clzp">
                {{scope.row.F_clzp.F_clzp}}
                 <el-image
                   style="width: 100px; height: 100px"
                   :src="scope.row.F_clzpUrl"
                   ></el-image>
              </span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_wtysgs" label="委托运输公司"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_wtysgs">{{scope.row.F_wtysgs}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_dlysxkz" label="道路运输许可证"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_dlysxkz">{{scope.row.F_dlysxkz}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_dlysxkzyxq" label="道路运输许可证有效期"  min-width="180" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_dlysxkzyxq">{{parseTime(scope.row.F_dlysxkzyxq,"{y}-{m}-{d}")}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_whpzh" label="危化品证号"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_whpzh">{{scope.row.F_whpzh}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_whpzhyxq" label="危化品证号有效期"  min-width="140" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_whpzhyxq">{{parseTime(scope.row.F_whpzhyxq,"{y}-{m}-{d}")}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="F_cjsj" label="创建时间"  min-width="160" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.F_cjsj">{{scope.row.F_cjsj}}</span>
              <span v-else>— —</span>
            </template>
          </el-table-column>
          <el-table-column prop="state" label="操作" fixed="right"  min-width="160" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="hanleOpt('edit',scope.row)">编辑</el-button>
              <el-button type="text" @click="hanleOpt('delete',scope.row)" style="color:red;">删除</el-button>
              <el-button type="text" @click="hanleOpt('GPS',scope.row)">绑定GPS</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <el-pagination
          style="float: right;margin-top: 10px;"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="pageParam.page"
          :page-sizes="[10,20,,50,100]"
          :page-size="pageParam.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog
      v-if="dialogParams.showDialogVisible"
      :title="dialogParams.title"
      :visible.sync="dialogParams.dialogVisible"
      width="60%"
      @close="handleDialogClose">
      <el-row>
        <el-form :model="dialogParams"  :rules="dialogRules" ref="dialogParams" label-width="160px">
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="车牌号:" prop="cph">
                <el-input v-model="dialogParams.cph" placeholder="请输入车牌号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆型号:" prop="clxh">
                <el-input v-model="dialogParams.clxh" disabled placeholder="请输入车辆型号" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="车辆类型:" prop="cllx">
                <el-select v-model="dialogParams.cllx"  style="width: 100%" placeholder="请选择车辆类型" clearable>
                  <el-option
                    v-for="item in cllxOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投入使用日期:" prop="trsyrq">
                <el-date-picker
                  v-model="dialogParams.trsyrq"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择投入使用日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="驾驶员:" prop="jsy">
                <el-input v-model="dialogParams.jsy" placeholder="请输入驾驶员" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话:" prop="lxdh">
                <el-input v-model="dialogParams.lxdh" placeholder="请输入联系电话" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="证件编号:" prop="zjbh">
                <el-input v-model="dialogParams.zjbh" placeholder="请输入证件编号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件有效期:" prop="zjyxq">
                <el-date-picker
                  v-model="dialogParams.zjyxq"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择投入使用日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="身份证号:" prop="sfzh">
                <el-input v-model="dialogParams.sfzh"  placeholder="请输入身份证号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="委托运输公司:" prop="wtysgs">
                <el-input v-model="dialogParams.wtysgs" placeholder="请输入委托运输公司" clearable></el-input>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="道路运输许可证:" prop="dlysxkz">
                <el-input v-model="dialogParams.dlysxkz" placeholder="请输入道路运输许可证" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="道路运输许可证有效期:" prop="dlysxkzyxq">
                <el-date-picker
                  v-model="dialogParams.dlysxkzyxq"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择道路运输许可证有效期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="12">
              <el-form-item label="危化品证号:" prop="whpzh">
                <el-input v-model="dialogParams.whpzh" placeholder="请输入危化品证号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="危化品证号有效期:" prop="whpzhyxq">
                <el-date-picker
                  v-model="dialogParams.whpzhyxq"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择危化品证号有效期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="24">
              <el-form-item label="备注:" prop="bz">
                <el-input v-model="dialogParams.bz" type="textarea" :row="2" placeholder="请输入备注" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="fileSty">
              <el-form-item label="车辆照片:">
                <el-upload
                  :file-list="pictureFileList"
                  :action="action"
                  list-type="picture-card"
                  multiple
                  :show-file-list="true"
                  :http-request="httpPictureRequest"
                  :before-upload="beforeAvatarUpload"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handlePictureCardRemove">
                  <i class="el-icon-plus"></i>
                  <div class="el-upload__text">上传图片</div>
                  <div class="el-upload__tip" slot="tip">可上传多张</div>
                  <div class="el-upload__tip" slot="tip">支持：jpg/png/gif/ico/jpeg/gpg/gif/jpeg，不超过6MB，</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleDialogClose">取 消</el-button>
          <el-button type="primary" @click="handleSubmit('dialogParams')">确 定</el-button>
        </span>
    </el-dialog>
    <car-bind-gps v-if="showCarBindGpsVisible" ref="carBindGps"></car-bind-gps>
  </div>
</template>

<script>
import {deleteCarPort, addOrEditCarPort, carTableDataPort, carTypeNumPort, equipmentNumPort} from '@/api/regionalManage'
import moment from "moment";
import {getDictList} from "@/api/dict";
import req from "@/utils/request";
import carBindGps from "@/views/pages/regionalManage/components/carBindGps";

export default {
  name: "carManage",
  components:{
    carBindGps
  },
  props:{
    rowData:{
      type:Object,
      default:()=>{}
    }
  },
  created() {
    this.action = `${window.context.portal}/system/file/v1/fileUpload`;
  },
  async mounted() {
    await this.getDataList();
    await this.getInitOptions();
  },
  data(){
    return {
      filterText:'',
      pictureFileList:[],
      action:'',
      showResetDialog:false,
      showQrCodeVisible:false,
      showDialog:false,
      showCarBindGpsVisible:false,
      dialogParams:{
        showDialogVisible:false,
        cjr:'',
        cjsj:'',
        gxsj:'',
        gxr:'',
        title:'新增车辆',
        id_:'',
        czID:'',
        czmc: '',
        qyID: '',
        qymc: '',
        dialogVisible:false,
        cph:'',
        cllx:'',
        clxh:'',
        trsyrq:'',
        wtysgs:'',
        jsy:'',
        lxdh:'',
        zjbh:'',
        zjyxq:'',
        sfzh:'',
        bz:'',
        dlysxkz:'',
        dlysxkzyxq:'',
        whpzh:'',
        whpzhyxq:'',
        clzp:'',
        dialogType:'',
        form_data_rev_:''
      },
      dialogRules:{
        cph:[
          {required:true,message:'请输入车牌号',trigger:'blur'}
        ],
        cllx:[
          {required:true,message:'请选择车辆类型',trigger:'change'}
        ],
        clxh:[
          {required:true,message:'请输入车辆型号',trigger:'blur'}
        ],
        jsy:[
          {required:true,message:'请输入驾驶员',trigger:'blur'}
        ],
        lxdh:[
          {required:true,message:'请输入联系电话',trigger:'blur'}
        ],
        zjbh:[
          {required:true,message:'请输入证件编号',trigger:'blur'}
        ]
      },
      queryForm:{
        F_cph:'',
        F_cllx:'',
        F_zjbh:'',
        orgId:''
      },
      pageParam:{
        page:1,
        size:10,
        total:0
      },
      loading:false,
      tableData:[],
      cllxOptions:[],//车辆型号数据

    }
  },
  methods:{
    //查询车辆类型的字典
    async getInitOptions(){
      let params = [{
        key:'NAME_',
        value:'车辆类型'
      }];
      // let paramsJson = JSON.stringify(params)
      await getDictList(params).then((res)=>{
        console.log('打印res====',res);
        let { rows } = res;
        let optionsArray = rows.length>0?rows.map((item)=>{
          return {
            label:item.NAME_,
            value:item.NAME_
          }
        }):[];
        this.cllxOptions = optionsArray;
      })
    },
    //删除图片
    handlePictureCardRemove(file, fileList) {
      console.log(file, this.fileList);
      const index = this.pictureFileList.findIndex((item) => {
        return item.uid === file.uid
      })
      this.pictureFileList.splice(index, 1);
    },
    //预览车辆图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 车辆图片自定义上传
    async httpPictureRequest(val){
      console.log('打印val',val);
      const formData = new FormData();
      formData.append('files', val.file);
      let response = await req.post(
        window.context.portal + '/system/file/v1/fileUpload',
        formData
      )
      if (response.success) {
        console.log('打印response',response);
        this.$message.success('上传成功');
        let imgUrl = response.fileId;
        if (response.fileId) {
          imgUrl = await this.$getPhotoUrl(response.fileId);
        }
        this.pictureFileList.push({
          fileId:response.fileId,
          url:imgUrl,
          fileObj: JSON.stringify(response)
        });
      }
    },
    beforeAvatarUpload(file){
      console.log('打印beforeAvatarUpload===>file,file',file)
      let imgType = ["jpg", "jpeg", "png"];
      let judge = false; // 后缀
      let type = file.name.split(".")[file.name.split(".").length - 1];
      for (let k = 0; k < imgType.length; k++) {
        if (imgType[k].toUpperCase() === type.toUpperCase()) {
          judge = true;
          break;
        }
      }
      // 验证图片格式
      if (!judge) {
        this.$message.error("图片格式只支持：JPG、JPEG、PNG");
        return false;
      }
      const isLt1M = file.size / 1024 / 1024;
      if (isLt1M > 1) {
        this.$message.error("上传头像图片大小不能超过1MB");
        return false;
      }
      return true;
    },
    //获取设备编号的数值
    async getCarTypeNum(){
      await carTypeNumPort().then((res)=>{
        const { value } = res;
        this.dialogParams.clxh = value;
        console.log('打印获取车辆型号res====》',res);
      })
    },
    //查询列表事件
    //获取table表格数据
    async getDataList(){
      let params ={
        pageBean:{
          page:this.pageParam.page,
          pageSize:this.pageParam.size,
          showTotal:true
        },
        querys:[]
      }
      if(this.queryForm.F_cph){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_cph',
          relation:'AND',
          value:this.queryForm.F_cph
        })
      }
      if(this.queryForm.F_cllx){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_cllx',
          relation:'AND',
          value:this.queryForm.F_cllx
        })
      }
      if(this.queryForm.F_zjbh){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_zjbh',
          relation:'AND',
          value:this.queryForm.F_zjbh
        })
      }
      if(this.rowData.fSsczid){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_ssczID',
          relation:'AND',
          value:this.rowData.fSsczid
        })
      }
      if(!this.rowData.fSsczid&&this.rowData.qyID){
        params.querys.push({
          group:'main',
          operation:'LIKE',
          property:'F_ssqyID',
          relation:'AND',
          value:this.rowData.qyID
        })
      }
      this.loading = true;
      await carTableDataPort(params).then((res)=>{
        const { rows,total } = res;
        console.log('打印rows',rows)
        rows.map(async (item)=>{
          console.log('待item',item);
          let sfzghImg  = item.F_clzp.length>1?JSON.parse(item.F_clzp):'';
          let sfzghImgUrl = await this.$getPhotoUrl(sfzghImg[0].fileId);
          console.log('打印sfzghImgUrl',item,sfzghImg);
          item.F_clzpUrl = sfzghImgUrl[0]
        });
        this.tableData = rows;
        this.pageParam.total = total;
        setTimeout(()=>{
          this.loading = false;
        },500)
      })
    },
    //重置按钮事件
    handleReset(){
      this.queryForm.F_cph ='';
      this.queryForm.F_cllx ='';
      this.queryForm.F_zjbh ='';
      this.pageParam.page = 1;
      this.handleSearch();
    },
    //查询按钮事件
    handleSearch(){
      this.getDataList();
    },
    //新增用户事件
    handleAdd(){
      this.showDialog = true;
      this.$nextTick(()=>{
        this.$refs.showDialog.open('add');
      })
    },
    //分页中页数跳转事件
    handleCurrentChange(val){
      this.pageParam.page = val;
      this.handleSearch();
    },
    //分页中size改变的界面跳转事件
    handleSizeChange(val){
      this.pageParam.size = val;
      this.handleSearch();
    },
    //提交事件
    async handleSubmit(formName){
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let filePictureList = this.pictureFileList.map(item => JSON.parse(item.fileObj));
          let cardUrlList = JSON.stringify(filePictureList);
          let params = {
            ssqymc:this.dialogParams.qymc?this.dialogParams.qymc:'',
            ssqyID:this.dialogParams.qyID?this.dialogParams.qyID:'',
            ssczID:this.dialogParams.czID?this.dialogParams.czID:'',
            ssczmc:this.dialogParams.czmc?this.dialogParams.czmc:'',
            cph:this.dialogParams.cph?this.dialogParams.cph:'',
            cllx:this.dialogParams.cllx?this.dialogParams.cllx:'',
            clxh:this.dialogParams.clxh?this.dialogParams.clxh:'',
            trsyrq:this.dialogParams.trsyrq?this.dialogParams.trsyrq:'',
            wtysgs:this.dialogParams.wtysgs?this.dialogParams.wtysgs:'',
            jsy:this.dialogParams.jsy?this.dialogParams.jsy:'',
            lxdh:this.dialogParams.lxdh?this.dialogParams.lxdh:'',
            zjbh:this.dialogParams.zjbh?this.dialogParams.zjbh:'',
            zjyxq:this.dialogParams.zjyxq?this.dialogParams.zjyxq:'',
            sfzh:this.dialogParams.sfzh?this.dialogParams.sfzh:'',
            bz:this.dialogParams.bz?this.dialogParams.bz:'',
            dlysxkz:this.dialogParams.dlysxkz?this.dialogParams.dlysxkz:'',
            whpzh:this.dialogParams.whpzh?this.dialogParams.whpzh:'',
            whpzhyxq:this.dialogParams.whpzhyxq?this.dialogParams.whpzhyxq:'',
            clzp:cardUrlList,
            cjr:this.dialogParams.cjr?this.dialogParams.cjr:'',
            cjsj:this.dialogParams.cjsj?this.dialogParams.cjsj:'',
            gxr:'',
            gxsj:''
          }
          if(this.dialogParams.dialogType == 'edit'){
            this.dialogParams.gxsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
            params = {
              ...params,
              id_:this.dialogParams.id_?this.dialogParams.id_:'',
              form_data_rev_:this.dialogParams.form_data_rev_?this.dialogParams.form_data_rev_:0,
              gxr: this.dialogParams.gxr?this.dialogParams.gxr:'',
              gxsj: this.dialogParams.gxsj?this.dialogParams.gxsj:'',
            }
            this.submitAddOrEditEquipment(params);
          }else{
            this.dialogParams.cjsj  = moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
            this.dialogParams.gxr = this.$store.state.user.username?this.$store.state.user.username:'';
            params = {
              ...params,
              cjsj: this.dialogParams.cjsj?this.dialogParams.cjsj:'',
              cjr: this.dialogParams.cjr?this.dialogParams.cjr:'',
            }
            this.submitAddOrEditEquipment(params);
          }
        } else {
          return false;
        }
      });
    },
    //提交编辑设备接口事件
    async submitAddOrEditEquipment(params){
      await addOrEditCarPort(params).then((res)=>{
        console.log('打印新增编辑的res====>',res);
        const { code } = res;
        if(code == 200){
          this.dialogParams.dialogVisible = false;
          this.dialogParams.showDialogVisible = false;
          this.handleSearch();
        }
      })
    },
    //操作栏按钮
    async hanleOpt(type,row){
      console.log('打印row=====>',row);
      this.dialogParams.dialogType= type;
      switch (type){
        case 'add':
          this.dialogParams.czID = this.rowData.fSsczid;
          this.dialogParams.czmc = this.rowData.czmc;
          this.dialogParams.qyID = this.rowData.qyID;
          this.dialogParams.qymc = this.rowData.qymc;
          this.dialogParams.id_ = '';
          this.dialogParams.cph = '';
          this.dialogParams.cllx = '';
          this.dialogParams.clxh = '';
          this.dialogParams.trsyrq ='';
          this.dialogParams.wtysgs = '';
          this.dialogParams.jsy = '';
          this.dialogParams.lxdh = '';
          this.dialogParams.zjbh = '';
          this.dialogParams.zjyxq = '';
          this.dialogParams.sfzh = '';
          this.dialogParams.bz = '';
          this.dialogParams.dlysxkz = '';
          this.dialogParams.dlysxkzyxq = '';
          this.dialogParams.whpzh = '';
          this.dialogParams.whpzhyxq = '';
          this.pictureFileList = [];
          this.dialogParams.cjr = this.$store.state.user.username?this.$store.state.user.username:'';
          this.dialogParams.cjsj = '';
          this.dialogParams.title='新增车辆';
          await this.getCarTypeNum();
          break;
        case 'edit':
          this.dialogParams.id_ = row.ID_;
          this.dialogParams.title='编辑支付';
          this.dialogParams.cph = row.F_cph;
          this.dialogParams.cllx = row.F_cllx;
          this.dialogParams.clxh = row.F_clxh;
          this.dialogParams.trsyrq = row.F_trsyrq;
          this.dialogParams.wtysgs = row.F_wtysgs;
          this.dialogParams.jsy = row.F_jsy;
          this.dialogParams.lxdh = row.F_lxdh;
          this.dialogParams.zjbh = row.F_zjbh;
          this.dialogParams.zjyxq = row.F_zjyxq;
          this.dialogParams.sfzh = row.F_sfzh;
          this.dialogParams.bz = row.F_bz;
          this.dialogParams.dlysxkz = row.F_dlysxkz;
          this.dialogParams.dlysxkzyxq = row.F_dlysxkzyxq;
          this.dialogParams.whpzh = row.F_whpzh;
          this.dialogParams.whpzhyxq = row.F_whpzhyxq;
          let cardPictureUrlList = row.F_clzp?JSON.parse(row.F_clzp):[];
          let cardUrlList = [];
          cardPictureUrlList.map(async(item)=>{
            let imgUrl = await this.$getPhotoUrl(item.fileId);
            cardUrlList.push(({
              url:imgUrl,
              fileObj: JSON.stringify(item)
            }))
          });
          this.pictureFileList = cardUrlList;
          this.dialogParams.qymc = row.F_qymc;
          this.dialogParams.qyID = row.F_qyID;
          this.dialogParams.czmc = row.F_czmc;
          this.dialogParams.czID = row.F_czID;
          this.dialogParams.cjsj = row.F_cjsj;
          this.dialogParams.cjr = row.F_cjr;
          this.dialogParams.gxr = row.F_gxr;
          this.dialogParams.gxsj = row.F_gxsj;
          this.dialogParams.form_data_rev_ = row.F_form_data_rev_;
          break;
        case 'delete':
          this.$confirm('确定是否删除该设备？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(async() => {
            await deleteCarPort({ids:row.ID_}).then((res)=>{
              this.handleSearch();
            })
          })
          break;
        case 'GPS':
          this.showCarBindGpsVisible = true;
          this.$nextTick(()=>{
            this.$refs.carBindGps.open(row);
          })
          break;
      }
      if(!this.rowData.fSsczid && type == 'add'&& type !=='GPS'){
        this.$message.warning('请选择厂站!')
        return
      }
      if(type !== 'delete' && type !=='GPS'){
        this.dialogParams.showDialogVisible = true;
        this.$nextTick(()=>{
          this.dialogParams.dialogVisible = true;
        })
      }
    },
    //弹窗关闭
    handleDialogClose(){
      this.$refs.dialogParams.resetFields();
      this.dialogParams.dialogVisible = false;
      this.dialogParams.showDialogVisible = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.componentsSty{
  width: calc(100% - 30px);
  height: 100%;
  .fileSty{
    ::v-deep.el-upload--picture-card{
      position: relative;
    }
    .el-upload__text{
      position: absolute;
      top: 20px;
      left: 45px;
      font-family: '苹方 中等', '苹方', sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #98A4B4;
    }
  }
}

</style>
