 <template>
  <div id="tablecontainer">
    <el-table
      :data="tableData"
      stripe
      height="90%"
      highlight-current-row
      class="tb-edit"
      style="width: 98%; margin-left: 10px"
      header-cell-class-name="sinCl"
    >
      <el-table-column type="index" min-width="40"></el-table-column>
      <el-table-column prop="name" label="名称" min-width="120">
        <template slot-scope="scope">
          <el-input
            v-if="getInfo == '1'"
            size="small"
            v-model="scope.row.name"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="地图类型" min-width="100">
        <template slot-scope="scope">
          <el-select
            v-if="getInfo == '1'"
            size="small"
            v-model="scope.row.type"
            placeholder="请选择"
            @change="makeType(scope.row.type, scope.$index)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <!-- 修改type后必须每个控件都绑定一个列表 不然会出现中英文跳转的问题 -->
      <el-table-column prop="subType" label="枚举子类型" min-width="100">
        <template slot-scope="scope">
          <!-- @focus="makeSubType(scope.$index)" -->
          <el-select
            v-if="getInfo == '1'"
            size="small"
            v-model="scope.row.subType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in getSubType(scope.$index)"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.subType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="group" label="分组" min-width="100">
        <template slot-scope="scope">
          <el-select
            v-if="getInfo == '1'"
            size="small"
            v-model="scope.row.group"
            placeholder="请选择"
            @focus="makeGroup(scope.$index)"
            @change="makeGroup(scope.$index)"
          >
            <el-option
              v-for="item in groupOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <span v-else>{{ scope.row.group }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="index"
        label="显示顺序"
        min-width="100"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-input
            v-if="getInfo == '1'"
            size="small"
            v-model="scope.row.index"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.index }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="地址" min-width="200">
        <template slot-scope="scope">
          <el-input
            v-if="
              (scope.row.type == 'ArcGISTiledLayer' ||
                scope.row.type == 'ArcGISMapImageLayer' ||
                scope.row.type == 'ArcGISVectorTiledLayer') &&
              getInfo == '1'
            "
            size="small"
            v-model="scope.row.url"
            placeholder="请输入内容"
          ></el-input>
          <span v-else>{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="150" v-if="getInfo == '1'">
        <template slot="header">
          <el-button id="buttonStyle1" size="small" @click="addRow()"
            >添加图层</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index)"
            type="text"
            size="small"
            v-if="getInfo == '1'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-button
      id="buttonStyle"
      size="small"
      v-if="getInfo == '1'"
      style="margin-top: 5px; margin-bottom: 5px"
      @click="backUploadData()"
      >上一步</el-button
    >
    <el-button
      size="small"
      v-if="getInfo == '1'"
      style="margin-top: 5px; margin-bottom: 5px"
      @click="UploadData()"
      >保存</el-button
    >
  </div>
</template>

<script>
import { store } from "@/components/vuex/store.js";
export default {
  data() {
    return {
      id: "",
      key: "",
      name: "",
      getInfo: sessionStorage.getItem("getInfo"),
      options: [
        {
          value: "tianditu",
          label: "天地图",
        },
        {
          value: "amap",
          label: "高德",
        },
        {
          value: "esri",
          label: "esri",
        },
        {
          value: "OpenStreetMapLayer",
          label: "OpenStreetMapLayer",
        },
        {
          value: "ArcGISTiledLayer",
          label: "ArcGISTiledLayer",
        },
        {
          value: "ArcGISMapImageLayer",
          label: "ArcGISMapImageLayer",
        },
        {
          value: "ArcGISVectorTiledLayer",
          label: "ArcGISVectorTiledLayer",
        },
      ],
      // subtypeOptions: [], // 可以不用了by lbz 20210703
      //尝试修改 by lbz 避免子类型的字符串判断 20210703
      tiandituOptions: [
        {
          value: "VEC_C",
          label: "矢量底图(WGS84)",
        },
        {
          value: "CVA_C",
          label: "矢量注记(WGS84)",
        },
        {
          value: "IMG_C",
          label: "影像底图(WGS84)",
        },
        {
          value: "CIA_C",
          label: "影像注记(WGS84)",
        },
        {
          value: "TER_C",
          label: "地形晕渲(WGS84)",
        },
        {
          value: "VEC_W",
          label: "矢量底图(web mercator)",
        },
        {
          value: "CVA_W",
          label: "矢量注记(web mercator)",
        },
        {
          value: "IMG_W",
          label: "影像底图(web mercator)",
        },
        {
          value: "CIA_W",
          label: "影像注记(web mercator)",
        },
        {
          value: "TER_W",
          label: "地形晕渲(web mercator)",
        },
      ],
      amapOptions: [
        {
          value: "AMAP_VECTOR",
          label: "矢量底图",
        },
        {
          value: "AMAP_IMAGE",
          label: "影像底图",
        },
        {
          value: "AMAP_IMAGE_LABEL",
          label: "影像底图注记",
        },
      ],
      esriOptions: [
        {
          value: "NatGeo_World_Map",
          label: "国家地理地图",
        },
        {
          value: "USA_Topo_Maps",
          label: "美国地形图",
        },
        {
          value: "World_Imagery",
          label: "世界图像",
        },
        {
          value: "World_Physical_Map",
          label: "世界物理地图",
        },
        {
          value: "World_Shaded_Relief",
          label: "世界阴影浮雕",
        },
        {
          value: "World_Street_Map",
          label: "世界街道地图",
        },
        {
          value: "World_Terrain_Base",
          label: "世界地形基础地图",
        },
        {
          value: "World_Topo_Map",
          label: "世界地形图",
        },
      ],
      groupOptions: [
        {
          value: "vector",
          label: "矢量分组",
        },
        {
          value: "image",
          label: "影像分组",
        },
        {
          value: "",
          label: "覆盖图层",
        },
      ],
      tableData: [],
    };
  },
  methods: {
    addRow() {
      this.tableData.push({
        name: "",
        index: "",
        subType: "",
        type: "",
        group: "",
        url: "",
      });
    },
    deleteRow(index) {
      this.$confirm("确认删除此图层", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          // 删除
          this.tableData.splice(index, 1);
        })
        .catch(() => {
          this.$notify.error({
            title: "提示",
            message: "删除失败",
          });
        });
    },
    //提交数据
    backUploadData() {
      this.UploadData();
      this.$router.push({
        path:
          "/home/" + this.name + "/" + this.key + "/" + this.id + "/position",
      });
    },
    UploadData() {
      let that = this;
      //确认name\url\index是否填写 tmp为符合要求的标志
      for (var j = 0; j < this.tableData.length; j++) {
        if (this.tableData[j].name == "") {
          this.$alert("图层名称不可为空", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
        if (this.tableData[j].index == "") {
          this.$alert("图层显示顺序不可为空", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
        if (this.tableData[j].type == "") {
          this.$alert("地图类型不可为空", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
        if (
          this.tableData[j].type == "ArcGISTiledLayer" ||
          this.tableData[j].type == "ArcGISMapImageLayer" ||
          this.tableData[j].type == "ArcGISVectorTiledLayer"
        ) {
          if (this.tableData[j].url == "") {
            this.$alert("图层url不可为空", "提示", {
              confirmButtonText: "确定",
            });
            return;
          }
        }
      }
      this.$store.dispatch("updateBasemap", { basemap: this.tableData });
      this.$notify.success({
        title: "提示",
        message: "保存成功",
      });
    },
    //当subtype修改
    //可以不用了 by lbz 20210703
    // makeSubType(index) {
    //   switch (this.tableData[index].type) {
    //     case "tianditu":
    //       this.subtypeOptions = this.tiandituOptions;
    //       break;
    //     case "amap":
    //       this.subtypeOptions = this.amapOptions;
    //       break;
    //     case "esri":
    //       this.subtypeOptions = this.esriOptions;
    //       break;
    //     default:
    //       this.subtypeOptions = [];
    //       break;
    //   }
    // },
    getSubType(index) {
      switch (this.tableData[index].type) {
        case "tianditu":
          return this.tiandituOptions;
        case "amap":
          return this.amapOptions;
        case "esri":
          return this.esriOptions;
        default:
          return [];
      }
    },
    //当group修改
    makeGroup(index) {
      switch (this.tableData[index].type) {
        case "tianditu":
        case "amap":
        case "esri":
        case "OpenStreetMapLayer":
          break;
        default:
          this.tableData[index].group = "";
          break;
      }
    },
    //当type修改 主要是修改subtype、group的值
    //尝试修改 by lbz 避免子类型的字符串判断 20210703
    makeType(type, index) {
      switch (type) {
        case "tianditu":
          this.tableData[index].subType = "VEC_C";
          this.tableData[index].url = "";
          if (this.tableData[index].group == "")
            this.tableData[index].group = "vector";
          break;
        case "amap":
          this.tableData[index].subType = "AMAP_VECTOR";
          this.tableData[index].url = "";
          if (this.tableData[index].group == "")
            this.tableData[index].group = "vector";
          break;
        case "esri":
          this.tableData[index].subType = "NatGeo_World_Map";
          this.tableData[index].url = "";
          if (this.tableData[index].group == "")
            this.tableData[index].group = "vector";
          break;
        case "OpenStreetMapLayer":
          this.tableData[index].subType = "";
          this.tableData[index].url = "";
          if (this.tableData[index].group == "")
            this.tableData[index].group = "vector";
          break;
        default:
          this.tableData[index].subType = "";
          this.tableData[index].group = "";
          break;
      }
    },
    renderHeader(h, { column }) {
      // h即为cerateElement的简写，具体可看vue官方文档
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
            props: {
              effect: "dark",
              content: "图层的显示顺序，随着数字的增大，图层从下往上依次叠加",
              placement: "top",
            },
          },
          [
            h("i", {
              class: "el-icon-info",
              style: "margin-left:5px;cursor:pointer;",
            }),
          ]
        ),
      ]);
    },
  },
  mounted() {
    let config = sessionStorage["Data"];
    if (config) {
      config = JSON.parse(config);
      this.tableData = config.meta.basemap;
    } else {
      if (this.$store.state.config.meta.basemap.length > 0)
        this.tableData = JSON.parse(
          JSON.stringify(this.$store.state.config.meta.basemap)
        );
    }
    if (this.getInfo != 1) {
      for (var i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].group == "") {
          this.tableData[i].group = "覆盖图层";
        }
        if (this.tableData[i].group == "image") {
          this.tableData[i].group = "影像分组";
        }
        if (this.tableData[i].group == "vector") {
          this.tableData[i].group = "矢量分组";
        }
        if (this.tableData[i].type == "tianditu") {
          this.tableData[i].type = "天地图";
        }
        if (this.tableData[i].type == "amap") {
          this.tableData[i].type = "高德";
        }
      }
    }
  },
  watch: {
    $route: {
      handler(to, from) {
        this.id = to.params.id;
        this.key = to.params.key;
        this.name = to.params.name;
      },
      immediate: true,
    },
    tableData: {
      handler() {
        if (this.tableData) {
          for (var i = 0; i < this.tableData.length; i++) {
            let reg = /\D/;
            if (reg.test(this.tableData[i].index)) {
              if (this.tableData[i].index != "")
                this.$message.info("显示顺序只可为数字");
            }
            this.tableData[i].index = this.tableData[i].index
              .toString()
              .replace(/\D/, "");
          }
        }
      },
      deep: true,
    },
  },
  store,
};
</script>
<style lang="scss" scoped>
#buttonStyle1 {
  background: #9dbbe7;
  border-radius: 4px;
  border-color: #ecedf0;
  color: #fff;
}
.el-input__inner {
  >>> &::placeholder {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #fff;
  }
}
.el-input__inner {
  background: #9dbbe7 !important;
  color: #fff;
}
>>> .el-table td,
>>> .el-table th.is-leaf {
  border: 1px solid rgba(211, 226, 246, 0.5) !important;
}
</style>
