<template>
  <div class="testdiv">
    <Row :gutter="16">
      <i-col span="4" v-if="!pageCode">
        <div v-for="(item, key) in dashboardList" :key="key">
          <Button
            :type="selectBtnIndex == key ? 'primary' : 'default'"
            class="pageBtn"
            long
            @click="btnClick(key, item)"
            >{{ item.page_title }}</Button
          >
        </div>
      </i-col>
      <i-col span="20" v-if="thumbnailSrc || pageCode">
        <div class="thumbnail">
          <img :src="thumbnailSrc" />
        </div>
        <div>
          <div class="filter filterTitle">
            <label>页面名称</label>:
            <Input class="inputTitle" v-model.trim="addobj.pagetitle" />
          </div>
        </div>
        <div>
          <Row :gutter="16">
            <i-col
              class="region"
              span="11"
              v-for="(value, key) in regionList"
              :key="key"
            >
              <div class="regionTitle" v-if="regionList.length > 1">
                区域{{ key + 1 }}
              </div>
              <div class="regionTitle" v-else>区域</div>
              <div class="regionMain">
                <div>
                  <!-- type=1 没有条件 固定描述 -->
                  <!-- type=3 上传图片 固定展示一张图片-->
                  <!-- type=2 选择设备 树型结构-->
                  <div v-if="value.type == 2">
                    <Tree
                      :data="addobj['treedata' + key]"
                      empty-text="正在加载中..."
                      show-checkbox
                      :ref="'tree' + key"
                    ></Tree>
                  </div>
                  <!-- type=5 选择产线 -->
                  <div v-else-if="value.type == 5">
                    <div class="filter filterSelect">
                      <label class="filterLabel">横坐标:</label>
                      <div class="publicinput disabledInput">产线层级</div>
                      <Select class="select_diy" v-model="addobj.levelData5">
                        <Option
                          v-for="(item, key) in ProjectLevellist"
                          :value="item.id"
                          :key="key"
                          >{{ item.title }}</Option
                        >
                      </Select>
                    </div>
                  </div>
                  <!-- type=6 级联选择器 -->
                  <div v-else-if="value.type == 6">
                    <div class="filter">
                      <label v-text="$t('1132')"></label>:
                      <Cascader
                        class="filterCascader"
                        @on-change="Cascaderchange"
                        :data="datalevel"
                        :value="addobj.levelData6"
                        trigger="click"
                        change-on-select
                      ></Cascader>
                    </div>
                  </div>
                  <!-- type=7 多选框 -->
                  <div v-else-if="value.type == 7">
                    <CheckboxGroup
                      @on-change="Checkboxchange"
                      v-model="addobj.checkboxvalue7"
                    >
                      <Checkbox
                        :label="item.id"
                        v-for="(item, key) in checkboxlist"
                        :key="key"
                      >
                        <span>{{ item.title }}</span>
                      </Checkbox>
                    </CheckboxGroup>
                  </div>
                  <!-- type=9 Acc质量数据 -->
                  <div v-else-if="value.type == 9">
                    <div class="filter">
                      <label v-text="$t('1132')"></label>:
                      <Cascader
                        class="filterCascader"
                        :data="datalevel"
                        :value="addobj.levelData9"
                        @on-change="levelchange"
                        trigger="click"
                        change-on-select
                      ></Cascader>
                    </div>
                    <div class="condition" v-show="condition9">
                      <div class="congitionRadio">
                        <RadioGroup v-model="addobj.radiovalue9">
                          <Radio
                            :label="item.item"
                            v-for="(item, key) in radiolist"
                            :key="key"
                          >
                            <span>{{ item.item }}</span>
                          </Radio>
                        </RadioGroup>
                      </div>
                      <div class="filter conditionInput">
                        <label>输入条数</label>:
                        <Input
                          class="fixW"
                          v-model.trim="addobj.number9"
                          type="number"
                        />
                      </div>
                      <div class="filter conditionInput">
                        <label>上限</label>:
                        <Input
                          class="fixW"
                          v-model.trim="addobj.upperlimit9"
                          type="number"
                        />
                      </div>
                      <div class="filter conditionInput">
                        <label>下限</label>:
                        <Input
                          class="fixW"
                          v-model.trim="addobj.lowerlimit9"
                          type="number"
                        />
                      </div>
                    </div>
                  </div>
                  <!-- type=13 设备产出效率 -->
                  <div v-else-if="value.type == 13">
                    <div style="padding: 5px">
                      <div
                        class="groupTimeRang"
                        v-for="(item, index) in groupTimeRang"
                        :key="index"
                      >
                        <label>班别：</label>
                        <Input
                          type="text"
                          v-model="item.groupname"
                          :value="item.groupname"
                          class="groupname"
                        />&nbsp;&nbsp;&nbsp;&nbsp;
                        <label>时间范围：</label>
                        <TimePicker
                          v-model="item.timerang"
                          :value="item.timerang"
                          type="timerange"
                          class="timerang"
                        ></TimePicker>
                        <span
                          v-if="index === 0"
                          class="spanbtn"
                          @click="addbtn13()"
                          >+</span
                        >
                        <span v-else class="spanbtn" @click="delbtn13(index)"
                          >-</span
                        >
                      </div>
                    </div>
                    <Tree
                      :data="addobj['treedata' + key]"
                      show-checkbox
                      :ref="'tree' + key"
                    ></Tree>
                  </div>
                  <!-- type=15 设备状态大屏 -->
                  <div class="type15" v-else-if="value.type == 15">
                    <div>
                      <div class="filter">
                        <label v-text="$t('1132')"></label>:
                        <Cascader
                          class="filterCascader"
                          @on-change="levelData15Change"
                          :data="datalevel15"
                          :value="addobj.levelData15"
                          trigger="click"
                          change-on-select
                        ></Cascader>
                      </div>
                    </div>
                    <div>
                      <div class="filter">
                        <label>显示状态灯</label>:
                        <RadioGroup v-model="addobj.radiovalue15">
                          <Radio label="1">
                            <span>显示状态浮窗</span>
                          </Radio>
                          <Radio label="2">
                            <span>显示状态灯</span>
                          </Radio>
                        </RadioGroup>
                      </div>
                    </div>
                    <div>
                      <div class="filter">
                        <label>设备布局图</label>:
                        <Upload
                          class="upload"
                          :before-upload="handleUpload"
                          action="/"
                          :show-upload-list="false"
                          :disabled="!!imgSrc"
                        >
                          <div class="upload_con">
                            <template v-if="imgSrc">
                              <viewer :images="images" style="height: 100%">
                                <img
                                  class="upload_img"
                                  v-for="src in images"
                                  :src="src"
                                  :key="src"
                                />
                              </viewer>
                              <div class="upload_cover">
                                <Icon
                                  type="ios-close"
                                  @click.stop="del()"
                                ></Icon>
                              </div>
                            </template>
                            <template v-else>
                              <Icon type="ios-camera" size="32"></Icon>
                            </template>
                          </div>
                        </Upload>
                      </div>
                    </div>
                    <div style="margin-top: 44px" v-if="tableData.length">
                      <div>
                        <div class="echo_div">
                          <Table
                            class="echo_table"
                            :data="tableData"
                            :columns="tableColumns"
                          ></Table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </i-col>
          </Row>
          <div class="saveFooter">
            <Button
              class="saveBtn"
              type="primary"
              v-text="pageCode ? '确认修改' : '确认添加'"
              @click="savedata"
            ></Button>
            <div style="clear: both"></div>
          </div>
        </div>
      </i-col>
    </Row>
  </div>
</template>
<script>
import { mapState } from "vuex";
import config from "@/config";

export default {
  data() {
    return {
      // 图片预览链接列表
      images: [],
      // 图片链接前缀
      img_prefix:
        config.publicPath[process.env.NODE_ENV == "production" ? "pro" : "dev"],
      // type=15 上传的设备背景图片返回的链接地址
      imgSrc: "",
      // type=15 上传的设备背景图片
      file: null,
      // type=15 设备定位配置表格数据
      tableData: [],
      // type=15 设备定位配置表格字段
      tableColumns: [
        {
          type: "index",
          title: this.$t("1008"),
          render: (h, params) => {
            return h("span", params.index + 1);
          },
          width: "60px",
        },
        {
          title: this.$t("1026"),
          key: "title",
          align: "center",
        },
        {
          title: "横坐标",
          key: "x",
          align: "center",
          render: (h, params) => {
            let vm = this;
            return h("input", {
              domProps: {
                value: params.row.x,
              },
              style: {
                width: "100px",
              },
              on: {
                input: function (event) {
                  params.row.x = event.target.value;
                  vm.tableData[params.index] = params.row;
                },
              },
            });
          },
        },
        {
          title: "纵坐标",
          key: "y",
          align: "center",
          render: (h, params) => {
            let vm = this;
            return h("input", {
              domProps: {
                value: params.row.y,
              },
              style: {
                width: "100px",
              },
              on: {
                input: function (event) {
                  params.row.y = event.target.value;
                  vm.tableData[params.index] = params.row;
                },
              },
            });
          },
        },
      ],
      // Acc 数据对象
      acc: {},
      // 树形结构最底层节点
      leafId: 99999,
      hasLeafId: false,
      // 左边可选页面列表
      dashboardList: [],
      // 选中按钮的索引
      selectBtnIndex: 99999,
      // 选中的页面对象
      selectBtnObj: {},
      // 条件区域列表
      regionList: [],
      // 缩略图链接
      thumbnailSrc: "",
      // 产线层级下拉选择框列表数据
      ProjectLevellist: [],
      // 产线层级级联选择器树形结构数据
      datalevel: [],
      // type=15 产线层级级联选择器树形结构数据
      datalevel15: [],
      // type=9 Acc质量数据中更多选项是否展示
      condition9: false,
      // type=13 设备产出效率
      groupTimeRang: [
        {
          groupname: "",
          timerang: "",
        },
      ],
      // 产线层级 层数
      levelNums: 0,
      addobj: {
        // 页面名称
        pagetitle: "",
        // 第一个树形结构数据
        treedata0: [],
        // 第二个树形结构数据
        treedata1: [],
        // 第三个树形结构数据
        treedata2: [],
        // 第四个树形结构数据
        treedata3: [],
        // type5
        levelData5: "",
        // type6的产线层级
        levelData6: [],
        // type7的多选框
        checkboxvalue7: [],
        // type9的产线层级
        levelData9: [],
        // type9的单选框
        radiovalue9: "",
        // type9 输入条数
        number9: "",
        // type9 上限
        upperlimit9: "",
        // type9 下限
        lowerlimit9: "",
        // type15的产线层级
        levelData15: [],
        // type15的单选框
        radiovalue15: "",
      },

      treedata: [], // 树数据
      checkboxlist: [], // 多选框list
      radiolist: [], // 单选框list
      radiovalue: "", // 单选框value
    };
  },
  computed: {
    ...mapState(["user"]),
    projectId() {
      return this.user.projectId;
    },
    combId() {
      return this.$route.query.combId;
    },
    pageCode() {
      return this.$route.query.pageCode;
    },
    pageId() {
      return this.$route.query.pageId;
    },
    pageTitle() {
      return this.$route.query.pageTitle;
    },
  },
  mounted() {
    this.initLevel();
    this.initData();
    this.tableColumns = this.$time.initTableTitle(this.tableColumns);
    // 当本页面是通过点击页面修改跳转过来的
    if (this.pageId) {
      this.addobj.pagetitle = this.pageTitle;
      this.initEditData();
    }
  },
  methods: {
    // 获取产线层级树形结构数据
    initLevel() {
      let _this = this;
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.levelNums = _this.getMaxFloor(result.data);
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 根据树形结构数据算出树形结构数据的深度
    getMaxFloor(treeData) {
      let floor = 0;
      let max = 0;
      function each(data, floor) {
        data.forEach((e) => {
          e.floor = floor;
          if (floor > max) {
            max = floor;
          }
          if (e.children.length > 0) {
            each(e.children, floor + 1);
          }
        });
      }
      each(treeData, 1);
      return max;
    },
    // 根据页面编码选择展示缩略图
    switchImg(str) {
      switch (str) {
        case "slice_status":
          this.thumbnailSrc = require("../../../static/dashboardImg/slice_status.png");
          break;
        case "production_line":
          this.thumbnailSrc = require("../../../static/dashboardImg/production_line.jpg");
          break;
        case "workshop_kanban":
          this.thumbnailSrc = require("../../../static/dashboardImg/workshop_kanban.jpg");
          break;
        case "all_production":
          this.thumbnailSrc = require("../../../static/dashboardImg/all_production.png");
          break;
        case "acc_quality_display":
          this.thumbnailSrc = require("../../../static/dashboardImg/acc1.jpg");
          break;
        case "output_analysis":
          this.thumbnailSrc = require("../../../static/dashboardImg/output_analysis.png");
          break;
        case "equipment_status":
          this.thumbnailSrc = require("../../../static/dashboardImg/equipment_status.png");
          break;
      }
    },
    // 初始化左边可选页面列表
    initData() {
      let _this = this;
      let params = {
        projectId: _this.projectId,
      };
      _this.axios
        .request({
          url: "/config/DashboardSet/GetProjectDashboardPages",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.dashboardList = result.data;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 点击左边，选择页面触发该事件
    btnClick(index, obj) {
      let _this = this;
      _this.selectBtnIndex = index;
      _this.selectBtnObj = obj;
      let regionItem = {};
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetPagePatialCondtion",
          params: {
            page_code: obj.page_code,
          },
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.regionList = result.data_page_patial_condition;
            _this.typeChoice(regionItem);
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 点击左边，选择好页面后，根据页面编码去获取条件区域列表，再根据条件区域的 type 判断调用哪种方法渲染条件区域
    typeChoice(regionItem) {
      const _this = this;
      let regionList = _this.regionList;

      // 渲染缩略图
      _this.switchImg(regionList[0].page_code);

      if (Array.isArray(regionList) && regionList.length) {
        regionList.forEach(function (item, index) {
          switch (item.type) {
            case 2:
              _this.initTree(item, index);
              break;
            case 5:
              _this.initCurrentLevel(item, index);
              break;
            case 6:
              _this.initDataLevel(item, index, 6);
              break;
            case 9:
              _this.initDataLevel(item, index, 9);
              break;
            case 7:
              _this.initCheckBox(item, index);
              break;
            case 13:
              _this.initTree(item, index);
              break;
            case 15:
              _this.initDeviceStatus(item, index);
              break;
          }
        });
      }
    },
    // 渲染树形结构
    initTree(item, index) {
      let _this = this;
      let params = {
        page_id: _this.pageId ? _this.pageId : "",
        patial_code: item.page_patial_code,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetSectionTreeForDashboard",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            // 最后一个层级是设备
            if (result.data.children.length) {
              _this.addobj[`treedata${index}`] = _this.$time.deepClone(
                result.data.children
              );
            } else {
              _this.addobj[`treedata${index}`] = [];
            }
            _this.groupTimeRang = [{ groupname: "", timerang: "" }];
            let groupTimeRang = result.groupTimeRang;
            if (
              groupTimeRang &&
              groupTimeRang.length &&
              Array.isArray(groupTimeRang)
            ) {
              _this.groupTimeRang = [];
              for (let i = 0; i < groupTimeRang.length; i++) {
                _this.groupTimeRang.push({
                  groupname: "",
                  timerang: "",
                });
              }
              _this.$nextTick(() => {
                _this.groupTimeRang = groupTimeRang;
              });
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 渲染产线层级下拉选择框
    initCurrentLevel(item, index) {
      let _this = this;
      let params = {
        page_id: _this.pageId ? _this.pageId : "",
        patial_code: item.page_patial_code,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/getCurrentUserProjectLevel",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let list = result.data;
            list.forEach(function (item, index) {
              if (item.checked) {
                _this.addobj.levelData5 = item.id;
              }
            });
            _this.ProjectLevellist = result.data;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 渲染产线层级级联选择框
    initDataLevel(item, index, type) {
      const _this = this;
      let params = {
        page_id: _this.pageId ? _this.pageId : "",
        patial_code: item.page_patial_code,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetSectionTree",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.datalevel = result.data;
            _this.traverseTree(result.data);
            if (_this.hasLeafId) {
              if (type == 6) {
                _this.addobj.levelData6 = _this.findPathByLeafId(
                  _this.leafId,
                  result.data
                );
              } else if (type == 9) {
                _this.addobj.levelData9 = _this.findPathByLeafId(
                  _this.leafId,
                  result.data
                );
                _this.levelchange(_this.addobj.levelData9);
                _this.addobj.radiovalue9 = _this.acc.acc_text_value;
                _this.addobj.number9 = _this.acc.right_article_num;
                _this.addobj.upperlimit9 = _this.acc.right_foot_online;
                _this.addobj.lowerlimit9 = _this.acc.right_foot_offline;
              }
            }
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 渲染产线多选框
    initCheckBox(item, index) {
      let _this = this;
      let params = {
        page_id: _this.pageId ? _this.pageId : "",
        patial_code: item.page_patial_code,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetProductionLine",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let checkboxlist = result.data;
            _this.checkboxlist = checkboxlist;
            checkboxlist.forEach(function (item, index) {
              if (item.checked) {
                _this.addobj.checkboxvalue7.push(item.id);
              }
            });
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 渲染设备状态大屏条件区域
    initDeviceStatus(item, index) {
      // 拿到当前组件实例
      const _this = this;
      // 获取 type=15 区域产线层级级联选择器树形结构数据
      get_datalevel15(item, index);

      if (_this.pageId) {
        get_type_15_data(item, index);
      }

      // 获取 type=15 区域产线层级级联选择器树形结构数据
      function get_datalevel15(item, index) {
        let params = {
          page_id: _this.pageId ? _this.pageId : "",
          patial_code: item.page_patial_code,
        };
        _this.axios
          .request({
            url: "/dashboard/DashboardConfig/GetSectionTree",
            params,
            method: "get",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              _this.datalevel15 = result.data;
              _this.traverseTree(result.data);
              if (_this.hasLeafId) {
                _this.addobj.levelData15 = _this.findPathByLeafId(
                  _this.leafId,
                  result.data
                );
              }
            } else {
              _this.$Message.error(_this.$t("" + result.msg));
            }
          });
      }
      // 获取 type=15 区域除产线层级其它反绑数据
      function get_type_15_data(item, index) {
        let params = {
          page_id: _this.pageId ? _this.pageId : "",
          patial_code: item.page_patial_code,
        };
        _this.axios
          .request({
            url: "/dashboard/DashboardConfig/GetSectionTreeTwo",
            params,
            method: "get",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              let data = result.data;
              let fixPath = data.fixPath;
              let lampStatus = data.lampStatus;
              let layout = data.layout;
              _this.tableData = fixPath;
              _this.addobj.radiovalue15 = String(lampStatus);
              _this.imgSrc = layout;
              _this.images = [_this.img_prefix + _this.imgSrc];
            } else {
              _this.$Message.error(_this.$t("" + result.msg));
            }
          });
      }
    },
    // type=15 级联选择器变化
    levelData15Change(arr) {
      // 拿到当前组件实例
      const _this = this;
      // 赋值
      _this.addobj.levelData15 = arr;
      // 获取产线层级 ID
      let lineid = arr[arr.length - 1];
      // 组装请求入参
      let params = {
        lineid,
      };
      _this.axios
        .request({
          url: "/Config/ProductionLocation/GetLevelList",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.tableData = result.data;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 级联选择框变化
    Cascaderchange(arr) {
      this.addobj.levelData6 = arr;
    },
    // 多选框变化
    Checkboxchange(arr) {
      let _this = this;
      if (arr.length > 2) {
        _this.$Message.error("最多选择两个产线！");
        _this.addobj.checkboxvalue7 = _this.addobj.checkboxvalue7.slice(0, 2);
      }
    },
    // 级联选择框变化
    levelchange(arr) {
      let _this = this;
      // 如果不是最后一个层级，结束
      if (arr.length != _this.levelNums) {
        return false;
      }
      _this.addobj.levelData9 = arr;
      let params = {
        SectionId: arr[arr.length - 1],
      };
      _this.condition9 = false;
      _this.radiolist = [];
      _this.axios
        .request({
          url: "/acc/AccDashboard/GetChkItemByLine",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.condition9 = true;
            _this.radiolist = result.data;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 保存
    savedata() {
      // 拿到当前组件实例
      const _this = this;
      // 提示信息
      let errorMsg = "";
      let addarr = [];
      let bool = false;
      // 对页面名称进行必填验证
      if (!_this.addobj.pagetitle) {
        _this.$Message.error("页面名称不能为空！");
        return false;
      }
      // 对页面名称进行长度验证
      if (_this.addobj.pagetitle.length > 11) {
        _this.$Message.error("页面名称不得超过11个字符！");
        return false;
      }
      _this.regionList.forEach((item, index) => {
        let str1 = "";
        let str = `${item.page_patial_code},${item.page_patial_condition_code},`;
        // type2 树形结构数据拼接
        if (item.type == 2) {
          let arr = _this.$refs[`tree${index}`][0].getCheckedNodes();
          arr.forEach((v) => {
            if (v.children.length == 0) {
              let id = Math.abs(v.id);
              str1 = str1 + id + "-";
            }
          });
          // 若是未选择树形结构数据，标志位置为 true
          if (!str1) {
            bool = true;
          }
          str1 = str1.slice(0, str1.length - 1);
          addarr[index] = str + str1 + ",0,0,0,0";
        } // type5 下拉框数据拼接
        else if (item.type == 5) {
          if (_this.addobj.levelData5) {
            str1 = _this.addobj.levelData5;
          } else {
            bool = true;
          }
          addarr[index] = str + str1 + ",0,0,0,0";
        } // type6 级联选择数据拼接
        else if (item.type == 6) {
          if (_this.addobj.levelData6.length) {
            str1 = _this.addobj.levelData6[_this.addobj.levelData6.length - 1];
          } else {
            bool = true;
          }
          addarr[index] = str + str1 + ",0,0,0,0";
        } // type7 checkbox数据拼接
        else if (item.type == 7) {
          if (_this.addobj.checkboxvalue7.length) {
            str1 = _this.addobj.checkboxvalue7.join("-");
          } else {
            bool = true;
          }
          addarr[index] = str + str1 + ",0,0,0,0";
        } // type9 Acc质量数据
        else if (item.type == 9) {
          // Acc
          if (_this.addobj.levelData9.length) {
            str1 = _this.addobj.levelData9[_this.addobj.levelData9.length - 1];
          } else {
            bool = true;
          }
          // 单选项
          let redioname9 = _this.addobj.radiovalue9;
          // 输入条数
          let count9 = _this.addobj.number9;
          // 上限
          let upperlimit9 = _this.addobj.upperlimit9
            ? _this.addobj.upperlimit9
            : 0;
          // 下限
          let lowerlimit9 = _this.addobj.lowerlimit9
            ? _this.addobj.lowerlimit9
            : 0;
          if (!redioname9) {
            errorMsg = "type9_1";
            return false;
          }
          if (!count9) {
            errorMsg = "type9_2";
            return false;
          }
          addarr[index] =
            str +
            str1 +
            "," +
            redioname9 +
            "," +
            count9 +
            "," +
            upperlimit9 +
            "," +
            lowerlimit9;
        } // type13 班别时间范围
        else if (item.type == 13) {
          let arr = _this.$refs[`tree${index}`][0].getCheckedNodes();
          arr.forEach((v) => {
            if (v.children.length == 0) {
              let id = Math.abs(v.id);
              str1 = str1 + id + "-";
            }
          });
          if (!str1) {
            bool = true;
          }
          str1 = str1.slice(0, str1.length - 1);
          // 处理数据
          let dataArr = [];
          _this.groupTimeRang.forEach((item) => {
            let dataArr_1 = {};
            dataArr_1.name = item.groupname;
            dataArr_1.time = item.timerang ? item.timerang.join(" - ") : "";
            dataArr.push(dataArr_1);
          });
          let code = 0;
          let str2 = "";
          let groupArr = [];
          dataArr.forEach((item) => {
            if (item.name == "" || item.time == " - " || item.time == "") {
              code = 1;
            }
            groupArr.push(item.name + "|" + item.time);
          });
          if (code == 1) {
            errorMsg = "type13_1";
            return false;
          }
          str2 = groupArr.join(";");
          addarr[index] = str + str1 + "_" + str2 + ",0,0,0,0";
        } // type15 设备状态大屏
        else if (item.type == 15) {
          if (
            !_this.addobj.levelData15.length ||
            !_this.addobj.radiovalue15 ||
            !_this.imgSrc
          ) {
            bool = true;
          } else {
            str1 =
              _this.addobj.levelData15[_this.addobj.levelData15.length - 1];
          }
          addarr[index] = str + str1 + ",0,0,0,0";
        }
      });
      // 报错提示
      if (errorMsg === "type9_1") {
        _this.$Message.error("测试项不能为空");
        return false;
      }
      if (errorMsg === "type9_2") {
        _this.$Message.error("测试条数不能为空");
        return false;
      }
      if (errorMsg === "type13_1") {
        _this.$Message.error("请填写完整班次信息");
        return false;
      }
      if (bool) {
        _this.$Message.error("区域内容数据不能为空");
        return false;
      }
      let data = {
        page_id: _this.pageId ? _this.pageId : "",
        comb_id: _this.combId,
        dashboard_comb_page_condition: addarr,
        pagetitle: _this.addobj.pagetitle,
        page_code: _this.selectBtnObj.page_code,
        lampStatus: _this.addobj.radiovalue15
          ? parseInt(_this.addobj.radiovalue15)
          : 0,
        layout: _this.imgSrc,
        fixPath: _this.tableData,
      };

      _this.axios
        .request({
          url: "dashboard/DashboardConfig/AddPage",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success("操作成功！");
            _this.$router.push({ name: "920016" });
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    /** *************************type=13 start ****************************/
    // 添加按钮
    addbtn13() {
      this.groupTimeRang.push({
        groupname: "",
        timerang: "",
      });
    },
    // 删除按钮
    delbtn13(index) {
      this.groupTimeRang.splice(index, 1);
    },
    /** *************************type=13 end ****************************/
    // 编辑数据
    initEditData() {
      let _this = this;
      let params = {
        page_code: _this.pageCode,
      };
      _this.btnClick(0, params);
    },
    // 遍历树形结构
    traverseSingle(item) {
      const _this = this;
      if (item.checked) {
        _this.leafId = item.value;
        _this.hasLeafId = true;
        _this.acc = item;
      }
    },
    traverseTree(data) {
      const _this = this;
      if (!data) {
        return false;
      }
      for (let i = 0; i < data.length; i++) {
        _this.traverseSingle(data[i]);
        if (data[i].children && data[i].children.length > 0) {
          _this.traverseTree(data[i].children);
        }
      }
    },
    findPathByLeafId(leafId, nodes, path) {
      const _this = this;
      if (path === undefined) {
        path = [];
      }
      for (let i = 0; i < nodes.length; i++) {
        let tmpPath = path.concat();
        tmpPath.push(nodes[i].value);
        if (leafId == nodes[i].value) {
          return tmpPath;
        }
        if (nodes[i].children) {
          let findResult = _this.findPathByLeafId(
            leafId,
            nodes[i].children,
            tmpPath
          );
          if (findResult) {
            return findResult;
          }
        }
      }
    },
    // 上传文件阻止默认上传行为
    handleUpload(file) {
      let fileType = file.type;
      let acceptType = ["image/jpeg", "image/png"];
      if (acceptType.indexOf(fileType) == -1) {
        this.$Message.error("请上传图片类型文件（jpg、png）！");
        return false;
      }
      this.file = file;

      // 在调用控件默认上传行为之前手动上传
      this.upload();

      return false;
    },
    // 手动上传方法
    upload() {
      // 拿到当前组件实例
      const _this = this;
      const file = _this.file;
      let data = new FormData();
      data.append("file", file);
      _this.axios
        .request({
          url: "/config/upload/UploadImage",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$Message.success("上传成功！");
            _this.file = null;
            _this.imgSrc = result.data;
            _this.images = [_this.img_prefix + _this.imgSrc];
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    // 删除图片
    del() {
      this.imgSrc = "";
      this.images = [];
    },
  },
};
</script>
<style lang="less" scoped>
@media screen and (max-width: 1440px) {
  .filterLabel {
    width: 45px !important;
  }

  .disabledInput {
    width: 60px !important;
  }

  .select_diy {
    width: 100px !important;
  }
}

.upload_cover {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.2);

  i {
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.upload_con:hover .upload_cover {
  display: block;
}

.upload_img {
  width: 100%;
  height: 100%;
}

.upload {
  width: 100px;
  height: 100px;
  border: 1px dashed #dcdee2;
  margin: 4px 0 4px 40px;

  .upload_con {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    position: relative;
  }
}

.echo_div {
  padding: 0 16px;
}

.echo_table {
  margin: 4px 0;
}

.type15 {
  padding-top: 4px;
  .filter {
    margin-top: 4px;
  }
}

.groupTimeRang {
  min-width: 450px;
  margin: 10px 0px;
  .groupname {
    width: 100px;
  }
  .timerang {
    width: 160px;
  }
}
.condition {
  .congitionRadio {
    margin: 0px 50px;
  }
  .conditionInput {
    line-height: 40px;
    margin-top: 10px;
    .fixW {
      width: 160px;
    }
  }
}
.filterCascader {
  display: inline-block;
  width: 200px;
}

.disabledInput {
  text-align: center;
}

.filterSelect {
  padding-top: 15px;
  .select_diy {
    width: 160px;
    height: 32px;
    position: relative;
    top: 2px;
    left: 2px;
  }
}

.region {
  margin-top: 15px;
  .regionTitle {
    background-color: #fff;
    padding: 10px 0 10px 15px;
  }

  .regionMain {
    height: 200px;
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid #eee;
  }
}

.saveFooter {
  margin-top: 12px;
  margin-bottom: 32px;
  .saveBtn {
    float: right;
    margin-right: 240px;
  }
}

.filterTitle {
  line-height: 40px;
  margin-top: 15px;
  .inputTitle {
    width: 200px;
  }
}

.thumbnail {
  width: 890px;
  height: 500px;
  img {
    width: 100%;
    height: 100%;
  }
}

.pageBtn {
  margin: 5px 0;
}

.spanbtn {
  width: 32px;
  height: 32px;
  background: rgb(87, 163, 243);
  color: rgb(255, 255, 255);
  display: inline-block;
  vertical-align: top;
  font-size: 20px;
  text-align: center;
  border-radius: 3px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background: #57a3f3;
  color: #fff;
}
</style>
