<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="delBuild" icon="el-icon-minus" size="small" type="default"
                       :disabled="!buildList.length"/>
            <el-button @click="editBuild" icon="el-icon-edit-outline" size="small" type="default"
                       :disabled="!buildList.length"/>
          </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" v-if="buildList.length > 0">
        <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>
      <div v-else class="r-table" >
      <div class="center" style="margin-top:300px;">
        <i class="icon-wushuju iconfont"></i> 请先在左侧创建建筑
      </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"
    />
    <!-- 删除建筑-删除楼层 -->
    <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"  :disabled="buildDisabled">确认</el-button>
      </span>
    </el-dialog>
    <!-- 添加贯通关系弹窗 -->
    <addConnectivity @refresh="refresh" ref="addConnectivity"/>
    <!-- 查看图片弹窗 -->
    <checkGraphy :alreadyRelatedModel='alreadyRelatedModel' @refresh="bindRefresh" 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,
        buildDisabled: 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: {},
        selectedBuildIndex: 0
      };
    },
    computed: {
      ...mapGetters("layout", ["projectId"])
    },
    mounted() {
    },
    created() {
      this.init();
      this.handleBuildQuery()
      this.handleSearchBuildKey()
    },
    methods: {
      init() {
        let bdParam = {
          Orders: "BuildLocalName asc",
          PageNumber: 1,
          PageSize: 500
        };
        buildingQueryAndCount(bdParam, res => {
          this.buildList = res.Content;
          if (this.buildList.length) {
            this.changeBuild(this.selectedBuildIndex);
          }
        });
      },
      //change build
      changeBuild(index) {
        this.selectedBuildIndex = index;
        this.buildList.map(item => {
          item.active = false;
          return item;
        });
        this.buildList[index].active = true;
        this.curBuildId = this.buildList[index].BuildID;
        this.getFloorTableData();
        this.$forceUpdate();
      },
      //add build
      addBuild() {
        // this.$message.warning("开发中...");
        // return;
        this.buildTitle = '添加建筑';
        this.$refs.addBuildDialog.showDialog();
        this.handleSearchBuildKey()
      },
      handleSearchBuildKey() {
        let params = {
          projectId: this.projectId,
          data: {
            Orders: "sort asc,InfoPointCode asc",
            PageNumber: 1,
            PageSize: 1000
          },
          type: 'Building'
        };
        getDataDictionary(params, res => {
          let first = {}
          //一级循环出来一级标签
          let list = res.Content.filter(i => (i.FirstName !== '工作历') && (i.FirstName !== '能耗信息') && (i.FirstName !== '人员信息'))
          list.map(item => {
            // console.log(item.FirstName)
            if ((item.InputMode === 'D1' || item.InputMode === 'D2' || item.InputMode === 'E2' || item.InputMode === 'D1L') && item.DataSource) {
              item.options = JSON.parse(item.DataSource)
              if (item.options[0] && item.options[0].Content) {
                item.props = {
                  value: 'Code',
                  label: 'Name',
                  children: 'Content',
                  checkStrictly: true
                }
              }
            }
            if (first[item.FirstName] && first[item.FirstName].length) {
            } else {
              first[item.FirstName] = []
            }
            if (
              item.Path !== 'BuildingInfo.AreaInfo.AreaTree' &&
              item.Path !== 'DefaultQRCode' &&
              item.Path !== 'BuildQRCode'
            ) {
              first[item.FirstName].push({
                InfoPointName: item.InfoPointName,
                InfoPointCode: item.InfoPointCode,
                Visible: item.Visible,
                UnDisabled: item.UnDisabled,
                SecondName: item.SecondName ? item.SecondName : "",
                InputMode: item.InputMode,
                options: item.options,
                props:item.props,
                Unit: item.Unit,
                Path: item.Path
              })
            }
          })
          this.buildMessage = first

        })
      },
      //delete build ,根据id删除建筑信息
      delBuild() {
        this.delText = '建筑'
        this.delDialogVis = true;
      },
      //edit build
      editBuild() {
        this.buildTitle = '编辑建筑';
        this.handleSearchBuildKey()
        let list = this.currentBuildList.filter(i => i.BuildID === this.curBuildId)
        let obj = {}
        for (let i = 0; i < list.length; i++) {
          obj = list[i]
        }
        this.$refs.addBuildDialog.showDialog(obj);
      },
      handleFile(val,name) {
      },
      // handleBuild 获取建筑信息
      handleBuild(val) {
        let newform = tools.formatData(val)
        let Param = {
          Content: [newform]
        }
        if (newform.BuildID) {
          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.floorTitle = "添加楼层";
        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);
        });
      },
      // 绑定图以后刷新
      bindRefresh() {
        this.init();
      },
      // 创建楼层成功-修改关系成功
      refresh() {
        this.getFloorTableData();
      },
      // 确认删除(删除建筑-楼层公用)
      confirmDel() {
        this.buildDisabled = true
        if (this.delText == "楼层") {
          let delParam = [{FloorID: this.curFloorId}];
          this.$message.success("删除成功");
          this.delDialogVis = false;
          manageDeleteFloor(delParam, res => {
            this.buildDisabled = false
            this.init();
          });
        } else {
          // 删除建筑
          if (this.tableData && this.tableData.length) {
            this.buildDisabled = false
            this.$message.error("当前建筑中包含楼层，不可删除");
            this.delDialogVis = false;
          } else {
            let param = [{BuildId: this.curBuildId}];
            this.$message.success("删除成功");
            this.delDialogVis = false;
            objectDeleteBuild(param, res => {
              this.buildDisabled = false
              this.handleBuildQuery()
              this.init()
            })
          }

        }
      },
      // 修改楼层信息
      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 param = {
          projectId: this.projectId,
          Orders: "BuildLocalName asc",
          PageNumber: 1,
          PageSize: 500
        };
        objectQueryBuild(param, res => {

          this.currentBuildList = res.Content
        });
      },

    },
    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>
