<template>
  <div class="details">
    <el-row>
      <el-col :span="24">
        <el-form ref="form" :inline="true" :model="form" label-width="5.625rem">
          <el-form-item label="服务名称">
            <el-input
              placeholder="请输入服务名称"
              style="width: 18.75rem"
              v-model="form.severName"
            ></el-input>
          </el-form-item>
          <el-form-item label="空间参考">
            <el-select
              style="width: 300px"
              v-model="form.spaceType"
              placeholder="请选择空间参考"
            >
              <el-option
                v-for="(item, index) in getDictone"
                :key="index"
                :label="item.dictlabel"
                :value="item.dictlabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务类型">
            <el-select
              style="width: 300px"
              v-model="form.severType"
              placeholder="请选择服务类型"
            >
              <el-option
                v-for="(item, index) in getDicttwo"
                :key="index"
                :label="item.dictlabel"
                :value="item.dictlabel"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据源类型">
            <el-select
              style="width: 300px"
              v-model="form.datasourceType"
              placeholder="请输入数据源类型"
            >
              <el-option label="shp" value="shp"></el-option>
              <el-option label="Excel" value="Excel"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据类型">
            <el-select
              style="width: 300px"
              v-model="form.dataType"
              placeholder="请选择数据类型"
            >
              <el-option label="点" value="点"></el-option>
              <el-option label="线" value="线"></el-option>
              <el-option label="面" value="面"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="存储类型">
            <el-input
              placeholder="请输入存储类型"
              style="width: 18.75rem"
              v-model="form.storeType"
            ></el-input>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="info" @click="ondelate">清除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="13">
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :cell-style="{ color: '#fff' }"
          :header-cell-style="{ color: '#fff' }"
          :data="tableData"
          @row-click="rowClick"
          height="47.125rem"
          border
        >
          <el-table-column
            prop="id"
            label="ID"
            align="center"
            width="50"
          ></el-table-column>
          <el-table-column
            prop="severName"
            label="服务名称"
            align="center"
          ></el-table-column>
          <el-table-column prop="spaceType" label="空间参考" align="center">
          </el-table-column>
          <el-table-column prop="severType" label="服务类型" align="center">
          </el-table-column>
          <el-table-column prop="storeType" label="存储类型" align="center">
          </el-table-column>
          <el-table-column
            prop="datasourceType"
            label="数据源类型"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center" width="220">
            <template slot-scope="{ row }">
              <el-button size="mini" type="success" @click.stop="editd(row)"
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click.stop="deleteServer(row)"
                >删除
              </el-button>
              <el-button
                size="mini"
                type="success"
                @click.stop="dataCollect(row)"
                >数据
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 1.25rem"
          background
          layout="prev, pager, next"
          :page-size="page.size"
          :total="page.total"
          :current-page="page.current"
          @current-change="Currentchange"
        >
        </el-pagination>
      </el-col>
      <el-col :span="10">
        <el-radio-group v-model="radio">
          <el-radio-button label="地图"></el-radio-button>
          <el-radio-button label="服务"></el-radio-button>
        </el-radio-group>
        <div
          style="
            width: 100%;
            height: 48.125rem;
            border: 0.0625rem solid #10a2e1;
          "
        >
          <DItu :row="rowdata" ref="dituevent" v-if="radio == '地图'"></DItu>
          <Fuwu :row="rowdata" ref="fuwuevent" v-if="radio == '服务'"></Fuwu>
        </div>
      </el-col>
    </el-row>
    <!-- --------------------------------------------------导出弹框----------------------------------------------------------------------------------- -->
    <div class="dialog_one">
      <el-dialog
        title="图层数据导出"
        :visible.sync="dialogVisible"
        width="30%"
        top="15%"
        :before-close="handleClose"
      >
        <el-form
          ref="dialogform"
          :inline="true"
          :model="dialogform"
          label-width="5.625rem"
        >
          <el-form-item label="文件类型">
            <el-input
              size="small"
              style="width: 18.75rem"
              v-model="dialogform.filetype"
            ></el-input>
          </el-form-item>
          <el-form-item label="字符集">
            <el-input
              size="small"
              style="width: 18.75rem"
              v-model="dialogform.keyword"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- --------------------------------------------  编辑弹框---------------------------------------------------------------------------------------- -->
    <div class="dialog_two">
      <el-dialog
        :visible.sync="dialogVisibletwo"
        width="40%"
        :show-close="false"
      >
        <el-row type="flex" justify="space-around">
          <el-col
            ><div class="bg-purple3">
              <p
                style="
                  font-size: 24px;
                  color: #fff;
                  text-indent: 30px;
                  margin: 20px;
                "
              >
                属性编辑
              </p>
              <el-form
                inline
                style="margin-left: 30px"
                ref="attributeform"
                :model="attributeform"
                label-width="100px"
              >
                <el-form-item label="ID">
                  <el-input
                    :disabled="true"
                    style="width: 240px"
                    v-model="attributeform.id"
                  ></el-input>
                </el-form-item>
                <el-form-item label="服务名称">
                  <el-input
                    style="width: 240px"
                    v-model="attributeform.severName"
                  ></el-input>
                </el-form-item>
                <el-form-item label="空间参考">
                  <el-input
                    :disabled="true"
                    style="width: 240px"
                    v-model="attributeform.spaceType"
                  ></el-input>
                </el-form-item>
                <el-form-item label="服务类型">
                  <el-input
                    :disabled="true"
                    style="width: 240px"
                    v-model="attributeform.severType"
                  ></el-input>
                </el-form-item>
                <el-form-item label="存储类型">
                  <el-input
                    :disabled="true"
                    style="width: 240px"
                    v-model="attributeform.storeType"
                  ></el-input>
                </el-form-item>
                <el-form-item label="数据源类型">
                  <el-input
                    :disabled="true"
                    style="width: 240px"
                    v-model="attributeform.datasourceType"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div style="margin-left: 566px">
                <el-button type="info" @click="dialogVisibletwo = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="editsubmit">确 定</el-button>
              </div>
            </div></el-col
          >
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import DItu from "./components/ditu.vue";
import Fuwu from "./components/fuwu.vue";
import { list, editsubmit } from "../../api/Datadetails";
import { getDictone, getDicttwo } from "../../api/datamange";
import { getMethodCommon } from "../../api/Api";
export default {
  components: {
    DItu,
    Fuwu,
  },
  data() {
    return {
      loading: false,
      rowdata: {},
      dialogVisible: false,
      dialogVisibletwo: false,
      radio: "地图",
      page: {
        total: 100, //总数量
        size: 10, //每页数量
        current: 1, //当前页
      },
      attributeform: {
        // 编辑form
        id: "",
        severName: "",
        severType: "",
        spaceType: "",
        datasourceType: "",
        dataType: "",
        storeType: "",
      },
      dialogform: {
        // 导出from
        filetype: "SHP",
        keyword: "UTF-8",
      },
      form: {
        // 查询form
        severType: "",
        spaceType: "",
        datasourceType: "",
        dataType: "",
        storeType: "",
      },
      tableData: [], // 表格数据
      getDictone: [], //空间参考字典
      getDicttwo: [], //服务类型字典
    };
  },
  created() {
    getDictone().then((res) => {
      this.getDictone = res.data.data;
    });
    getDicttwo().then((res) => {
      this.getDicttwo = res.data.data;
    });
    this.onLoad(this.page, this.form);
  },
  mounted() {},
  watch: {
    radio(val) {
      if (val == "地图") {
        this.$nextTick(function () {
          this.$refs.dituevent.onLoad();
        });
      } else {
        this.$nextTick(function () {
          this.$refs.fuwuevent.onLoad();
        });
      }

      // this.onLoad(this.page, this.form);
    },
  },
  methods: {
    // 获取列表
    onLoad(page, form) {
      this.loading = true;
      let areaName = localStorage.getItem('areaENName')
      list({ pageSize: page.size, pageNum: page.current,areaName:areaName, ...form }).then(
        (res) => {
          if (res.data.code == 200) {
            this.page.total = res.data.total;
            this.tableData = res.data.rows;
            this.rowdata = res.data.rows[0];
            this.$nextTick(function () {
              this.$refs.dituevent.onLoad();
            });
            this.$nextTick(function () {
              this.$refs.fuwuevent.onLoad();
            });
            this.loading = false;
          }
        }
      );
    },
    // 编辑
    editd(row) {
      this.dialogVisibletwo = true;
      this.attributeform = { ...row };
    },
    // 编辑提交
    editsubmit() {
      editsubmit(this.attributeform).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.dialogVisibletwo = false;
          this.onLoad(this.page, this.form);
        }
      });
    },
    // 数据编辑
    dataCollect(row) {
      this.$router.push({ path: "/draw", query: row });
    },
    // 删除数据
    deleteServer(row) {
      let that = this;
      that
        .$confirm("确认删除？", "系统提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        })
        .then(function () {
          getMethodCommon("/store/delete/" + row.id).then((res) => {
            if (res.data.code == 200) {
              that.$message.success("删除成功");
              that.onLoad(that.page, that.form);
            }
          });
        })
        .catch(function () {
          console.log("取消成功！");
        });
    },
    //导出
    leadingout() {
      this.dialogVisible = true;
    },
    // eldialog 关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 查询
    onSubmit() {
      this.onLoad(this.page, this.form);
    },
    //清除
    ondelate() {
      this.form = {
        // 查询form
        severType: "",
        spaceType: "",
        datasourceType: "",
        dataType: "",
        storeType: "",
      };
      this.onLoad(this.page, this.form);
    },
    // 表格点击行
    rowClick(row) {
      // console.log(row);
      this.rowdata = row;
      this.$nextTick(function () {
        this.$refs.dituevent.onLoad();
      });
      this.$nextTick(function () {
        this.$refs.fuwuevent.onLoad();
      });
    },
    // 分页切换
    Currentchange(val) {
      this.page.current = val;
      this.onLoad(this.page, this.form);
    },
  },
};
</script>

<style scoped>
.upload-dialog {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
.details {
  width: 100%;
  height: 55.625rem;
  box-sizing: border-box;
  margin: 1.25rem 1.25rem 1.25rem 2.5rem;
  padding-right: 10px;
}

.details ::v-deep .el-input__inner {
  background-color: transparent;
  border: 0.0625rem solid #00b2ff;
  color: #fff;
}
.details ::v-deep .el-form-item__label {
  color: #00b2ff;
  /* line-height: 2.1875rem; */
}
.details ::v-deep .el-button--small {
  padding: 0.625rem 2.1875rem;
}
.details ::v-deep .el-form--inline .el-form-item {
  /* margin-left: 1.875rem; */
}
.details ::v-deep .el-table,
.el-table__expanded-cell {
  background: transparent !important;
}
/* “表格内背景颜色“ */
.details ::v-deep.el-table th,
.details ::v-deep.el-table tr,
.details ::v-deep.el-table td {
  background-color: transparent !important;
}
/*  按钮样式修改 */
.details ::v-deep .el-button--success {
  background: #266a94;
  color: #00f261;
  border: 0;
}
.details ::v-deep .el-button--info {
  background: #482c27;
  color: #8ac2da;
  border: 0;
}
.details ::v-deep.el-button--primary {
  background: #266a94;
  color: #8ac2da;
  border: 0;
}
.details ::v-deep.el-button--primary {
  background: #578ef0;
  color: #fff;
  border: 0;
}
/*修改element-ui的table 在鼠标悬停hover时的高亮颜色*/
.details ::v-deep.el-table tbody tr:hover > td {
  background-color: black !important;
}
/* 第一个 dialog修改  */
.details ::v-deep.dialog_one .el-dialog {
  background: #266a94 !important;
  border: 1px solid #10a2e1;
}
.details ::v-deep.dialog_one .el-dialog__title {
  color: #00b2ff;
  font-size: 2rem;
}
.details ::v-deep.dialog_one .el-dialog__header {
  text-align: center;
}
/* 第二个 dialog 修改 */
.details ::v-deep.dialog_two .el-dialog {
  background: rgba(37, 61, 75, 1) !important;
  border: 1px solid #797979;
}
.details ::v-deep.dialog_two .el-dialog__body {
  padding: 10px 0;
}
.details ::v-deep.dialog_two .el-dialog__header {
  padding: 0;
}

.details .dialog_two .bg-purple3 {
  width: 100%;
}
.details
  ::v-deep.dialog_two
  .bg-purple3
  .el-form--label-top
  .el-form-item__label {
  padding: 0;
}
</style>