<!--
 * @Author: your name
 * @Date: 2021-01-18 15:46:34
 * @LastEditTime: 2021-11-30 18:54:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3-element-admin\src\views\Home.vue
-->
<template>
  <Bg></Bg>
  <Header></Header>
  <div class="container2">
    <div class="mainDiv">
      <div class="leftBox">
        <Title title="权属列表">
          <template v-slot:title-slot>
            <div class="slot-right">
              <div class="btn yse-events" v-show="!show" @click="handleAdd">
                新增权属信息
              </div>
            </div>
          </template>
        </Title>
        <div
          class="myForm"
          :style="{ height: show ? 'calc(100% - 128px)' : 'calc(100% - 48px)' }"
        >
          <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            label-width="75px"
            :inline="false"
            class="form"
            v-show="show"
          >
            <el-form-item class="form-item" prop="fruitsTypeItem" label="品种">
              <el-input
                v-model="fruitsTypeItem"
                placeholder="请输入品种"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="total" label="数量">
              {{ treeIdsValue.value.length }} 颗
            </el-form-item>
            <div class="form-item-name">归属人 :</div>
            <el-form-item class="form-item" prop="masterName" label="姓名">
              <el-input
                v-model="masterName"
                placeholder="请输入姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="masterSex" label="性别">
              <el-radio-group fill="#13C4CD" v-model="masterSex">
                <el-radio :value="true" label="男"></el-radio>
                <el-radio :value="false" label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="form-item" prop="masterTel" label="联系方式">
              <el-input
                v-model="masterTel"
                placeholder="请输入联系方式"
                clearable
              ></el-input>
            </el-form-item>
            <div class="form-item-name">经营人 :</div>
            <el-form-item class="form-item" prop="manageName" label="姓名">
              <el-input
                v-model="manageName"
                placeholder="请输入姓名"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item class="form-item" prop="manageSex" label="性别">
              <el-radio-group fill="#13C4CD" v-model="manageSex">
                <el-radio :value="true" label="男"></el-radio>
                <el-radio :value="false" label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="form-item" prop="manageTel" label="联系方式">
              <el-input
                v-model="manageTel"
                placeholder="请输入联系方式"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <!-- 权属列表 -->
          <div class="list" v-show="!show">
            <div
              class="list-item"
              v-for="item in state.list"
              :key="item.id"
              @click="handleItem(item)"
            >
              <div @click.stop="remove(item.id)" class="delete">x</div>
              <div class="item-title">
                <span>权属信息</span>
                <img src="@/assets/img/znxy/nslb_info_icon.png" />
              </div>
              <div class="item-cont">
                <div class="row">
                  <span>品种：{{ item.fruitsTypeItem }}</span>
                  <span>数量：{{ item.total }}颗</span>
                </div>
                <div class="row">
                  <span>归属人：{{ item.masterName }}</span>
                  <span>性别：{{ item.masterSex ? "男" : "女" }}</span>
                  <span>电话：{{ item.masterTel }}</span>
                </div>
                <div class="row">
                  <span>经营人：{{ item.manageName }}</span>
                  <span>性别：{{ item.manageSex ? "男" : "女" }}</span>
                  <span>电话：{{ item.manageTel }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-show="show" class="my-bottoms">
          <el-button class="btn btn-size" color="#032C39" @click="backList"
            >返回列表</el-button
          >
          <el-button class="btn btn-size" color="#13C4CD" @click="onSubmit"
            >保存</el-button
          >
        </div>
      </div>

      <div class="rightBox">
        <div class="head">
          <div class="name">编辑权属区域</div>
          <div class="line"></div>
          <div class="rhombus"></div>
        </div>
        <div class="map" ref="mapRef"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, ref, reactive, toRefs } from "vue";
import config from "@/api/config.js";
import { NS_RECORD_STATUS_ENUM as STARUS_ENUM } from "../../api/enum";
import { useRoute, useRouter } from "vue-router";
import Title from "../components/title";
import OwnershipMap from "./OwnershipMap";
import Bg from "../Bg";
import Header from "@/views/components/Header.vue";
import { treeIdsData } from "./OwnershipMap";

const selectDateObj = ref({});
const router = useRouter();
const route = useRoute();
const recordId = route.query.recordId;

const store = useStore();
const location = store.getters.userinfo.location;
const gardenId = store.getters.userinfo.curGardenId;
const mapRef = ref(null);
const form = reactive({
  fruitsTypeItem: "",
  masterName: "",
  masterSex: true,
  masterTel: "",
  manageName: "",
  manageSex: true,
  manageTel: "",
  gardenId: gardenId,
  total:0
});
const {
  fruitsTypeItem,
  masterName,
  masterSex,
  masterTel,
  manageName,
  manageSex,
  manageTel,
} = toRefs(form);

const formRef = ref(null);

const rules = {
  treeIds: [
    {
      required: true,
      message: "请选择树",
      trigger: "blur",
    },
  ],
};

const kmap = new OwnershipMap();
onMounted(() => {
  initData();
  kmap.initMap(location, mapRef.value);
  kmap.initArea(gardenId, () => {});
  //   kmap.initSubArea(gardenId, () => {
  //     kmap.initTree(gardenId, () => {
  //       initSettingVal();
  //     });
  //   });
});

const state = reactive({
  list: [],
});
const treeIdsValue = ref(treeIdsData);
// 权属列表
const initData = async () => {
  const { code, data } = await VE_API.ownership.list({ gardenId: gardenId });
  state.list = data;
};

const show = ref(false);
// 新增
const handleAdd = () => {
  show.value = true;
  formRef.value.resetFields();
  kmap.initDrawBox();
};

// 返回列表
const backList = () => {
  show.value = false;
  kmap.removeDraw();
};

// 点击列表信息
const handleItem = async ({id}) => {
    const {code,data} = await VE_API.ownership.get({id:id})
    if(code===0){
        kmap.setSelectedPoint(data.treeIds)
    }
};

/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      if (treeIdsValue.value.value.length > 0) {
        form.treeIds = treeIdsValue.value.value;
        form.total = treeIdsValue.value.value.length;
      }
      let res = await VE_API.ownership.save(form);
      if (res.code == 0) {
        initData();
        show.value = false;
        kmap.removeDraw();
        kmap.setSelectedPoint([])
      }
    } else {
      return false;
    }
  });
};

// 删除
const remove = (id) => {
  ElMessageBox.confirm("是否要删除这条权属信息?", "警告", {
    confirmButtonText: "删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await VE_API.ownership.delete({ id: id });
      initData();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import "../../styles/index.scss";
.slot-right {
  width: 70%;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 12px;
  .btn {
    cursor: pointer;
    background: url("@/assets/img/tabs_btn3.png") no-repeat center center / 100%
      100%;
    margin-right: 5px;
    color: rgba(180, 255, 251, 0.8);
    font-weight: bold;
    font-size: 15px;
    width: 120px;
    height: 32px;
    text-align: center;
    line-height: 32px;
  }
}
.container2 {
  height: 100%;
  width: 100%;
  z-index: 2;
  position: absolute;
}
.mainDiv {
  position: absolute;
  top: 100px;
  bottom: 60px;
  left: 20px;
  right: 20px;
  .leftBox {
    float: left;
    width: 500px;
    height: calc(100%);
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
    overflow: hidden;
    .myForm {
      box-sizing: border-box;
      overflow-y: auto;
      color: #fff;
      padding: 16px;
      height: calc(100% - 48px);
      .form {
        .form-item-name {
          position: relative;
          padding: 10px 0;
          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: -3.5%;
            width: 106.9%;
            height: 1px;
            border-top: 1px solid rgba(81, 233, 240, 0.59);
          }
        }
        ::v-deep {
          .el-form-item__label {
            color: #fff;
          }
          .form-item {
            .el-input {
              --el-input-placeholder-color: rgba(0, 255, 240, 0.27);
            }
            .el-input__wrapper {
              background: #032c39;
              border-radius: 4px;
              border: 1px solid rgba(81, 233, 240, 0.59);
              box-shadow: none;
            }
            .el-input__inner {
              color: #fff;
            }
          }
        }
      }
      .list {
        .list-item {
          box-sizing: border-box;
          padding: 10px;
          background: url("@/assets/img/znxy/nslb_info_bg.png") no-repeat center
            center / 100% 100%;
          margin-bottom: 10px;
          cursor: pointer;
          position: relative;
          &.list-item:last-child {
            margin-bottom: 0;
          }
          .delete {
            position: absolute;
            right: -6px;
            top: -6px;
            background: #00848c;
            border: 1px solid rgba(0, 255, 240, 0.5);
            width: 20px;
            height: 20px;
            color: #fff;
            border-radius: 50%;
            text-align: center;
            line-height: 17px;
          }
          .item-title {
            font-weight: normal;
            font-size: 15px;
            color: #f1ffff;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            span {
              margin-left: 15px;
              position: relative;
              &::before {
                content: "";
                position: absolute;
                left: -12px;
                top: 7px;
                width: 8px;
                height: 8px;
                background: #01f9ff;
                border-radius: 50%;
              }
            }
            img {
              margin-top: -6px;
              width: 79%;
              height: 8px;
            }
          }
          .item-cont {
            margin-top: 6px;
            .row {
              line-height: 1.8;
              span {
                margin-right: 20px;
              }
            }
          }
        }
      }
    }
    .my-bottoms {
      border-top: 1px solid rgba(81, 233, 240, 0.6);
      box-sizing: border-box;
      text-align: center;
      padding: 20px 30px;
      .btn {
        color: #fff;
        width: 87px;
        height: 38px;
      }
      .btn-size {
        width: 141px;
      }
    }
  }
  .rightBox {
    float: right;
    width: calc(100% - 500px - 12px);
    height: 100%;
    background: #032c3940;
    border-radius: 4px;
    border: 1px solid rgba(81, 233, 240, 0.6);
    box-sizing: border-box;
    .head {
      @include wh(calc(100% - 19px - 224px), 30px);
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-left: 19px;
      margin-right: 224px;
      .name {
        @include wh(auto, 21px);
        font-weight: normal;
        font-size: 21px;
        line-height: 30px;
        color: #ffffff;
      }
      .line {
        width: calc(100% - 250px);
        border-bottom: 1px solid #51e9f0;
        opacity: 0.4;
        box-sizing: border-box;
        margin-top: 7px;
      }
      .rhombus {
        margin-top: 7px;
        @include wh(50px, 15px);
        @include ossBg("rhombus.png");
      }
    }
    .map {
      width: 100%;
      height: calc(100% - 30px);
      position: relative;
      box-sizing: border-box;
      padding: 10px;
    }
  }
}
</style>
