<template>
  <div class="box-center">
    <div id="app">
      <div class="biaoti">客户画像关键词配置</div>
      <div class="app-titel" style="margin-top: 20px" v-if="orgType!=3">
        <div
          class="label"
          style="color: #32363d; font-weight: 400; font-size: 16px"
        >
          楼盘选择：
        </div>
        <div>
          <el-select
            v-model="houseId"
            placeholder="请选择"
            @change="houseChange"
            filterable 
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div style="width: 100%; margin-top: 30px">
        <el-tree ref="tree" :default-expand-all="true" :data="treeList">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span
              v-if="data.level == 1"
              style="font-size: 18px; color: #32363d"
            >
              <img class="levelimg1" src="/img/level1.png" alt="" />
              {{ data.name }}
            </span>
            <span
              v-if="data.level == 2 && data.isInterval == 1"
              style="font-size: 16px; color: #32363d"
            >
              <img class="levelimg2" src="/img/level2.png" alt="" />
              {{ data.name }}
            </span>
            <span v-if="data.level == 2 && data.isInterval == 0">
              <img class="levelimg2" src="/img/level2.png" alt="" />
              {{ data.name }}~{{ data.endName }}
            </span>
            <span
              v-if="data.level == 3"
              style="font-size: 14px; color: #32363d"
            >
              <img class="levelimg3" src="/img/level3.png" alt="" />
              {{ data.name }}
            </span>

            <span
              v-if="data.level == 1"
              style="display: flex; align-items: center"
            >
              <span
                class="editorcd"
                @click="append(node, data)"
                style="display: flex; align-items: center"
              >
                <img class="levelimg3" src="/img/add1.png" alt="" />
                <span>添加二级</span>
              </span>
            </span>

            <span
              v-if="data.level == 2"
              style="display: flex; align-items: center"
            >
              <span
                v-if="data.isInterval == 1"
                class="editorcd2"
                @click="append(node, data)"
                style="display: flex; align-items: center"
              >
                <img class="levelimg3" src="/img/add2.png" alt="" />
                <span>添加三级</span>
              </span>
              <span style="margin-left: 10px">
                <el-button
                  class="editorcd"
                  type="text"
                  size="mini"
                  @click="ddeditor(node, data)"
                  >编辑</el-button
                >
              </span>
              <span style="margin-left: 10px">
                <el-button
                  class="remove"
                  type="text"
                  size="mini"
                  @click="remove(node, data)"
                  >删除</el-button
                >
              </span>
            </span>

            <span
              v-if="data.level == 3"
              style="display: flex; align-items: center"
            >
              <span style="margin-left: 10px">
                <el-button
                  class="editorcd"
                  type="text"
                  size="mini"
                  @click="ddeditor(node, data)"
                  >编辑</el-button
                >
              </span>
              <span style="margin-left: 10px">
                <el-button
                  class="remove"
                  type="text"
                  size="mini"
                  @click="remove(node, data)"
                  >删除</el-button
                >
              </span>
            </span>
          </span>
        </el-tree>
      </div>
      <el-dialog title="新增" :visible.sync="dialogFormVisible">
        <div
          v-if="amountintervalname == '意向面积'"
          style="display: flex; height: 40px; line-height: 40px"
        >
          <span>面积区间：</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="addForm.name"></el-input
          ></span>
          <span style="margin-left: 6px">平方</span>
          <span style="margin-left: 12px; margin-right: 12px">~</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="addForm.endName"></el-input
          ></span>
          <span style="margin-left: 6px">平方</span>
        </div>
        <div
          v-else-if="amountintervalname == '购房预算'"
          style="display: flex; height: 40px; line-height: 40px"
        >
          <span>预算区间：</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="addForm.name"></el-input
          ></span>
          <span style="margin-left: 6px">万元</span>
          <span style="margin-left: 12px; margin-right: 12px">~</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="addForm.endName"></el-input
          ></span>
          <span style="margin-left: 6px">万元</span>
        </div>
        <el-form :model="addForm" v-else>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                label="一级大类名称:"
                v-if="level == 0"
                :label-width="formLabelWidth"
              >
                <el-input v-model="addForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="二级名称:"
                v-if="level == 2"
                :label-width="formLabelWidth"
              >
                <el-input v-model="addForm.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item
                label="三级名称:"
                v-if="level == 3"
                :label-width="formLabelWidth"
              >
                <el-input v-model="addForm.name" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSubmit">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 删除确认弹框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确定删除该条内容吗</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkDelete">确 定</el-button>
        </span>
      </el-dialog>
      <!--?编辑弹框?-->
      <el-dialog title="编辑" :visible.sync="isshowage">
        <div
          v-if="amountintervalname == '意向面积'"
          style="display: flex; height: 40px; line-height: 40px"
        >
          <span>面积区间：</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="frosasd.name"></el-input
          ></span>
          <span style="margin-left: 6px">平方</span>
          <span style="margin-left: 12px; margin-right: 12px">~</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="frosasd.endName"></el-input
          ></span>
          <span style="margin-left: 6px">平方</span>
        </div>
        <div
          v-else-if="amountintervalname == '购房预算'"
          style="display: flex; height: 40px; line-height: 40px"
        >
          <span>预算区间：</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="frosasd.name"></el-input
          ></span>
          <span style="margin-left: 6px">万元</span>
          <span style="margin-left: 12px; margin-right: 12px">~</span>
          <span style="width: 100px"
            ><el-input type="number" v-model="frosasd.endName"></el-input
          ></span>
          <span style="margin-left: 6px">万元</span>
        </div>
        <div v-else style="display: flex; align-items: center; height: 40px">
          <div style="margin-left: 160px; height: 30px; line-height: 30px">
            类名：
          </div>
          <div>
            <input
              v-model="frosasd.name"
              style="
                width: 280px;
                height: 30px;
                line-height: 30px;
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                text-indent: 15px;
                color: #606266;
              "
              type="text"
            />
          </div>
        </div>

        <div style="display: flex; justify-content: center; margin-top: 40px">
          <button
            style="
              width: 100px;
              height: 40px;
              border-radius: 4px;
              background: #ffffff;
              font-size: 14px;
              border: 1px solid #dcdfe6;
            "
            @click="submicll()"
          >
            取消
          </button>
          <button
            style="
              width: 100px;
              height: 40px;
              border-radius: 4px;
              background: #409eff;
              font-size: 14px;
              margin-left: 60px;
              color: #ffffff;
              border: none;
            "
            @click="submiadd()"
          >
            提交
          </button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelWidth: "120px",
      dialogFormVisible: false,
      dialogVisible: false,
      orgType: localStorage.getItem("orgType"),
      isshowage: false,
      treeList: [], //树形数据
      houseList: [],
      orgCode: "", //公司id
      houseId: "",
      addForm: {
        name: "",
        endName: "",
      },
      level: 0,
      pid: "",
      deleteId: "",
      frosasd: {
        name: "",
        endName: "",
        isInterval: "",
        id: "",
        pid: "",
        orgCode: "",
        sort: "",
        level: "",
      },
      amountintervalname: "",
      isInterval: "",
    };
  },
  mounted() {
    // 获取楼盘列表
    this.zkhousePage();
    // this.orgCode = localStorage.getItem("AitemId");
    // this.getHouse()
    // this.treeList = data.obj;
  },
  methods: {
    // 获取模板数据
    getHouse() {
      axios({
        url: `/autoSR/zk/keywords/findKeywordsTemplate`,
        method: "get",
        params: {
          houseId: this.houseId,
        },
      }).then((res) => {
        if (res.code == 0) {
          console.log(res.data);
          this.treeList = res.data;
        }
      });
    },
    // 添加二三级节点入口
    append(node, data) {
      this.amountintervalname = data.name;
      this.addForm.name = "";
      this.addForm.endName = "";
      this.pid = data.id;
      this.level = data.level + 1;
      this.orgCode = data.orgCode;
      if (
        this.amountintervalname == "意向面积" ||
        this.amountintervalname == "购房预算"
      ) {
        this.isInterval = 0;
      } else {
        this.isInterval = 1;
      }
      this.dialogFormVisible = true;
    },
    houseChange() {
      // console.log(1);
      this.getHouse();
    },
    // 添加节点确认按钮
    addSubmit() {
      if (this.addForm.name != "") {
        if (
          this.amountintervalname == "意向面积" ||
          this.amountintervalname == "购房预算"
        ) {
          if (Number(this.addForm.name) > Number(this.addForm.endName)) {
            this.$message({
              message: "第一个值必须小于第二个值，请检查！",
              type: "warning",
            });
            return;
          } else {
            this.dialogFormVisible = false;
            this.addNode();
          }
        } else {
          this.dialogFormVisible = false;
          this.addNode();
        }
      } else {
        this.$message({
          message: "内容不能为空",
          type: "warning",
        });
        return;
      }
    },
    // 新增的节点保存
    addNode() {
      axios({
        url: `/autoSR/zk/keywords/add`,
        method: "post",
        data: {
          pid: this.pid,
          name: this.addForm.name,
          endName: this.addForm.endName,
          level: this.level,
          orgCode: this.orgCode,
          isInterval: this.isInterval,
        },
      }).then((res) => {
        if (res.code == 0) {
          if (this.level == 2) {
            // 二级
            let newChild = {
              id: res.data,
              pid: this.pid,
              name: this.addForm.name,
              endName: this.addForm.endName,
              orgCode: this.orgCode,
              level: this.level,
              isInterval: this.isInterval,
              children: [],
            };
            this.treeList.forEach((item, index) => {
              if (item.id == this.pid) {
                item.children.push(newChild);
              }
            });
          } else {
            let newChilds = {
              id: res.data,
              pid: this.pid,
              name: this.addForm.name,
              orgCode: this.orgCode,
              level: this.level,
              isInterval: 1,
              endName: "",
            };
            this.treeList.forEach((item, index) => {
              item.children.forEach((ite, inde) => {
                if (ite.id == this.pid) {
                  ite.children.push(newChilds);
                }
              });
            });
          }
        }
      });
    },
    //删除节点
    remove(node, data) {
      // console.log(data, "123");
      if (data.level == 3) {
        this.deleteId = data.id;
        this.dialogVisible = true;
      } else {
        if (data.children.length == 0) {
          this.deleteId = data.id;
          this.dialogVisible = true;
        } else {
          this.$message({
            message: "请先清空子级",
            type: "warning",
          });
        }
      }
    },
    // 确认删除自定义的节点
    checkDelete() {
      axios({
        url: `/autoSR/zk/keywords/delete`,
        method: "get",
        params: {
          id: this.deleteId,
        },
      }).then((res) => {
        if (res.code == 0) {
          this.treeList.forEach((item, index) => {
            item.children.forEach((ite, inde) => {
              if (ite.id == this.deleteId) {
                this.treeList[index].children.splice(inde, 1);
              } else {
                ite.children.forEach((it, ine) => {
                  if (it.id == this.deleteId) {
                    this.treeList[index].children[inde].children.splice(ine, 1);
                  }
                });
              }
            });
          });
          this.dialogVisible = false;
          this.$message.success("删除成功");
        }
      });
    },
    //编辑
    ddeditor(node, data) {
      this.frosasd = {
        name: "",
        endName: "",
        isInterval: "",
        id: "",
        pid: "",
        orgCode: "",
        sort: "",
        level: "",
      };
      if (data.isInterval == 0) {
        this.frosasd.isInterval = 0;
        this.frosasd.endName = data.endName;
        this.treeList.forEach((item, index) => {
          if (data.pid == item.id) {
            this.amountintervalname = item.name;
          }
        });
      } else {
        this.amountintervalname = "";
        this.frosasd.endName = "";
        this.frosasd.isInterval = 1;
      }
      this.frosasd.id = data.id;
      this.frosasd.name = data.name;
      this.frosasd.pid = data.pid;
      this.frosasd.orgCode = data.orgCode;
      this.frosasd.sort = data.sort;
      this.frosasd.level = data.level;
      this.isshowage = true;
    },
    //取消编辑
    submicll() {
      this.isshowage = false;
    },
    //编辑提交
    submiadd() {
      if (this.frosasd.isInterval == 0) {
        if (Number(this.frosasd.name) > Number(this.frosasd.endName)) {
          this.$message({
            message: "第一个值必须小于第二个值，请检查！",
            type: "warning",
          });
          return;
        } else {
          this.infosubmiadd();
        }
      } else {
        this.infosubmiadd();
      }
    },
    zkhousePage() {
      this.$api.api
        .findHouseByUser({
          orgType: localStorage.getItem("orgType"),
        })
        .then((res) => {
          // console.log(res)
          this.houseList = res.data;
          if (localStorage.getItem("orgType") == 3) {
            this.houseId = localStorage.getItem("houseId");
          } else {
            this.houseId = res.data[0].id;
          }
          // this.houseId = res.data[0].id;
          // 列表获取
          this.getHouse();
        });
    },
    infosubmiadd() {
      var that = this;
      axios({
        url: `/autoSR/zk/keywords/update`,
        method: "post",
        data: this.frosasd,
      }).then((res) => {
        if (res.code == 0) {
          that.treeList.forEach((item, index) => {
            item.children.forEach((asd, indexesd) => {
              if (asd.id == that.frosasd.id) {
                that.treeList[index].children[indexesd].name =
                  that.frosasd.name;
                that.treeList[index].children[indexesd].endName =
                  that.frosasd.endName;
                that.treeList[index].children[indexesd].id = res.data;
                that.isshowage = false;
                that.$message({
                  message: "修改成功",
                  type: "success",
                });
                return;
              } else {
                asd.children.forEach((zxc, indexzxc) => {
                  if (zxc.id == that.frosasd.id) {
                    that.treeList[index].children[indexesd].children[
                      indexzxc
                    ].name = that.frosasd.name;
                    that.treeList[index].children[indexesd].children[
                      indexzxc
                    ].id = res.data;
                    that.isshowage = false;
                    that.$message({
                      message: "修改成功",
                      type: "success",
                    });
                    return;
                  }
                });
              }
            });
          });
        } else {
          this.$message({
            message: "修改失败",
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}
#app {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding-left: 15px;
  padding-bottom: 60px;
}
.biaoti {
  font-size: 20px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #32363d;
  line-height: 20px;
  padding-top: 25px;
}
.primary {
  width: 108px;
  height: 42px;
  background: #2671e2;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 183px;
}
.remove {
  color: red;
}
.editorcd {
  color: #2671e2;
}
.editorcd2 {
  color: #e6a12f;
}
.levelimg1 {
  width: 18px;
  height: 18px;
}
.levelimg2 {
  width: 16px;
  height: 16px;
}
.levelimg3 {
  width: 14px;
  height: 14px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .label {
    font-size: 14px;
    font-weight: 400;
    color: #32363d;
    line-height: 14px;
    margin-left: 15px;
  }
  .toptimeqhuan {
    height: 30px;
    background: #ffffff;
    display: flex;
    align-items: center;
  }
  .toptimeqhuan div {
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    margin-right: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
  }
}
</style>
