<template>
  <div class="my-agency">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="事件名称：">
        <el-select v-model="formInline.eventNameId"
                   placeholder="请选择"
        >
          <el-option
              v-for="(item, index) in basicConfiguration.ticketEventName"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </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="请选择"
        >
          <el-option label="全部" value="" />
          <el-option v-for="(item, index) in basicConfiguration.branchFactoryList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="formInline.deviceType">
          <el-option label="全部" value="" />
          <el-option
              v-for="(item, index) in basicConfiguration.deviceList"
              index="item.id"
              :label="item.name"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发生时间">
        <el-date-picker type="daterange"
                        v-model="formInline.createTime"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        date-format="YYYY/MM/DD ddd"
                        time-format="A 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"
          @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 alarmImags"
                    :key="index"
                >
                  <el-image
                      style="width: 100px; height: 100px"
                      :lazy="true"
                      :src="item"
                      :preview-src-list="alarmImags"
                  ></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"
        @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="21">
            <el-input type="textarea" v-model="rejectReason" :autosize="{ minRows: 2, maxRows: 12 }" placeholder="请输入内容">
            </el-input>
          </el-col>
        </el-row>
      </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 { getDataFun, postDataJSON } from '@/request/method.js';
import moment from 'moment';
import { getToken } from '@/utils/auth.js';
import { ElMessage } from 'element-plus';
const formInline = ref({
  eventNameId: '',
  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: '50%',
});

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 alarmImags = ref([]);
const srcList = ref([]);

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

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

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

const basicConfiguration = reactive({
  ticketEventName: [{ name: "全部", id: "" }],
  branchFactoryList: [{ branchFactory: "全部", branchFactoryId: "" }],
  deviceList: [{ name: "全部", id: "" }]
});

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.eventNameId = '';
  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 handleView = async (data) => {
  viewDialog.value.title = data.eventName;
  viewDialog.value.show = true;
  /*let res = await getDetail(data.workTicketNo);
  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 disposeWorkSheetDetail = (obj)=> {
  const {
    reason,
    measure,
    imagParams,
    imgUrl,
    alarmImags,
    forwards,
    createId,
  } = obj;
  if (forwards.length > 0) {
    let receiveUserItem = forwards.slice(-1)[0];
  }
  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) {
      alarmImags.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
  }
  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)=>{

}

const tableData = [
  {
    id: 1,
    name: '张三',
    phone: '13888888888',
    email: '<EMAIL>',
    branchFactory: '上海分公司',
    deviceType: '烟感',
    eventTime: '2021-09-09 12:00:00',
    eventStatus: '已处理',
    eventDetail: '设备报警',
    level: 1
  },
  {
    id: 2,
    name: '张三',
    phone: '13888888888',
    email: '<EMAIL>',
    branchFactory: '上海分公司',
    deviceType: '烟感',
    eventTime: '2021-09-09 12:00:00',
    eventStatus: '已处理',
    eventDetail: '设备报警',
    level: 2
  },
  {
    id: 3,
    name: '张三',
    phone: '13888888888',
    email: '<EMAIL>',
    branchFactory: '上海分公司',
    deviceType: '烟感',
    eventTime: '20',
    level: 3
  }
];

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, eventType } = 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 getTableData = ()=> {
  let keyWord = formInline.value.keyword?.replace(/#/g, '%23');
  const params = {
    eventNameId: formInline.value.eventNameId,
    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,
    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;
      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
      }
    })
  }
}

onMounted(() => {
  // getBranchTypeList();
  // getWarnAndTicketConfigMap();
  // 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;
  }
  .yellow {
    // color: #faa508;
    position: relative;
    &::before {
      content: ' ';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ffb224;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
  }
  .red {
    position: relative;
    &::before {
      content: ' ';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #db001d;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
  }

  .purple {
    position: relative;
    &::before {
      content: ' ';
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #aa05fa;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%);
    }
  }
  .view-btn {
    margin-right: 8px;
    cursor: pointer;
  }

  .default-btn {
    width: 85px;
  }
  .search-btn {
    width: 85px;
    background: #2182a0;
    border: 1px solid #2182a0;
  }
}
</style>