<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" label-width="105px" class="form mt20">
            <el-form-item label="普测计划名称:">
              <el-input
                v-model="onlineDetailsData.planName"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="所属变电站:">
              <el-input
                v-model="onlineDetailsData.substationName"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>

            <el-form-item label="母线名称:">
              <el-input
                v-model="onlineDetailsData.busBarName"
                clearable
                placeholder="请填写"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
          <el-divider
            content-position="left"
            style="font-size: 18px; font-weight: bolder"
            >问题指标</el-divider
          >
          <el-form :inline="true" label-width="105px" class="form">
            <el-form-item label="稳态指标:" style="margin-top: 10px">
              <el-checkbox-group
                v-model="onlineDetailsData.steadyIndicator"
                disabled
              >
                <el-checkbox
                  v-for="(item, ind) in steadyIndicatorList"
                  :key="ind"
                  :label="item.code"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>

            <el-form-item label="暂态指标:" style="margin-top: 10px">
              <el-checkbox-group
                v-model="onlineDetailsData.transientIndicators"
                disabled
              >
                <el-checkbox
                  v-for="(item, ind) in transientIndicatorsList"
                  :key="ind"
                  :label="item.code"
                  >{{ item.name }}</el-checkbox
                >
              </el-checkbox-group>
            </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 { getGeneralSurveyDetail } from "@/api/Process-supervision/electricitymanagement/electricitymanagement";
import SectionTwoPage from "./SectionTwoPage.vue";
import { dicData } from "@/assets/commjs/dictypeData";

export default {
  components: { SectionTwoPage },
  props: {
    detailsList: {
      type: [Object, Array],
    },
  },
  data() {
    return {
      onlineDetails: false,
      onlineDetailsData: {},
      steadyIndicatorList: [],
      transientIndicatorsList: [],
      OnlineList: [],
    };
  },
  mounted() {
    this.Dictionaries();
    this.info();
  },
  created() {},

  methods: {
    // 字典表
    Dictionaries() {
      // 稳态指标
      this.steadyIndicatorList = dicData("Steady_Indicator", ["Load_Type"]);
      // 暂态指标
      this.transientIndicatorsList = dicData("Transient_Indicators", [
        "Load_Type",
      ]);
      this.OnlineList = dicData("Problem_Sources", []);
    },
    // 获取信息
    info() {
      getGeneralSurveyDetail(this.detailsList.powerQualityProblemNo).then(
        (res) => {
          this.onlineDetailsData = res.data;
        }
      );
    },
    // 关闭
    handleClose() {
      this.$emit("handleClose");
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="less" scoped>
::v-deep .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 22px 0;
}
::v-deep .el-dialog .el-dialog__body {
  max-height: 100%;
}
</style>
