<template>
  <div>
    <!-- 详情(在线监测超标问题) -->
    <el-dialog
      :close-on-click-modal="false"
      title="详情"
      :visible.sync="onlineDetails"
      width="70%"
      :before-close="handleClose"
    >
      <el-carousel
        trigger="click"
        height="450px"
        arrow="never"
        :autoplay="false"
      >
        <el-carousel-item>
          <el-divider
            content-position="left"
            style="font-size: 18px; font-weight: bolder"
            >问题基本信息</el-divider
          >
          <el-form :inline="true" label-width="105px">
            <el-form-item label="所属单位:">
              <el-input
                v-model="onlineDetailsData.orgName"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="问题来源:">
              <el-select
                disabled
                v-model="onlineDetailsData.problemSources"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in OnlineList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                v-model="onlineDetailsData.problemSources"
                clearable
                placeholder="请填写"
                disabled
              ></el-input> -->
            </el-form-item>

            <el-form-item label="问题名称:">
              <el-input
                v-model="onlineDetailsData.problemName"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="问题编号:">
              <el-input
                v-model="onlineDetailsData.powerQualityProblemNo"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" class="form mt20" label-width="105px">
               <el-form-item label="监测点名称:">
              <el-input
                v-model="onlineDetailsData.measurementPointName"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="告警持续时间:">
              <el-input
                v-model="onlineDetailsData.warnLastTime"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="告警指标:">
              <el-select
                disabled
                v-model="onlineDetailsData.warnTarget"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in warnTargetList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <!-- <el-input
                type="textarea"
                :rows="1"
                placeholder="请输入内容"
                disabled
                v-model="onlineDetailsData.warnTarget"
              ></el-input> -->
            </el-form-item>
          </el-form>
          <el-form class="box mt20" label-width="105px">
            <el-form-item label="告警描述:" style="margin-top: 10px">
              <el-input
                type="textarea"
                :rows="1"
                placeholder="请输入内容"
                disabled
                v-model="onlineDetailsData.warnReason"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-carousel-item>
        <el-carousel-item>
          <SectionTwoPage
            :addData="detailsList"
            :onlineDetailsData="onlineDetailsData"
          />
        </el-carousel-item>
      </el-carousel>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-button type="primary" class="ml20" @click="handleClose"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { dicData } from "@/assets/commjs/dictypeData";
import { getExcessiveDetail } from "@/api/Process-supervision/electricitymanagement/electricitymanagement";
import SectionTwoPage from "./SectionTwoPage.vue";
export default {
  components: { SectionTwoPage },
  props: {
    detailsList: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      warnTargetList: [],
      onlineDetails: false,
      onlineDetailsData: {},
      OnlineList: [],
    };
  },
  mounted() {
    this.info();
    this.warnTargetList = dicData("alarm_Type", []);
    this.OnlineList = dicData("Problem_Sources", []);
  },
  created() {},

  methods: {
    // 获取信息
    info() {
      getExcessiveDetail(this.detailsList.powerQualityProblemNo).then((res) => {
        this.onlineDetailsData = res.data;
      });
    },
    // 关闭
    handleClose() {
      this.$emit("handleClose");
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped></style>
