<template>
  <div class="fullHeight">
    <div class="left fullHeight whiteBlock">
      <div class="title">
        <!-- 模型 -->
        <span>{{ $t('message.BIMmanage.model') }}</span>
        <!-- <p @click="configDialog=true" style="position:absolute;right:10px;top:15px">配置服务器</p> -->
        <el-button
          type="default"
          size="mini"
          @click="configDialog = true"
          style="position: absolute; right: 10px; top: 15px"
          >{{ $t('message.BIMmanage.confingServer') }}</el-button
        >
      </div>
      <div class="list_content">
        <vue-scroll v-if="buildList.length > 0">
          <div
            class="flex content_data"
            v-for="(item, index) in buildList"
            :key="index"
            :class="{ active: activeBuildIndex == index }"
            @click="changeBuildFn(item, index)"
          >
            <div>{{ item.modelName }}</div>
            <div class="flex2">
              <el-switch
                v-model="item.isEnable"
                @change="setToMain(item, index)"
              ></el-switch>
              <img
                style="margin-left: 8px"
                @click.stop="deleteFn(item)"
                src="@/assets/images/icon-delete.png"
                class="icon"
              />
            </div>
          </div>
        </vue-scroll>
        <div class="placeholderBox" v-else>
          {{ $t('message.personnelPosition.mapManage.no_data') }}
        </div>
      </div>
      <div class="addFirm" @click="addFn">
        <!-- {{$t('message.personnelPosition.mapManage.new_build')}} -->
        <!-- 上传新模型 -->
        {{ $t('message.BIMmanage.updateNewModel') }}
      </div>
    </div>
    <div class="right fullHeight">
      <div class="mapContainer whiteBlock">
        <!--  :fileId="buildList.length>0?parseInt(buildList[activeBuildIndex].fileId):''" -->
        <overview
          :urn="buildList.length > 0 ? buildList[activeBuildIndex].bimUrn : ''"
          :fileId="
            buildList.length > 0
              ? parseInt(buildList[activeBuildIndex].fileId)
              : ''
          "
          :opendrawlabel="true"
        ></overview>
      </div>
    </div>
    <!-- 上传新模型 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.BIMmanage.updateNewModel')"
      :visible.sync="addBuildDialog"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="addBuildForm"
          ref="addBuildForm"
          :rules="beaconFormRules"
          label-width="120px"
          class="dialogFormBox"
        >
          <el-form-item
            :label="$t('message.BIMmanage.modelName')"
            prop="modelName"
          >
            <el-input
              v-model="addBuildForm.modelName"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'模型版本号'" prop="version">
            <el-input
              v-model="addBuildForm.version"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.BIMmanage.modelFile')"
            prop="modelUrl"
          >
            <!-- :auto-upload="false" $http.defaults.baseURL+'xmgl/projectBim/saveBim' -->
            <el-upload
              class="uploadBtn"
              ref="upload"
              name="files"
              :action="uploadUrl"
              :show-file-list="true"
              :data="uploadParams"
              :on-change="changeUpload"
              :on-success="uploadMapSuccess"
              :limit="1"
              :on-exceed="exceedFn"
            >
              <!-- <span slot="trigger">选择文件</span> -->
              <el-button slot="trigger" type="primary" size="medium">{{
                $t('message.BIMmanage.chooseFile')
              }}</el-button>
              <el-button
                type="danger"
                size="medium"
                @click="
                  $refs.upload.clearFiles()
                  addBuildForm.modelUrl = ''
                "
                style="margin-left: 20px"
                >{{ $t('message.BIMmanage.cleanFile') }}</el-button
              >
              <div slot="tip" class="el-upload__tip">
                {{ addBuildForm.modelUrl.name }}
              </div>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="addBuildDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t('message.personnelPosition.cancel') }}</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submitData"
              size="medium"
              >{{ $t('message.personnelPosition.determine') }}</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 配置服务器参数 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="$t('message.BIMmanage.confingServerData')"
      :visible.sync="configDialog"
      width="700px"
      :close-on-click-modal="configForm.id ? true : false"
      :show-close="configForm.id ? true : false"
    >
      <div class="dialog_content">
        <p
          class="redText"
          v-show="configForm.id"
          style="margin-bottom: 20px; text-align: center"
        >
          {{ $t('message.BIMmanage.warnText') }}
        </p>
        <el-form
          size="medium"
          :model="configForm"
          ref="configForm"
          :rules="configFormRules"
          label-width="140px"
          class="dialogFormBox"
        >
          <el-form-item :label="'AppKey(公钥):'" prop="appKey">
            <el-input
              v-model="configForm.appKey"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
            <el-button type="text" @click="getIntro" size="medium">{{
              '获取公钥'
            }}</el-button>
          </el-form-item>
          <el-form-item :label="'AppSecrt(私钥):'" prop="appSecret">
            <el-input
              width="200"
              type="password"
              :show-password="true"
              v-model="configForm.appSecret"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
            <el-button type="text" @click="getIntro" size="medium">{{
              '获取私钥'
            }}</el-button>
          </el-form-item>
          <div class="dialog-footer">
            <el-button type="primary" @click="registerCount" size="medium">{{
              '获取模型帐号'
            }}</el-button>
            <el-button
              type="primary"
              icon="el-icon-circle-close"
              @click="configDialog = false"
              size="medium"
              >{{ '取消' }}</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="submitConfigData"
              size="medium"
              >{{ $t('message.personnelPosition.determine') }}</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>

    <el-dialog title="使用说明" :visible.sync="dialogTableVisible">
      <img
        style="width: 100%; height: 100%"
        src="@/assets/images/projectImg/jlwModel.png"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  addJlwConfigApi,
  projectJlwBimListApi,
  deleteJlwUploadApi,
  startJlwApi,
  getJlwConfigApi,
  addJlwUploadApi,

  projectBimAddApi,
  projectBimDeleteApi,
  projectBimEditApi,
  projectBimUploadApi,
  addOrEditProjectBimConfigApi,
  getProjectBimConfigInfoApi,
  updateMainModelApi
} from "@/assets/js/api/project";
import overview from "./overviewTwo";
export default {
  components: { overview },
  data() {
    return {
      fileId: "",
      dialogTableVisible: false,
      buildList: [],
      addBuildDialog: false,
      isAdd: true,
      addBuildForm: {
        version: "", // 模型版本号
        modelName: "", // 模型名称
        modelUrl: "", // 文件
        projectSn: ""
      },
      // 上传附件时带的参数
      uploadParams: {
        modelName: "",
        projectSn: ""
      },
      fullscreenLoading: false,
      beaconFormRules: {
        modelName: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ],
        version: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ]
      },
      configFormRules: {
        appKey: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ],
        appSecret: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ]
      },
      activeBuildIndex: 0,
      configDialog: false,
      configForm: {
        appKey: "",
        appSecret: "",
        type: 1
      },
      uploadUrl: '', //文件上传地址
    };
  },
  created(){
    this.uploadUrl = this.$store.state.UPLOADURL
  },
  mounted() {
    this.getConfigFn();
    this.loadData();
  },
  methods: {
    // 添加配置参数
    submitConfigData() {
      this.$refs["configForm"].validate(valid => {
        if (valid) {
          this.configForm.projectSn = this.$store.state.projectSn;
          addJlwConfigApi(this.configForm).then(res => {
            // console.log('--------添加',res)
            this.configDialog = false;
            this.loadData();
            this.$message.success(
              this.$t("message.BIMmanage.configSuccess") + "!"
            );
          });
        } else {
          return false;
        }
      });
    },
    // 使用说明
    getIntro() {
      this.dialogTableVisible = true;
      this.url = "@/assets/images/projectImg/jlwModel.png.png";
    },
    // 跳转获取公钥私钥
    registerCount() {
      window.open("https://bimface.com/user-console/login");
    },
    // 设为主模型
    setToMain(item, index) {
      let currentIndex = index
      for (let b in this.buildList) {
        if (b != currentIndex) {
          this.buildList[b].isEnable = false
        }
      }
      startJlwApi({
        projectSn: this.$store.state.projectSn,
        id: item.id
      }).then(res => {
        this.loadData();
      });
    },

    // 获取配置  是否显示弹框
    getConfigFn() {
      getJlwConfigApi({
        projectSn: this.$store.state.projectSn,
      }).then(res => {
        console.log('-----有吗', res)
        if (res.result) {

          this.configForm = res.result.bimfaceConfig;
          // this.configForm.appKey = res.result.bimfaceConfig
          this.loadData();
        } else {
          this.configDialog = true;
        }
      });
    },

    // 点击上传新模型 弹出弹框   清空数据
    addFn() {
      this.addBuildDialog = true;
      this.isAdd = true;
      if (this.addBuildForm.modelUrl != "") {
        this.$refs.upload.clearFiles();
      }
      this.addBuildForm.modelName = "";
      this.addBuildForm.version = "";
      this.addBuildForm.modelUrl = "";
    },
    // 文件超出限制
    exceedFn(files, fileList) {
      this.$message.warning(
        this.$t("message.BIMmanage.tipText") +
        files.length +
        this.$t("message.BIMmanage.tipText2") +
        (files.length + fileList.length) +
        this.$t("message.BIMmanage.tipText3")
      );
    },
    changeUpload(file, fileList) {
      //   console.log("file", file, fileList);
      //   this.addBuildForm.modelUrl = file;
    },
    uploadMapSuccess(response) {
      console.log("上传成功的", response);
      this.addBuildForm.modelUrl = response.data[0].imageUrl
      // this.fullscreenLoading.close();
      //   this.addBuildDialog = false;
      //   this.loadData();
    },
    editBuildFn(item) {
      this.isAdd = false;
      this.addBuildForm = JSON.parse(JSON.stringify(item));
      this.addBuildDialog = true;
    },
    changeBuildFn(item, index) {
      // this.addBuildForm=JSON.parse(JSON.stringify(item))
      this.activeBuildIndex = index;
      if (this.buildList.length > 0) {
        this.fileId = parseInt(this.buildList[this.activeBuildIndex].fileId)
      }
    },



    //获取模型列表
    loadData() {
      projectJlwBimListApi({ projectSn: this.$store.state.projectSn }).then(
        res => {
          console.log("------模型列表---", res);
          this.buildList = res.result.page.records;
          res.result.page.records.forEach((item, index) => {
            if (item.isEnable == 0) {
              item.isEnable = false;
            } else {
              item.isEnable = true;
              this.activeBuildIndex = index
              this.fileId = item.fileId
            }
          });

        }
      );
    },
    //  上传新模型
    submitData() {
      this.$refs["addBuildForm"].validate(valid => {
        if (valid) {
          if (this.isAdd) {
            if (this.addBuildForm.modelUrl == "") {
              //请选择文件
              this.$message.error(
                this.$t("message.BIMmanage.pleaseChooseFile")
              );
            } else {
              this.uploadParams.modelName = this.addBuildForm.modelName;
              this.uploadParams.projectSn = this.$store.state.projectSn;
              this.fullscreenLoading = this.$loading({
                lock: true,
                text: this.$t("message.BIMmanage.loading"),
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
              });
              this.$refs.upload.submit();
            }
            this.addBuildForm.projectSn = this.$store.state.projectSn
            addJlwUploadApi(this.addBuildForm).then((res) => {
              console.log('------------', res)
              this.addBuildDialog = false;
              this.loadData();
              this.$message.success(
                this.$t("message.personnelPosition.add_success")
              ); //添加成功！
            });
          } else {
            projectBimEditApi(this.addBuildForm).then(res => {
              this.addBuildDialog = false;
              this.loadData();
              this.$message.success(
                this.$t("message.personnelPosition.edit_success")
              ); //编辑成功！
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除
    deleteFn(item) {
      this.$confirm(
        this.$t("message.BIMmanage.tipText4") +
        "【" +
        item.modelName +
        "】," +
        this.$t("message.BIMmanage.tipText5") +
        "?",
        this.$t("message.BIMmanage.tip"),
        {
          confirmButtonText: this.$t("message.BIMmanage.confirm"),
          cancelButtonText: this.$t("message.BIMmanage.cancel"),
          type: "warning"
        }
      )
        .then(() => {
          deleteJlwUploadApi({ id: item.id }).then(res => {
            this.$message({
              type: "success",
              message: this.$t("message.BIMmanage.deleteSuccess") + "!"
            });
            this.loadData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("message.BIMmanage.cancelDelete") + "!"
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  border-bottom: 1px solid rgba(220, 230, 253, 1);
  color: @--color-primary;
  padding-left: 24px;
  font-size: 14px;
  position: relative;
  span {
    position: relative;
    padding: 16px 0 5px;
    display: inline-block;

    &::before {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: @--color-primary;
      z-index: 2;
    }
  }
}
.left {
  width: 212px;
  float: left;
}
.list_content {
  padding: 10px 0;
  height: calc(100% - 87px - 20px);
  position: relative;
}

.content_data {
  padding: 0 20px;
  box-sizing: border-box;
  height: 43px;
  line-height: 43px;
  cursor: pointer;
  position: relative;

  &.active {
    background-color: rgba(81, 129, 246, 0.1);

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background-color: @--color-primary;
      border-radius: 2px;
    }
  }
}
.mapContainer {
  height: calc(100% - 40px);
  padding: 20px;
  position: relative;
}
.right {
  float: left;
  width: calc(100% - 222px);
  margin-left: 10px;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex2 {
  display: flex;
  align-items: center;
}

.addFirm {
  height: 45px;
  line-height: 45px;
  color: @--color-primary;
  font-size: 15px;
  text-align: center;
  background: #fff;
  border-top: 1px solid #dce6fd;
  font-family: PingFangSC-Regular;
  cursor: pointer;
}
.el-icon-s-home {
  font-size: 20px;
  opacity: 0.6;
}
</style>