<template>
  <div>
    <!--左侧-->
    <div class="left-container">
      <!--树控件-->
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <!--右侧-->
    <div class="right-container">
      <!--表单主体-->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div style="width: 100%">
          <el-form-item label="当前节点">
            <el-input v-model="form.name" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 70%">
            <el-button
              type="primary"
              @click="addChildNode(form.id)"
              v-if="form.id"
              >添加子节点</el-button
            >
            <el-button
              type="primary"
              @click="addChildNode(form.id)"
              v-else-if="!form.id"
              disabled
              >添加子节点</el-button
            >
            <el-button type="danger" @click="deleteNode(form.id)" v-if="form.id"
              >删除节点</el-button
            >
            <el-button
              type="danger"
              @click="deleteNode(form.id)"
              v-else-if="!form.id"
              disabled
              >删除节点</el-button
            >
            <el-button type="primary" @click="onSubmit()"
              >保存当前节点</el-button
            >
            <el-button @click="resetForm()">重置表单</el-button>
          </el-form-item>
        </div>
        <el-form-item label="id">
          <el-input v-model="form.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="pid">
          <el-input v-model="form.pid" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="URL" prop="url">
          <el-input v-model="form.url"></el-input>
        </el-form-item>
        <el-form-item label="layer">
          <el-input v-model="form.layer"></el-input>
        </el-form-item>
        <el-form-item label="最小级别">
          <el-input-number
            v-model="form.minimumLevel"
            :precision="0"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="layers">
          <el-input v-model="form.layers"></el-input>
        </el-form-item>
        <el-form-item label="showClickFeature">
          <el-switch
            v-model="form.showClickFeature"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="popup">
          <el-input v-model="form.popup"></el-input>
        </el-form-item>
        <el-form-item label="styleField">
          <el-input v-model="form.styleField"></el-input>
        </el-form-item>
        <el-form-item label="show">
          <el-switch
            v-model="form.show"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="flyTo">
          <el-input v-model="form.flyTo"></el-input>
        </el-form-item>
        <!--中心点-->
        <el-divider content-position="left">中心点</el-divider>
        <el-form-item label="经度">
          <el-input-number
            v-model="form.center.lng"
            :precision="6"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input-number
            v-model="form.center.lat"
            :precision="6"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="alt">
          <el-input-number
            v-model="form.center.alt"
            :precision="6"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="heading">
          <el-input-number
            v-model="form.center.heading"
            :precision="6"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="pitch">
          <el-input-number
            v-model="form.center.pitch"
            :precision="0"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-input-number
            v-model="form.center.roll"
            :precision="0"
            :step="1"
          ></el-input-number>
        </el-form-item>
        <el-divider></el-divider>
        <br />

        <!--pickFeatureStyle-->
        <el-divider content-position="left">pickFeatureStyle</el-divider>
        <el-form-item label="clampToGround">
          <el-switch
            v-model="form.pickFeatureStyle.clampToGround"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-divider></el-divider>
        <br />
        <!--buildings-->
        <el-divider content-position="left">buildings</el-divider>
        <el-form-item label="cloumn">
          <el-input v-model="form.buildings.cloumn"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <br />
        <!--parameters-->
        <el-divider content-position="left">parameters</el-divider>
        <el-form-item label="maxFeatures">
          <el-input-number
            v-model="form.parameters.maxFeatures"
          ></el-input-number>
        </el-form-item>
        <el-divider></el-divider>
        <br />

        <!--symbol-->
        <el-divider content-position="left">symbol</el-divider>
        <el-form-item label="styleField">
          <el-input v-model="form.symbol.styleField"></el-input>
        </el-form-item>
        <el-divider></el-divider>
        <br />


        <!--symbol.styleOptions-->
        <el-divider content-position="left">symbol.styleOptions (样式选择)</el-divider>
        <el-form-item label="不透明度">
          <el-input-number v-model="form.symbol.styleOptions.opacity"></el-input-number>
        </el-form-item>
        <el-form-item label="lineType">
          <el-input v-model="form.symbol.styleOptions.lineType"></el-input>
        </el-form-item>
        <el-form-item label="glowPower">
          <el-input v-model="form.symbol.styleOptions.glowPower"></el-input>
        </el-form-item>
        <el-form-item label="宽度">
          <el-input-number
            v-model="form.symbol.styleOptions.width"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="颜色">
          <el-input
            v-model="form.symbol.styleOptions.color"
            style="width: calc(100% - 40px)"
          ></el-input>
          <el-color-picker
            style="vertical-align: middle"
            v-model="form.symbol.styleOptions.color"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="填满">
          <el-switch
            v-model="form.symbol.styleOptions.fill"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="clampToGround">
          <el-switch
            v-model="form.symbol.styleOptions.clampToGround"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="边框线">
          <el-switch
            v-model="form.symbol.styleOptions.outline"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="perPositionHeight">
          <el-switch
            v-model="form.symbol.styleOptions.perPositionHeight"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="边框线宽度">
          <el-input-number v-model="form.symbol.styleOptions.outlineWidth"></el-input-number>
        </el-form-item>
        <el-form-item label="边框线透明度">
          <el-input-number v-model="form.symbol.styleOptions.outlineOpacity"></el-input-number>
        </el-form-item>
        <el-form-item label="边框线颜色">
          <el-input
            v-model="form.symbol.styleOptions.outlineColor"
            style="width: calc(100% - 40px)"
          ></el-input>
          <el-color-picker
            style="vertical-align: middle"
            v-model="form.symbol.styleOptions.outlineColor"
          ></el-color-picker>
        </el-form-item>
        <el-form-item label="label" style="width: 80%">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="form.symbol.styleOptions.label"
          >
          </el-input>
        </el-form-item>
        <el-divider></el-divider>
        <br />
        <!--symbol.styleFieldOptions-->
        <el-divider content-position="left"
          >symbol.styleFieldOptions
          <el-button type="primary" @click="addOption()"
            >添加</el-button
          ></el-divider
        >
        <div
          v-for="(item, _index) in form.symbol.styleFieldOptions"
          :key="'styleFieldOptions' + _index"
        >
          <el-form-item label="名称">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item label="颜色">
            <el-input
              v-model="item.color"
              style="width: calc(100% - 40px)"
            ></el-input>
            <el-color-picker
              style="vertical-align: middle"
              v-model="item.color"
            ></el-color-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="deleteOption(item)"
              >删除</el-button
            >
          </el-form-item>
        </div>
        <el-divider></el-divider>
        <br />
      </el-form>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import * as attractObj from "@/api/attractObj.js";

export default {
  data() {
    return {
      //树控件数据
      data: [],
      //树控件属性
      defaultProps: {
        children: "children",
        label: "title",
      },
      //表单数据
      form: {
        id: "",
        pid: "",
        type: "",
        name: "",
        url: "",
        layer: "",
        minimumLevel: null,
        layers: "",
        showClickFeature: false,
        popup: "",
        styleField: "",
        show: false,
        flyTo: "",
        center: {},
        pickFeatureStyle: {
          clampToGround: false,
        },
        buildings: {
          cloumn: "",
        },
        parameters: {
          maxFeatures: null,
        },
        symbol: {
          styleOptions: {
            opacity: null,
            lineType: "",
            glowPower: "",
            width: null,
            color: "",
            fill: false,
            clampToGround: false,
            label: "",
            outline:false,
            outlineColor:"",
            outlineWidth:null,
            outlineOpacity:null,
            perPositionHeight:false,
          },
          styleField:"",
          styleFieldOptions: [
            // {
            //   name: "123",
            //   color: "#fff",
            // },
          ],
        },
      },
      formBak: {},
      //过滤规则
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        url: [{ required: true, message: "请输入URL", trigger: "blur" }],
      },
    };
  },
  methods: {
    //树控件点击回调
    handleNodeClick(data) {
      //获取单个图层数据
      attractObj.GetLayer({ id: data.id }).then((res) => {
        //备份的form数据格式
        let _formBak = $.extend(true, {}, this.formBak);
        //合并查询到的数据
        let _form = $.extend(true, _formBak, res.result);
        //styleFieldOptions
        let _styleFieldOptions = _form.symbol.styleFieldOptions;
        let _list = [];
        //将属性转为list数组
        for (let _item in _styleFieldOptions) {
          //过滤function属性
          if (typeof _styleFieldOptions[_item] == "function") {
            continue;
          }
          //添加到数组
          _list.push({ name: _item, color: _styleFieldOptions[_item].color });
        }
        //给styleFieldOptions重新赋值
        _form.symbol.styleFieldOptions = _list;
        _form.symbol.styleOptions.label = JSON.stringify(
          _form.symbol.styleOptions.label
        );
        this.form = $.extend(true, {}, _form);
      });
    },
    //添加颜色项
    addOption() {
      this.form.symbol.styleFieldOptions.push({ name: "", color: "" });
    },
    //删除颜色项
    deleteOption(_item) {
      //当前JSON对象的索引
      let _index = this.form.symbol.styleFieldOptions.indexOf(_item);
      //存在的话
      if (_index > -1) {
        //删除对应索引的一个JSON对象
        this.form.symbol.styleFieldOptions.splice(_index, 1);
      }
    },
    //添加子节点
    addChildNode(_id) {
      console.log(this);
      //判断id是否为空
      if (!_id) {
        this.$message({
          message: "此节点未保存,不能添加子节点",
          type: "warning",
        });
        return;
      }
      this.initForm();
      this.form.pid = _id;
    },
    //删除节点
    deleteNode(_id) {
      //判断id是否为空
      if (!_id) {
        this.$message({
          message: "此节点未保存,不能删除",
          type: "warning",
        });
        return;
      }
      attractObj.DeleteJson({ id: _id }).then((res) => {
        let _flag = this.showMessage(res);
        if (_flag) {
          //初始化树控件和表单
          this.initTree();
          this.initForm();
        }
      });
    },
    //保存当前节点
    onSubmit() {
      new Promise((resolve, reject) => {
        //验证规则
        this.$refs.form.validate((valid) => {
          if (valid) {
            //验证通过
            resolve(true);
          } else {
            //验证失败
            resolve(false);
            return false;
          }
        });
      }).then((_validate) => {
        if (!_validate) {
          //验证失败
          this.$message.error("检查表单是否填写完整");
          return false;
        }
        //验证通过
        //数组转属性
        let _postData = $.extend(true, {}, this.form);
        let _styleList = _postData.symbol.styleFieldOptions;
        let _styleFieldOptions = {};
        for (let i = 0; i < _styleList.length; i++) {
          let _item = _styleList[i];
          _styleFieldOptions[_item.name] = { color: _item.color };
        }
        _postData.symbol.styleFieldOptions = _styleFieldOptions;
        _postData.symbol.styleOptions.label = !_postData.symbol.styleOptions
          .label
          ? {}
          : JSON.parse(_postData.symbol.styleOptions.label);

        console.log(_postData);
        attractObj.SaveJson(_postData).then((res) => {
          let _flag = this.showMessage(res);
          if (_flag) {
            //初始化树控件和表单
            this.initTree();
            this.initForm();
          }
        });
      });
    },
    //重置表单
    resetForm() {
      this.initForm();
    },
    //初始化form
    initForm() {
      //重置表单
      this.$refs.form.resetFields();
      //给form数据设置原始值
      this.form = $.extend(true, {}, this.formBak);
    },
    //初始化树控件
    initTree() {
      //获取所有图层树结构数据
      attractObj.GetLayers({}).then((res) => {
        //赋值给控件
        this.data = res.result;
      });
    },
    //显示弹窗消息
    showMessage(res) {
      if (res.code != 200) {
        //错误消息
        this.$message.error(res.message);
        return false;
      }
      //成功消息
      this.$message({
        message: res.message,
        type: "success",
      });
      return true;
    },
  },
  //初始化
  mounted() {
    //合并JSON对象
    this.formBak = $.extend(true, {}, this.form);
    //初始化树控件
    this.initTree();
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
//左侧
.left-container {
  position: absolute;
  width: 20%;
  height: calc(100% - 80px);
  padding: 30px;
  left: 10px;
  top: 10px;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
}
//右侧
.right-container {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  left: calc(20% + 20px);
  width: 78%;
  height: calc(100% - 80px);
  padding: 30px;
  top: 10px;
  border: 1px solid #d5d5d5;
  box-sizing: border-box;
}
//表单item样式
.el-form-item {
  width: 30%;
  display: inline-block;
}
//开关的布局
.el-switch {
  margin-left: 50%;
  transform: translate(-50%);
}

.el-form-item__label{
  white-space: nowrap!important;
  text-overflow: ellipsis!important;
}
</style>
