// 人员档案查询
<template>
  <div class="app-container">
    <div v-if="isShowUpdate" class="container">
      <addModal ref="addModel" @back="back" />
    </div>
    <div v-else>
      <el-form
        :inline="true"
        :model="page.data"
        :class="page.data.iamge ? 'img-margin-left' : ''"
      >
        <!-- <el-form-item class="margin-left input">
          <div class="uploadImg">
            <span v-if="!imageUrl">人员照片查询</span>
            <div v-else class="img">
              <img :src="imageUrl" alt="" />
              <div class="icon-error" @click="handleRemove">
                <i class="el-icon-error"></i>
              </div>
            </div>
            <el-upload
              action="https://noise.hz-hanghui.com:8088/hanghui-warehouse/upload/picture"
              accept="image/*"
              :on-remove="handleRemove"
              :show-file-list="false"
              :on-success="handleChange"
            >
              <div class="img">
                <img
                  src="../../assets/Frame.png"
                  alt=""
                  style="margin-top: 13px"
                />
              </div>
            </el-upload>
          </div>
        </el-form-item> -->
        <el-form-item class="margin-left input">
          <el-input
            clearable
            v-model="page.data.name"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            clearable
            v-model="page.data.idNumber"
            placeholder="请输入身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            clearable
            v-model="page.data.phone"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            clearable
            v-model="page.data.carNumber"
            placeholder="请输入车牌号"
          ></el-input>
        </el-form-item>
        <el-form-item class="margin-left input">
          <el-input
            clearable
            v-model="page.data.passport"
            placeholder="请输入护照号"
          ></el-input>
        </el-form-item>
        <el-form-item class="margin-left">
          <el-button type="primary" @click="fetchData" icon="el-icon-search"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="search-top-box" v-if="page.data.iamge">
        <div class="search-top-box-img">
          <img
            src="https://img0.baidu.com/it/u=256816879,771155532&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1717693200&t=ed7939d6d4260cc27dc8444ad91276c3"
            alt=""
          />
        </div>
      </div>
      <div v-if="tableData.length === 0" class="text-box">暂无查询结果~</div>
      <div v-else>
        <div
          class="main"
          v-for="(item, index) in tableData"
          :key="item.personId"
        >
          <div class="top">
            <div class="top-left">序号：{{ indexMethod(index) }}</div>
            <el-button type="primary" size="small" @click="getDetail(item)"
              >档案详情</el-button
            >
          </div>
          <div class="main-content">
            <div class="main-content-left">
              <div class="content-tit" style="margin-bottom: 10px">
                人员底照
              </div>
              <div class="content-left-img">
                <el-image v-if="item.photo" :src="item.photo"></el-image>
                <span v-else style="color: #ccc">无</span>
                <!-- <img :src="item.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">{{ item.name }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">国籍</div>
                  <div class="content-subtit">{{ item.nationality }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">身份证号</div>
                  <div class="content-subtit">{{ item.idNumber }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">性别</div>
                  <div class="content-subtit">{{ item.sex }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">年龄</div>
                  <div class="content-subtit">{{ item.age }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">户籍所在地</div>
                  <div class="content-subtit">
                    {{ item.registeredResidence }}
                  </div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">民族</div>
                  <div class="content-subtit">{{ item.nation }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">出生年月</div>
                  <div class="content-subtit">{{ item.birthday }}</div>
                </div>
                <div class="middle-item">
                  <div class="content-tit">身份证签发机关</div>
                  <div class="content-subtit">
                    {{ item.signingOrganization }}
                  </div>
                </div>
              </div>
              <div class="content-middle-right">
                <div class="middle-item">
                  <div class="content-tit">手机号</div>
                  <div class="content-subtit">
                    {{ item.phoneList.join(",") }}
                  </div>
                </div>
              </div>
            </div>
            <div class="main-content-right">
              <div class="content-tit" style="margin-bottom: 10px">
                身份证照片
              </div>
              <div class="content-right-img">
                <div class="right-img-item">
                  <el-image
                    v-if="item.documentBackPhoto"
                    :src="item.documentBackPhoto"
                  ></el-image>
                  <span v-else style="color: #ccc">无</span>
                  <!-- <img :src="item.documentBackPhoto" alt="" /> -->
                </div>
                <div class="right-img-item">
                  <el-image
                    v-if="item.documentFrontPhoto"
                    :src="item.documentFrontPhoto"
                  ></el-image>
                  <span v-else style="color: #ccc">无</span>
                  <!-- <img :src="item.documentFrontPhoto" alt="" /> -->
                </div>
              </div>
            </div>
          </div>
          <div class="main-footer">
            <div class="btn-item" @click="getDetail(item, 1)">驾驶证信息</div>
            <div class="btn-item" @click="getDetail(item, 2)">护照信息</div>
            <div class="btn-item" @click="getDetail(item, 3)">车辆信息</div>
            <div class="btn-item" @click="getDetail(item, 4)">行为记录</div>
            <div class="btn-item" @click="getDetail(item, 5)">布控信息</div>
            <div class="btn-item" @click="getDetail(item, 6)">七类重点信息</div>
            <div class="btn-item" @click="getDetail(item, 7)">警情处理记录</div>
            <div class="btn-item" @click="getDetail(item, 8)">车辆违章信息</div>
            <div class="btn-item" @click="getDetail(item, 9)">
              驾驶证累积记分
            </div>
          </div>
        </div>
        <!--分页栏-->
        <pagination
          :total="total"
          :page.sync="page.pageNum"
          :limit.sync="page.pageSize"
          @pagination="fetchData"
        />
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { getPersonPageList } from "@/api/personnelFiles";
import AddModal from "./modal/AddModal.vue";
export default {
  components: { Pagination, AddModal },
  data() {
    return {
      dialogVisible: false, //新增编辑
      dialogTitle: "",
      dialogVisibleDetail: false, //查看详情
      listLoading: false,
      tableData: [],
      total: 0,
      // 页面
      page: {
        // 搜索表单
        data: {
          name: "",
          idNumber: "",
          phone: "",
          carNumber: "",
          passport: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      imageUrl: "",
      isShowUpdate: false,
      rowData: null, // 传递的参数
    };
  },
  created() {
    // this.fetchData();
  },
  mounted() {
    this.rowData = this.$route.params.rowData;
    if (this.rowData) {
      if (/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.rowData.idNumber)) {
        this.page.data.idNumber = this.rowData.idNumber;
      } else {
        this.page.data.passport = this.rowData.idNumber;
      }
      this.fetchData();
    }
  },
  methods: {
    fetchData() {
      getPersonPageList(this.page).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    handleRemove(file, fileList) {
      this.imageUrl = "";
    },
    handleChange(res, file) {
      this.imageUrl = res.data;
    },
    back() {
      this.isShowUpdate = false;
      this.fetchData();
    },
    // 详情
    getDetail(row, index) {
      this.isShowUpdate = true;
      this.$nextTick(() => {
        this.$refs.addModel.open(row, index);
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}
.uploadImg {
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #c0c4cc;
  // display: inline-block;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  width: 180px;
  .img {
    width: 30px;
    height: 30px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .icon-error {
      position: absolute;
      right: 0px;
      top: -15px;
    }
  }
}
.search-top-box {
  position: relative;
  height: 40px;
  border-radius: 12px 12px 0 0;
  margin-top: 20px;
  margin-bottom: 10px;
  background: linear-gradient(
    180deg,
    #007eff99 0%,
    rgba(72, 156, 242, 0.215367) 17.17%,
    rgba(255, 255, 255, 0) 100%
  );
  .search-top-box-img {
    position: absolute;
    top: -55px;
    left: 15px;
    width: 100px;
    height: 100px;
    border: 2px solid #409eff;
    border-radius: 10px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
.img-margin-left {
  margin-left: 120px;
}
// 暂无查询结果
.text-box {
  font-weight: 400;
  font-size: 28px;
  color: #b9becb;
  margin: 0 auto;
  height: 800px;
  width: 100%;
  text-align: center;
  line-height: 800px;
}
//
.main {
  padding: 15px;
  margin-top: 15px;
  width: 100%;
  background-color: #f5f8fc;
  border-radius: 8px;
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .top-left {
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
    }
  }
  .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: 30px;
          }
        }
      }
      .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: 30px;
            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;
          }
        }
      }
    }
  }
  .main-footer {
    margin: 15px 0 0 10px;
    .btn-item {
      display: inline-block;
      border: 1px solid #e5ecfb;
      padding: 4px 12px;
      border-radius: 6px;
      color: #7b95c6;
      font-size: 16px;
      line-height: 21px;
      margin-right: 10px;
      margin-top: 5px;
      cursor: pointer;
    }
  }
}
.content-tit {
  display: inline-block;
  background: rgba(234, 179, 8, 0.1);
  padding: 2px 8px;
  // margin-bottom: 5px;
  border-radius: 46px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: #6e3b2e;
}
</style>
