<template>
  <!-- 临测水位流量报警详情 -->
  <div class="warnDetail">
    <div class="shuizhiWarn">
      <div class="detail">
        <div class="part">
          <p>因子名称</p>
          <p>{{ warnDetailData.factorsName }}</p>
        </div>
        <div class="part">
          <p>监测指标观测值</p>
          <p class="red">{{ warnDetailData.warnValue }}</p>
        </div>
        <div class="part">
          <p>报警级别</p>
          <p v-if="warnDetailData.warnType == 1">预警</p>
          <p v-if="warnDetailData.warnType == 2">报警</p>
          <p v-if="warnDetailData.warnType == 3">预警已审核</p>
          <p v-if="warnDetailData.warnType == 4">报警已审核</p>
        </div>
        <div class="part">
          <p>停留时间</p>
          <p>{{ warnDetailData.durationTime }}</p>
        </div>
      </div>
      <div class="detail">
        <div class="part">
          <p style="width: 80px">观测时间</p>
          <p>{{ warnDetailData.ttTime }}</p>
        </div>
        <div class="part">
          <p style="width: 80px">发生时间</p>
          <p>{{ warnDetailData.createTime }}</p>
        </div>
        <div class="part">
          <p style="width: 80px">处理状态</p>
          <p>{{ warnDetailData.workOrderStatus == 0 ? '未处理' : '已处理' }}</p>
        </div>
        <div class="part">
          <p style="width: 80px">工单状态</p>
          <!-- isWorkOrder  0-没有转工单,1-转成工单,2-忽略 -->
          <p>{{ warnDetailData.isWorkOrder == 0 ? '未转工单' : warnDetailData.isWorkOrder == 1 ? '已转工单' : '忽略' }}</p>
        </div>
      </div>
      <div class="btnHandle" v-if="isWorkOrder == 0">
        <n-button @click="ignoreGd">忽略</n-button>
        <n-button @click="handleGd">转工单</n-button>
      </div>
      <h1 style="margin-top: 10px">报警记录</h1>
      <div class="table">
        <n-data-table
          :columns="columns"
          :data="tableData"
          :loading="tableLoading"
          :pagination="pagination"
          :remote="true"
          :bordered="false"
        />
      </div>
    </div>
    <!-- 转工单弹窗 -->
    <n-modal
      v-model:show="showModalGd"
      :show-icon="false"
      :mask-closable="false"
      preset="card"
      title="转工单详情"
      class="modalWarns"
      style="width: 600px"
    >
      <n-form :label-width="100" :model="addFormValue" :rules="addFormRules" ref="addFormRef" label-placement="left">
        <n-form-item label="工单子类型：" path="jobSubType">
          <n-select v-model:value="addFormValue.jobSubType" filterable clearable :options="wxryOptions" placeholder="请选择工单子类型" />
        </n-form-item>
        <n-form-item label="任务等级：" path="jobLevel">
          <n-select v-model:value="addFormValue.jobLevel" filterable clearable :options="gzdOptions" placeholder="请选择任务等级" />
        </n-form-item>
        <n-form-item label="备注说明：" path="remark">
          <n-input
            v-model:value="addFormValue.remark"
            type="textarea"
            placeholder="备注说明："
            :autosize="{
              minRows: 4,
              maxRows: 4,
            }"
          />
        </n-form-item>
        <n-form-item label="附件信息" path="imgPath">
          <n-upload v-model:file-list="uploadList" accept=".jpg,.png,.jpeg,.svg,.gif" list-type="image-card" @change="changeFile">
          </n-upload>
          <span style="margin-top: 10px">提示：文件名称不能重复,格式为.jpg,.png,.jpeg,.svg,.gif</span>
        </n-form-item>
      </n-form>
      <template #action>
        <n-space style="justify-content: center">
          <n-button @click="() => (showModalGd = false)">取消</n-button>
          <n-button type="primary" @click="submitData()">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { ref, toRefs, onMounted, reactive } from 'vue';
import { formatDate } from '@/utils/util';
import { lyInfoReminderHistory, lyInfoDetailIgnore, lyInfoDetailWork } from '@/services';

export default {
  name: 'warnDetail',
  props: {
    warnDetailData: Object,
  },
  emits: ['update:refeshData'],
  setup(props, context) {
    const allData = reactive({
      detailData: {},
      isWorkOrder: 0,
      uploadList: [],
      modalTitle: '机场河东渠上游PH值异常报警',
      tableLoading: true,
      showModalGd: false,
      tableData: [
        { id: 1, time: '2022-07-07 12:21:23', gcz: '103.5', value: '大于90', type: '超高报警' },
        { id: 2, time: '2022-07-08 11:21:23', gcz: '105.5', value: '大于90', type: '超高报警' },
        { id: 3, time: '2022-07-09 12:21:23', gcz: '102.5', value: '大于90', type: '超高报警' },
        { id: 4, time: '2022-07-17 10:21:23', gcz: '93.5', value: '大于90', type: '超高报警' },
      ],
      columns: [
        { title: '站点编号', key: 'siteNo' },
        { title: '观测时间', key: 'ttTime' },
        { title: '观测值', key: 'warnValue' },
        { title: '报警预警阀值', key: 'warnConfigValue' },
        {
          title: '报警类型',
          key: 'warnType',
          render(row) {
            return row.warnType == 1 ? '预警' : row.warnType == 2 ? '报警' : row.warnType == 3 ? '预警已审核' : '报警已审核';
          },
        },
      ],
      wxryOptions: [
        { value: 'EventWaterQuality', label: '水质报警' },
        { value: 'EventTemporarySurvey', label: '流域临测数据' },
      ],
      gzdOptions: [
        { value: 'Severity', label: '严重' },
        { value: 'Normal', label: '一般' },
        { value: 'Routine', label: '常规' },
        { value: 'ProblemNotUrgent', label: '不紧急' },
        { value: 'ProblemUrgent', label: '紧急' },
      ],
      addFormValue: {
        jobLevel: '',
        jobSubType: '',
        remark: '',
        imgPath: [],
      },
      addFormRules: {
        jobSubType: {
          required: true,
          trigger: ['change'],
          message: '工单子类型不能为空',
        },
        jobLevel: {
          required: true,
          trigger: ['change'],
          message: '任务等级不能为空',
        },
      },
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      pageSlot: 6,
      onChange: (page) => {
        paginationReactive.page = page;
        getHistoryData();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getHistoryData();
      },
    });
    // 忽略工单
    const ignoreGd = async () => {
      let params = {
        id: props.warnDetailData.id,
      };
      let res = await lyInfoDetailIgnore(params);
      if (res && res.code == 200) {
        $message.success('忽略成功');
        allData.isWorkOrder = res.data.isWorkOrder;
        context.emit('update:refeshData');
      }
    };
    // 转工单
    const handleGd = async () => {
      allData.showModalGd = true;
    };
    // 文件上传和删除
    const changeFile = async (file) => {
      console.log(file, '文件上传');
      $loadingBar.start();
      if (file.event) {
        // 文件上传
        $loadingBar.start(); //加载进度条
        let formdata = new FormData();
        formdata.append('files', file.file.file);
        let config = {
          headers: { 'Content-Type': 'multipart/form-data' },
        };
        let res = await fileUpload(formdata, config);
        if (res && res.code === 0) {
          if (res.list.length > 0) {
            let list = res.list[0];
            allData.addFormValue.imgPath.push(list);
            $loadingBar.finish();
          }
        } else {
          let param = {
            id: file.file.id,
            name: file.file.name,
            status: 'error',
          };
          allData.uploadList.push(param);
          $loadingBar.finish();
        }
        $loadingBar.finish();
      } else {
        // 文件删除,根据文件名进行匹配
        let fileIndex = null;
        allData.addFormValue.imgPath.map((item, index) => {
          if (file.file.name == item.fileOriginalName) {
            fileIndex = index;
          }
        });
        let fileNos = [];
        fileNos.push(allData.addFormValue.imgPath[fileIndex].fileNo);
        let res = await fileDelete(fileNos);
        if (res && res.code === 0) {
          allData.addFormValue.imgPath.splice(fileIndex, 1);
        }
      }
    };
    // 转工单提交数据
    const addFormRef = ref(null);
    const submitData = async () => {
      addFormRef.value.validate((errors) => {
        if (!errors) {
          goSubmitData();
        } else {
          console.log(errors);
          $message.error('验证失败,请检查必填项是否填写');
        }
      });
    };
    // 提交数据
    async function goSubmitData() {
      let params = { ...allData.addFormValue };
      params.eventDevice = props.warnDetailData.siteNo;
      params.eventDeviceName = props.warnDetailData.siteName;
      let params2 = { ...props.warnDetailData };
      let params3 = Object.assign(params, params2);
      let res = await lyInfoDetailWork(params3);
      if (res && res.code == 1) {
        allData.showModalGd = false;
        context.emit('update:refeshData');
      }
    }
    // 获取历史报警记录
    async function getHistoryData() {
      allData.tableLoading = true;
      let params = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          id: props.warnDetailData.id,
        },
      };
      let res = await lyInfoReminderHistory(params);
      if (res && res.code == 1) {
        allData.tableData = res.data.list;
        paginationReactive.pageCount = res.data.pages;
        paginationReactive.itemCount = res.data.total;
        allData.tableLoading = false;
      }
    }
    onMounted(() => {});
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      ignoreGd,
      handleGd,
      changeFile,
      submitData,
      addFormRef,
      getHistoryData,
    };
  },
};
</script>

<style lang="less">
.modalWarns {
  .n-form-item-blank {
    flex-wrap: wrap;
  }
  .shuizhiWarn {
    display: flex;
    flex-wrap: wrap;
    color: #b4c9e0;
    h1 {
      font-size: 16px;
      width: 100%;
    }
    .table {
      width: 100%;
      margin-top: 10px;
      overflow: auto;
      .n-data-table-td,
      .n-data-table-th {
        padding: 6px !important;
        text-align: center;
      }
      .n-data-table-tr:nth-of-type(odd) .n-data-table-td {
        background: rgba(1, 27, 46, 0.3);
      }
    }
    .btnHandle {
      width: 100%;
      margin: 10px auto;
      text-align: right;
      .n-button {
        margin-right: 10px;

        .n-button__border {
          border: 1px solid rgba(205, 12, 12, 0);
        }
        &:hover {
          border: 1px solid rgba(205, 12, 12, 0);
        }
      }
      .n-button:nth-of-type(1) {
        border: 1px solid #000;
        background: rgba(1, 27, 46, 0.6);
      }
      .n-button:nth-of-type(2) {
        border: 1px solid rgba(205, 12, 12, 0.6);
        background: rgba(205, 12, 12, 0.6);
      }
    }
    .detail {
      width: 48%;
      margin-right: 2%;
      .part {
        background: rgba(1, 27, 46, 0.6);
        display: flex;
        padding: 5px 10px;
        color: #b4c9e0;
        p:nth-of-type(1) {
          width: 120px;
        }
      }
      .part:nth-of-type(odd) {
        background: rgba(1, 27, 46, 0.3);
      }
      .red {
        color: #ff1c1c;
      }
    }
  }
}
</style>
>