<template>
  <div class="metadata-list">
    <SingleData v-bind="{
      isShow: isShowAddSingleDataDialog,
      edit: edit,
      title: title,
      beforeClose: beforeCloseAddSingleDataDialog,
      updateData: updateData,
      modelParams: modelParams,
      formData: formData,
    }"></SingleData>
    <div class="data_list" :ref="'MetadataList'">
      <!-- <div class="data_selected" v-show="selectedNum > 0">
        已选择 <span>{{ selectedNum }}</span> 项
      </div>-->
      <div class="table_part">
        <el-table v-loading="tableLoading" ref="multipleTable" :data="renderData" tooltip-effect="dark"
          style="width: 100%" :max-height="tableMaxHeight" :row-key="getRowKeys">
          <!-- <el-table-column
            type="selection"
            :reserve-selection="true"
            width="50"
            align="center"
          ></el-table-column>-->
          <!-- <el-table-column label="组合" width="80" align="center">
            <template slot-scope="scope">
              <p
                :class="[
                  'el-icon-tuceng',
                  'iconfont',
                  'dataset_select',
                  { selected: scope.row.selected },
                ]"
                @click="selectDataset(scope.row, scope.$index)"
              ></p>
            </template>
          </el-table-column>-->
          <el-table-column width="50" label="序号" align="center">
            <template slot-scope="scope">{{ scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column label="名称" width="200" align="center">
            <template slot-scope="scope">
              <div class="limit_width" :title="scope.row.title">{{ scope.row.title }}</div>
            </template>
          </el-table-column>
          <el-table-column label="描述" width="300" align="center">
            <template slot-scope="scope">
              <div class="limit_width" :title="scope.row.content">{{ scope.row.content }}</div>
            </template>
          </el-table-column>
          <el-table-column label="经度" width="150" align="center" v-if="modelParams.type == 0">
            <template slot-scope="scope">
              <div class="limit_width" :title="scope.row.centerLon">{{ Number(scope.row.centerLon).toFixed(4) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="纬度" width="150" align="center" v-if="modelParams.type == 0">
            <template slot-scope="scope">
              <div class="limit_width" :title="scope.row.centerLat">{{ Number(scope.row.centerLat).toFixed(4) }}</div>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="150" align="center">
            <template slot-scope="scope">
              <div class="limit_width" :title="scope.row.type">
                <!-- {{ scope.row.type }} -->
                <span v-if="scope.row.type == 0">点</span>
                <span v-else-if="scope.row.type == 1">线</span>
                <span v-else-if="scope.row.type == 2">面</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label min-width="10" align="center"></el-table-column>
          <el-table-column prop="address" label="查看" width="90" align="center">
            <template slot-scope="scope">
              <el-button icon="el-icon-view iconfont" :style="{ color: '#04CC6C' }"
                @click="lookData(scope.$index, scope.row)" circle></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="编辑" width="90" align="center">
            <template slot-scope="scope">
              <el-button icon="el-icon-edit iconfont" :style="{ color: '#7440E4' }"
                @click="editData(scope.$index, scope.row)" circle></el-button>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="删除" width="70" align="center">
            <template slot-scope="scope">
              <el-popover placement="top-end" width="160" :ref="`popover-${scope.$index}`">
                <p style="padding: 10px 0">确定要删除此数据吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="
                    scope._self.$refs[`popover-${scope.$index}`].doClose()
                  ">取消</el-button>
                  <el-button type="primary" size="mini" @click="dataDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" icon="el-icon-delete iconfont" :style="{ color: '#999999' }" size="medium"
                  circle></el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination background @current-change="handleCurrentChange" @size-change="handlePagesizeChange"
          :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, sizes, jumper"
          :total="dataTotal"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/content";
export default {
  components: {
    SingleData: () => import("@/components/MetadataListContainer/SingleData.vue"),
  },
  props: {
    tableLoading: {
      type: Boolean,
      default: false,
    },
    tableData: {
      type: Array,
      default: [],
    },
    dataTotal: {
      type: Number,
      default: 0,
    },
    updateData: {
      type: Function,
    },
    changePage: {
      type: Function,
    },
    modelParams: {
      type: Object,
    },
  },
  data() {
    return {
      edit: false,
      title: "内容详情",
      isShowAddSingleDataDialog: false,
      formData: {},

      renderData: [],
      currentPage: 1,
      pageSize: 20,
      tableMaxHeight: 200,

      selectedNum: 0,
    };
  },
  created() { },
  mounted() {
    let that = this;
    setTimeout(() => {
      that.resizeWindowEvent();
    }, 100);
  },
  methods: {
    // 确定唯一的key值
    getRowKeys(row) {
      return row.gcms_id; // 每条数据的唯一识别值
    },

    // 当前页
    handleCurrentChange(currentPage) {
      let that = this;
      this.changePage(currentPage).then(() => {
        that.updateData();
      });
    },

    // 每页个数改变
    handlePagesizeChange(size_num) {
      let that = this;
      this.changePage(1, size_num).then(() => {
        that.updateData();
      });
    },

    // 删除数据集记录
    dataDelete(index, data) {
      let that = this;
      api
        .delSingleData({
          id: data.id,
          modelId: data.modelId,
          // modelType: data.modelType,
        })
        .then((result) => {
          if (result.code == 200) {
            that.$message({
              message: "删除数据成功!",
              type: "success",
            });
            that.updateData();
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 批量删除
    batchDelete() { },

    // 获取单条数据全部内容
    getSingleAllContent(data) {
      let that = this;
      api
        .getContentListById({
          id: data.id,
          modelId: data.modelId,
        })
        .then((result) => {
          if (result.code == 200) {
            that.formData = result.content;
            that.isShowAddSingleDataDialog = true;
          } else {
            checkRequestCode(result);
          }
        })
        .catch((err) => {
          that.$message({
            type: "error",
            message: err,
          });
        });
    },

    // 查看元数据
    lookData(index, data) {
      this.title = "内容详情";
      this.edit = false;
      this.getSingleAllContent(data);
    },

    // 编辑元数据
    editData(index, data) {
      this.title = "内容修改";
      this.edit = true;
      this.getSingleAllContent(data);
    },

    // 关闭 内容详情/修改内容
    beforeCloseAddSingleDataDialog() {
      this.isShowAddSingleDataDialog = false;
    },

    // 重置表格高度
    resizeWindowEvent() {
      let that = this;
      this.tableInterval = setInterval(() => {
        if (that.$refs["MetadataList"]) {
          that.tableMaxHeight = that.$refs["MetadataList"].clientHeight - 70;
          clearInterval(that.tableInterval);
        }
      }, 100);
      window.onresize = () => {
        return (() => {
          if (that.$refs["MetadataList"])
            that.tableMaxHeight = that.$refs["MetadataList"].clientHeight - 70;
        })();
      };
    },
  },

  filters: {

  },

  computed: {
    preparingRenderedData() {
      return this.tableData;
    },
  },

  watch: {
    preparingRenderedData: {
      immediate: true,
      handler: function (newVal, oldVal) {
        this.renderData = newVal;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.metadata-list {
  width: 100%;
  height: 100%;

  .data_list {
    width: 100%;
    height: 100%;
    position: relative;

    .data_selected {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      background: #e6f7ff;
      border: 1px solid #91d5ff;
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: 10px;
      text-indent: 20px;

      span {
        color: #3ba1ff;
      }
    }

    .table_part {
      position: relative;
      height: calc(100% - 70px);

      .el-table {
        /deep/ tr {
          height: @tr_height;
        }

        /deep/ .el-table__header-wrapper {
          width: calc(100% - 2px);
          border: 1px solid #e8e8e8;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
          background: #fafafa;

          th {
            border-bottom: 0px solid #ebeef5;
          }
        }

        /deep/ .el-table__body-wrapper {
          .dataset_select {
            color: #cbcbcb;
            cursor: pointer;
          }

          .dataset_select.selected {
            color: #3ba1ff;
          }

          .el-button {
            border: 0px solid;
            background: transparent;
            padding: 5px;

            :hover {
              background: transparent;
            }

            i.el-icon-view {
              font-size: 14px;
            }
          }

          .limit_width {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .footer {
      width: 100%;
      height: 30px;
      padding-top: 20px;
      padding-bottom: 20px;
      position: absolute;
      bottom: 0;

      .el-pagination {
        display: inline-block;
        float: right;
      }
    }

    .header_table {
      /deep/ .el-table__empty-block {
        display: none;
      }
    }
  }
}
</style>