// 人员档案信息
<template>
  <div>
    <div class="head">
      <span>人员档案信息</span>
      <el-button
        type="primary"
        size="small"
        style="margin-left: 20px"
        @click="back"
        >返回</el-button
      >
    </div>
    <div class="main-content" v-if="Object.keys(detailData).length > 0">
      <div class="main-content-left">
        <div class="content-tit">人员底照</div>
        <div class="content-left-img">
          <el-image v-if="detailData.photo" :src="detailData.photo"></el-image>
          <span v-else style="color: #ccc">无</span>
          <!-- <img :src="detailData.photo" alt="" /> -->
        </div>
      </div>
      <div class="main-content-middle">
        <div class="content-middle-left">
          <div class="middle-item">
            <div class="content-tit">姓名</div>
            <div class="content-subtit">{{ detailData.name }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">国籍</div>
            <div class="content-subtit">{{ detailData.nationality }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">身份证号</div>
            <div class="content-subtit">{{ detailData.idNumber }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">性别</div>
            <div class="content-subtit">{{ detailData.sex }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">年龄</div>
            <div class="content-subtit">{{ detailData.age }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">户籍所在地</div>
            <div class="content-subtit">
              {{ detailData.registeredResidence }}
            </div>
          </div>
          <div class="middle-item">
            <div class="content-tit">民族</div>
            <div class="content-subtit">{{ detailData.nation }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">出生年月</div>
            <div class="content-subtit">{{ detailData.birthday }}</div>
          </div>
          <div class="middle-item">
            <div class="content-tit">身份证签发机关</div>
            <div class="content-subtit">
              {{ detailData.signingOrganization }}
            </div>
          </div>
        </div>
        <div class="content-middle-right">
          <div class="middle-item">
            <div class="content-tit">手机号</div>
            <div class="content-subtit">
              {{ detailData.phoneList.join("") }}
            </div>
          </div>
        </div>
      </div>
      <div class="main-content-right">
        <div class="content-tit">身份证照片</div>
        <div class="content-right-img">
          <div class="right-img-item">
            <el-image
              v-if="detailData.documentBackPhoto"
              :src="detailData.documentBackPhoto"
            ></el-image>
            <span v-else style="color: #ccc">无</span>
            <!-- <img :src="detailData.documentBackPhoto" alt="" /> -->
          </div>
          <div class="right-img-item">
            <el-image
              v-if="detailData.documentFrontPhoto"
              :src="detailData.documentFrontPhoto"
            ></el-image>
            <span v-else style="color: #ccc">无</span>
            <!-- <img :src="detailData.documentFrontPhoto" alt="" /> -->
          </div>
        </div>
      </div>
    </div>
    <div class="addmodal-middle">
      <div class="addmodal-middle-left">
        <div class="addmodal-middle-tit">人员基本信息</div>
      </div>
      <div class="addmodal-middle-left">
        <div class="addmodal-middle-tit" style="width: 640px">违章违法信息</div>
      </div>
    </div>
    <div class="main-footer">
      <div
        class="btn-item"
        :class="{ active: activeIndex === 1 }"
        @click="activeIndex = 1"
      >
        驾驶证信息
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 2 }"
        @click="activeIndex = 2"
      >
        护照信息
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 3 }"
        @click="activeIndex = 3"
      >
        车辆信息
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 4 }"
        @click="handleItemClick(4)"
      >
        行为记录
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 5 }"
        @click="handleItemClick(5)"
      >
        布控信息
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 6 }"
        @click="handleItemClick(6)"
      >
        七类重点信息
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 7 }"
        @click="handleItemClick(7)"
      >
        警情处理记录
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 8 }"
        @click="handleItemClick(8)"
      >
        车辆违章信息
      </div>
      <div
        class="btn-item"
        :class="{ active: activeIndex === 9 }"
        @click="handleItemClick(9)"
      >
        驾驶证累积记分
      </div>
    </div>
    <!-- 主体表格 -->
    <!--  v-if="activeIndex >= 5 && activeIndex <= 9" -->
    <BasicTable
      :tableData="tableData"
      :columns="columnData"
      :total="total1"
      :listLoading="listLoading"
      @fetchData="fetchData"
      v-if="[5, 6, 7, 8, 9].includes(activeIndex)"
    >
      <!-- 布控信息 -->
      <template v-slot:product1="{ row }">
        <el-tag v-if="row.hitNum" type="success">命中</el-tag>
        <el-tag v-else type="info">未命中</el-tag>
      </template>
      <template v-slot:product2="{ row }">
        <span>{{ row.controlStartTime }}至{{ row.controlEndTime }}</span>
      </template>
      <!-- 七类重点 -->
      <template v-slot:product3="{ row }">
        <el-tag v-if="row.hit" type="success">命中</el-tag>
        <el-tag v-else type="info">未命中</el-tag>
      </template>
      <!-- 警情处理 -->
      <template v-slot:product4="{ row }">
        <el-tag v-if="row.completion" type="success">完结</el-tag>
        <el-tag v-else type="info">未完结</el-tag>
      </template>
      <!-- 车辆违章 -->
      <template v-slot:product5="{ row }">
        <el-tag v-if="row.completion" type="success">已处理</el-tag>
        <el-tag v-else type="info">未处理</el-tag>
      </template>
    </BasicTable>
    <!-- 驾驶证信息 -->
    <DriveInfo
      v-if="activeIndex == 1 && page.data.personId"
      :personId="page.data.personId"
    />
    <!-- 护照信息 -->
    <PassportInfo
      v-if="activeIndex == 2 && page.data.personId"
      :personId="page.data.personId"
    />
    <!-- 车辆信息 -->
    <CarInfo
      v-if="activeIndex == 3 && page.data.personId"
      :personId="page.data.personId"
    />
    <!-- 行为记录 -->
    <div v-if="activeIndex == 4">
      <div v-loading="listLoading">
        <el-form :inline="true" :model="page4.data" style="margin-bottom: 20px">
          <el-form-item class="margin-left">
            <el-date-picker
              v-model="page4.data.startTime"
              type="datetime"
              placeholder="选择开始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="margin-left">
            <el-date-picker
              v-model="page4.data.endTime"
              type="datetime"
              placeholder="选择结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item class="margin-left input">
            <el-input
              v-model="page4.data.sn"
              placeholder="请输入设备SN"
              clearable=""
            ></el-input>
          </el-form-item>
          <el-form-item class="margin-left">
            <el-button
              type="primary"
              @click="handleItemClick(4)"
              icon="el-icon-search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <div
          class="drive-info audit-item"
          v-for="(item, index) in tableDataBehavior"
          :key="index"
        >
          <div style="width: 45px">
            <i class="blue-dot"></i>
            <i
              class="blue-line"
              v-if="tableDataBehavior.length - 1 > index"
            ></i>
          </div>
          <div class="behavior-info-top">
            <div class="behavior-top-left">
              {{ item.passTime }}{{ item.dataType == 3 ? "订票" : "通行" }}
            </div>
            <div>
              <el-tag class="tag-color" effect="plain" size="small">{{
                item.dataType == 1
                  ? "人员闸口记录"
                  : item.dataType == 2
                  ? "人员摄像头记录"
                  : item.dataType == 3
                  ? "人员进出港记录"
                  : "车辆卡口记录"
              }}</el-tag>
            </div>
          </div>
          <div class="drive-info-box behavior-info-box" style="width: 80%">
            <div class="drive-info-left" v-if="item.dataType != 3">
              <div class="content-tit" v-if="item.dataType == 2">抓拍照片</div>
              <div class="content-tit" v-else>通行照片</div>
              <div class="drive-left-img-item1">
                <!-- <img src="" alt="" /> -->
                <el-image v-if="item.photo" :src="item.photo"></el-image>
                <span v-else>无</span>
              </div>
            </div>
            <div class="drive-info-right drive-info-right-3">
              <div class="drive-info-right-item" v-if="item.dataType != 3">
                <div class="content-tit">设备SN</div>
                <div class="right-item-text">{{ item.sn }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType != 3">
                <div class="content-tit">通行地点</div>
                <div class="right-item-text">{{ item.snAddress }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType == 4">
                <div class="content-tit">车牌号</div>
                <div class="right-item-text">{{ item.carNumber }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType === 3">
                <div class="content-tit">航空公司</div>
                <div class="right-item-text">{{ item.airlineCompany }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType === 3">
                <div class="content-tit">出发地</div>
                <div class="right-item-text">{{ item.departure }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType === 3">
                <div class="content-tit">目的地</div>
                <div class="right-item-text">{{ item.destination }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType === 3">
                <div class="content-tit">起飞时间</div>
                <div class="right-item-text">{{ item.takeOffTime }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType === 3">
                <div class="content-tit">到达时间</div>
                <div class="right-item-text">{{ item.arriveTime }}</div>
              </div>
              <div class="drive-info-right-item" v-if="item.dataType === 3">
                <div class="content-tit">状态</div>
                <!-- <div class="right-item-text">{{ item.arriveTime }}</div> -->
                <el-tag
                  style="margin-left: 5px"
                  effect="plain"
                  v-if="item.status == 1"
                  >确认</el-tag
                >
                <el-tag
                  style="margin-left: 5px"
                  effect="plain"
                  type="info"
                  v-if="item.status == 2"
                  >取消</el-tag
                >
                <el-tag
                  style="margin-left: 5px"
                  effect="plain"
                  type="warning"
                  v-if="item.status == 3"
                  >候补</el-tag
                >
                <el-tag
                  effect="plain"
                  style="color: #19d0f9; margin-left: 5px"
                  v-if="item.status == 4"
                  >申请</el-tag
                >
                <el-tag
                  style="margin-left: 5px"
                  effect="plain"
                  type="success"
                  v-if="item.status == 5"
                  >已登机</el-tag
                >
                <el-tag
                  style="margin-left: 5px"
                  effect="plain"
                  type="danger"
                  v-if="item.status == 6"
                  >未登机</el-tag
                >
              </div>
            </div>
          </div>
          <!-- <div v-if="tableData.length == 0" class="no-data-text">暂无数据</div> -->
        </div>
        <div class="behavior-info-footer">
          <el-button
            v-if="tableDataBehavior.length < totalBehavior"
            type="primary"
            @click="getMoreData"
            icon="el-icon-arrow-down"
            class="behavior-btn"
            >加载更多</el-button
          >
          <span v-else style="color: #ccc">没有更多了</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import {
  getPersonDrivePageList,
  getPersonControlPageList,
  getPersonCategoriesPageList,
  getPeronBehaviorPageList,
  getPersonPoliceEventPageList,
  getPersonCarViolationsPageList,
  getPersonCarHandlePageList,
} from "@/api/personnelFiles";
import {
  controlInfo,
  sevenWarningInfo,
  policeEventInfo,
  carViolationsInfo,
  driveScoreInfo,
} from "../personnel.data.js";
import BasicTable from "./basicTable.vue";
import DriveInfo from "./driveInfo.vue";
import PassportInfo from "./passportInfo.vue";
import CarInfo from "./carInfo.vue";

export default {
  components: { Pagination, BasicTable, DriveInfo, PassportInfo, CarInfo },
  props: {
    isShowUpdate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      listLoading: false,
      review: "",
      detailData: {},
      // 页面
      page: {
        // 搜索表单
        data: {
          personId: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      // 行为记录
      page4: {
        // 搜索表单
        data: {
          personId: "",
          startTime: "",
          endTime: "",
          sn: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      tableDataBehavior: [],
      total: 0,
      total1: 0,
      totalBehavior: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      total6: 0,
      total7: 0,
      total8: 0,
      total9: 0,
      activeIndex: 1,
      columnData: [],
    };
  },
  methods: {
    open(obj, index) {
      this.detailData = obj;
      this.page.data.personId = obj.personId;
      this.page4.data.personId = obj.personId;
      // console.log(this.detailData);
      if (index) {
        this.handleItemClick(index);
      }
    },
    fetchData(item) {
      this.page.pageNum = item.page;
      this.page.pageSize = item.limit;
      this.getApiData();
    },
    getApiData() {
      const index = this.activeIndex;
      this.listLoading = true;
      if (index === 4) {
        getPeronBehaviorPageList(this.page4).then((res) => {
          // console.log(res, 3);
          this.tableDataBehavior = [
            ...this.tableDataBehavior,
            ...res.data.records,
          ];
          this.totalBehavior = res.data.total;
          // this.page4.pageNum++;
          this.listLoading = false;
        });
      }
      if (index === 5) {
        this.columnData = controlInfo;
        getPersonControlPageList(
          { ...this.page },
          (this.page.data.idNumber = this.detailData.idNumber)
        ).then((res) => {
          this.tableData = res.data.records;
          this.total1 = res.data.total;
          this.listLoading = false;
        });
      }
      if (index === 6) {
        // console.log(3);
        this.columnData = sevenWarningInfo;
        getPersonCategoriesPageList(this.page).then((res) => {
          this.tableData = res.data.records;
          this.total1 = res.data.total;
          this.listLoading = false;
        });
      }
      if (index === 7) {
        this.columnData = policeEventInfo;
        getPersonPoliceEventPageList(this.page).then((res) => {
          this.tableData = res.data.records;
          this.total1 = res.data.total;
          this.listLoading = false;
        });
      }
      if (index === 8) {
        this.columnData = carViolationsInfo;
        getPersonCarViolationsPageList(this.page).then((res) => {
          this.tableData = res.data.records;
          this.total1 = res.data.total;
          this.listLoading = false;
        });
      }
      if (index === 9) {
        this.columnData = driveScoreInfo;
        getPersonCarHandlePageList(this.page).then((res) => {
          this.tableData = res.data.records;
          this.total1 = res.data.total;
          this.listLoading = false;
        });
      }
    },
    handleItemClick(index) {
      this.activeIndex = index;
      this.page.pageNum = 1;
      // 初始化
      this.page4.pageNum = 1;
      this.page4.startTime = "";
      this.page4.endTime = "";
      this.page4.sn = "";
      this.tableDataBehavior = [];
      this.getApiData();
    },
    // 加载更多
    getMoreData() {
      if (this.totalBehavior <= this.page4.pageNum * this.page4.pageSize) {
        this.$message({
          type: "success",
          message: "没有更多了!",
        });
      } else {
        this.page4.pageNum++;
        this.getApiData();
      }
    },
    back() {
      this.$emit("back");
    },

    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 180px;
}
.head {
  margin-bottom: 32px;
  span {
    color: #333;
    font-size: 18px;
    font-weight: 500;
  }
}
.main-content {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  margin: 10px;
  .main-content-left {
    margin-right: 70px;
    .content-left-img {
      width: 93px;
      height: 124px;
      text-align: center;
      line-height: 124px;
      .el-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .main-content-middle {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    //   flex: 1;
    .content-middle-left {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      // width: 640px;
      .middle-item {
        //   width: 210px;
        width: calc(33%);
        //   height: 55px;
        .content-subtit {
          padding-left: 8px;
          font-weight: 500;
          font-size: 15px;
          line-height: 20px;
        }
      }
    }
    .content-middle-right {
      flex: 1;
      .middle-item {
        //   width: calc(33%);
        width: 210px;
        //   height: 55px;
        .content-subtit {
          padding-left: 8px;
          font-weight: 500;
          font-size: 15px;
          line-height: 20px;
          width: 150px;
        }
      }
    }
  }
  .main-content-right {
    .content-right-img {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 400px;
      height: 124px;
      .right-img-item {
        width: 196px;
        height: 124px;
        text-align: center;
        line-height: 124px;
        .el-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
}
.content-tit {
  display: inline-block;
  background: rgba(98, 159, 249, 0.12);
  padding: 2px 8px;
  margin-bottom: 5px;
  border-radius: 46px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: #007eff;
}
// 人员基本信息中间图形
.addmodal-middle {
  display: flex;
  margin: 35px 0 10px 0;
  .addmodal-middle-left {
    // position: relative;
    .addmodal-middle-tit {
      // position: absolute;
      // bottom: 16px;
      // width: 495px;
      width: 420px;
      // height: 37px;
      border-radius: 30px 30px 0 0;
      padding: 8px 20px;
      font-weight: 500;
      font-size: 14px;
      line-height: 21px;
      color: #333;
      background: #ecf0f4;
      text-align: center;
    }
  }
}
// .btn-top {
//   width: 500px;
//   height: 16px;
//   border-radius: 0px 12px 0 0;
//   background: linear-gradient(
//     0deg,
//     rgba(255, 255, 255, 0) 0%,
//     rgba(120, 134, 151, 0.4) 70.17%,
//     #3e526b 100%
//   );
// }
.main-footer {
  margin: 0 0 20px 10px;
  .btn-item {
    display: inline-block;
    border: 1px solid #e5ecfb;
    padding: 4px 12px;
    border-radius: 6px;
    color: #7b95c6;
    background: rgba(64, 158, 255, 0.1);
    font-size: 16px;
    line-height: 21px;
    margin-right: 10px;
    margin-top: 5px;
    cursor: pointer;
  }
}
.active {
  background-color: #409eff !important;
  color: #fff !important;
}
//行为记录样式表格
.behavior-info-top {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .behavior-top-left {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin-right: 15px;
  }
  .tag-color {
    color: #ffa674 !important;
    border-color: #ffa674 !important;
  }
}
.behavior-info-box {
  margin-left: 45px;
  margin-bottom: 20px;
}
.behavior-info-footer {
  text-align: center;
  margin-top: 20px;
  .behavior-btn {
    border-radius: 20px !important;
  }
}
.audit-item {
  position: relative;
  line-height: 25px;
  .blue-dot {
    position: absolute;
    background: #409eff;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 8px;
    left: 20px;
  }
  .blue-line {
    position: absolute;
    height: 91%;
    /* width: 2px; */
    border-left: 1.6px dashed #409eff;
    top: 22px;
    left: 24px;
  }
}

.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 170px;
}
</style>
