// 货主信息
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14" style="height: 45px">
            <!-- <el-button type="primary">添加</el-button> -->
          </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input class='find' placeholder="可按货主姓名、账号查找" v-model="searchkeyWord" @keyup.enter.native="find"
                clearable @change="find"></el-input>
              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
                  src="../../../public/img/sousuo.png" /></el-button>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="search_btn">
              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
                @click="searchBtn('')">
                全部
              </div>
              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
                待审核
              </div>
              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
                已通过
              </div>
              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
                已驳回
              </div>
              <div :class="search == 4 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(4)">
                已过期
              </div>
              <div :class="search == 5 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(5)">
                未认证
              </div>
              <div :class="search == 6 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(6)">
                已注销
              </div>
              <div :class="search == 7 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(7)">
                已禁用
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="68vh" border
        highlight-current-row>
        <el-table-column type="index" width="60"  label="序号" align="center">
            <template scope="scope">
                <span>{{scope.$index + 1}}</span>
                <!-- <span v-else>{{scope.$index}}</span> -->
            </template>
        </el-table-column>
        <el-table-column prop="name" label="货主姓名" min-width="130"></el-table-column>
        <el-table-column prop="phone" label="账号" min-width="110"></el-table-column>
        <el-table-column prop="cardNumber" label="身份证号" min-width="165"></el-table-column>
        <el-table-column prop="shipmentsNumber" label="发运次数"></el-table-column>
        <el-table-column prop="favorableRate" label="好评率(%)"></el-table-column>
        <el-table-column prop="accumulatedFreight" label="累计支付运费（元）" min-width="148"></el-table-column>
        <el-table-column prop="amountMoney" label="代理身份">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" width="200" trigger="hover">
              <div style="white-space: pre-wrap;word-break: break-all;">{{scope.row.proxyIdentity? scope.row.proxyIdentity: '暂无代理企业'}}</div>
              <span class="btn_css" slot="reference">企业</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="advancePayment" label="垫付比例(%)" width="100px">
          <template slot-scope="scope">
            <div class="advancePayment-style">
              <el-input placeholder="0" v-model="scope.row.advancePayment"></el-input>
              <i class="el-icon-edit" style="margin-top: 8px" @click="editRatio(scope.row)"></i>
              <!-- <span class="btn_css" @click="userSee(scope.row)">查看</span> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chargeProportion" label="收费比例(%)" width="100px">
          <template slot-scope="scope">
            <div class="advancePayment-style">
              <el-input placeholder="0" v-model="scope.row.chargeProportion"></el-input>
              <i class="el-icon-edit" style="margin-top: 8px" @click="editchargeProportion(scope.row)"></i>
              <!-- <span class="btn_css" @click="userSee(scope.row)">查看</span> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="账户" min-width="180">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="click" @show="getBillList(scope.row.commonId)">
              <div v-if='billList.length>0' class="bill-content">
                <div class="bill-item" v-for="(item, index) in billList" :key="index">
                  <div class="row1">
                    <div class="left">
                      {{ item.types }}
                    </div>
                    <div class="right">{{ item.amountMoney }}元</div>
                  </div>
                  <div class="row1">
                    <div class="left">
                      <img v-if='item.rechargeUrl' style='width:20px;height:20px;' @click="enlarge(item.rechargeUrl)" :src="item.rechargeUrl" alt="">
                    </div>
                    <div class="right">{{ item.createDate }}</div>
                  </div>
                  <!-- <div class="row2">
                    <div class="left">
                      支付预付款
                    </div>
                    <div class="right">-1000</div>
                  </div> -->
                </div>
              </div>
              <div v-else>暂无数据</div>
              <!-- <el-button slot="reference">账单</el-button> -->
              <span slot="reference" class="btn_css" style="margin-right:20px">账单</span>
            </el-popover>
            <!-- <el-button @click="seeInfo(scope.row)">信息</el-button> -->
            <span class="btn_css" @click="seeInfo(scope.row)">信息</span>
          </template>
        </el-table-column>
        <el-table-column prop="authenticationStatus" label="身份证">
          <template slot-scope="scope">
            <span class="btn_css" @click="IDLook(scope.row)">查看</span>
          </template>
        </el-table-column>
        <el-table-column prop="backStageStatus" label="状态"></el-table-column>
        <el-table-column label="操作" min-width="350">
          <template slot-scope="scope">
            <el-link target="_blank" @click="adopt(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.authenticationStatus != '审核中'">通过</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="reject(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.authenticationStatus != '审核中'">驳回</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="recharge(scope.row)" type="primary" :underline="false"
              :disabled="!scope.row.passOnce">充值</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="newInfo(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.authenticationStatus == '审核中'">消息</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
              <span class="btn_css">•••</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :disabled="
                  scope.row.authenticationStatus == '已禁用' &&
                  scope.row.authenticationStatus != '审核中'
                "><span @click="switchChange(scope.row, '1')">禁用</span></el-dropdown-item>
                <el-dropdown-item :disabled="
                  scope.row.authenticationStatus != '已禁用' &&
                  scope.row.authenticationStatus != '审核中'
                "><span @click="switchChange(scope.row, '2')">启用</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <el-dialog :close-on-click-modal="false" title="身份信息" :visible.sync="userInfo" width="500px"
      :before-close="userInfoClose">
      <div class="user">
        <!-- .user -->
        <div class="title_css">姓名</div>
        <div class="name_css">{{ idSee.name }}</div>
        <div class="title_css">身份证号</div>
        <div class="name_css">{{ idSee.cardNumber }}</div>
        <div class="title_css">有效期</div>
        <div class="name_css">
          {{ idSee.cardValidityDate }}
          <span style="color: #ef4c33; margin-left: 10px" v-if="false">已过期</span>
        </div>
        <div class="title_css">身份证人像面</div>
        <img :src="idSee.cardAddressUrl" class="user_item" @click="enlarge(idSee.cardAddressUrl)" />
        <div class="title_css">身份证国徽面</div>
        <img :src="idSee.cardBackAddressUrl" class="user_item" @click="enlarge(idSee.cardBackAddressUrl)" />
        <div class="form_btn">
          <el-button @click="userInfoClose">关闭</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="驳回认证" :visible.sync="rejectInfo" width="400px"
      :before-close="rejectClose">
      <div>
        <!-- <div><span class="sign">*</span>选择驳回原因</div> -->
        <div class="form_css">
          <el-form ref="form" :model="form" label-width="80px">
            <!-- <el-checkbox-group v-model="form.checkList">
							<el-checkbox label="证件照片不清晰"></el-checkbox>
							<el-checkbox label="证件照片上传错误"></el-checkbox>
							<el-checkbox label="身份信息填写错误"></el-checkbox>
							<el-checkbox label="证件信息填写错误"></el-checkbox>
							<el-checkbox label="其他"></el-checkbox>
						</el-checkbox-group> -->
            <div style="margin-bottom: 20px">驳回原因描述（必填）</div>
            <el-input type="textarea" :rows="3" resize="none" placeholder="输入驳回原因，6-100个字" maxlength="100"
              v-model="form.rejectReasonDescription"></el-input>
            <div class="form_btn">
              <el-button @click="rejectClose">取消</el-button>
              <el-button @click="submit" type="primary">确定</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="发送信息" :visible.sync="sendInfo" width="400px"
      :before-close="sendInfoClose">
      <div class="Info_css">
        <div class="Info_title">标题</div>
        <div class="Info_item">
          <el-input placeholder="输入消息标题，不超过4-20个字。" v-model="Info.newsTitle"></el-input>
        </div>
        <div class="Info_title">内容</div>
        <div class="Info_item">
          <el-input type="textarea" :rows="3" resize="none" placeholder="消息内容10-100字" maxlength="50"
            v-model="Info.newsContent"></el-input>
        </div>
        <div class="Info_btn">
          <el-button @click="sendInfoClose">取消</el-button>
          <el-button @click="submitInfo" type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--充值弹窗-->
    <el-dialog :close-on-click-modal="false" title="充值" :visible.sync="rechargeShow" width="500px"
      :before-close="rechargeClose">
      <div class="recharge">
        <div class="recharge_css">
          <div class="title_css">货主 :</div>
          <div class="recharge_css">{{ rechargeData.name }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">金额(元) :</div>
          <div class="recharge_css" style="margin: -24px 32px 44px 69px;">
            <el-input type="number" @mousewheel.native.prevent v-model="rechargeData.amountMoney" placeholder="输入充值金额"
              maxlength="100" size="small">
            </el-input>
          </div>
        </div>
        <div class="pay_css">
          <div class="title_css">流水号:</div>
          <div class="recharge_css" style="margin: -24px 32px 44px 69px;">
            <el-input type="text" @mousewheel.native.prevent v-model="rechargeData.serialNumber" placeholder="输入流水号"
              maxlength="30" size="small">
            </el-input>
          </div>
        </div>
        <div class="pay_css">
          <div class="title_css">银行卡号:</div>
          <div class="recharge_css" style="margin: -24px 32px 44px 69px;">
            <el-input type="text" @mousewheel.native.prevent v-model="rechargeData.bankCard" placeholder="输入银行卡号"
              maxlength="30" size="small">
            </el-input>
          </div>
        </div>
        <div class="recharge_css">
          <div class="title_css">上传截图 :</div>
          <div class="upLoad">
            <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div style="text-align: center; margin-top: 20px">
          <el-button @click="rechargeSubmit()">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 账户信息 -->
    <el-dialog :close-on-click-modal="false" title="账户信息" :visible.sync="payInfo" width="500px"
      :before-close="payClose">
      <div v-if='paySee' class="pay">
        <div class="pay_css">
          <div class="title_css">收款人：</div>
          <div class="name_css">{{ paySee.cardholderName }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">账号：</div>
          <div class="id_css">{{ paySee.bankCard }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">开户行：</div>
          <div class="pay_name">{{ paySee.bankDeposit }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">开户支行：</div>
          <div class="pay_name">{{ paySee.bankDepositBranch }}</div>
        </div>
      </div>
      <!-- <img
          :src="paySee.payeeAddressUrl"
          class="user_item"
          @click="enlarge(paySee.payeeAddressUrl)"
        /> -->
    </el-dialog>
    <el-dialog title="禁用天数" :close-on-click-modal='false' :visible.sync="forbiddenshow" width="400px" :before-close="forbiddenshowClose">
       <el-form ref="form" label-width="80px">
            <el-form-item label="禁用天数">
              <el-input placeholder="输入禁用天数，当天起算" v-model="disabledDays"></el-input>
            </el-form-item>
            <div class="form_btn">
              <el-button @click="forbiddenshowClose">取消</el-button>
              <el-button @click="submitforbidden" type="primary">确定</el-button>
            </div>
          </el-form>
    </el-dialog>
    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index: 9999" />
  </div>
</template>
<script>
import {
  getList,
  toExamine,
  postNews,
  getBillList,
  editInfo,
  getInfo,
  theRecharge,
  forbidden
} from '@/api/cargoOwnerManagement';

 import {
    uploadPath
  } from '@/api/officialWebsiteManagement'
export default {
  components: {
    'el-image-viewer': () =>
      import('element-ui/packages/image/src/image-viewer'),
  },
  data() {
    return {
      uploadPath,
      billList: [],
      tableData: [],
      //分页
      searchkeyWord: '',
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      search: '',
      addressUrl: [],
      disabled: false,
      userInfo: false,
      rejectInfo: false,
      form: {},
      Info: {},
      sendInfo: false,
      idSee: {},
      //图片预览
      srcList: [],
      imgsVisible: false,
      //账户信息
      payInfo: false,
      paySee: {},
      rechargeShow: false,
      imageUrl: '',
      rechargeData: {bankCard:''},
      forbiddenshow:false,
      disabledDays:'',
      forbiddendata:{},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    forbiddenshowClose(){
        this.disabledDays=''
        this.forbiddenshow=false
      },
    seeInfo(val) {
      this.listLoading = true;
      getInfo({
        commonId: val.commonId
      })
        .then((response) => {
          if (response.code == 200) {
            this.paySee = response.data
            if (!this.paySee) {
              this.$message.error('暂无数据！')
              return
            }
            this.payInfo = true;
            
          }
        })
        .catch(() => {
          this.listLoading = false;
        });

    },
    payClose() {
      this.payInfo = false;
    },
    closeImgViewer() {
      this.srcList = [];
      this.imgsVisible = false;
    },
    enlarge(url) {
      this.imgsVisible = true;
      this.srcList.push(url);
    },
    IDLook(val) {
      //查看身份证
      this.idSee = val;
      this.userInfo = true;
    },
    editRatio(val) {
      this.$confirm('确定修改该货主的垫付比例？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 收费比例/100
        if (val.chargeProportion) {
          val.chargeProportion = (val.chargeProportion / 100).toFixed(2)
        }
        //垫付比例
        if (val.advancePayment) {
          val.advancePayment = (val.advancePayment / 100).toFixed(2)
        }
        this.listLoading = true;
        editInfo(val)
          .then((response) => {
            if (response.code == 200) {
              this.$notify({
                title: '成功',
                message: '修改成功！',
                type: 'success',
              });
              this.getList();
            }
          })
          .catch(() => {
            this.listLoading = false;
          });
      });
    },
    editchargeProportion(val) {
      this.$confirm('确定修改该货主的收费比例？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 收费比例/100
        if (val.chargeProportion) {
          val.chargeProportion = (val.chargeProportion / 100).toFixed(2)
        }
        //垫付比例
        if (val.advancePayment) {
          val.advancePayment = (val.advancePayment / 100).toFixed(2)
        }
        this.listLoading = true;
        editInfo(val)
          .then((response) => {
            if (response.code == 200) {
              this.$notify({
                title: '成功',
                message: '修改成功！',
                type: 'success',
              });
              this.getList();
            }
          })
          .catch(() => {
            this.listLoading = false;
          });
      });

    },
    getBillList(id) {
      let _obj = {
        commonId: id,
        pageSize: 999,
        currentPage: 1,
      };
      getBillList(_obj)
        .then((response) => {
          this.billList = response.data.records;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getList() {
      this.loading = true;
      let _obj = {};
      _obj.currentPage = this.currentPage;
      _obj.pageSize = this.pageSize;
      _obj.searchKeyWord = this.searchkeyWord;
      _obj.searchType = this.search;
      getList(_obj)
        .then((response) => {
          this.tableData = response.data.records;
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].advancePayment) {
              this.tableData[i].advancePayment = this.tableData[i].advancePayment * 100
            }
            if (this.tableData[i].chargeProportion) {
              this.tableData[i].chargeProportion = this.tableData[i].chargeProportion * 100
            }
          }
          this.deptBudgetTotal = response.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    switchChange(row, num) {
        console.log(1111111)
        this.forbiddendata=row
        var _examine = {};
        _examine.id = row.commonId;
        let title;
        if (num == 1) {
          // _examine.flag = 3;
          // title = "禁用后客户将无法使用所有功能，是否确定禁用？";
          this.forbiddenshow=true
          
        } else if (num == 2) {
          title = '确定重新启用该用户？';
          _examine.disableFlag = 2;
          _examine.identityFlag = 1;
          this.$confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.listLoading = true;
          forbidden(_examine)
            .then((response) => {
                this.$notify({
                  title: '成功',
                  message: '启用成功！',
                  type: 'success',
                });
              this.getList();
              this.listLoading = false;
            })
            .catch(() => {
              this.listLoading = false;
            });
        });
        }
      },
      submitforbidden(){
          if(!this.disabledDays){
            this.$message.error('禁用天数不能为空');
            return
          }if(this.disabledDays<2){
            this.$message.error('禁用天数输入错误');
            return
          }
          var _examine={}
          _examine.id = this.forbiddendata.commonId
          _examine.disableFlag = 1;
          _examine.identityFlag = 1;
          _examine.disabledDays = this.disabledDays;
          this.listLoading = true;
          forbidden(_examine)
            .then((response) => {
                this.$notify({
                  title: '成功',
                  message: '禁用成功！',
                  type: 'success',
                });
                this.forbiddenshow=false
              this.getList();
              this.listLoading = false;
            })
            .catch(() => {
              this.listLoading = false;
            });
      },
    newInfo(row) {
      this.Info.newsTypeKey = 1;
      this.Info.newsType = '系统消息';
      this.Info.crtCommonId = JSON.parse(
        localStorage.getItem('UserInfo')
      ).accountId;
      this.Info.reCommonId = row.commonId;
      this.Info.bussId = row.id;
      this.sendInfo = true;
    },
    sendInfoClose() {
      this.Info = {};
      this.sendInfo = false;
    },
    adopt(row) {
      this.$confirm('确定通过身份审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.listLoading = true;
        var _examine = {};
        _examine.id = row.id;
        _examine.flag = 1;
        toExamine(_examine)
          .then((response) => {
            this.$notify({
              title: '成功',
              message: '通过成功！',
              type: 'success',
            });
            this.getList();
            this.listLoading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      });
    },
    reject(row) {
      this.form.id = row.id;
      this.form.flag = 2;
      this.rejectInfo = true;
    },
    rejectClose() {
      this.form.rejectReasonDescription = '';
      this.rejectInfo = false;
    },
    submit() {
      if (!this.form.rejectReasonDescription) {
        this.$message.error('请输入驳回原因');
        return;
      }
      if (
        this.form.rejectReasonDescription.length < 6 ||
        this.form.rejectReasonDescription.length > 100
      ) {
        this.$message.error('驳回原因字数应在6-100之间');
        return;
      }
      this.listLoading = true;
      toExamine(this.form)
        .then((response) => {
          this.$notify({
            title: '成功',
            message: '驳回成功！',
            type: 'success',
          });
          this.form = {};
          this.rejectInfo = false;
          this.getList();
          this.listLoading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    rechargeClose() {
      this.rechargeShow = false;
    },
    recharge(item) {
      // this.rechargeData = item
      this.rechargeData.bankCard=item.bankCard
      this.rechargeData.bankDeposit=item.bankDeposit
      this.rechargeData.bankDepositBranch=item.bankDepositBranch
      this.rechargeData.name = item.name
      this.rechargeData.rechargeId = item.id;
      this.rechargeData.flag = 1;
      this.rechargeData.commonId = item.commonId;
      this.rechargeShow = true
    },
    //上传付款截图
    handleAvatarSuccess(e) {
      this.imageUrl = e.data.url
    },
    rechargeSubmit() {
      if (!this.rechargeData.amountMoney) {
        this.$message({
          message: '充值金额不能为空',
          type: 'warning',
        })
        return
      }
      if (!this.imageUrl) {
        this.$message({
          message: '请上传截图 ',
          type: 'warning',
        })
        return
      }
      this.rechargeData.rechargeUrl = this.imageUrl
      this.listLoading = true;
      this.$confirm('确定提交充值信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          theRecharge(this.rechargeData)
            .then((response) => {
              this.$notify({
                title: '成功',
                message: '充值成功！',
                type: 'success',
              });
              this.rechargeData = {};
              this.rechargeShow = false;
              this.getList();
              this.listLoading = false;
            })
        })
        .catch(() => {
          this.loading = false;
        });
    },
    submitInfo() {
      if (!this.Info.newsTitle) {
        this.$message.error('请输入标题');
        return;
      }
      if (!this.Info.newsContent) {
        this.$message.error('请输入内容');
        return;
      }
      if (this.Info.newsTitle.length < 4 || this.Info.newsTitle.length > 20) {
        this.$message.error('标题字数应在4-20之间');
        return;
      }
      if (
        this.Info.newsContent.length < 10 ||
        this.Info.newsContent.length > 100
      ) {
        this.$message.error('消息内容字数应在10-100之间');
        return;
      }
      this.listLoading = true;
      postNews(this.Info)
        .then((response) => {
          this.$notify({
            title: '成功',
            message: '发送成功！',
            type: 'success',
          });
          this.sendInfoClose();
          this.listLoading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    userSee(row) {
      this.idSee.cardAddressUrl = row.cardAddressUrl;
      this.idSee.cardBackAddressUrl = row.cardBackAddressUrl;
      this.idSee.name = row.name;
      this.idSee.cardNumber = row.cardNumber;
      this.idSee.cardValidityDate = row.cardValidityDate;
      this.userInfo = true;
    },
    userInfoClose() {
      this.userInfo = false;
    },
    searchBtn(num) {
      this.search = num;
      this.getList();
    },
    find() {
      this.currentPage = 1
      this.getList();
    },
    onChange() {
      this.$refs.upload
        .handleSaveBill()
        .then(async (response) => {
          this.formData.addressUrl = response;
        })
        .catch((res) => {
          EventBus.$emit('error', (JSON.parse(res) || {}).message);
          this.$refs.upload.clearFiles();
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.center {
  padding: 10px 20px;
  background: #f5f6f7;
  min-height: calc(100vh - 50px);

  .top_css {
    padding: 10px;

    .search_btn {
      height: 80px;
      background: linear-gradient(#fafbfb, #ffffff);
      display: flex;
      margin-top: 20px;

      .search_block {
        margin-left: 20px;
      }

      .search_item {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 40px;
        width: 112px;
        height: 40px;
        background: #f7f8f9;
        cursor: pointer;
        margin-top: 30px;
      }

      .searchNo {
        color: #323233;
      }

      .search {
        color: #2f53eb;
        background: #ffffff;
      }
    }
  }

  .center_css {
    background: #ffffff;
    border-radius: 1px;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .screen {
    display: flex;

    .search {
      width: 40px;
      height: 40px;
      background: #2f53eb;
      border-radius: 0px 2px 2px 0px;
      border: 1px solid #DCDFE6;
      margin-left: -1px;
    }

    .count_css {
      width: 80px;
      text-align: center;
      line-height: 40px;
      color: #666666;
    }
  }

  .el-button {
    padding: 10px 20px !important;
  }

  .center_css {

    ::v-deep .el-table th,
    ::v-deep .el-table td {
      text-align: center;
    }

    .fujian {
      font-size: 24px;
      color: #409eff;
    }

    .warning {
      font-size: 14px;
      color: #ed1d1d;
    }
  }
}

.car_css {
  width: 50%;
  display: inline-block;
  text-align: center;
  margin-top: 20px;
}

.car_item {
  width: 100px;
  height: 100px;
}

.user {
  margin-bottom: 20px;

  .title_css {
    color: #9d9d9d;
    margin-bottom: 6px;
  }

  .name_css {
    color: #0d0d0d;
    margin-bottom: 20px;
  }

  .form_btn {
    text-align: right;
  }

  .user_item {
    width: 380px;
    height: 250px;
    margin-bottom: 20px;
  }
}

::v-deep .el-table--border .el-table__header th {
  background: #f7f8f9;
}

.btn_css {
  color: #409eff;
  cursor: pointer;
}

.sign {
  font-size: 14px;
  color: red;
}

.form_css {
  width: 100%;
  margin: 0 auto 20px;

  ::v-deep .el-checkbox {
    width: 40%;
    height: 30px;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 20px;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
  }

  // ::v-deep .el-textarea__inner {
  //   background: #F0F1F2;
  // }

  .form_btn {
    text-align: right;
    margin-top: 10px;
  }
}

//发送信息
.Info_css {
  .Info_title {
    color: #323233;
    font-size: 16px;
  }

  .Info_item {
    margin: 20px 0;
  }

  .Info_btn {
    text-align: right;
    margin-top: 10px;
  }
}

.advancePayment-style {
  display: flex;
}

::v-deep .advancePayment-style .el-input__inner {
  height: 30px;
}

.pay {
  .pay_css {
    display: flex;
    margin-bottom: 20px;
  }
}

.recharge {
  .recharge_css {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
  }

  .recharge_css {
    width: 80%;
  }
}

.upLoad {
  width: 40%;
  margin: 0 auto;
}

.avatar-uploader {
  position: relative;
  width: 178px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #8890b1;
  border-radius: 5px;
}

.avatar {
  width: 178px;
  height: 178px;
  border: 1px solid #8890b1;
  border-radius: 5px;
  display: block;
}

.find::v-deep input.el-input__inner {
  border-radius: 0;
}
.bill-item{
  border-bottom:1px solid #ccc;
}
.bill-item:last-child{
  border-bottom:1px solid transparent;
}
.row1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:5px;
}
</style>
