<template>
  <div>
    <!-- 风场详情 -->
    <el-dialog
      title="风场信息"
      :visible.sync="localUnusualdialog"
      width="800px"
      @close="handleClose"
    >
      <div class="general">
        <div class="condition">
          <p>风场名称:</p>
          <span>{{ unusualdialogdata.fieldName }}</span>
        </div>
        <div class="condition">
          <p>空气密度:</p>
          <span>{{ unusualdialogdata.density }}(kg/m³)</span>
        </div>

        <div class="condition">
          <p>上级单位:</p>
          <span>{{ unusualdialogdata.companyName }}</span>
        </div>
        <div class="condition">
          <p>海拔高度:</p>
          <span>{{ unusualdialogdata.elevationHeight }}(米)</span>
        </div>

        <div class="condition">
          <p>所在省:</p>
          <span>{{ unusualdialogdata.provinceName }}</span>
        </div>
        <div class="condition">
          <p>所在市:</p>
          <span>{{ unusualdialogdata.cityName }}</span>
        </div>
        <div class="condition">
          <p>经度:</p>
          <span>{{ unusualdialogdata.longitude }}°</span>
        </div>

        <div class="condition">
          <p>纬度:</p>
          <span>{{ unusualdialogdata.latitude }}°</span>
        </div>

        <div class="condition">
          <p>测风塔:</p>
          <span>{{ anemometerText }}</span>
        </div>
      </div>
      <!-- <div class="attachment">
        <p class="model-center" @click="download">合同功率曲线附件下载</p>
      </div> -->
      <p>下载资源文件附件</p>
      <el-table
        :data="unusualdialogdata.windFieldResourceVos"
        style="width: 100%"
      >
        <el-table-column prop="fileName" label="文件名" min-width="100">
        </el-table-column>
        <el-table-column prop="type" label="文件类型" min-width="100">
        </el-table-column>

        <el-table-column fixed="right" label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="resource(scope.row)"
              type="text"
              size="small"
            >
              查看附件
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    unusualdialog: {
      type: Boolean,
      default: false,
    },
    unusualdialogdata: {
      type: Object,
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [],
      anemometerText: "",
      AllTemplateurl: "",
    };
  },

  computed: {
    localUnusualdialog: {
      get() {
        return this.unusualdialog;
      },
      set(value) {
        // 在这里不进行任何修改
      },
    },
  },
  watch: {
    unusualdialogdata: {
      handler() {
        this.generateAnemometerText();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit("handleClose", false, "unusualdialog");
    },
    generateAnemometerText() {
      const anemometerTowerByFieldVos =
        this.unusualdialogdata.anemometerTowerByFieldVos || [];
      const anemometerNames = anemometerTowerByFieldVos
        .map((item) => item.anemometerName)
        .join("\\");

      // 将结果赋值给 anemometerText
      this.anemometerText = anemometerNames;
    },
    // 下载附件
    download() {
      if (this.unusualdialogdata.powerContractUrl) {
        const link = document.createElement("a");
        link.href = this.unusualdialogdata.powerContractUrl;
        link.download = ""; // 可以设置默认下载文件名
        link.target = "_blank"; // 新窗口打开
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        console.error("URL is not set");
      }
    },
    // 测试玩
    resource(row) {
      console.log(row, "row");
      if (row.resourceUrl) {
        const link = document.createElement("a");
        link.href = row.resourceUrl;
        link.download = ""; // 可以设置默认下载文件名
        link.target = "_blank"; // 新窗口打开
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.general {
  display: flex;
  flex-wrap: wrap;

  .condition {
    width: 50%;
    display: flex;

    p {
      width: 100px;
      text-align: right;
      line-height: 40px;
    }

    span {
      line-height: 40px;

      padding-left: 20px;
    }

    .el-select {
      width: 100%;
      margin-bottom: 20px;
    }

    .el-input {
      margin-bottom: 20px;
    }
  }
}

.attachment {
  display: flex;
  padding-top: 10px;

  .model-center {
    color: #409eff;
    cursor: pointer;
    line-height: 40px;
    height: 40px;
    font-size: 14px;
  }
}
</style>
