
<template>
  <div class="app-container">
    <!--操作区-->
    <template v-if="isTable">
      <!-- <el-button
        type="primary"
        icon="el-icon-plus"
        @click="create('add')"
        class="margin-bottom"
        >导出记录</el-button
      > -->
      <!--搜索区-->
      <div class="float">
        <!-- <el-select
          filterable
          clearable
          v-model="page.data.adminId"
          placeholder="请选择机场公司账号"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in section_list"
            :key="item.adminId"
            :label="item.username"
            :value="item.adminId"
          >
          </el-option>
        </el-select> -->
        <el-input
          v-model="page.data.thingTitle"
          placeholder="请输入事件标题"
          clearable
          class="margin-left input"
        ></el-input>
        <el-select
          filterable
          clearable
          v-model="page.data.queryThing"
          placeholder="请选择事件类型"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in event_type_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          filterable
          clearable
          v-model="page.data.violationType"
          placeholder="请选择违规所属"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in type_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="page.data.flightNumber"
          placeholder="请输入航班号"
          clearable
          class="margin-left input"
        ></el-input>
        <el-input
          v-model="page.data.policeNumber"
          placeholder="请输入报警单编号"
          clearable
          class="margin-left input"
        ></el-input>
        <el-select
          filterable
          clearable
          v-model="page.data.status"
          placeholder="请选择审核状态"
          class="margin-left input m-b-10"
        >
          <el-option
            v-for="item in status_list"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="page.data.startTime"
          type="datetime"
          placeholder="选择起始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="margin-left"
        >
        </el-date-picker>
        <el-date-picker
          v-model="page.data.endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="margin-left"
        >
        </el-date-picker>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="fetchData"
          class="margin-left"
          >搜索</el-button
        >
      </div>
      <!--主表格-->
      <el-table
        class="table"
        ref="table_form"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            {{ indexMethod(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column label="查获类型" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.queryThing == 1" type="primary"
              >I类事件</el-tag
            >
            <el-tag v-if="scope.row.queryThing == 2" type="success"
              >II类事件</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="事件标题" align="center">
          <template slot-scope="scope">
            {{ scope.row.thingTitle }}
          </template>
        </el-table-column>
        <el-table-column label="事件类型" align="center">
          <template slot-scope="scope">
            {{ scope.row.safeThingsTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="违规所属" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.violationType == 1" type="primary"
              >旅客</el-tag
            >
            <el-tag v-if="scope.row.violationType == 2" type="success"
              >货代</el-tag
            >
            <el-tag v-if="scope.row.violationType == 3" type="info"
              >工作人员</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="查获地点" align="center">
          <template slot-scope="scope">
            {{ scope.row.safeThingsAddressName }}
          </template>
        </el-table-column>
        <el-table-column label="查获位置" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.safeThingsPlace">{{
              scope.row.safeThingsPlace | getPlaceVal
            }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="航班号" align="center">
          <template slot-scope="scope">
            {{ scope.row.flightNumber }}
          </template>
        </el-table-column>
        <el-table-column label="座位号" align="center">
          <template slot-scope="scope">
            {{ scope.row.seatNumber }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="报警单编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.safeThingsDetailVo. }}
          </template>
        </el-table-column>
        <el-table-column label="报警时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>-->
        <!-- <el-table-column label="案由" align="center">
          <template slot-scope="scope">
            {{ scope.row.policeSecurityTestVo.actionReason }}
          </template>
        </el-table-column>
        <el-table-column label="是否严处" align="center">
          <template slot-scope="scope">
            {{ scope.row.policeSecurityTestVo.severely==1?'严处':'不严处' }}
          </template>
        </el-table-column> -->
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">待确认</el-tag>
            <el-tag v-if="scope.row.status == 2" type="info">待受案</el-tag>
            <el-tag v-if="scope.row.status == 3" type="primary">已受案</el-tag>
            <el-tag v-if="scope.row.status == 4" type="success">已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作区" width="120">
          <template slot-scope="scope">
            <el-button
              type="primary"
              v-loading="buttonLoading"
              size="small"
              @click="create(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <pagination
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="fetchData"
      />
    </template>
    <div v-else class="page">
      <div>
        <strong class="tit">安全事件记录详情</strong>
        <el-button type="primary" size="small" @click="isTable = true"
          >返回</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="exportFile(detailData.safeThingsId, '安全事件记录')"
          class="margin-bottom"
          size="small"
          >导出</el-button
        >
      </div>
      <div class="secondary-heading">
        {{ detailData.thingTitle }}
      </div>
      <div class="flex">
        <div class="left">
          <div class="flex item">
            <div
              v-for="(item, index) in detailsList"
              :key="index"
              class="flex-item"
            >
              {{ item.name }}<br />
              <span v-if="item.name == '违规所属'">{{
                detailData[item.value] == 1
                  ? "旅客"
                  : detailData[item.value] == 2
                  ? "货代"
                  : "工作人员"
              }}</span>
              <span v-else-if="item.name == '查获位置'">
                <span
                  v-for="(item1, index) in detailData.safeThingsPlace"
                  :key="index + 'o'"
                  >{{
                    item1.checked && index == 3
                      ? item1.value + item1.extra
                      : item1.checked
                      ? item1.value
                      : ""
                  }}</span
                >
              </span>
              <span v-else>{{ detailData[item.value] }}</span>
            </div>
          </div>
          <div class="item">
            <img
              :src="item"
              alt=""
              v-for="(item, index) in detailData.photoList"
              :key="index"
            />
          </div>
          <div class="item item1">
            <div><strong>起 因：</strong>{{ detailData.thingCause }}</div>
            <div><strong>后 果：</strong>{{ detailData.thingResult }}</div>
            <div v-if="detailData.briefDetailsList.length > 0">
              <strong>简要情况：</strong>经安全检查，被移交人存在下列第（
              <span
                v-for="(item, index) in detailData.briefDetailsList"
                :key="index + 'p'"
                >{{ item }}，</span
              >
              ）种疑似违法行为：
              <div v-for="(item, index) in briefDetailsList" :key="index">
                {{ item.name }}
                <span
                  v-if="
                    index == 8 && detailData.briefDetailsList.indexOf(9) > -1
                  "
                  >{{ detailData.briefDetailsOther }}</span
                >（ {{ item.choose ? "√" : "" }} ）
              </div>
            </div>
            <div><strong>简要经过：</strong>{{ detailData.thingsDesc }}</div>
          </div>
          <div
            class="user"
            v-if="
              detailData.violationType == 1 || detailData.violationType == 2
            "
          >
            <div class="secondary-heading bgc">行为人信息</div>
            <div class="flex m-l">
              <img src="../../assets/bg.png" alt="" />
              <div class="user-msg m-b-15">
                <div>
                  {{ detailData.behaviorName }}【{{ detailData.behaviorSex }}】
                </div>
                <!-- <div>{{detailData.behaviorPlace}}</div> -->
                <div>{{ detailData.behavionPhone }}</div>
                <div>
                  【{{ detailData.behaviorDocumentType }}】{{
                    detailData.behaviorDocumentNumber
                  }}
                </div>
              </div>
            </div>
            <div class="flex item">
              <div
                v-for="(item, index) in userList"
                :key="index"
                class="flex-item"
              >
                {{ item.name }}<br />
                <span v-if="item.name == '婚姻状况'">{{
                  detailData[item.value] == 1
                    ? "未婚"
                    : detailData[item.value] == 2
                    ? "已婚"
                    : detailData[item.value] == 3
                    ? "离异"
                    : "丧偶"
                }}</span>
                <span v-else>{{ detailData[item.value] }}</span>
              </div>
            </div>
          </div>
          <div class="user" v-if="detailData.violationType == 2">
            <div class="secondary-heading bgc">行为单位信息</div>
            <div class="flex item">
              <div
                v-for="(item, index) in unitList"
                :key="index"
                class="flex-item"
              >
                {{ item.name }}<br />
                <span>{{ detailData[item.value] }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <!-- 审核情况 -->
          <div>
            <div class="title m-b-15">
              <div class="line"></div>
              <span>审核情况</span>
            </div>
            <div class="flex">
              <img
                class="audit-img"
                :src="
                  detailData.status == 1
                    ? confirmed
                    : detailData.status == 2
                    ? pendingCase
                    : detailData.status == 3
                    ? haveAccepted
                    : pass
                "
                alt=""
              />
              <div class="audit">
                <div class="audit-item">
                  <i class="blue-dot"></i>
                  <i class="blue-line"></i>
                  <div class="audit-item-msg">
                    <span class="tit">发起申请</span>
                    <span class="time">{{ detailData.createTime }}</span>
                    <div class="flex m-t-15">
                      <img :src="detailData.avatar" alt="" />
                      <div class="item1 m-b-15">
                        <div>{{ detailData.name }}</div>
                        <div>{{ detailData.phone }}</div>
                        <div>【身份证】{{ detailData.idNumber }}</div>
                        <div>
                          {{ detailData.username }}-{{ detailData.deptName }}
                        </div>
                        <div>{{ detailData.postName }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="audit-item"
                  v-for="(item, index) in auditList"
                  :key="index"
                >
                  <i class="blue-dot"></i>
                  <i class="blue-line"></i>
                  <div class="audit-item-msg">
                    <span class="tit">{{ item.auditName }} </span>
                    <span class="time">{{ item.checkTime }}</span
                    ><br />
                    <div>
                      <el-image
                        v-if="item.checkName"
                        style="
                          width: 25px;
                          height: 25px;
                          border-radius: 50%;
                          vertical-align: middle;
                        "
                        :src="item.checkAvatar"
                        :preview-src-list="[item.checkAvatar]"
                      >
                      </el-image>
                      {{ item.checkName }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 处理情况 -->
          <div>
            <div class="title m-b-15">
              <div class="line"></div>
              <span>处理情况</span>
            </div>
            <div class="handling-situation" v-if="disposeData.leaderTestVo">
              <div class="item flex">
                <div
                  v-for="(item, index) in handlingSituation"
                  :key="index"
                  class="flex-item"
                >
                  <template v-if="disposeData[item.value][item.value1]">
                    {{ item.name }}<br />
                    <span v-if="item.id != 1"
                      ><span v-if="item.id === 2">
                        {{
                          disposeData[item.value][item.value1] == 1
                            ? "受案"
                            : "不受案"
                        }}
                      </span>
                      <span v-else>{{
                        disposeData[item.value][item.value1]
                      }}</span>
                    </span>
                    <img
                      v-else
                      :src="disposeData[item.value][item.value1]"
                      alt=""
                    />
                  </template>
                </div>
              </div>
              <!-- <div class="item flex">
              <div
                v-for="(item, index) in handleList"
                :key="index"
                class="flex-item"
              >
                {{ item.name }}<br />
                <span>{{ item.value }}</span>
              </div>
            </div> -->
            </div>
            <div
              class="handling-situation m-t-15"
              v-if="disposeData.policeDisposeTestVo"
            >
              <div class="item flex">
                <div
                  v-for="(item, index) in handlingSituation1"
                  :key="index"
                  class="flex-item"
                >
                  <template v-if="disposeData[item.value][item.value1]">
                    {{ item.name }}<br />
                    <span> {{ disposeData[item.value][item.value1] }}</span>
                  </template>
                </div>
              </div>
            </div>
            <div
              class="handling-situation m-t-15 item1 p-l"
              v-if="disposeData.policeSecurityTestVo"
            >
              <div class="item">
                <div v-for="(item, index) in handlingSituation2" :key="index">
                  <template v-if="disposeData[item.value][item.value1]">
                    <strong>{{ item.name }}：</strong>
                    <span v-if="item.id == 1">
                      {{
                        disposeData[item.value][item.value1] == 1
                          ? "严处"
                          : "不严处"
                      }}</span
                    >
                    <span v-else>
                      {{ disposeData[item.value][item.value1] }}</span
                    >
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {
  detailsList,
  userList,
  unitList,
  handlingSituation,
  handlingSituation1,
  handlingSituation2,
  briefDetailsList,
} from "@/utils/securityIncident";
import {
  safeThingsGetPageList,
  safeThingsStreamList,
  excelOut,
} from "@/api/securityIncident";

export default {
  components: { Pagination },
  filters: {
    getPlaceVal(list) {
      let val = "";
      list.forEach((item, index) => {
        if (item.checked && index == 3) {
          val = item.value + item.extra;
        } else if (item.checked) {
          val = item.value;
        }
      });
      return val;
    },
  },
  computed: {},
  data() {
    return {
      // 主表格&主表格加载状态
      list: [{}],
      listLoading: true,
      buttonLoading: false,
      // 分页参数
      page: {
        data: {
          passApplyType: null,
          idNumber: null,
          name: null,
          phone: null,
          endTime: null,
          startTime: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      isTable: true,
      type_list: [
        { id: 1, name: "旅客" },
        { id: 2, name: "货代" },
        { id: 3, name: "工作人员" },
      ],
      status_list: [
        { id: 1, name: "待确认" },
        { id: 2, name: "待受案" },
        { id: 3, name: "已受案" },
        { id: 4, name: "已完成" },
      ],
      event_type_list: [
        { id: 1, name: "I类事件" },
        { id: 2, name: "II类事件" },
      ],
      section_list: [],
      detailData: {},
      disposeData: {},
      auditList: [],
      detailsList: detailsList,
      userList: userList,
      unitList: unitList,
      handlingSituation: handlingSituation,
      handlingSituation1: handlingSituation1,
      handlingSituation2: handlingSituation2,
      briefDetailsList: briefDetailsList,
      confirmed: require("../../assets/secureIncidentCard/confirmed.png"),
      haveAccepted: require("../../assets/secureIncidentCard/haveAccepted.png"),
      pass: require("../../assets/secureIncidentCard/pass.png"),
      pendingCase: require("../../assets/secureIncidentCard/pendingCase.png"),
    };
  },
  created() {
    this.fetchData();
  },
  watch: {},
  methods: {
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      safeThingsGetPageList(this.page).then((res) => {
        this.list = res.data.records;
        this.list.forEach((item) => {
          item.safeThingsPlace = JSON.parse(item.safeThingsPlace);
        });
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    async create(row) {
      this.buttonLoading = true;
      this.detailData = row;
      this.disposeData = row.safeThingsDetailVo;
      if (this.detailData.briefDetailsList.length > 0) {
        this.briefDetailsList.forEach((item) => {
          this.detailData.briefDetailsList.forEach((item1) => {
            if (item.id == item1) {
              item.choose = true;
            }
          });
        });
      }
      safeThingsStreamList(row.safeThingsId).then((res) => {
        this.auditList = res.data;
        this.isTable = false;
        this.buttonLoading = false;
      });
    },
    // 导出
    exportFile(id, name) {
      this.listLoading = true;
      excelOut({ safeThingsId: id }).then((res) => {
        var eleLink = document.createElement("a");
        eleLink.style.display = "none";
        // 字符内容转变成blob地址
        var blob = new Blob([res]);
        eleLink.href = URL.createObjectURL(blob);
        eleLink.setAttribute("download", name + ".xlsx");
        // 自动触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
        this.listLoading = false;
      });
    },
    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped lang="scss">
.tit {
  display: inline-block;
  margin-right: 20px;
}
.secondary-heading {
  border-radius: 10px;
  background-color: #3e9dff;
  color: #fff;
  padding: 16px 12px;
  margin-top: 28px;
  margin-bottom: 15px;
  display: inline-block;
  font-weight: 550;
  width: 49%;
  // min-width:  500px;
}
.bgc {
  background-color: #f0f5ff;
  color: #333;
  width: 100%;
  margin-bottom: 15px;
}
.left,
.right {
  flex: 1;
  img {
    width: 96px;
    height: 128px;
    margin-right: 16px;
  }
}
.item {
  margin: 0 28px;
  line-height: 25px;
  color: #6491e7;
  font-size: 14px;
  img {
    width: 90px;
    height: 90px;
    margin-right: 16px;
  }
  div {
    margin-bottom: 20px;
  }
  span {
    color: #333;
    font-size: 15px;
  }
}
.item1 {
  color: #333;
  line-height: 30px;
  div {
    margin-bottom: 0;
  }
}
.left {
  margin-right: 25px;

  .user-msg {
    line-height: 40px;
  }
}
.right {
  .signature {
    width: 129px;
    height: 78px;
    margin-left: 28px;
    margin-top: 20px;
  }
}
.handling-situation {
  padding-top: 16px;
  background-color: #f0f5ff;
}
.m-b-15 {
  margin-bottom: 15px;
}
.m-t-15 {
  margin-top: 15px;
}

.m-t {
  margin-top: 20px;
}
.m-l {
  margin-left: 28px;
}
.p-l {
  padding-bottom: 16px;
}
.l-h {
  line-height: 27px;
  margin-right: 70px;
}
.flex-item {
  width: 31%;
}
.audit-img {
  width: 140px !important;
  height: 120px !important;
}
.time {
  font-size: 14px;
  margin-left: 20px;
  color: #6491e7;
}
.audit {
  background-color: #f0f5ff;
  padding: 12px;
  flex: 1;
}
.audit-item {
  position: relative;
  line-height: 25px;
}
.blue {
  color: #409eff;
  cursor: pointer;
  display: inline-block;
  margin-left: 10px;
}
.red {
  color: #fc7c7c;
  margin-left: 10px;
}
.yellow {
  color: #fcba39;
}
.blue-dot {
  position: absolute;
  background: #409eff;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 5px;
}
.blue-line {
  position: absolute;
  height: 87%;
  /* width: 2px; */
  border-left: 1.6px dashed #409eff;
  top: 22px;
  left: 4px;
}
.audit-item-msg {
  margin-left: 35px;
  margin-bottom: 15px;
  line-height: 30px;
}
</style>
