//车队信息
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14" style="height: 45px"> </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input class='find' placeholder="可按队长姓名、账号、车队名称查找" @keyup.enter.native="find" v-model="searchkeyWord" 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><span
                class="count_css">共{{ deptBudgetTotal }}条</span>
            </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>
          </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="driverName" label="队长"></el-table-column>
        <el-table-column prop="driverNumber" label="账号"></el-table-column>
        <el-table-column prop="fleetName" label="车队名称"></el-table-column>
        <el-table-column prop="fleetNumber" label="车队编号"></el-table-column>
        <el-table-column prop="fleetProfile" label="简介">
          <template scope="scope">
            <el-popover placement="top-start" title="简介" width="300" trigger="hover" :content="scope.row.fleetProfile">
              <div class="text_css" slot="reference">{{ scope.row.fleetProfile }}</div>
              <!-- <el-button slot="reference">hover 激活</el-button>  -->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
        <el-table-column label="操作" min-width="300">
          <template slot-scope="scope">
            <el-link target="_blank" type="primary" :underline="false" @click="adopt(scope.row)"
              :disabled="scope.row.statusKey!=1">通过</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="reject(scope.row)"
              :disabled="scope.row.statusKey!=1">驳回</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="lookInfo(scope.row)">查看</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="switchStatus(scope.row,1)"
              :disabled="scope.row.statusKey==7">禁用</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" :underline="false" @click="switchStatus(scope.row,2)"
              :disabled="scope.row.status!='已禁用'">解禁</el-link>

            <!-- <el-dropdown>
              <span class="btn_css">•••</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="switchChange(scope.row,'1')">禁用</span>
                </el-dropdown-item>
                <el-dropdown-item><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="seeinfo" width="500px" :before-close="seeinfoClose">
      <div>{{dataInfo.fleetName}}({{dataInfo.fleetMemberNum}})</div>
      <div>队长： {{dataInfo.driverName}} {{dataInfo.driverNumber}}</div>
      <div>车队简介：</div>
      <div>{{dataInfo.fleetProfile}}</div>
      <div>车队公告：</div>
      <div>{{dataInfo.notice?dataInfo.notice:'暂无'}}</div>
      队友：
      <div v-for="(item,index) in dataInfo.fleetMemberInfoList" :key="index">
        <span>{{item.driverNickname}} 电话{{item.driverPhone}}</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    fleetList,
    auditFleet,
    fleetDetails
  } from "@/api/driverManagement";
  export default {
    data() {
      return {
        tableData: [],
        //分页
        searchkeyWord: "",
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        deptCircularPage: {},
        search: "",
        Info: {},
        sendInfo: false,
        titleInfo: "",
        dataInfo: {},
        seeinfo: false
      };
    },

    mounted() {
      this.getList();
    },
    methods: {
      lookInfo(val) {
        this.seeinfo = true
        this.listLoading = true;
        fleetDetails({
            id: val.id,
          })
          .then((response) => {
            this.dataInfo = response.data
            this.dataInfo.driverName = val.driverName
            this.dataInfo.driverNumber = val.driverNumber
          }).catch(() => {
            this.loading = false;
          });
      },
      seeinfoClose() {
        this.seeinfo = false
      },
      adopt(val) {
        //通过
        this.listLoading = true;
        this.$confirm("确定通过车队审核？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          auditFleet({
              id: val.id,
              examineFlag: 1,
            })
            .then((response) => {
              if (response.code == 200) {
                this.$notify({
                  title: "成功",
                  message: "通过成功！",
                  type: "success",
                });
              }
              this.getList
            })
            .catch(() => {
              this.loading = false;
            });
        });
      },
      reject(val) {
        //驳回
        this.listLoading = true;
        this.$confirm("确定驳回车队审核？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          auditFleet({
              id: val.id,
              examineFlag: 2,
            })
            .then((response) => {
              if (response.code == 200) {
                this.$notify({
                  title: "成功",
                  message: "驳回成功！",
                  type: "success",
                });
              }
              this.getList()
            })
            .catch(() => {
              this.loading = false;
            });
        });
      },
      switchStatus(val, num) {
        //启用、禁用
        this.listLoading = true;
        this.$confirm(num == 1 ? '确定禁用' : '确定解禁' + "该车队？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let sign = ""
          if (num == 1) {
            sign = 3
          } else if (num == 2) {
            sign = 4
          }
          auditFleet({
              id: val.id,
              examineFlag: sign,
            })
            .then((response) => {
              if (response.code == 200) {
                if (num == 1) {
                  this.$notify({
                    title: "成功",
                    message: "禁用成功！",
                    type: "success",
                  });
                } else {
                  this.$notify({
                    title: "成功",
                    message: "解禁成功！",
                    type: "success",
                  });
                }

                this.getList()
              }
            })
            .catch(() => {
              this.loading = false;
            });
        });
      },
      searchBtn(val) {
        this.search = val;
        this.getList();
      },
      getList() {
        this.listLoading = true;
        fleetList({
            searchType: this.search,
            searchKeyWord: this.searchkeyWord,
            currentPage: this.currentPage,
            pageSize: this.pageSize,
          })
          .then((response) => {
            this.tableData = response.data.records;
            this.deptBudgetTotal = response.data.total;
            this.listLoading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      find() {
        this.currentPage = 1
        this.getList();
      },
      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;
        }
      }
    }

    .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 {
      background: #ffffff;
      border-radius: 1px;
      margin-top: 10px;
      padding-bottom: 10px;

      ::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;
      }
    }
  }

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

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

  //简介超出隐藏
  .text_css {
    width: 100%;
    height: auto;
    display: -webkit-box;
    overflow: hidden;
    /*超出隐藏*/
    text-overflow: ellipsis;
    /*隐藏后添加省略号*/
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //想显示多少行
  }
  .find::v-deep input.el-input__inner{
    border-radius:0;
  }
</style>
