<template>
  <div class="buildingPlan">
    <div class="left whiteBlock">
      <div class="title">
        {{ $t('message.projectInfo.buildList') }}
        <!-- 楼栋列表 -->
      </div>
      <vue-scroll style="height: 87%">
        <div style="margin-left: 5%; margin-bottom: 10px; font-size: 16px">
          <!-- 请选择标段: -->
          {{ $t('message.projectInfo.pleaseChooseSection') + ':' }}
        </div>
        <el-select
          style="margin-left: 5%; margin-bottom: 20px; width: 90%"
          @change="changeAlarmType"
          v-model="alarmType"
          class="alarmTypeBox"
        >
          <el-option
            v-for="(item, index) in ProgressPlanBidSectionList"
            :key="index"
            :value="item.id"
            :label="item.projectfName"
          ></el-option>
        </el-select>
        <el-menu
          :default-active="String(checkedId)"
          class="el-menu-vertical-demo whiteBlock"
        >
          <!-- <el-menu-item
                    index="0"
                    class="el-menu-item"
                    :class="checkedId == 0 ? 'checked_item' : ''"
                    @click="selectMenu(0)"
                >
                    <span slot="title">全部塔吊(位置配置)</span>
                </el-menu-item> -->
          <div style="width: 260px" v-if="buildingList.length > 0">
            <el-menu-item
              :index="String(item.id)"
              class="el-menu-item"
              :class="checkBuildingId == index ? 'checked_item' : ''"
              v-for="(item, index) in buildingList"
              @click="selectMenu(index, item.id)"
              :key="index"
            >
              <span
                @mouseenter="moveShow = index"
                @mouseleave="moveShow = ''"
                slot="title"
                class="flex3"
              >
                <span class="title_index">{{ index + 1 }}</span>
                <span :title="item.buildingName" class="title_name">{{
                  item.buildingName
                }}</span>
                <i
                  v-if="moveShow === index"
                  class="el-icon-edit-outline"
                  style="color: #f56c6c; font-size: 14px; width: 15px"
                  @click="editBuilding(item.id, index)"
                ></i>
                <i
                  v-if="moveShow === index"
                  class="el-icon-delete"
                  style="color: #f56c6c; font-size: 14px; width: 15px"
                  @click="deleteBuilding(item.id)"
                ></i>
              </span>
            </el-menu-item>
          </div>
          <img style="margin: 40px" v-else src="@/assets/images/noData2.png" />
        </el-menu>
      </vue-scroll>
      <div class="flex2 btn_pack">
        <el-button size="small" type="primary" @click="newTowerBtn">
          <i class="el-icon-plus" style="margin-right: 6px"></i>新增楼栋
        </el-button>
      </div>
      <el-dialog
        class="dialog"
        :title="dialogTitle"
        :modal-append-to-body="false"
        :visible.sync="dialogVisible"
        @close="closeDialog"
        destroy-on-close
        width="50%"
      >
        <div class="dialog-content">
          <vue-scroll>
            <el-form
              ref="form"
              :model="dialogdata"
              :rules="rules"
              label-width="135px"
              size="medium"
              class="dialogFormBox"
            >
              <!-- 批次建筑面积 -->
              <el-form-item
                :label="$t('message.projectInfo.batchCoveredArea')"
                prop="batchBuildArea"
                required
              >
                <!-- 请输入 -->
                <el-input
                  v-model="dialogdata.batchBuildArea"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 组团编码 -->
              <el-form-item
                :label="$t('message.projectInfo.groupCoding')"
                prop="batchCode"
                required
              >
                <el-input
                  v-model="dialogdata.batchCode"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 组团名称 -->
              <el-form-item
                :label="$t('message.projectInfo.groupName')"
                prop="batchName"
                required
              >
                <el-input
                  v-model="dialogdata.batchName"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 供应批次 -->
              <el-form-item
                :label="$t('message.projectInfo.supplyBatch')"
                prop="batchNum"
                required
              >
                <el-input
                  v-model="dialogdata.batchNum"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 批次供应套数 -->
              <el-form-item
                :label="$t('message.projectInfo.supplyBatchNum')"
                prop="batchRoomNum"
                required
              >
                <el-input
                  v-model="dialogdata.batchRoomNum"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 批次供应面积(M2) -->
              <el-form-item
                :label="$t('message.projectInfo.supplyBatchArea')"
                prop="batchSaleArea"
                required
              >
                <el-input
                  v-model="dialogdata.batchSaleArea"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 楼栋编码 -->
              <el-form-item
                :label="$t('message.projectInfo.buildingCodes')"
                prop="buildingCode"
                required
              >
                <el-input
                  v-model="dialogdata.buildingCode"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 楼栋名称 -->
              <el-form-item
                :label="$t('message.projectInfo.nameOfTheBuilding')"
                prop="buildingName"
                required
              >
                <el-input
                  v-model="dialogdata.buildingName"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 产品类型装修类型 -->
              <el-form-item
                :label="$t('message.projectInfo.productTypedecorationType')"
                prop="decorateName"
                required
              >
                <el-input
                  v-model="dialogdata.decorateName"
                  :laceholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 产品类型名称 -->
              <el-form-item
                :label="$t('message.projectInfo.productTypeName')"
                prop="productTypeName"
                required
              >
                <el-input
                  v-model="dialogdata.productTypeName"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 产品类型编码 -->
              <el-form-item
                :label="$t('message.projectInfo.productTypeCode')"
                prop="productTypeNum"
                required
              >
                <el-input
                  v-model="dialogdata.productTypeNum"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 可售车位个数(个) -->
              <el-form-item
                :label="
                  $t('message.projectInfo.numberOfAvailableParkingSpaces')
                "
                prop="salePark"
              >
                <el-input
                  v-model="dialogdata.salePark"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 经营方式 -->
              <el-form-item
                :label="$t('message.projectInfo.modeOfBusiness')"
                prop="saleType"
              >
                <el-select
                  v-model="dialogdata.saleType"
                  :disabled="formType == 3"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 总建筑面积 -->
              <el-form-item
                :label="$t('message.projectInfo.overallFloorage')"
                prop="totalBuildArea"
              >
                <el-input
                  v-model="dialogdata.totalBuildArea"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 总套数 -->
              <el-form-item
                :label="$t('message.projectInfo.theTotalNumber')"
                prop="totalRoomNum"
              >
                <el-input
                  v-model="dialogdata.totalRoomNum"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
              <!-- 总可售面积 -->
              <el-form-item
                :label="$t('message.projectInfo.totalSaleableArea')"
                prop="totalSaleArea"
              >
                <el-input
                  v-model="dialogdata.totalSaleArea"
                  :placeholder="$t('message.projectInfo.placeholder')"
                  :disabled="formType == 3"
                ></el-input>
              </el-form-item>
            </el-form>
          </vue-scroll>
        </div>
        <div class="dialog-btn" v-if="formType != 3">
          <el-button type="primary" @click="submitForm">
            <!-- 确定 -->
            {{ $t('message.energyManage.material.confirm') }}
          </el-button>
          <el-button @click="closeDialog">
            <!-- 取消 -->
            {{ $t('message.energyManage.material.cancel') }}
          </el-button>
        </div>
      </el-dialog>
    </div>
    <div class="right">
      <div class="inner">
        <div
          v-if="COMPANY != 'jlw'"
          style="
            margin-top: 5px;
            margin-bottom: 10px;
            width: 45%;
            position: absolute;
            left: 450px;
            top: 20px;
          "
          class="dotBox"
        >
          <p class="text">
            <i
              style="
                background: #44d7b6;
                width: 12px;
                height: 12px;
                border-radius: 0px;
              "
              class="dot"
            ></i
            ><span>
              <!-- 任务完成 -->
              {{ $t('message.projectInfo.completionOfTask') }}
            </span>
          </p>
          <p class="text">
            <i
              style="
                background: #f7d300;
                width: 12px;
                height: 12px;
                border-radius: 0px;
              "
              class="dot"
            ></i
            ><span>
              <!-- 提前完成 -->
              {{ $t('message.projectInfo.fulfilAheadOfSchedule') }}
            </span>
          </p>
          <p class="text">
            <i
              style="
                background: #fe6c7f;
                width: 12px;
                height: 12px;
                border-radius: 0px;
              "
              class="dot"
            ></i
            ><span>
              <!-- 逾期完成 -->
              {{ $t('message.projectInfo.withinTheTimeLimitToComplete') }}
            </span>
          </p>
          <p class="text">
            <i
              style="
                background: #3d6dc3;
                width: 12px;
                height: 12px;
                border-radius: 0px;
              "
              class="dot"
            ></i
            ><span>
              <!-- 计划完成时间 -->
              {{ $t('message.projectInfo.planCompleteTime') }}
            </span>
          </p>
          <p class="text">
            <i
              style="
                background: #ff0000;
                width: 12px;
                height: 12px;
                border-radius: 0px;
              "
              class="dot"
            ></i
            ><span>
              <!-- 逾期 -->
              {{ $t('message.projectInfo.overdue') }}
            </span>
          </p>
        </div>
        <div ref="ganttBuild" style="height: 100%" v-if="COMPANY == 'jlw'">
        </div>
        <iframe
          v-else
          :src="
            'doc/ExtGantt/Ext甘特图2.html?url=' +
            baseURL +
            '&projectSn=' +
            projectSn +
            '&buildingId=' +
            buildingId +
            '&token=' +
            $store.state.userInfo.token
          "
          id="iframe"
          class="Extgantt"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import "jquery-ui-dist/jquery-ui";
import "jquery-ui-dist/jquery-ui.min.css";
import { gantt } from 'dhtmlx-gantt';
import moment from "moment"
import {
  progressBuildingPlanListApi,//查询楼栋计划列表
  addBuildingPlanApi,//增加楼栋计划
  editBuildingPlanApi,//修改增加楼栋计划
  checkBuildingPlanApi,//通过id查询进度-楼栋计划信息
  deleteBuildingPlanApi,//通过id删除楼栋计划信息,
  addProgressBuildinApi,//新增甘特图节点
  editProgressBuildinApi,//编辑甘特图节点
  deleteProgressBuildinApi,//删除甘特图节点
  getProgressBuildinApi,//查询甘特图节点
} from "@/assets/js/api/buildingPlan.js";

import {
  selectProgressPlanBidSectionListApi
} from "@/assets/js/api/dataBoard.js"
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [], links: [] }
      }
    }
  },
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disablesubmit: false,
      //----------------------
      COMPANY: COMPANY,
      alarmType: '',
      ProgressPlanBidSectionList: '',
      dialogTitle:/*  '添加计划', */this.$t('message.projectInfo.addPlan'),
      formType: 1, //1.新增 2.编辑
      dialogVisible: false,
      buildingList: [],
      options: this.$t('message.projectInfo.options'),
      checkBuildingId: 0,
      moveShow: '',
      checkedId: 1,
      baseURL: '',
      projectSn: '',
      buildingId: '',//楼栋计划ID
      dialogdata: {
        "batchBuildArea": "",//批次建筑面积
        "batchCode": "",//组团编码
        "batchName": "",//组团名称
        "batchNum": "",//供应批次
        "batchRoomNum": "",//批次供应套数
        "batchSaleArea": "",//批次供应面积（M2）
        "buildingCode": "",//楼栋编码
        "buildingName": "",//楼栋名称
        "decorateName": "",//产品类型装修类型
        "productTypeName": "",//产品类型名称
        "productTypeNum": "",//产品类型编码
        "projectSn": "",//项目SN
        "salePark": "",//可售车位个数（个）
        "saleType": "",//经营方式（可售、可租、不可租售）
        "totalBuildArea": "",//总建筑面积（M2）
        "totalRoomNum": "",//总套数
        "totalSaleArea": ""//总可售面积（M2）
      },
      rules: {
        batchBuildArea: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.batchCoveredArea') },
        batchCode: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.groupCoding') },
        batchName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.groupName') },
        batchRoomNum: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.supplyBatchNum') },
        batchNum: { type: 'string', required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.supplyBatch') },
        batchSaleArea: { type: 'string', required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.supplyBatchArea') },
        buildingCode: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.buildingCodes') },
        buildingName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.nameOfTheBuilding') },
        decorateName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.productTypedecorationType') },
        productTypeName: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.productTypeName') },
        productTypeNum: { required: true, message: this.$t('message.projectInfo.placeholder') + this.$t('message.projectInfo.productTypeCode') },
        // salePark: { required: true, message: '请输入可售车位个数'},
        // saleType: { required: true, message: '请选择经营方式'},
        // totalBuildArea: { required: true, message: '请输入总建筑面积'},
        // totalRoomNum:{ required: true, message: '请输入总套数'},
        // totalSaleArea: { required: true, message: '请输入总可售面积'}
      },
    }
  },
  //甘特图事件
  mounted: function () {
    setTimeout(() => {
      console.log('buildingId------', this.buildingId);
    }, 500)
    //日期格式化
    gantt.config.xml_date = "%Y-%m-%d";
    //左侧是否自适应
    gantt.config.autofit = true;
    //左侧宽
    gantt.config.grid_width = 500;
    //取消连线
    gantt.config.drag_links = false;
    //只读
    gantt.config.readonly = false;
    //右侧显示列名
    gantt.config.date_scale = "%Y-%m-%d";
    //自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true;
    //弹窗宽
    gantt.config.wide_form = false;
    //汉化
    gantt.locale = {
      date: {
        month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
        month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
        day_short: ["日", "一", "二", "三", "四", "五", "六"]
      },
      labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除计划?",
        section_description: "描述:",
        section_time: "时间范围:",
        section_type: "类型",
        section_text: "计划名称:",
        section_color: "颜色:",
        section_deadline: "实际时间:",
        section_status: "状态:",

        /* grid columns */

        column_text: "计划名称",
        column_start_date: "开始时间",
        column_duration: "持续时间",
        column_actual_date: "实际完成日期",
        // column_status: "状态",
        column_add: "",

        /* link confirmation */

        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",

        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年"
      }
    }
    gantt.plugins({ marker: true, tooltip: true }); // 开启marker插件
    // 提示框内容
    gantt.templates.tooltip_text = function (start, end, task) {
      return (
        "<b>任务名称:</b>" +
        task.text +
        "<br/><b>计划开始日期:</b> " +
        moment(task.start_date).format("YYYY-MM-DD") +
        "<br/><b>计划完成日期:</b> " +
        moment(task.end_date).format("YYYY-MM-DD") +
        "<br/><b>状态:</b>" +
        task.statusName + "<br/><b>实际完成日期:</b> " +
        moment(task.planned_start).format("YYYY-MM-DD")
      );

    };
    //左侧显示列名
    gantt.config.columns = [
      { name: "text", label: "任务名称", tree: true, width: '110' },
      { name: "start_date", label: "计划完成时间", align: "center" },
      { name: "end_date", label: "预计完成日期", align: "center" },
      { name: "planned_start", label: "实际完成日期", align: "center" },
      { name: "statusName", label: "状态", align: "center" },
      { name: "add", label: "" },
    ];
    function startDatepicker(node) {
      return $(node).find("input[name='start']");
    }
    function endDateInput(node) {
      return $(node).find("input[name='end']");
    };


    gantt.form_blocks["datepicker"] = {
      render(sns) {
        //sns - the section's configuration object
        return (
          "<div class='gantt-lb-datepicker'>" +
          "<input type='text' name='start' placeholder='请选择实际开始时间' style='height:20px;width:142px;margin:0 8px 0 158px'></div>"
        );
      },
      set_value(node, value, task, section) {
        startDatepicker(node).datepicker({
          dateFormat: "yy-mm-dd",
          onSelect: () => { },
        });

        startDatepicker(node).datepicker("setDate", task.planned_start);
      },
      get_value(node, task, section) {
        var start = startDatepicker(node).datepicker("getDate");
        task.planned_start = start;
        // task.duration = gantt.calculateDuration(task);
      },
      focus(node) { },
    };

    //弹出层
    gantt.config.lightbox.sections = [
      { name: "text", height: 70, map_to: "text", type: "textarea", focus: true, width: 200 },
      { name: "time", height: 30, map_to: "auto", type: "time", time_format: ["%Y", "%m", "%d"] },
      //   { name: "deadline", height: 30, map_to: "actual_date", 
      //   type: "time", time_format: ["%Y", "%m", "%d"], parent:1},
      {
        name: "deadline", height: 72, type: "datepicker",
        map_to: "auto"
      },
      // 完成状态
      {
        name: "status",
        height: 30,
        map_to: "status",
        type: "select",
        options: [
          { key: 2, label: "已发布（进行中）", color: "yellow" },
          { key: 3, label: "节点汇报审批中", color: "#3db9d3" },
          { key: 4, label: "计划审批中", color: "#FF8247" },
          { key: 6, label: "归档（完成）", color: "#33cc33" },
        ],
      },
    ];

    //弹窗标题 日期范围
    gantt.templates.task_time = function (start, end, task) {
      return moment(start).format('YYYY-MM-DD') + " - " + moment(end).format('YYYY-MM-DD');
    };
    //弹窗标题 计划名称
    gantt.templates.task_text = function (start, end, task) {
      return task.text;
    };
    gantt.init(this.$refs.ganttBuild);
    gantt.parse(this.$props.tasks);
    let this_ = this
    //添加后触发
    gantt.attachEvent("onAfterTaskAdd", function (id, item) {
      console.log("添加的数据入参", item);
      let data = {
        buildingId: this_.buildingId,
        nodeName: item.text,
        plannedFinishDate: moment(item.start_date).format("YYYY-MM-DD"), //计划开始
        predictFinishDate: moment(item.end_date).format("YYYY-MM-DD"), //计划结束
        status: Number(item.status),
        actualFinishDate: item.planned_start != null ? moment(item.planned_start).format("YYYY-MM-DD") : null, //实际结束
      };
      console.log("添加的数据", data);
      addProgressBuildinApi(data).then((res) => {
        this_.getBuildingNodeList(this_.buildingId);
      });
    });
    //移动进度后触发
    gantt.attachEvent("onAfterTaskDrag", function (id, mode, e) {
      //   console.log("移动进度后触发");
      //   this_.changeTask();
    });
    //移动任务后触发
    gantt.attachEvent("onAfterTaskMove", function (id, parent, tindex) {
      //   console.log("移动任务后触发");
      //   this_.changeTask();
    });
    //删除任务后触发
    gantt.attachEvent("onAfterTaskDelete", function (id, item) {
      console.log("删除任务后触发");
      deleteProgressBuildinApi({ id: id }).then((res) => {
        console.log("删除的数据", res);
        this_.getBuildingNodeList(this_.buildingId);
      });
    });
    //修改任务后触发
    gantt.attachEvent("onAfterTaskUpdate", function (id, item) {
      console.log("修改任务后触发 :", item);
      let data = {
        buildingId: this_.buildingId,
        nodeName: item.text,
        id: id,
        plannedFinishDate: moment(item.start_date).format("YYYY-MM-DD"), //计划开始
        predictFinishDate: moment(item.end_date).format("YYYY-MM-DD"), //计划结束
        status: Number(item.status),
        actualFinishDate: item.planned_start != null ? moment(item.planned_start).format("YYYY-MM-DD") : null, //实际结束
      };
      editProgressBuildinApi(data).then((res) => {
        console.log("修改的数据", res);
        this_.getBuildingNodeList(this_.buildingId);
      });

    })
    //保存验证
    gantt.attachEvent("onLightboxSave", function (id, item) {
      if (!item.text) {
        gantt.message({ type: "error", text: "请填写计划名称!" });
        return false;
      }
      return true;
    });

  },
  created() {
    this.selectProgressPlanBidSectionList()
    this.baseURL = this.$http.defaults.baseURL;
    this.projectSn = this.$store.state.projectSn;
  },
  methods: {
    changeTask(ganttValue) {
      console.log('接收数据整理--', ganttValue);
      let taskData = [];
      let arr = ganttValue.length > 0 ? ganttValue : []
      arr.forEach(obj => {
        let taskOne = {};
        taskOne.id = obj.id;
        taskOne.text = obj.nodeName;
        taskOne.start_date = moment(obj.plannedFinishDate).format('YYYY-MM-DD');
        taskOne.end_date = moment(obj.predictFinishDate).format('YYYY-MM-DD');
        taskOne.color =
          obj.status == 2 ? "yellow" : obj.status == 3 ? "#3db9d3" : obj.status == 4 ? "#FF8247" : "#33cc33";
        taskOne.statusName = obj.status == 2 ? '已发布（进行中）' : obj.status == 3 ? '节点汇报审批中' : obj.status == 4 ? '计划审批中' : '归档（完成）';
        taskOne.status = obj.status
        if (obj.actualFinishDate != null && obj.actualFinishDate != '') {
          taskOne.planned_start = moment(obj.actualFinishDate).format(
            "YYYY-MM-DD"
          );
        } else {
          taskOne.planned_start = null
        }
        taskData.push(taskOne);
      });
      console.log('看下接收的数据', taskData);
      this.$props.tasks.data = taskData;
      //清空数据
      gantt.clearAll();
      //加载
      gantt.parse(this.$props.tasks);
    },
    //-----------甘特图分割线
    //查询楼栋计划节点数据
    getBuildingNodeList(val) {
      this.tasks.data = [];
      getProgressBuildinApi({ buildingId: val }).then(res => {
        console.log('查询楼栋计划节点数据--', res);
        this.$props.tasks.data = this.tasks.data;
        this.changeTask(res.result);
      })
    },
    selectProgressPlanBidSectionList() {
      selectProgressPlanBidSectionListApi({ projectSn: this.$store.state.projectSn }).then(res => {
        this.ProgressPlanBidSectionList = res.result
        this.alarmType = res.result[0].id
        this.progressBuildingPlanList()
        this.selectMenu(0)
        console.log(res.result);//projectfName
      })
    },
    changeAlarmType() {
      this.progressBuildingPlanList()
      this.selectMenu(0)
    },
    selectMenu(val, id) {
      console.log(id);
      console.log(val)
      this.buildingId = id
      this.checkBuildingId = val
      if (COMPANY == 'jlw') {
        this.getBuildingNodeList(id)
      } else {
        if (document.querySelector('iframe')) {
          document.querySelector('iframe').contentWindow.location.reload();
        }
      }
    },
    progressBuildingPlanList() {
      progressBuildingPlanListApi({ projectSn: this.$store.state.projectSn, bidSectionId: this.alarmType }).then(res => {
        if (res.code == 200) {
          this.buildingList = res.result
          this.buildingId = res.result[0].id
          console.log(res.result);
          this.getBuildingNodeList(this.buildingId)
        }
      })
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        console.log(valid)
        if (valid) {
          let data = this.dialogdata
          data.projectSn = this.projectSn
          data.bidSectionId = this.alarmType
          // console.log('新增的参数',data)
          if (this.formType == 1) {
            addBuildingPlanApi(data).then(res => {
              // console.log('新增之后的结果',res)
              if (res.code == 200) {
                this.$message.success(this.$t('message.projectInfo.addSuccess') + '!')
                this.progressBuildingPlanList()
                this.closeDialog()
                this.selectMenu(this.buildingList.length)
              }
            })
          } else if (this.formType == 2) {
            editBuildingPlanApi(data).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.$message.success(this.$t('message.projectInfo.editSuccess') + '!')
                this.progressBuildingPlanList()
                this.closeDialog()
              }
            })
          }
        }
      })
    },
    closeDialog() {
      this.dialogVisible = false
      this.dialogdata = {}
      this.dialogdata = {
        "batchBuildArea": "",//批次建筑面积
        "batchCode": "",//组团编码
        "batchName": "",//组团名称
        "batchNum": "",//供应批次
        "batchRoomNum": "",//批次供应套数
        "batchSaleArea": "",//批次供应面积（M2）
        "buildingCode": "",//楼栋编码
        "buildingName": "",//楼栋名称
        "decorateName": "",//产品类型装修类型
        "productTypeName": "",//产品类型名称
        "productTypeNum": "",//产品类型编码
        "projectSn": "",//项目SN
        "salePark": "",//可售车位个数（个）
        "saleType": "",//经营方式（可售、可租、不可租售）
        "totalBuildArea": "",//总建筑面积（M2）
        "totalRoomNum": "",//总套数
        "totalSaleArea": ""//总可售面积（M2）
      }
    },
    deleteBuilding(id) {
      this.$confirm(this.$t('message.projectInfo.confirmTipText') + '?', this.$t('message.projectInfo.tip'), {
        confirmButtonText: this.$t('message.energyManage.material.confirm'),
        cancelButtonText: this.$t('message.energyManage.material.cancel'),
        type: 'warning'
      }).then(() => {
        deleteBuildingPlanApi({
          id: id
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: this.$t('message.projectInfo.deleteSuccess') + '!'
            });
            this.progressBuildingPlanList()
            this.selectMenu(0)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('message.projectInfo.cancelDelete')
        });
      });
    },
    editBuilding(id, index) {
      this.dialogVisible = true
      this.dialogTitle = /* '编辑计划' */this.$t('message.projectInfo.editPlan')
      this.formType = 2
      this.checkBuildingId = index
      checkBuildingPlanApi({
        id: id
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.dialogdata = res.result
        }
      })
    },
    newTowerBtn() {
      this.dialogVisible = true
      this.dialogTitle = /* '添加计划' */this.$t('message.projectInfo.addPlan')
      this.formType = 1
    }
  }
}
</script>

<style lang="less" scoped>
@import '~dhtmlx-gantt/codebase/dhtmlxgantt.css';
::v-deep .gantt_add {
  display: none;
}

.gantt_section_time /deep/ .gantt_duration {
  display: none !important;
}
::v-deep .gantt_tree_content {
  height: 100%;
  white-space: nowrap;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.dotBox {
  display: flex;
  justify-content: space-between;
  .text {
    display: flex;
    align-items: center;
    .dot {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 5px;
    }
  }
}
.dialog-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dialog-content {
  /*height: 360px;*/
  margin-bottom: 60px;
}
.dialogFormBox {
  width: 100%;
  padding: 0 30px;
  box-sizing: border-box;
  /deep/.el-form-item {
    display: inline-block;
    width: 50%;
    .el-select {
      width: 260px !important;
    }
    .el-date-picker {
      width: 260px !important;
    }
    .el-cascader {
      width: 260px !important;
    }
    .el-input {
      width: 260px !important;
    }
  }
}
.buildingPlan {
  display: flex;
  height: 100%;
  // background: #fff;
  .left {
    height: 100%;
    width: 260px;
    margin-right: 15px;
    font-size: 15px;
    .title {
      height: 41px;
      line-height: 41px;
      box-sizing: border-box;
      padding: 0 22px;
      margin-bottom: 0;
      // color: #282e49;
      // border-bottom: 2px #ebf0fc solid;
      font-weight: 600;
    }
    .title_index {
      display: inline-block;
      width: 30px;
      text-align: center;
      background: #ec7e2e;
      height: 20px;
      line-height: 20px;
      font-size: 14px;
      margin-right: 10px;
      border-radius: 25px;
      color: #fff;
    }
    .title_name {
      width: 68%;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .el-menu-item {
      border-bottom: 1px #ebf0fc solid;
      border-left: 3px solid white;
      height: 50px;
      line-height: 50px;
      padding: 0 20px !important;
      font-size: 16px;
    }
    // .el-menu-item:hover > .el-icon-delete{
    //   display: none;
    // }
    .checked_item {
      border-left: 3px solid #5181f6;
      // padding: 0 27px !important;
      background-color: #e1e8fa !important;
    }
    .btn_pack {
      display: flex;
      padding: 15px 15px;
      box-sizing: border-box;
      justify-content: center;
      button {
        height: 34px;
      }
    }
  }
  .right {
    flex: 1;
    background: #fff;
    .inner {
      padding: 25px 20px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .Extgantt {
        width: 100%;
        height: 100%;
        border: none;
      }
    }
  }
}
</style>
