<template>
  <div>
    <div style="margin-bottom: 15px;">
      <el-input
        placeholder="请输入内容"
        @blur="querySearch"
        size="small"
        v-model="search"
        class="input-with-select"
      >
        <el-button slot="append" @click="querySearch" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div>
        <el-table
            :data="tableData"
            height="300"
            :stripe="true"
            border
            class="data-table border"
            v-loading="isLoading"
            style="width: 100%"
            >
            <el-table-column label="业务空间名称">
                <template slot-scope="scope">
                <span>
                    <el-tooltip
                    :content="scope.row.infos.RoomLocalName || scope.row.infos.RoomName"
                    placement="top"
                    >
                    <span>{{scope.row.infos.RoomLocalName || scope.row.infos.RoomName | cutString(8)}}</span>
                    </el-tooltip>
                </span>
                </template>
            </el-table-column>
            <el-table-column v-if="type == 'relevance'" label="操作">
                <template slot-scope="scope">
                <el-button @click="deleteSpace(scope.row)">关联平面图</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="right" v-if="tableData.length">
        <my-pagination :page="page" @change="pageChange"></my-pagination>
    </div>
  </div>
</template>

<script>
import { getBussines2, createRelation } from "@/api/scan/request";
import myPagination from "@/components/common/myPagination.vue";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "equip-table",
  components: {
    myPagination
  },
  computed: {
            ...mapGetters("layout", [
                "projectId",
                "secret",
                "userId"
            ])
        },
  props: {
    type: {
      type: String,
      default: "default"
    }
  },
  data() {
    return {
      page: {
        size: 50,
        sizes: [50, 100, 150, 200],
        total: 1,
        currentPage: 1
      },
      tableData: [],
      allData: null,
      search: "",
      list: {},
      graphy: "",
      isLoading: false,
      code: null
    };
  },
  created() { },
  methods: {
    getData(list, build, graphy, code) {
      this.isLoading = true;
      this.list = list;
      this.graphy = graphy;
      this.code = code
      getBussines2(
        //       {
        //     data: {
        //       criteria: {
        //         id: build.code,
        //         graphId: graphy,
        //         relType: !!code ? code.rel_type : "99",
        //         exclude: "false",
        //         side: 1,
        //         type: [code.code]
        //       }
        //     },
        //     ProjId: this.projectId,
        //     secret: this.secret
        //   }
        {
          data: {
            criteria: {
              id: build.code,
              // graphId: this.graphyId,
              // relType: this.spaceType.rel_type,
              // exclude: false,
              // side: 1,
              type: [code.code],
              "exclude": [            // 可选, 只查询指定图/关系中的对象
                {
                  "graphId": graphy,
                  "graphType": code.code,
                  "relType": !!code ? code.rel_type : "99",
                  "side": "toId",
                  // "fromId": "",                 // 选填
                  // "toId": ""                    // 选填
                }
              ]
            },
          },
          ProjId: this.projectId,
          secret: this.secret
        })
        .then(res => {
          if (res.data.Result == "success") {
            this.allData = res.data.Content || [];
            this.page.total = this.allData.length;
            this.tableData = this.pagination(
              this.page.currentPage,
              this.page.size,
              this.allData
            );
            this.isLoading = false;
          } else {
            this.$message.error(res.data.ResultMsg);
          }
        })
        .catch((err) => {
          console.log(err)
          // this.$message.error("请求出错");
        });
    },
    /**
     * 分页函数
     * @param pageNo   当前页数
     * @param pageSize 当前条数
     * @param array    全部数据
     */
    pagination(pageNo, pageSize, array) {
      let offset = (pageNo - 1) * pageSize;
      return offset + pageSize >= array.length
        ? array.slice(offset, array.length)
        : array.slice(offset, offset + pageSize);
    },

    //搜索
    querySearch() {
      var restaurants = this.allData;
      var results = this.search
        ? restaurants.filter(this.createFilter(this.search))
        : restaurants;
      this.page.total = results.length;
      this.tableData = this.tableData = this.pagination(
        this.page.currentPage,
        this.page.size,
        results
      );
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.infos.RoomLocalName.indexOf(queryString) > -1
        );
      };
    },
    /**
     * 删除
     * @param row 点击的当条数据
     */
    deleteSpace(row) {
      let param = {
        data: {
          criterias: []
        },
        ProjId: this.projectId,
        secret: this.secret
      };
      this.list.map(item => {
        param.data.criterias.push({
          from_id: item.id, //必填，object id
          to_id: row.id, //必填，object id
          graph_id: this.graphy, //必填，图实例id
          rel_type: this.code.rel_type
        });
      });
      createRelation(param)
        .then(res => {
          if (res.data.Result == "success") {
            this.$message.success("关联成功");
            this.$emit("createSuccess");
          } else {
            this.$message.error(res.data.ResultMsg);
          }
        })
        .catch(() => {
          this.$message.error("请求失败");
        });
    },
    /**
     * 查看详情
     * @param row 点击的当条数据
     */
    lockDetails(row) { },
    pageChange() {
      this.tableData = this.pagination(
        this.page.currentPage,
        this.page.size,
        this.allData
      );
    }
  },
  filters: {
    cutString: function (str, len) {
      //length属性读出来的汉字长度为1
      if (!!str && typeof str == "string" && str.length > len) {
        return str.substring(0, len) + "...";
      } else {
        return str || "--";
      }
    }
  }
};
</script>
<style>
/* .el-table tr th { */
  /* background: #fafafa !important; */
/* } */
</style>