<template>
  <div>
    <el-card class="resi-card-table">
      <div class="resi-row-btn">
        <el-button class="diy-button--add" size="small" @click="handleAdd"
          >新增</el-button
        >
      </div>

      <div class="m-center" v-if="tableData.length > 0">
        <div class="center-left">
          <div class="list" :class="{ 'z-iframe': $store.state.inIframe }">
            <div
              @click="currentIndex = index"
              class="item"
              :class="{ 'z-on': currentIndex == index }"
              :key="'ct' + index"
              v-for="(item, index) in tableData"
            >
              <div class="item-btns">
                <a v-if="currentIndex == index" @click="handleEdit">修改</a>
                <a v-if="currentIndex == index" @click="handleDel">删除</a>
              </div>

              <div class="item-name">{{ item.centerName }}</div>
              <div class="item-prop">
                <div class="prop-field">社区地址：</div>
                <div class="prop-value">{{ item.address }}</div>
              </div>
              <div class="item-prop">
                <div class="prop-field">办公电话：</div>
                <div class="prop-value">{{ item.workPhone }}</div>
              </div>
              <div class="item-prop">
                <div class="prop-field">办公时间：</div>
                <div class="prop-value">
                  <p>上午 {{ item.amStartTime }} - {{ item.amEndTime }}</p>
                  <p>下午 {{ item.pmStartTime }} - {{ item.pmEndTime }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="center-right">
          <!-- <div class="operate">
            <el-button type="warning" size="small" @click="handleEdit"
              >修改</el-button
            >
          </div> -->

          <div id="centerIndexApp" class="div_map"></div>

          <el-table
            :data="tableData[currentIndex].matterList"
            border
            style="width: 100%"
            class="resi-table"
            :max-height="maxTableHeight"
          >
            <el-table-column
              label="序号"
              type="index"
              align="center"
              width="50"
            />
            <el-table-column prop="matterName" label="事项名称">
            </el-table-column>
            <el-table-column prop="allowTime" label="可预约时间	">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              align="center"
              width="120"
            >
              <template slot-scope="scope">
                <el-button
                  @click="handleOrder(scope.$index)"
                  type="text"
                  size="small"
                  style="color: #1c6afd"
                  >预约</el-button
                >

                <el-button
                  @click="handleOrderList(scope.$index)"
                  type="text"
                  size="small"
                  style="margin-right: 10px; color: #1c6afd"
                  >预约记录</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="m-hint" v-else>
        <el-empty description="暂无内容" :image-size="200"></el-empty>
      </div>
    </el-card>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="formShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="formTitle"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="handleClose"
    >
      <edit-form
        ref="eleEditForm"
        @dialogCancle="handleClose"
        @dialogOk="handleEditSuccess"
      ></edit-form>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="form2Show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="预约"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="handleCloseForm2"
    >
      <order-form
        ref="eleOrderForm"
        @dialogCancle="handleCloseForm2"
        @dialogOk="handleOrderSuccess"
      ></order-form>
    </el-dialog>

    <!-- 修改弹出框 -->
    <el-dialog
      :visible.sync="orderListShow"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="预约记录"
      width="850px"
      top="5vh"
      class="dialog-h"
      @closed="handleCloseOrderList"
    >
      <order-list
        ref="eleOrderList"
        @dialogCancle="handleCloseOrderList"
      ></order-list>
    </el-dialog>
  </div>
</template>

<script>
import { requestPost } from "@/js/dai/request2";
import nextTick from "dai-js/tools/nextTick";
import { mapGetters } from "vuex";
import editForm from "./cpts/edit";
import orderForm from "./cpts/order";
import orderList from "./cpts/orderList";

var map;
var search;
var markers;
var infoWindowList;
let loading; // 加载动画

export default {
  components: { editForm, orderForm, orderList },
  data() {
    return {
      openSearch: false,

      formShow: false,
      formTitle: "",
      form2Show: false,
      orderListShow: false,

      agencyId: "",

      tableData: [],

      currentIndex: 0,
    };
  },
  computed: {
    maxTableHeight() {
      return this.$store.state.inIframe
        ? this.clientHeight - 520 + 120
        : this.clientHeight - 520;
    },
    ...mapGetters(["clientHeight"]),
  },
  watch: {
    currentIndex() {
      this.setMap();
    },
  },
  async mounted() {
    await this.loadAgency();
    await this.getTableData();
  },
  methods: {
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      map = new window.TMap.Map(document.getElementById("centerIndexApp"), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });

      search = new window.TMap.service.Search({ pageSize: 10 });
      // 新建一个地点搜索类
      markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
      });
      infoWindowList = Array(10);
    },

    setMarker(lat, lng, centerName) {
      markers.setGeometries([]);
      markers.add([
        {
          id: "911",
          styleId: "marker",
          position: new TMap.LatLng(lat, lng),
          properties: {
            title: centerName,
          },
        },
      ]);
    },

    setCenter(lat, lng) {
      map.setCenter(new window.TMap.LatLng(lat, lng));
    },

    setMap() {
      const { tableData, currentIndex } = this;
      let item = tableData[currentIndex];
      if (item) {
        this.setCenter(item.latitude, item.longitude);
        this.setMarker(item.latitude, item.longitude, item.centerName);
      }
    },

    handleClose() {
      this.formShow = false;
    },
    handleCloseForm2() {
      this.form2Show = false;
    },
    handleCloseOrderList() {
      this.orderListShow = false;
    },

    async handleAdd() {
      this.formShow = true;
      await nextTick();
      console.log(this.$refs);
      this.$refs.eleEditForm.initForm("add");
    },

    async handleWatch() {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm(
        "detail",
        this.tableData[this.currentIndex]
      );
    },

    async handleEdit() {
      this.formShow = true;
      await nextTick();
      this.$refs.eleEditForm.initForm(
        "edit",
        this.tableData[this.currentIndex]
      );
    },

    handleEditSuccess() {
      this.handleClose();
      this.getTableData();
    },

    async handleOrder(index) {
      this.form2Show = true;
      await nextTick();
      this.$refs.eleOrderForm.initForm(
        "add",
        this.tableData[this.currentIndex],
        index
      );
    },

    handleOrderSuccess() {
      this.handleCloseForm2();
    },

    async handleOrderList(index) {
      this.orderListShow = true;
      await nextTick(0);
      console.log(this.$refs);
      this.$refs.eleOrderList.init(this.tableData[this.currentIndex], index);
    },

    async handleDel() {
      if (!confirm("删除后不可恢复，确定删除？")) return;

      const item = this.tableData[this.currentIndex];
      const url = "/gov/org/icpartyservicecenter/del";

      const { data, code, msg } = await requestPost(url, [
        item.partyServiceCenterId,
      ]);

      if (code === 0) {
        this.$message.success("删除成功！");
        this.getTableData();
      }
    },

    async getTableData() {
      const oldLen = this.tableData.length;
      const url = "/gov/org/icpartyservicecenter/partyservicecenterlist";
      const { data, code, msg } = await requestPost(url, {
        orgId: this.agencyId,
        orgType: "agency",
      });
      if (code === 0) {
        console.log("列表请求成功！！！！！！！！！！！！！！");

        this.tableData = data;

        if (data.length > 0 && oldLen == 0) {
          await nextTick(100);
          this.initMap();
          this.setMap();
        }
      }
    },

    //加载组织
    async loadAgency() {
      const url = "/epmetuser/customerstaff/staffbasicinfo";
      let params = {};

      const { data, code, msg } = await requestPost(url, params);

      if (code === 0) {
        this.agencyId = data.agencyId;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-hint {
  display: flex;
  justify-content: center;
  text-align: center;
}

.m-center {
  display: flex;
  .center-left {
    width: 25%;
    .list {
      padding-right: 10px;
      height: calc(100vh - 210px);
      overflow-y: auto;

      &.z-iframe {
        height: calc(100vh - 210px + 120px);
      }

      &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 8px;
        box-shadow: inset 0 0 5px rgba(#333, 0.1);
        background: linear-gradient(270deg, #eee, #aaa);
      }
      &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(#333, 0.1);
        border-radius: 8px;
        background: #eee;
      }

      .item {
        position: relative;
        box-sizing: border-box;
        margin-bottom: 10px;
        border: 2px solid #6aa;
        border-radius: 4px;
        padding: 13px 13px;
        background-color: rgba(#6aa, 0.1);
        cursor: pointer;

        &.z-on {
          background-color: #ffffff;
          box-shadow: 0 0 10px #6aa;
        }

        .item-btns {
          position: absolute;
          top: 5px;
          right: 5px;
          // width: 120px;

          a {
            display: inline-block;
            margin-left: 1px;
            font-size: 14px;
            color: #00a7a9;
            width: 40px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            &:nth-child(2) {
              color: #d51010;
              &:hover {
                // text-decoration: underline;
                color: #d51010;
              }
            }

            &:hover {
              // text-decoration: underline;
              color: #00a7a9;
            }
          }
        }

        .item-name {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 10px;
          width: calc(100% - 70px);
        }
        .item-prop {
          display: flex;
          margin-bottom: 8px;
          font-size: 14px;

          .prop-field {
            width: 70px;
          }
          .prop-value {
            margin-left: 5px;
            p {
              margin: 0;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }
  .center-right {
    margin-left: auto;
    width: 72%;
    .operate {
      margin-bottom: 10px;
      text-align: right;
    }
    .div_map {
      margin-bottom: 10px;
      height: 300px;
    }
  }
}
.tabs-other-info {
  .el-tabs__item {
    // width: 50px;
    height: 20px;
    box-sizing: border-box;
    margin-right: 7px;
    padding: 0 10px !important;
    font-size: 8px;
    font-weight: 500;
    color: #666666;
    line-height: 20px;
    background: #ebecf1;
    border-radius: 2px;
  }
  .el-tabs__nav-wrap::after,
  .el-tabs__active-bar {
    display: none;
  }
  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    line-height: 20px;
  }
}

.resi-card-table {
  // margin-top: 20px;
}
.resi-row-btn {
  margin-bottom: 13px;
  .upload-btn {
    display: inline-block;
    margin: 0 10px;
  }
}
.resi-other {
  width: 100%;
  display: flex;
  .resi-other-title {
    width: 100px;
    box-sizing: border-box;
    margin-bottom: 10px;
    // padding: 6px 12px 0 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    text-align: center;
  }
  .tabs-other-info {
    // padding-left: 60px;
  }
}

.resi-btns {
  margin-top: 20px;
  text-align: center;
}

.resi-container .resi-card {
  position: relative;
  overflow: visible;
}
.resi-down {
  position: absolute;
  left: 50%;
  bottom: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 12px;
  box-sizing: border-box;
  margin-left: -23rpx;
  cursor: pointer;
  background: #ffffff;
  border-radius: 0 0 10px 10px;
  img {
    display: block;
  }
}
.resi-row-box {
  // height: 104px;
  overflow: hidden;
  transition: height 0.5s;
}
.resi-row-more {
  height: max-content;
  transition: height 0.5s;
}
.resi-row {
  margin-bottom: 20px;
}
.resi-search {
  .el-col {
    text-align: right;
  }
}
.resi-cell {
  display: flex;
  align-items: center;
  .resi-cell-label {
    width: 70px;
    box-sizing: border-box;
    margin-right: 15px;
    text-align: right;
    // line-height: 32;
  }
  .resi-cell-value-radio {
    display: flex;
    align-items: center;
    min-height: 32px;
  }
  .resi-cell-input {
    width: 180px;
  }
  .resi-cell-select {
    width: 180px;
    box-sizing: border-box;
    margin-right: 10px;
    &-middle {
      width: 130px;
    }
    &-small {
      width: 88px;
    }
  }
  .resi-cell-select:last-child {
    margin-right: 0;
  }
}
</style>
