<template>
  <div class="my-agency all-select-btn">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="事件名称：">
        <el-input v-model="formInline.eventName"> </el-input>
      </el-form-item>
      <el-form-item label="发生位置：">
        <el-input v-model="formInline.keyword" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="所属工序：">
        <el-select
          v-model="formInline.productionLineId"
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="(item, index) in basicConfiguration.productLineList"
            :key="item.productionLineId"
            :label="item.productionLineName"
            :value="item.productionLineId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select
          v-model="formInline.deviceType"
          style="width: 180px"
          placeholder="请选择"
        >
          <el-option label="全部" value="" />
          <el-option
            v-for="(item, index) in basicConfiguration.deviceList"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker
          type="datetimerange"
          v-model="formInline.createTime"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          popper-class="date-picker-popper"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="default" class="reset-btn-balck-theme" @click="onReset"
          >重置</el-button
        >
        <el-button
          type="default"
          class="search-btn-balck-theme"
          @click="onSearch"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="table-box">
      <common-table
        ref="pageRef"
        :data="tableData"
        :columns="tableColumns"
        :default-page-size="20"
        :total="total"
        @pagination-change="handlePaginationChange"
        :pagination-texts="{
          total: '共',
          sizeChange: '条/页',
          prev: '前一页',
          next: '后一页',
          jumper: '跳至',
        }"
      >
        <template #index="{ $index }">
          {{ getIndex($index) }}
        </template>
        <template #level="{ row }">
          <span class="level" :class="getColor(row.level)">
            {{ row.level }}
          </span>
        </template>
        <template #operation="{ row }">
          <span class="view-btn green-color" @click="handleView(row)">
            查看
          </span>
          <!--          <span  class="table-btn">|</span>
          <span class="view-btn"  @click="handleReject(row)">
            驳回
          </span>
          <span class="table-btn">|</span>
          <span class="view-btn" @click="changeBag(row)">
            更换布袋
          </span>-->
        </template>
      </common-table>
    </div>
    <common-dialog
      :show-dialog="viewDialog.show"
      :title="viewDialog.title"
      :width="viewDialog.width"
      @close:showDialog="viewDialog.show = false"
    >
      <div class="form-box">
        <el-form ref="form" :model="formModel">
          <el-row :gutter="24">
            <el-col :span="24">
              <div class="label-title">闭环控制信息</div>
              <div class="alarm-content">
                <div class="content-item">
                  <span class="name">编号：</span>
                  <span class="value">{{ workSheetDetail.workTicketNo }}</span>
                </div>
                <div class="content-item">
                  <span class="name">创建时间：</span>
                  <span class="value">{{ workSheetDetail.createTime }}</span>
                </div>
                <div class="content-item">
                  <span class="name">闭环控制状态：</span>
                  <span class="value work-status">{{
                    workSheetDetail.desc
                  }}</span>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="24" v-if="workSheetDetail.warnType !== 5">
            <el-col :span="24">
              <div class="label-title">告警信息</div>
              <div class="alarm-content">
                <div class="content-item">
                  <span class="name">所属工序：</span>
                  <span class="value">{{
                    workSheetDetail.productionLine || "--"
                  }}</span>
                </div>
                <div class="content-item">
                  <span class="name">发生位置：</span>
                  <span class="value">{{ workSheetDetail.deviceName }}</span>
                </div>
                <div
                  class="content-item"
                  v-if="
                    workSheetDetail.warnType &&
                    workSheetDetail.warnType != 3 &&
                    workSheetDetail.warnType != 18
                  "
                >
                  <span
                    class="name"
                    v-if="
                      workSheetDetail.warnType != 99 &&
                      workSheetDetail.warnType != 4 &&
                      workSheetDetail.warnType != 20 &&
                      workSheetDetail.warnType != 21
                    "
                    >告警值：</span
                  >
                  <span class="name" v-else-if="workSheetDetail.warnType == 4"
                    >离线时长：</span
                  >
                  <span
                    class="value alarm-value"
                    v-if="
                      workSheetDetail.warnType != 99 &&
                      workSheetDetail.warnType != 4
                    "
                    >{{ workSheetDetail.value }}{{ workSheetDetail.unit }}</span
                  >
                  <span
                    class="value alarm-value"
                    v-else-if="workSheetDetail.warnType == 4"
                    >{{ warnValueFilter(workSheetDetail?.offlineTime) }}</span
                  >
                  <span class="value alarm-value" v-else>
                    {{ workSheetDetail.totalConstantTime }}
                  </span>
                </div>
                <div class="content-item" v-if="workSheetDetail.convertValue">
                  <span class="name">折算值:</span>
                  <span class="value alarm-value"
                    >{{ workSheetDetail.convertValue
                    }}{{ workSheetDetail.unit }}</span
                  >
                </div>
                <div class="content-item">
                  <span class="name">告警时间：</span>
                  <span class="value">{{ workSheetDetail.eventTime }}</span>
                </div>
                <div
                  class="content-item"
                  v-if="
                    workSheetDetail.warnType &&
                    workSheetDetail.warnType != 3 &&
                    workSheetDetail.warnType != 9
                  "
                >
                  <span class="name">告警指标：</span>
                  <span class="value">{{ workSheetDetail.metric }}</span>
                </div>
                <div
                  class="content-item"
                  v-if="
                    workSheetDetail.warnType &&
                    workSheetDetail.warnType != 3 &&
                    workSheetDetail.warnType != 9
                  "
                >
                  <span class="name">告警级别：</span>
                  <span
                    class="value"
                    :class="[
                      workSheetDetail.level == 2
                        ? 'red'
                        : workSheetDetail.level == 1
                        ? 'yellow'
                        : '',
                    ]"
                  ></span>
                </div>
                <div
                  class="content-item"
                  v-if="
                    workSheetDetail.warnType && workSheetDetail.warnType == 18
                  "
                >
                  <span class="name">故障类型：</span>
                  <span class="value">
                    {{ viewData[workSheetDetail.cemsBreakdownTag] }}
                  </span>
                </div>
                <div
                  class="content-item"
                  v-if="
                    workSheetDetail.warnType && workSheetDetail.warnType == 3
                  "
                >
                  <span class="name">运行状态：</span>
                  <span class="value">{{ workSheetDetail.runState }}</span>
                </div>
                <div
                  class="content-item new-content-item-style"
                  v-if="workSheetDetail.metric == 'TSP浓度'"
                >
                  <span class="name change-style">TSP粉尘污染溯源结果：</span>
                  <span class="value">{{
                    workSheetDetail.sourceTrace || "无"
                  }}</span>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="24" v-if="workSheetDetail?.warnType === 5">
            <el-col :span="24">
              <div class="label-title">道路信息</div>
              <div class="alarm-content">
                <div class="content-item">
                  <span class="name">发生位置:</span>
                  <span class="value">
                    {{
                      workSheetDetail.analyzeResult &&
                      workSheetDetail.analyzeResult.roadName
                        ? workSheetDetail.analyzeResult.roadName
                        : "--"
                    }}
                  </span>
                </div>
                <div class="content-item">
                  <span class="name">全厂PM10均值:</span>
                  <span class="value">
                    {{
                      workSheetDetail.analyzeResult &&
                      workSheetDetail.analyzeResult.pm10AvgFactory
                        ? workSheetDetail.analyzeResult.pm10AvgFactory +
                          " μg/m³"
                        : "--"
                    }}
                  </span>
                </div>
                <div class="content-item">
                  <span class="name">统计时间:</span>
                  <span class="value">
                    {{
                      workSheetDetail.analyzeResult
                        ? workSheetDetail.analyzeResult.startTime +
                          "—" +
                          workSheetDetail.analyzeResult.endTime
                        : ""
                    }}
                  </span>
                </div>
                <div class="content-item">
                  <span class="name">PM10均值:</span>
                  <span class="value">
                    {{
                      workSheetDetail.analyzeResult &&
                      workSheetDetail.analyzeResult.pm10AvgRoad
                        ? workSheetDetail.analyzeResult.pm10AvgRoad + " μg/m³"
                        : "--"
                    }}
                  </span>
                </div>
                <div class="content-item">
                  <span class="name">道路清洁度指数:</span>
                  <template v-if="workSheetDetail.analyzeResult">
                    <div
                      v-for="(item, i) in Number(
                        workSheetDetail.analyzeResult.riskLevel
                      )
                        ? Number(workSheetDetail.analyzeResult.riskLevel)
                        : 0"
                      :key="i"
                    >
                      <span
                        v-if="Number(workSheetDetail.analyzeResult.riskLevel)"
                      >
                        <img src="@/assets/star.png" alt="⭐️" />
                      </span>
                    </div>
                  </template>

                  <div
                    v-if="
                      workSheetDetail.analyzeResult &&
                      workSheetDetail.analyzeResult.riskLevel == '-'
                    "
                  >
                    <span class="value">
                      {{ workSheetDetail.analyzeResult.riskLevel }}
                    </span>
                  </div>
                  <!-- <span class="value">{{workSheetDetail.deviceName}}</span> -->
                </div>
                <div class="content-item">
                  <span class="name">VDM均值:</span>
                  <span class="value">
                    {{
                      workSheetDetail.analyzeResult &&
                      workSheetDetail.analyzeResult.vdmAvgRoad
                        ? workSheetDetail.analyzeResult.vdmAvgRoad + " μg/m³"
                        : "--"
                    }}
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row
            :gutter="24"
            v-if="
              workSheetDetail.forwards &&
              workSheetDetail.forwards[0] &&
              workSheetDetail.triggerType === 2
            "
          >
            <el-col :span="24">
              <div class="label-title">问题描述</div>
              <div class="input-style-text">
                {{ workSheetDetail.forwards[0].forward }}
              </div>
              <div
                class="input-style-text"
                v-if="
                  !workSheetDetail.forwards[0].forward && imgUrlList.length == 0
                "
              >
                暂无描述
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="24" v-if="workSheetDetail?.alarmImags">
            <el-col>
              <div class="label-title">告警图片</div>
              <div class="demo-image__preview">
                <div
                  class="image-preview"
                  v-for="(item, index) in alarmImg"
                  :key="index"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :lazy="true"
                    :src="item"
                    :preview-src-list="alarmImg"
                  ></el-image>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row
            :gutter="24"
            v-if="
              workSheetDetail.typeName == 'CEMS' &&
              (workSheetDetail.leftAvgValue > 0 ||
                workSheetDetail.leftAvgValue == 0)
            "
          >
            <el-col :span="24">
              <div class="label-title">排放提示</div>
              <div class="tips-content">
                <div class="content-item">
                  <span class="name">
                    后半小时内平均排放放浓度不得超
                    <span class="value">
                      {{
                        workSheetDetail.leftAvgValue
                          ? workSheetDetail.leftAvgValue.toFixed(2)
                          : ""
                      }}
                    </span>
                    {{ workSheetDetail.unit }}
                  </span>
                  <!-- <span class="value">{{workSheetDetail.deviceName}}</span> -->
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="24" v-if="srcList.length">
            <el-col :span="24">
              <div class="label-title">告警图片</div>
              <div class="demo-image__preview">
                <div
                  class="image-preview"
                  v-for="(item, index) in srcList"
                  :key="index"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :lazy="true"
                    :src="item"
                    :preview-src-list="srcList"
                  ></el-image>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row
            :gutter="24"
            v-if="functionAuthority && functionAuthority.close_loop_upgrade"
          >
            <el-col :span="24" class="deal-line-wrap">
              <div class="label-title">落实管理制度</div>
              <div
                class="processing-records"
                :class="[
                  workSheetDetail.levelManageList.length == 1
                    ? 'one-record'
                    : '',
                ]"
                v-if="
                  workSheetDetail.levelManageList &&
                  workSheetDetail.levelManageList.length > 0
                "
              >
                <div
                  class="processing-records-item"
                  v-for="(item, index) in workSheetDetail.levelManageList"
                  :key="index"
                >
                  <div class="steps-line">
                    <div class="header" v-show="index !== 0"></div>
                    <div
                      class="footer"
                      v-show="
                        index !== workSheetDetail.levelManageList.length - 1
                      "
                    ></div>
                  </div>
                  <span class="handler">{{ item.userName }}</span>
                  <span class="circle"></span>
                  <span class="step-name">
                    {{
                      item.state == 0
                        ? "处理中"
                        : item.state == 1
                        ? "已处理"
                        : ""
                    }}
                  </span>
                  <span class="partment">{{ item.officeName || "无" }}</span>
                  <span class="handler-time">{{ item.date }}</span>
                </div>
              </div>
              <div v-else class="input-style-text">暂无数据</div>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <div class="label-title">原因分析</div>
              <div class="input-style">
                {{ workSheetDetail.reason || "暂无信息" }}
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="24" v-if="imgUrlList.length">
            <el-col :span="24">
              <div class="label-title">现场图片</div>
              <div class="demo-image__preview">
                <div
                  class="image-preview"
                  v-for="(item, index) in imgUrlList"
                  :key="index"
                >
                  <el-image
                    style="width: 100px; height: 100px"
                    :lazy="true"
                    :src="item"
                    :preview-src-list="imgUrlList"
                  ></el-image>
                </div>
              </div>
              <div
                class="input-style-text"
                v-if="
                  !workSheetDetail.forwards[0].forward && imgUrlList.length == 0
                "
              >
                暂无描述
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <div class="label-title">处理措施</div>
              <div class="input-style">
                {{ workSheetDetail.measure || "暂无信息" }}
              </div>
            </el-col>
          </el-row>

          <el-row
            :gutter="24"
            v-if="workSheetDetail.warnType && workSheetDetail.warnType === 5"
          >
            <el-col :span="24">
              <div class="label-title">改善情况</div>
              <div
                class="improve-situation"
                v-if="workSheetDetail.analyzeResult"
              >
                <div class="improve-situation-item">
                  <span>改善前</span>
                  <div class="road-cleanliness-index">
                    <div class="star" v-if="workSheetDetail.analyzeResult">
                      <div v-for="(item, i) in starList" :key="i">
                        <span
                          v-if="
                            Number(
                              workSheetDetail.analyzeResult
                                ? workSheetDetail.analyzeResult.riskLevel
                                : 0
                            )
                          "
                        >
                          <img src="@/assets/star.png" alt="⭐️" />
                        </span>
                      </div>
                    </div>
                    <span class="name">道路清洁度指数</span>
                  </div>
                </div>
                <div class="improve-situation-item">
                  <span>改善后</span>
                  <div class="road-cleanliness-index">
                    <div class="star" v-if="workSheetDetail.analyzeResult">
                      <div v-for="(item, i) in 3" :key="i">
                        <span
                          v-if="
                            Number(
                              workSheetDetail.analyzeResult
                                ? workSheetDetail.analyzeResult.riskLevel
                                : 0
                            )
                          "
                        >
                          <img src="@/assets/star.png" alt="⭐️" />
                        </span>
                      </div>
                    </div>
                    <span class="name">道路清洁度指数</span>
                  </div>
                </div>
              </div>
              <div v-else class="input-style-text">暂无数据</div>
            </el-col>
          </el-row>

          <el-row
            :gutter="24"
            v-if="
              workSheetDetail.warnType &&
              workSheetDetail.warnType !== 3 &&
              workSheetDetail.warnType != 9 &&
              workSheetDetail.warnType !== 4 &&
              workSheetDetail.warnType !== 5 &&
              workSheetDetail.warnType !== 99 &&
              workSheetDetail.warnType != 20 &&
              workSheetDetail.warnType != 21 &&
              workSheetDetail.warnType != 18
            "
          >
            <el-col :span="24">
              <div class="label-title">改善情况</div>
              <div class="improve-situation">
                <div class="improve-situation-item">
                  <span>告警值</span>
                  <span class="value">
                    {{ workSheetDetail.value }}
                    <span>{{ workSheetDetail.unit }}</span>
                  </span>
                </div>
                <div class="improve-situation-item">
                  <span>监测值</span>
                  <span class="value">
                    {{ workSheetDetail.handleValue }}
                    <span>{{
                      workSheetDetail.warnTypeName == "高频高幅"
                        ? "μg/m³"
                        : workSheetDetail.unit
                    }}</span>
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row
            :gutter="24"
            v-if="workSheetDetail.forwards && workSheetDetail.forwards.length"
          >
            <el-col :span="24" class="deal-line-wrap">
              <div class="label-title">处理记录</div>
              <div
                class="processing-records"
                :class="[
                  workSheetDetail.forwards.length == 1 ? 'one-record' : '',
                ]"
              >
                <div
                  class="processing-records-item"
                  v-for="(item, index) in workSheetDetail.forwards"
                  :key="index"
                >
                  <div class="steps-line">
                    <div class="header" v-show="index !== 0"></div>
                    <div
                      class="footer"
                      v-show="index !== workSheetDetail.forwards.length - 1"
                    ></div>
                  </div>
                  <span class="handler">{{
                    index === 0 && item.state === 1
                      ? item.sendUserName
                      : item.receiveUserName
                  }}</span>
                  <span class="circle"></span>
                  <span class="step-name">
                    {{
                      item.state == 0
                        ? "未送达"
                        : item.state == 1
                        ? "已创建"
                        : item.state == 2
                        ? "已处理"
                        : item.state == 3
                        ? "已分配"
                        : item.state == 4
                        ? "处理中"
                        : ""
                    }}
                  </span>
                  <span class="handler-time">
                    {{ item.createTime ? item.createTime : "--" }}
                  </span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </common-dialog>
    <common-dialog
      :show-dialog="rejectDialog.show"
      :title="rejectDialog.title"
      :width="rejectDialog.width"
      @handleBtn="saveReject"
      @close:showDialog="rejectDialog.show = false"
    >
      <el-form>
        <el-form-item label="驳回原因">
          <el-select v-model="rejectType">
            <el-option
              v-for="(item, i) in reasonList"
              :key="i"
              :label="item.description"
              :value="item.rejectType"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-input
              type="textarea"
              v-model="rejectReason"
              :autosize="{ minRows: 2, maxRows: 12 }"
              placeholder="请输入内容"
            >
            </el-input>
          </el-col>
        </el-row>
      </el-form>
    </common-dialog>
    <common-dialog
      :show-dialog="bagDialog.show"
      :title="bagDialog.title"
      :btn-group="bagDialog.btnGroup"
      :width="bagDialog.width"
      @handleBtn="saveBag"
      @close:showDialog="bagDialog.show = false"
    >
      <el-form>
        <el-form-item label="第几行：">
          <el-select
            v-model="bagRow"
            placeholder="请选择第几行"
            @change="getCol"
          >
            <el-option
              v-for="item in rowList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="第几列：">
          <el-select v-model="bagCol" placeholder="请选择第几列">
            <el-option
              v-for="item in colList"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, computed } from "vue";
import CommonTable from "@/components/commonTable/index.vue";
import commonDialog from "./components/dialog.vue";
import { getData, getDataFun, postDataJSON } from "@/request/method.js";
import moment from "moment";
import { getToken } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import { router } from "@/router/index.js";
const formInline = ref({
  eventName: "",
  keyword: "",
  warnType: "",
  productionLineId: "",
  deviceType: "",
  createTime: [
    moment(new Date().getTime() - 1000 * 60 * 60 * 24 * 30).format(
      "YYYY-MM-DD HH:mm:ss"
    ),
    moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
  ],
});

const formModel = ref({
  selectReason: [],
});

const viewDialog = ref({
  title: "闭环控制分派",
  show: false,
  width: "45%",
});

const bagDialog = ref({
  title: "更换布袋",
  show: false,
  width: "30%",
  btnGroup: [
    {
      attrKey: "save",
      label: "保存",
    },
  ],
});

const bagRow = ref("");
const bagCol = ref("");
const rowList = ref([]);
const colList = ref([]);

const saveBag = () => {
  if (bagRow.value === "") {
    ElMessage({
      type: "warning",
      message: "请选择第几行",
    });
    return;
  }
  if (bagCol.value === "") {
    ElMessage({
      type: "warning",
      message: "请选择第几列",
    });
    return;
  }
  const params = {
    workTicketNo: workTicketNo.value,
    row: bagRow.value,
    column: bagCol.value,
  };
  postDataJSON("/transaction/doc/changeBag", params).then((res) => {
    if (res.code === 1) {
      ElMessage({
        type: "success",
        message: "更换布袋成功",
      });
      bagDialog.value.show = false;
    }
  });
};
const rowLineMap = ref(null);
const getBagRowLine = (no) => {
  const url = "/bag/cycle/getCompartEnumList";
  const params = {
    deviceNo: no,
  };
  getDataFun(url, params).then((res) => {
    if (res.code === 1) {
      rowLineMap.value = res.data;
      res.data.forEach((item) => {
        rowList.value.push(item.row);
      });
    }
  });
};

const getCol = () => {
  rowLineMap.value.forEach((item) => {
    if (item.row === bagRow.value) {
      colList.value = item.columns;
    }
  });
};

const viewData = {
  D: "在线监控(监测)仪器仪表故障",
  B: "在线监控(监测)仪器仪表与数采通讯异常",
  VGD: "在线监控(监测)仪器仪表与数采通讯异常",
};

const warnValueFilter = computed(() => {
  return (offlineTime) => {
    if (offlineTime == null || offlineTime <= 0) {
      return "--";
    }
    if (offlineTime < 60) {
      return offlineTime + "分钟";
    }
    if (offlineTime < 1440) {
      if (offlineTime % 60 == 0) {
        return offlineTime / 60 + "小时";
      } else {
        return (
          parseInt(offlineTime / 60) + "小时" + (offlineTime % 60) + "分钟"
        );
      }
    } else {
      let s;
      let d = parseInt(offlineTime / 60 / 24);
      let h = parseInt((offlineTime / 60) % 24);
      let m = offlineTime % 60;
      s = d + "天";
      if (h >= 1) {
        s += h + "小时";
      }
      if (m > 0) {
        s += m + "分钟";
      }
      return s;
    }
  };
});

const imgUrlList = ref([]);
const alarmImg = ref([]);
const srcList = ref([]);

const workTicketNo = ref("");
const rejectType = ref("");
const reasonList = ref([]);
const rejectReason = ref("");

const rejectDialog = ref({
  title: "驳回申请",
  show: false,
  width: "35%",
  btnGroup: [
    {
      attrKey: "save",
      label: "保存",
    },
  ],
});

const getIndex = (index) => {
  return (currentPage.value - 1) * pageSize.value + index + 1;
};

const basicConfiguration = reactive({
  ticketEventName: [],
  deviceList: [],
  productLineList: [{ productionLineName: "全部", productionLineId: "" }],
});

const workSheetDetail = ref(null);

const getProDuctLine = () => {
  const url = "/transaction/getProductionLine";
  getData(url).then((res) => {
    basicConfiguration.productLineList.push(...res.data);
  });
};

const getColor = computed(() => {
  return (level) => {
    if (level == 2) {
      return "red";
    } else if (level == 1) {
      return "yellow";
    } else {
      return "purple";
    }
  };
});

const onSearch = () => {
  currentPage.value = 1;
  pageRef.value.setCurrentPage(currentPage.value);
  searchData();
};

const onReset = () => {
  currentPage.value = 1;
  pageSize.value = 20;
  formInline.value.eventName = "";
  formInline.value.keyword = "";
  formInline.value.productionLineId = "";
  formInline.value.deviceType = "";
  formInline.value.createTime = [
    moment(new Date().getTime() - 1000 * 60 * 60 * 24 * 30).format(
      "YYYY-MM-DD HH:mm:ss"
    ),
    moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
  ];
  pageRef.value.setCurrentPage(currentPage.value);
  searchData();
};
const personTag = ref([]);
const handleView = async (data) => {
  viewDialog.value.title = data.eventName;
  let res = await getDetail(data.workTicketNo);
  viewDialog.value.show = true;
  personTag.value = [];
  if (res.handleUsers && res.handleUsers.length > 0) {
    res.handleUsers.forEach((item) => {
      personTag.value.push({
        type: "info",
        name: item.userName,
        userId: item.userId,
        userName: item.userName,
      });
    });
  }
  disposeWorkSheetDetail(res);
};
const dialogReason = ref("");
const dialogMeasure = ref("");
const disposeWorkSheetDetail = (obj) => {
  const {
    reason,
    measure,
    imagParams,
    imgUrl,
    alarmImags,
    forwards,
    createId,
  } = obj;
  if (forwards.length > 0) {
    let receiveUserItem = forwards.slice(-1)[0];
  }
  dialogMeasure.value = "";
  dialogMeasure.value = "";
  srcList.value = [];
  imgUrlList.value = [];

  if (imagParams) {
    let arr = [];
    for (let item of imagParams) {
      srcList.value = arr.concat(item.url.split(";"));
    }
  }
  if (alarmImags && alarmImags.length) {
    for (let item of alarmImags) {
      alarmImg.value.push(item.imageUrl);
    }
  }
  if (imgUrl) {
    imgUrlList.value = imgUrl.split(";");
  }
};

// 拒绝
const handleReject = (data) => {
  workTicketNo.value = data.workTicketNo;
  rejectDialog.value.show = true;
};

const saveReject = () => {
  const url = "/transaction/doc/reject";
  const params = {
    workTicketNo: workTicketNo.value,
    rejectType: rejectType.value,
    rejectReason: rejectReason.value,
    isDcTom: 1,
  };
  postDataJSON(url, params).then((res) => {
    workTicketNo.value = "";
    rejectReason.value = "";
    rejectType.value = "";
    rejectDialog.value.show = false;

    ElMessage({
      type: "success",
      message: "操作成功",
    });
    searchData();
  });
};

const getDetail = (workTicketNo) => {
  return new Promise((resolve, reject) => {
    const url = "/transaction/doc/detail";
    const params = {
      workTicketNo,
    };
    getDataFun(url, params)
      .then((res) => {
        workSheetDetail.value = res.data;
        resolve(res.data);
      })
      .catch((err) => {
        reject();
      });
  });
};

const changeBag = (data) => {
  workTicketNo.value = data.workTicketNo;
  getBagRowLine(data.deviceNo);
  bagDialog.value.show = true;
};

const tableData = ref([]);

const tableColumns = ref([
  {
    prop: "index",
    label: "序号",
    width: "6%",
  },
  {
    prop: "workTicketNo",
    label: "编号",
    width: "10%",
  },
  {
    prop: "eventName",
    label: "事件名称",
    width: "10%",
  },
  {
    prop: "deviceName",
    label: "发生位置",
    width: "10%",
  },
  {
    prop: "deviceNo",
    label: "设备编码",
    width: "10%",
  },
  {
    prop: "typeName",
    label: "设备类型",
    width: "10%",
  },
  {
    prop: "signalName",
    label: "信号名称",
    width: "10%",
  },
  {
    prop: "productionLine",
    label: "所属工序",
    width: "10%",
  },
  { prop: "warnTypeName", label: "类型", width: "10%" },
  { prop: "createTime", label: "发生时间", width: "10%" },
  { prop: "desc", label: "闭环状态", width: "10%" },
  { prop: "handleUser", label: "处理人", width: "10%" },
  { prop: "finishTime", label: "完成时间", width: "10%" },
  { prop: "level", label: "级别", width: "5%" },
  {
    prop: "operation",
    label: "操作",
    width: "15%",
  },
]);

const customerId = getToken("customerId");

const getWarnAndTicketConfigMap = () => {
  const url = "/system/getWarnAndTicketConfigMap";
  const params = {
    customerId,
  };
  getDataFun(url, params).then((res) => {
    if (res && res.code === 1) {
      const { ticketEventName } = res.data;
      basicConfiguration.ticketEventName =
        basicConfiguration.ticketEventName.concat(ticketEventName);
    }
  });
};

let realBtn = "";

const searchData = () => {
  currentPage.value = 1;
  pageSize.value = 20;

  getTableData();
};

const total = ref(0);

const getTableData = () => {
  let keyWord = formInline.value.keyword;
  const params = {
    eventName: formInline.value.eventName,
    warnType: formInline.value.warnType,
    createStartTime: formInline.value.createTime[0],
    createEndTime: formInline.value.createTime[1],
    productionLineId: formInline.value.productionLineId,
    keyword: keyWord,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    handleState: 2,
    belongTo: 1,
    isDcTom: 1,
    deviceType: formInline.value.deviceType,
  };
  tableData.value = [];
  const url = "/transaction/doc/getListParamPage";
  getDataFun(url, params).then((res) => {
    if (res && res.code === 1) {
      const { list } = res.data;
      total.value = res.data.total;
      disposeType(list);
      tableData.value = list;
      tableData.value.forEach((item) => {
        item.handleUser = "";
        item.handleUsers.forEach((ele, eIndex) => {
          if (eIndex > 0) {
            item.handleUser += "," + ele.userName;
          } else {
            item.handleUser += ele.userName;
          }
        });
      });
    }
  });
};

const disposeType = (list) => {
  if (list.length) {
    list.forEach((l) => {
      if (!l.deviceNo) {
        l.deviceNo = "--";
      }
      switch (l.warnType) {
        case 0:
          l.warnType = "人工提交";
          break;
        case 1:
          l.warnType = "超标";
          break;
        case 2:
          l.warnType = "超低";
          break;
        case 3:
          l.warnType = "生产治理同步率";
          break;
        case 4:
          l.warnType = "离线";
          break;
        case 5:
          l.warnType = "其他";
          break;
        case 10:
          l.warnType = "持续超标";
          break;
        case 11:
          l.warnType = "三倍超标";
          break;
        case 99:
          l.warnType = "恒值";
          break;
      }
    });
  }
};

const getDeviceType = () => {
  const url = "/alarm/getDeviceType";
  getData(url).then((res) => {
    basicConfiguration.deviceList = res.data;
  });
};

onMounted(() => {
  getProDuctLine();
  getWarnAndTicketConfigMap();
  getDeviceType();
  searchData();
});
const pageRef = ref(null);
const currentPage = ref(1);
const pageSize = ref(20);
const handlePaginationChange = (pagination) => {
  currentPage.value = pagination.currentPage;
  pageSize.value = pagination.pageSize;
  searchData();
};
</script>

<style scoped lang="scss">
.my-agency {
  width: 100%;
  height: calc(100% - 14px);
  box-sizing: border-box;
  background: #181d21;
  padding: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  &-bottom {
    flex: 1;
  }
  .level {
    width: 100%;
    color: #fff;
    text-align: center;
  }
  .table-box {
    height: calc(100vh - 600px);
    flex: 1;
  }
  .yellow {
    // color: #faa508;
    position: relative;
    &::before {
      content: " ";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffb224;
      position: absolute;
      left: 0;
      top: 6px;
    }
  }
  .red {
    position: relative;
    &::before {
      content: " ";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #db001d;
      position: absolute;
      left: 0;
      top: 6px;
    }
  }

  .purple {
    position: relative;
    &::before {
      content: " ";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #aa05fa;
      position: absolute;
      left: 0;
      top: 6px;
    }
  }
  .improve-situation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
    .improve-situation-item {
      width: 310px;
      height: 71px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
      line-height: 33px;
      &:first-child {
        background: linear-gradient(
          225deg,
          rgba(255, 133, 128, 0.65) 0%,
          rgba(255, 58, 71, 0.61) 100%,
          #0049fa 100%
        );
      }
      &:last-child {
        background: linear-gradient(
          225deg,
          rgba(128, 255, 178, 0.65) 0%,
          rgba(58, 120, 255, 0.61) 100%,
          #0049fa 100%
        );
      }
      .road-cleanliness-index {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        .name {
          font-size: 14px;
        }
      }
      .star {
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-right: 5px;
        }
      }
      .value {
        padding-right: 30px;
        span {
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
  }
  .tips-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 50px;
    .content-item {
      width: 50%;
      font-size: 14px;
      font-weight: 400;
      color: #3b3b3b;
      line-height: 19px;
      min-height: 34px;
      display: flex;
      .value {
        color: #ff7373;
        font-size: 15px;
      }
    }
  }
  .leged-bg {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 600px;
    background-color: rgba(0, 0, 0, 0.3);
    .leged-wrap {
      width: 300px;
      height: 300px;
      background-color: #fff;
    }
  }
  .view-btn {
    margin-right: 8px;
    cursor: pointer;
  }
  .form-box {
    height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    .label-title {
      position: relative;
      padding-left: 14px;
      margin-bottom: 20px;
      font-weight: 700;
      font-size: 19px;
      overflow: hidden;
      color: #dce0e4;
      &::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #36f1cd;
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        content: "";
        width: 100%;
        height: 0px;
        position: absolute;
        border-bottom: dashed 1px #8a9199;
        left: 130px;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .alarm-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0px 35px;
      .content-item {
        width: 50%;
        font-size: 14px;
        font-weight: 500;
        color: #3b3b3b;
        line-height: 19px;
        min-height: 34px;
        display: flex;
        .name {
          text-align: right;
          width: 140px;
          margin-right: 10px;
          color: #8a9199;
        }
        .change-style {
          width: auto;
        }
        .value {
          color: #fff;
          flex: 1;
        }
        .alarm-value {
          color: #ff7373;
        }
        .cur-alarm-value {
          color: #086635;
        }
        .work-status {
          color: #e1971d;
        }
      }
      .new-content-item-style {
        width: 100%;
        height: auto;
      }
    }
    .improve-situation {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 50px;
      .improve-situation-item {
        width: 310px;
        height: 71px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 28px;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
        line-height: 33px;
        &:first-child {
          background: linear-gradient(
            225deg,
            rgba(255, 133, 128, 0.65) 0%,
            rgba(255, 58, 71, 0.61) 100%,
            #0049fa 100%
          );
        }
        &:last-child {
          background: linear-gradient(
            225deg,
            rgba(128, 255, 178, 0.65) 0%,
            rgba(58, 120, 255, 0.61) 100%,
            #0049fa 100%
          );
        }
        .road-cleanliness-index {
          display: flex;
          flex-direction: column;
          align-content: center;
          justify-content: center;
          .name {
            font-size: 14px;
          }
        }
        .star {
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            margin-right: 5px;
          }
        }
        .value {
          padding-right: 30px;
          span {
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
    }
    .tips-content {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      padding: 0px 50px;
      .content-item {
        width: 50%;
        font-size: 14px;
        font-weight: 400;
        color: #3b3b3b;
        line-height: 19px;
        min-height: 34px;
        display: flex;
        .value {
          color: #ff7373;
          font-size: 15px;
        }
      }
    }
    .leged-bg {
      position: fixed;
      left: 0;
      right: 0;
      width: 100%;
      height: 600px;
      background-color: rgba(0, 0, 0, 0.3);
      .leged-wrap {
        width: 300px;
        height: 300px;
        background-color: #fff;
      }
    }
    .processing-records {
      display: flex;
      align-items: center;
      // justify-content: space-between;
      padding: 0 40px;
      position: relative;
      &::before {
        content: "";
        // width: calc(100% - 220px);
        height: 6px;
        background: #076d4e;
        position: absolute;
        left: 50%;
        top: 48px;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
      }
      .processing-records-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .handler {
          min-width: 80px;
          // max-width: 110px;
          padding: 0 5px;
          height: 26px;
          text-align: center;
          background: #bbeedf;
          box-shadow: 0px 10px 5px -7px rgba(33, 179, 134, 0.5);
          border: 1px solid #0b5a68;
          border-radius: 2px;
          line-height: 25px;
          font-size: 14px;
          font-weight: 400;
          color: #0b5a68;
          position: relative;
          margin-bottom: 10px;
          text-overflow: ellipsis;
          // overflow: hidden;
          white-space: nowrap;
          &::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #bbeedf;
            border-left: 1px solid #0b5a68;
            border-bottom: 1px solid #0b5a68;
            // transform: rotate3d(90deg);
            position: absolute;
            left: 50%;
            transform: rotate(-45deg) translateX(-50%);
            bottom: -2px;
          }
        }
        .circle {
          width: 22px;
          height: 22px;
          background: #ffffff;
          box-shadow: 0px 2px 4px 0px rgba(33, 176, 179, 0.43);
          border: 1px solid #076d4e;
          position: relative;
          border-radius: 50%;
          &::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #0b5a68;
            border-radius: 4px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .header {
          width: 50%;
          height: 6px;
          background: #076d4e;
          position: absolute;
          box-sizing: border-box;
        }
        .footer {
          width: 50%;
          height: 6px;
          left: 50%;
          background: #076d4e;
          position: absolute;
          box-sizing: border-box;
        }
        .steps-line {
          top: 45px;
          width: 100%;
          position: relative;
        }
        .step-name {
          font-size: 12px;
          font-weight: 400;
          color: #0b5a68;
          line-height: 12px;
          margin-top: 8px;
          font-weight: 500;
        }
        .partment {
          font-size: 14px;
          font-weight: 400;
          line-height: 12px;
          margin-top: 8px;
        }
        .handler-time {
          text-align: center;
          font-size: 12px;
          font-weight: 400;
          color: #606060;
          line-height: 14px;
          margin-top: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-left: 10px;
          padding-right: 10px;
          width: 180px;
        }
        .led-btn {
          color: #fff;
        }
      }
      .mb-20 {
        margin-bottom: 20px;
      }
    }

    .label-title-content {
      width: 90%;
      padding-left: 30px;
      margin-bottom: 10px;
    }
    .deal-line-wrap {
      overflow: auto;
      width: 100%;
    }
    .deal-line-wrap::-webkit-scrollbar {
      width: 0;
      height: 0;
      background-color: #434343; /* or add it to the track */
    }
    .deal-line-wrap::-webkit-scrollbar-track {
      background-color: #434343;
      border-radius: 2px;
    }
    .deal-line-wrap::-webkit-thumb {
      background-color: red;
    }
    .qusetion-records {
      padding: 5px 20px;
      .qusetion-records-item {
        text-indent: 10px;
      }
    }
    .demo-image__preview {
      margin: 0 50px;
      display: flex;
      flex-wrap: wrap;

      .image-preview {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
    :deep(.el-row) {
      margin-bottom: 28px;
    }
  }
  .form-box::-webkit-scrollbar {
    width: 0px;
    height: 8px;
    background-color: #434343; /* or add it to the track */
  }

  :deep(.el-tag) {
    margin-right: 10px;
  }

  .input-style {
    padding-left: 50px;
  }
  .input-style-text {
    padding: 0 50px;
    font-size: 14px;
    font-weight: 400;
    color: #3b3b3b;
    line-height: 24px;
  }

  .default-btn {
    width: 85px;
  }
  .search-btn {
    width: 85px;
    background-color: var(--bg-primary);
    border: 1px solid var(--success);
  }
}
</style>