<template>
  <div id="bd-fl-manage">
    <el-row>
      <div class="l-list">
        <div class="action-box">
          <div>
            <el-button @click="addBuild" icon="el-icon-plus" size="small" type="default"/>

            <el-popover
              placement="top"
              width="160"
              v-model="visible">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="delBuild">确定</el-button>
              </div>
              <el-button slot="reference" icon="el-icon-minus" size="small" type="default"/>
            </el-popover>
            <el-button @click="editBuild" icon="el-icon-edit-outline" size="small" type="default"/>
          </div>
        </div>
        <h4>建筑</h4>
        <div class="build-list">
          <div :class="{'floor-item':true,active:item.active}" :key="item.BuildID" @click="changeBuild(index)"
               v-for="(item,index) in buildList">
            <span>
              {{item.BuildLocalName || item.BuildName}}
              <el-badge :value="item.Count" class="mark" v-if="item.Count>0"/>
            </span>
          </div>
        </div>
      </div>
      <div class="r-table">
        <div class="action-box">
          <el-button @click="addFloor" size="small" type="default">添加楼层
          </el-button>
        </div>
        <div class="table-box">
          <el-table :data="tableData" :header-cell-style="headerStyle" height="100%" style="width: 100%"
                    v-loading="loading">
            <el-table-column label="楼层本地名">
              <template slot-scope="scope">{{scope.row.FloorLocalName||scope.row.FloorName}}</template>
            </el-table-column>
            <el-table-column label="楼层顺序号">
              <template slot-scope="scope">{{scope.row.FloorSequenceID}}</template>
            </el-table-column>
            <el-table-column label="楼层信息">
              <template slot-scope="scope">
                <el-button @click="editFloorData(scope.row)" icon="el-icon-edit-outline" plain size="mini"></el-button>
              </template>
            </el-table-column>
            <el-table-column label="平面图" prop="Datasource">
              <template slot-scope="scope">
                <p @click="checkDrawImg(scope.row,2)" v-if="scope.row.Sign>0">
                  <el-badge is-dot>
                    <i class="iconfont icon-floorplan"/>
                  </el-badge>
                  平面图重复
                </p>
                <p @click="checkDrawImg(scope.row,1)"
                   v-else-if="scope.row.StructureInfo?scope.row.StructureInfo.FloorMap:false">
                  <i class="iconfont icon-floorplan"/>
                  查看平面图
                </p>
                <p @click="checkDrawImg(scope.row,3)" v-else>
                  <i class="iconfont icon-nopicture"/>
                  暂无平面图
                </p>
              </template>
            </el-table-column>
            <el-table-column label="楼层贯通关系" prop="SubTypeName">
              <template slot-scope="scope">
                <span
                  style="margin-right:20px">{{scope.row.FloorThroughList?scope.row.FloorThroughList.length:0}}</span>
                <el-button @click="changeConnection(scope.row)" icon="el-icon-edit-outline" plain size="mini"/>
              </template>
            </el-table-column>
            <el-table-column label="操作" prop="action">
              <template slot-scope="scope">
                <el-button @click="handleDelete(scope.row)" icon="el-icon-delete" plain size="mini" type="danger"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-row>
    <!-- 添加-修改楼层 -->
    <addFloor :curBuildId="curBuildId" :curFloorId="curFloorId" :title="floorTitle" @refresh="refresh"
              ref="addFloorDialog"/>
    <!-- 添加-修改建筑 :currentType="currentType"-->
    <addBuild
      :buildTitle="buildTitle"
      ref="addBuildDialog"
      :buildMessage="buildMessage"
      @handleBuild="handleBuild"
      :curBuildId="curBuildId"
    />
    <!-- 删除建筑-删除楼层 -->
    <el-dialog :visible.sync="delDialogVis" @close="handleClose" id="messageDialog" title="提示" width="20%">
      <div>确定要删除该{{delText}}？</div>
      <span class="dialog-footer" slot="footer">
        <el-button @click="delDialogVis=false" size="small">取消</el-button>
        <el-button @click="confirmDel" size="small" type="primary">确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加贯通关系弹窗 -->
    <addConnectivity @refresh="refresh" ref="addConnectivity"/>
    <!-- 查看图片弹窗 -->
    <checkGraphy :alreadyRelatedModel='alreadyRelatedModel' @refresh="refresh" ref="checkGraphy"></checkGraphy>
  </div>

</template>

<script>
  import addFloor from "@/views/ready/buildfloor/addFloor/index";
  import addBuild from "@/components/ready/buildfloor/addBuild";
  import {mapGetters} from "vuex";
  import addConnectivity from "@/components/ready/buildfloor/addConnectivity";
  import checkGraphy from "./drawGraphy/checkGraphy"; //查看图片
  import tools from "@/utils/buildfloor/tools";
  import {
    buildingQueryAndCount,
    floorQueryAndSign,
    getDataDictionary,
    manageDeleteFloor,
    objectCreateBuild,
    objectDeleteBuild,
    objectQueryBuild,
    objectUpdateBuild
  } from "@/api/scan/request";

  export default {
    components: {
      addFloor,
      addBuild,
      addConnectivity,
      checkGraphy
    },
    data() {
      return {
        repetitionGraphyVisible: false, // 替换平面图弹窗
        floorTitle: "添加楼层",
        buildTitle: "添加建筑",
        delDialogVis: false,
        delText: "建筑",
        headerStyle: {
          backgroundColor: "#d9d9d9",
          color: "#2b2b2b",
          lineHeight: "30px"
        },
        buildList: [],
        tableData: [],
        page: {
          pageSize: 500,
          pageSizes: [10, 20, 50, 100],
          pageNumber: 1,
          total: 0
        },
        loading: false, //列表loading
        curBuildId: "", //当前选中的建筑id
        curFloorId: "", //当前选中的楼层id
        modelId: "",
        alreadyRelatedModel: [],
        // currentType: 'add'
        buildMessage: {},
        visible: false,
        currentBuild: {},//当前建筑
      };
    },
    computed: {
      ...mapGetters("layout", ["projectId"])
    },
    mounted() {
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        let bdParam = {
          Orders: "BuildLocalName asc",
          PageNumber: 1,
          PageSize: 500
        };
        buildingQueryAndCount(bdParam, res => {
          this.buildList = res.Content;
          if (this.buildList.length) {
            this.changeBuild(0);
          }
        });
      },
      //change build
      changeBuild(index) {
        this.buildList.map(item => {
          item.active = false;
          return item;
        });
        this.buildList[index].active = true;
        this.curBuildId = this.buildList[index].BuildID;
        this.currentBuild = this.buildList[index]
        this.getFloorTableData();
        this.$forceUpdate();
      },
      //add build
      addBuild() {
        // this.$message.warning("开发中...");
        // return;
        this.buildTitle = '添加建筑';
        let params = {
          projectId: this.projectId,
          data: {
            Orders: "sort asc,InfoPointCode asc",
            PageNumber: 1,
            PageSize: 50
          },
          type: 'Building'
        };
        getDataDictionary(params, res => {
          let list = res.Content.map(item => {
            if (item.InputMode === 'D1' && item.DataSource != undefined) {
              item.options = JSON.parse(item.DataSource)
            }
            return item
          })
          let first = {}
          //一级循环出来一级标签
          list.map(item => {
            if (item.InputMode === 'D1' && item.DataSource != undefined) {
              item.options = JSON.parse(item.DataSource)
            }
            if (first[item.FirstName] && first[item.FirstName].length) {
            } else {
              first[item.FirstName] = []
            }
            first[item.FirstName].push({
              InfoPointName: item.InfoPointName,
              InfoPointCode: item.InfoPointCode,
              Visible: item.Visible,
              UnDisabled: item.UnDisabled,
              SecondName: item.SecondName ? item.SecondName : "",
              Path: item.Path,
              InputMode: item.InputMode,
              options: item.options,
              Unit: item.Unit
            })
          })
          this.buildMessage = first

        })
        this.$refs.addBuildDialog.showDialog();
      },
      //delete build ,根据id删除建筑信息
      delBuild() {
        // this.$message.warning("开发中...");
        // return;
        // this.delText = "建筑";
        // this.delDialogVis = true;
        let param = [{BuildId: this.curBuildId}];
        objectDeleteBuild(param, res => {
          setTimeout(() => {
            this.handleBuildQuery()
            this.init()
          })
          this.visible = false
          this.$message.success("删除成功");
        })
      },
      //edit build
      editBuild() {
        // this.currentType = 'edit';
        this.buildTitle = '编辑建筑';
        this.$refs.addBuildDialog.showDialog(this.currentBuild);
      },
      // handleBuild 获取建筑信息
      handleBuild(val) {
        let newform = tools.formatData(val)
        newform.BuildID = this.curBuildId || ''
        let Param = {
          Content: [newform]
        }
        if (newform.curBuildId) {
          objectUpdateBuild(Param, res => {
            this.$message.success('更新成功')
            this.$refs.addBuildDialog.closeDialog()
          })
        } else {
          objectCreateBuild(Param, res => {
            this.$message.success('创建成功')
            this.$refs.addBuildDialog.closeDialog()
          })
        }
        setTimeout(() => {
          this.handleBuildQuery()
          this.init()
        })
      },
      //delete floor
      handleDelete(floor) {
        this.delText = "楼层";
        this.delDialogVis = true;
        this.curFloorId = floor.FloorID;
      },
      //确认删除弹窗关闭
      handleClose() {
      },
      addFloor() {
        this.curFloorId = "";
        this.$refs.addFloorDialog.showDialog();
      },
      // 获取列表
      getFloorTableData() {
        let floorParam = {
          Cascade: [{Name: "floorThroughList"}],
          Orders: "FloorSequenceID desc",
          PageNumber: this.page.pageNumber,
          PageSize: this.page.pageSize,
          Filters: `BuildID='${this.curBuildId}'`
        };
        floorQueryAndSign(floorParam, res => {
          this.tableData = res.Content;
          this.page.total = res.Total;
          this.alreadyRelatedModel = res.Content.map(t => {
            return t.ModelId
          }).filter(t => t);
        });
      },
      // 创建楼层成功-修改关系成功
      refresh() {
        this.getFloorTableData();
      },
      // 确认删除(删除建筑-楼层公用)
      confirmDel() {
        if (this.delText == "楼层") {
          let delParam = [{FloorID: this.curFloorId}];
          manageDeleteFloor(delParam, res => {
            this.$message.success("删除成功");
            this.delDialogVis = false;
            this.getFloorTableData();
          });
        } else {
          //todo
        }
      },
      // 修改楼层信息
      editFloorData(floor) {
        this.floorTitle = "编辑楼层信息";
        this.curFloorId = floor.FloorID;
        this.$refs.addFloorDialog.showDialog(floor);
      },
      // 修改楼层贯通关系
      changeConnection(row) {
        this.$refs.addConnectivity.showDialog();
        this.$refs.addConnectivity.floor = row;
      },
      // 查看平面图
      checkDrawImg(row, index) {
        if (3 == index) {
          this.$refs.checkGraphy.showDialog(row);
          this.modelId = "";
        } else {
          this.modelId = row.ModelId;
          let pa = {modelId: this.modelId, FloorID: row.FloorID, BuildID: row.BuildID};
          this.$router.push({name: "repetitionGraphy", query: pa});
        }
      },
      //  查询建筑信息
      handleBuildQuery() {
        let floorParam = {
          projectId: this.projectId
        };
        objectQueryBuild(floorParam, res => {

        });
      },

    },
    watch: {
      projectId() {
        this.init();
      }
    }
  };
</script>
<style lang="less" scoped>
  #bd-fl-manage {
    overflow: hidden;
    height: 100%;
    position: relative;

    .el-row {
      height: 100%;

      .el-col-4 {
        width: 17%;
      }

      .el-col-20 {
        width: 82%;
      }

      & > div {
        float: left;
        height: 100%;
        overflow: hidden;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #dfe6ec;

        .action-box {
          padding: 10px;

          .el-button--small {
            padding: 10px 11px;
          }
        }
      }

      .l-list {
        width: 17%;
        overflow-y: auto;

        h4 {
          padding-left: 10px;
          border-top: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          background: #d9d9d9;
          color: #2b2b2b;
          line-height: 44px;
        }

        .build-list {
          line-height: 48px;

          .floor-item {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            span {
              margin-left: 10px;
            }
          }

          .floor-item.active,
          .floor-item:hover {
            background-color: #f5f7fa;
            color: #000;
          }
        }
      }

      .r-table {
        width: 82%;
        margin-left: 1%;

        .table-box {
          height: calc(100% - 54px);
          margin-bottom: 8px;

          .iconfont {
            vertical-align: middle;
          }

          /deep/ .el-badge__content.is-fixed {
            transform: translateY(-6%) translateX(-100%);
          }

          p {
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
