// 审核详情
<template>
  <div>
    <div class="head">
      <span>审核详情</span>
      <el-button
        type="primary"
        size="small"
        style="margin-left: 20px"
        @click="back"
        >返回</el-button
      >
    </div>
    <div class="addmodel-main" v-if="Object.keys(detailData).length > 0">
      <div class="addmodel-left">
        <div
          class="left-title"
          :style="{ background: formatStatus(detailData.warningGrade).color }"
        >
          <div>
            【预警等级】 {{ formatStatus(detailData.warningGrade).name }}
          </div>
          <div>{{ detailData.createTime }} 创建</div>
        </div>
        <div class="left-contain">
          <div class="left-contain-item">
            <div class="item-tit">布控信息</div>
            <div class="item-info">
              <el-descriptions :column="2">
                <el-descriptions-item label="任务名称">{{
                  detailData.taskName
                }}</el-descriptions-item>
                <el-descriptions-item label="布控单位">{{
                  detailData.controlUsername
                }}</el-descriptions-item>
                <el-descriptions-item label="布控时间段"
                  >{{ detailData.controlStartTime }} 至
                  {{ detailData.controlEndTime }}</el-descriptions-item
                >
                <el-descriptions-item label="创建单位">
                  {{ detailData.createUsername }}
                </el-descriptions-item>
                <el-descriptions-item label="负责人">
                  {{ detailData.manageName }}
                </el-descriptions-item>
                <el-descriptions-item label="负责人手机号">{{
                  detailData.managePhone.join("，")
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div class="left-contain-item">
            <div class="item-tit">布控人员信息 【{{ total }}】</div>
            <div class="item-info">
              <el-form :inline="true" :model="page.data">
                <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-select
                    v-model="page.data.documentType"
                    clearable
                    filterable
                    placeholder="请选择证件类型"
                  >
                    <el-option label="护照" :value="1"></el-option>
                    <el-option label="身份证" :value="2"></el-option>
                  </el-select>
                </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.warningType"
                    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>
              <!-- 主体表格 -->
              <el-table
                :data="tableData"
                v-loading="listLoading"
                border
                fit
                highlight-current-row
                class="table"
              >
                <el-table-column align="center" width="80" label="序号">
                  <template slot-scope="scope">
                    {{ indexMethod(scope.$index) }}
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="人员姓名">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="documentType"
                  label="证件类型"
                >
                  <template v-slot="{ row }">
                    <el-tag
                      type="warning"
                      effect="plain"
                      v-if="row.documentType == 2"
                      >身份证</el-tag
                    >
                    <el-tag effect="plain" v-else>护照</el-tag>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="idNumber" label="证件号">
                </el-table-column>
                <el-table-column
                  align="center"
                  prop="warningType"
                  label="布控人员类型"
                >
                </el-table-column>
              </el-table>
              <!--分页栏-->
              <pagination
                :total="total"
                :page.sync="page.pageNum"
                :limit.sync="page.pageSize"
                @pagination="fetchData"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="addmodel-right">
        <div class="item-layout">
          <span class="prompt">{{ review ? "审核" : "审核情况" }}</span>
          <div class="item-info-review">
            <el-form
              :model="form"
              :rules="rules"
              ref="formRef"
              label-position="left"
              label-width="100px"
              v-if="review"
            >
              <el-form-item
                label="审核意见"
                prop="reviewStatus"
                style="margin-bottom: 30px"
              >
                <el-radio-group v-model="form.reviewStatus">
                  <el-radio :label="2">同意</el-radio>
                  <el-radio :label="4">驳回</el-radio>
                  <el-radio :label="3">整改</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="审核备注"
                prop="remark"
                :rules="{
                  required: form.reviewStatus == 4 || form.reviewStatus == 3,
                  message:
                    form.reviewStatus == 4
                      ? '请输入驳回理由'
                      : '请输入整改内容',
                  trigger: 'blur',
                }"
              >
                <el-input
                  type="textarea"
                  :rows="10"
                  v-model="form.remark"
                  :placeholder="
                    '请输入' +
                    (form.reviewStatus === 4
                      ? '驳回'
                      : form.reviewStatus === 3
                      ? '整改'
                      : '备注') +
                    '内容'
                  "
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div v-if="!review && reviewDetailData.length !== 0">
              <div class="audit-item">
                <i class="blue-dot"></i>
                <i class="blue-line"></i>
                <div class="audit-item-msg">
                  <span class="tit">{{ reviewDetailData[0].actionName }}</span>
                  <span class="time">{{ reviewDetailData[0].createTime }}</span>
                </div>
              </div>
              <div class="audit-item" v-if="reviewDetailData.length > 1">
                <i
                  :class="detailData.status == 4 ? 'refuse-dot' : 'blue-dot'"
                ></i>
                <div class="audit-item-msg">
                  <span class="tit">{{ reviewDetailData[1].actionName }}</span>
                  <span class="time">{{ reviewDetailData[1].createTime }}</span>
                  <div class="audit-item-msg-footer">
                    <div>{{ reviewDetailData[1].username }}</div>
                    <div v-if="detailData.status == 2" class="agree">同意</div>
                    <div v-if="detailData.status == 4" class="agree refuse">
                      驳回
                    </div>
                  </div>
                  <div v-if="detailData.status == 4" class="refuse">
                    驳回原因：{{ reviewDetailData[1].remark }}
                  </div>
                  <div v-if="detailData.status == 2" class="agreereason">
                    同意原因：{{ reviewDetailData[1].remark }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="review" class="addmodel-right-footer">
            <el-button @click="back">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import {
  getwarningPersonCheckPageList,
  getwarninPersonStepList,
  getwarninPersonCheck,
} from "@/api/personnelWarning";
export default {
  components: { Pagination },
  props: {
    isShowUpdate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      listLoading: false,
      form: {
        reviewStatus: "",
        remark: "",
      },
      review: "",
      detailData: {},
      reviewDetailData: [],
      // 页面
      page: {
        // 搜索表单
        data: {
          name: "",
          documentType: "",
          idNumber: "",
          warningType: "",
          warningPersonCheckId: "",
        },
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      rules: {
        reviewStatus: [
          { required: true, message: "审核意见不能为空!", trigger: "blur" },
        ],
      },
      warning_list: [
        {
          name: "Ⅰ级",
          status: 1,
          color: "#B60ED1",
        },
        {
          name: "Ⅱ级",
          status: 2,
          color: "#FF5C66",
        },
        {
          name: "Ⅲ级",
          status: 3,
          color: "#FF8B49",
        },
        {
          name: "Ⅳ级",
          status: 4,
          color: "#FFC52F",
        },
        {
          name: "Ⅴ级",
          status: 5,
          color: "#78D1E5",
        },
      ],
    };
  },
  mounted() {},

  methods: {
    open(obj, review) {
      this.detailData = obj;
      this.fetchData();
      this.getStepList();
      if (review) {
        this.review = review;
        this.$nextTick(() => {
          this.$refs.formRef.resetFields();
        });
      }
    },
    async fetchData() {
      this.page.data.warningPersonCheckId =
        this.detailData.warningPersonCheckId;
      this.listLoading = true;
      const res = await getwarningPersonCheckPageList(this.page);
      this.tableData = res.data.records;
      this.total = res.data.total;
      this.listLoading = false;
    },
    // 审核详情步骤列表
    async getStepList() {
      const res = await getwarninPersonStepList({
        warningPersonCheckId: this.detailData.warningPersonCheckId,
      });
      this.reviewDetailData = res.data;
    },
    submit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          const res = {
            remark: this.form.remark,
            status: this.form.reviewStatus,
            warningPersonCheckId: this.detailData.warningPersonCheckId,
          };
          getwarninPersonCheck(res).then(() => {
            this.$message.success(`审核成功`);
            this.back();
            this.$emit("success");
          });
        }
      });
    },
    back() {
      this.$emit("back");
    },
    formatStatus(type) {
      const value = this.warning_list.find((item) => item.status == type);
      return {
        name: value?.name || "",
        color: value?.color || "",
      };
    },
    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: 190px;
}
.head {
  margin-bottom: 32px;
  span {
    color: #333;
    font-size: 18px;
    font-weight: 500;
  }
}
.addmodel-main {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.addmodel-left {
  width: 65%;
  .left-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: #ff5c65;
    color: #fff;
    font-size: 16px;
  }
  .left-contain {
    margin-left: 20px;
    .left-contain-item {
      .item-tit {
        display: inline-block;
        padding: 10px 20px;
        background-color: #f5f8fc;
        line-height: 24px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 30px;
        margin-bottom: 10px;
      }
      .item-info {
        margin-left: 30px;
      }
    }
  }
}
.addmodel-right {
  background-color: #f5f8fc;
  border-radius: 10px;
  padding: 20px;
  width: 25%;
  margin-right: 3%;
}
.item-layout {
  // display: flex;
  // flex-direction: column;
  // align-items: flex-start;
  position: relative;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 20px;
  &:before {
    position: absolute;
    top: 1px;
    left: 0px;
    width: 3px;
    height: 16px;
    content: "";
    background-color: #409eff;
    border-radius: 3px;
  }
  .prompt {
    font-size: 18px;
    font-weight: 600;
    color: #409eff;
  }
  .item-info-review {
    margin: 20px 0;
    .audit-item {
      position: relative;
      line-height: 25px;
      .blue-dot {
        position: absolute;
        background: #409eff;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: 9px;
      }
      .refuse-dot {
        position: absolute;
        background: #fc7c7c;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        top: 9px;
      }
      .blue-line {
        position: absolute;
        height: 90%;
        /* width: 2px; */
        border-left: 1.6px dashed #409eff;
        top: 22px;
        left: 4px;
      }
      .audit-item-msg {
        margin-left: 30px;
        margin-bottom: 15px;
        line-height: 30px;
        color: #606266;
        .tit {
          font-size: 16px;
          font-weight: 500;
        }
        .time {
          font-size: 14px;
          margin-left: 20px;
        }
      }
      .audit-item-msg-footer {
        display: flex;
      }
      .agree {
        margin-left: 20px;
        font-size: 13px;
        color: #3e9dff;
      }
      .refuse {
        color: #fc7c7c !important;
      }
      .agreereason {
        color: #3e9dff !important;
      }
    }
  }
  .addmodel-right-footer {
    margin-top: 40px;
    text-align: right;
  }
}
</style>
