<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 :title="item.modelName">{{ 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">
        <overview
          :urn="buildList.length > 0 ? buildList[activeBuildIndex].urn : ''"
          :fileId="
            buildList.length > 0
              ? buildList[activeBuildIndex].id
              : ''
          "
          :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="urn"
          >
            <el-input
              v-model="addBuildForm.urn"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </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="'Client ID:'" prop="clientId">
            <el-input
              v-model="configForm.clientId"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="'Client Secret:'" prop="clientSecret">
            <el-input
              width="200"
              type="password"
              :show-password="true"
              v-model="configForm.clientSecret"
              :placeholder="$t('message.personnelPosition.please_enter')"
            ></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <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 {
  addBimBaseConfigApi,
  getBimBaseConfigApi,
  projectBimBaseListApi,
  addBimBaseUploadApi,
  updateBimBaseUploadApi,
  deleteBimBaseUploadApi,
  startBimBaseApi
} 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: "", // 模型名称
        urn: "", // 文件
        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"
          }
        ],
        urn: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ]
      },
      configFormRules: {
        clientId: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ],
        clientSecret: [
          {
            required: true,
            message: this.$t("message.personnelPosition.required"),
            trigger: "blur"
          }
        ]
      },
      activeBuildIndex: 0,
      configDialog: false,
      configForm: {
        clientId: "",
        clientSecret: ""
      }
    };
  },
  created(){
  },
  mounted() {
    this.getConfigFn();
    this.loadData();
  },
  methods: {
    // 添加配置参数
    submitConfigData() {
      this.$refs["configForm"].validate(valid => {
        if (valid) {
          this.configForm.projectSn = this.$store.state.projectSn;
          addBimBaseConfigApi(this.configForm).then(res => {
            // console.log('--------添加',res)
            this.configDialog = false;
            this.loadData();
            this.$message.success(
              this.$t("message.BIMmanage.configSuccess") + "!"
            );
          });
        } else {
          return false;
        }
      });
    },
    // 设为主模型
    setToMain(item, index) {
      let currentIndex = index
      for (let b in this.buildList) {
        if (b != currentIndex) {
          this.buildList[b].isEnable = false
        }
      }
      startBimBaseApi({
        projectSn: this.$store.state.projectSn,
        id: item.id
      }).then(res => {
        this.loadData();
      });
    },

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

    // 点击上传新模型 弹出弹框   清空数据
    addFn() {
      this.addBuildDialog = true;
      this.isAdd = true;
      this.addBuildForm.modelName = "";
      this.addBuildForm.version = "";
      this.addBuildForm.urn = "";
    },
    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].id)
      }
    },



    //获取模型列表
    loadData() {
      projectBimBaseListApi({ projectSn: this.$store.state.projectSn }).then(
        res => {
          console.log("------模型列表---", res);
          if(res.result && res.result.length>0){
            this.buildList = res.result;
            res.result.forEach((item, index) => {
              if (item.isEnable == 0) {
                item.isEnable = false;
              } else {
                item.isEnable = true;
                this.activeBuildIndex = index
                this.fileId = item.id
              }
            });
          } else {
            this.buildList = [];
          }
        }
      );
    },
    //  上传新模型
    submitData() {
      this.$refs["addBuildForm"].validate(valid => {
        if (valid) {
          if (this.isAdd) {
            this.fullscreenLoading = this.$loading({
              lock: true,
              text: this.$t("message.BIMmanage.loading"),
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
            });
            this.addBuildForm.projectSn = this.$store.state.projectSn
            addBimBaseUploadApi(this.addBuildForm).then((res) => {
              console.log('------------', res)
              this.addBuildDialog = false;
              this.fullscreenLoading.close();
              this.loadData();
              this.$message.success(
                this.$t("message.personnelPosition.add_success")
              ); //添加成功！
            });
          } else {
            updateBimBaseUploadApi(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(() => {
          deleteBimBaseUploadApi({ 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;
  >div:nth-child(1){
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  &.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>