<template>
  <div class="my-agency">
    <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.branchFactoryIds"
                   placeholder="请选择"
                   style="width: 180px"
        >
          <el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
                     :key="item.branchFactoryId"
                     :label="item.branchFactory"
                     :value="item.branchFactoryId"
          />
        </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"
        />
      </el-form-item>
      <el-form-item>
        <el-button  class="default-btn" @click="onSearch">搜索</el-button>
        <el-button type="primary" class="default-btn" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <common-table
          :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" @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.branchFactory || "--"
                    }}</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.id"
                :label="item.name"
                :value="item.id"
            >
            </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.id"
                :label="item.name"
                :value="item.id"
            >
            </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: '',
  branchFactoryIds: '',
  deviceType: '',
  createTime: [
    moment(new Date().getTime() - 1000 * 60 * 60 * 24).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.push(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: [],
  branchFactoryList: [{ branchFactory: "全部", branchFactoryId: "" }],
  deviceList: []
});

const workSheetDetail = ref(null);

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

const onSearch = ()=> {
   searchData();
}

const onReset =()=> {
  currentPage.value = 1;
  pageSize.value = 20;
  formInline.value.eventName = '';
  formInline.value.keyword = '';
  formInline.value.branchFactoryIds = '';
  formInline.value.deviceType = '';
  formInline.value.createTime = [
    moment(new Date().getTime() - 1000 * 60 * 60 * 24).format('YYYY-MM-DD HH:mm:ss'),
    moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
  ]
  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: 'workTicketNo',
    label: '编号',
    width: '10%'
  },
  {
    prop: 'eventName',
    label: '事件名称',
    width: '10%'
  },
  {
    prop: 'deviceName',
    label: '发生位置',
    width: '10%'
  },
  {
    prop: 'deviceNo',
    label: '设备编码',
    width: '10%'
  },
  {
    prop: 'deviceType',
    label: '设备类型',
    width: '10%'
  },
  {
    prop: 'signalName',
    label: '信号名称',
    width: '10%'
  },
  {
    prop: 'branchFactory', label: '所属区域',width: '10%' },
  { prop: 'warnTypeName', label: '类型',width: '10%' },
  { prop: 'createTime', label: '发生时间',width: '10%' },
  { prop: 'desc', label: '闭环状态',width: '10%' },
  { prop: 'person', label: '处理人',width: '10%' },
  { prop: 'level', label: '级别',width: '5%' },
  {
    prop: "operation",
    label: "操作",
    width: '15%'
  },
]);

const permissionBranchFactory = JSON.parse(sessionStorage.getItem('branchFactoryList'))|| [];

const customerId = getToken('customerId');

const getBranchTypeList = ()=> {
  const url = '/transaction/getBranchFactory';
  const params = {
    customerId
  }
  getDataFun(url,params).then(res => {
    if (res && res.code === 1) {
      const branchFactory = res.data;
      if (permissionBranchFactory.length === 0) {
        basicConfiguration.branchFactoryList = [];
      } else if (permissionBranchFactory.length === 1 && permissionBranchFactory[0] == 0) {
        basicConfiguration.branchFactoryList = basicConfiguration.branchFactoryList.concat(branchFactory);
      } else {
        basicConfiguration.branchFactoryList =  branchFactory.filter((item) =>
            permissionBranchFactory.includes(item.branchFactoryId)
        );
        basicConfiguration.branchFactoryList.unshift({ branchFactory: '全部', branchFactoryId: '' });
      }
    }

  });
}

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;

  if (!formInline.value.branchFactoryIds) {
    if (permissionBranchFactory.length === 0) {
      realBtn = -1;
    } else if (permissionBranchFactory.length === 1 && permissionBranchFactory[0] == 0) {
      realBtn = '';
    } else {
      realBtn = permissionBranchFactory.join(',');
    }
  } else {
    realBtn = formInline.value.branchFactoryIds;
  }
  getTableData();
}

const total = ref(0);

const getTableData = ()=> {
  let keyWord = formInline.value.keyword?.replace(/#/g, '%23');
  const params = {
    eventName: formInline.value.eventName,
    warnType: formInline.value.warnType,
    createStartTime: formInline.value.createTime[0],
    createEndTime: formInline.value.createTime[1],
    branchFactoryIds: realBtn,
    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;
    }
  });
}

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(() => {
  getBranchTypeList();
  getWarnAndTicketConfigMap();
  getDeviceType();
  searchData();
});

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: #fff;
  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 - 200px);
  }
  .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;
      &::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1890ff;
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        content: "";
        width: 100%;
        height: 0px;
        position: absolute;
        border-bottom: dashed 1px rgb(209, 209, 209);
        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;
        }
        .change-style {
          width: auto;
        }
        .value {
          color: #000000;
          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%;
    }
    .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;
    }
  }

  :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: #2182a0;
    border: 1px solid #2182a0;
  }
}
</style>