<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div class="buttonall searchBtn">
        <Button
          type="success"
          class="fourWord intervalRight"
          icon="md-add-circle"
          @click="add()"
          >{{ $t("500017") }}</Button
        >
        <Button
          type="warning"
          class="twoWord"
          icon="ios-create-outline"
          @click="edit()"
          >{{ $t("1003") }}</Button
        >
        <Button
          type="error"
          class="twoWord"
          icon="md-close-circle"
          @click="del()"
          >{{ $t("1004") }}</Button
        >
      </div>
    </div>
    <div class="divborder">
      <div>
        <Row :gutter="16" class="row_main">
          <i-col span="8" v-for="(item, key) in modelList" :key="key">
            <div
              class="comb"
              @click.stop="selectComb(item, key)"
              :class="{ shadow: selectIndex === key }"
            >
              <div class="title">{{ item.title }}</div>
              <div class="scroll">
                <div
                  class="scroll_i"
                  v-for="(page, pageIndex) in item.combList"
                  :class="{ pageItem: selectPageIndex === page.page_id }"
                  :key="pageIndex"
                  @click.stop="selectPage(page, pageIndex)"
                >
                  {{ page.page_title }}
                </div>
              </div>
              <div class="footer">
                <router-link
                  class="footer_i"
                  :to="{ name: '920086', query: { combId: item.id } }"
                >
                  <div>添加页面</div>
                </router-link>
                <a href="javascript:;" class="footer_i" @click="play(item.id)">
                  <div>页面播放</div>
                </a>
              </div>
            </div>
          </i-col>
        </Row>
      </div>
      <!-- 添加组合弹框-->
      <Modal
        class="newModalClass"
        :title="modalName"
        v-model="showModal"
        :styles="{ top: '100px', width: '400px' }"
      >
        <div class="bodyModel">
          <div class="filter">
            <label>
              <i>*</i>
              组合名称:
            </label>
            <Input
              class="filterInput"
              v-model.trim="addObj.title"
              placeholder="请填写组合名称"
            />
          </div>
          <div class="filter">
            <label>
              <i>*</i>
              设置时长:
            </label>
            <Input
              class="filterInput"
              v-model.trim="addObj.cycle"
              :min="20"
              type="number"
              placeholder="设置时长 单位:秒(S)"
              onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
            />
          </div>
        </div>
        <div slot="footer">
          <Button size="large" @click="showModal = false">{{
            $t("1033")
          }}</Button>
          <Button type="primary" size="large" @click="saveComb">{{
            $t("1011")
          }}</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      // 弹框标题
      modalName: "",
      modelList: [],
      selectIndex: 999999,
      showModal: false,
      selectPageIndex: 99999,
      // 当前点击的是组合还是页面
      selectType: 0,
      // 组合-对象
      combObj: {},
      // 1.添加 2.编辑
      type: 0,
      // 添加组合对象
      addObj: {},
      // 页面-对象
      pageObj: {},
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.initData();
    // 设置头部按钮超出视野范围时固定到头部
    let div = $(".buttonall");
    let maxTop = 80;
    $(".content-wrapper").on("scroll", function () {
      let top = $(this).scrollTop();
      if (top > maxTop) {
        div.addClass("echo_fix_top");
      }
      if (top < maxTop) {
        div.removeClass("echo_fix_top");
      }
    });
  },
  methods: {
    // 页面播放
    play(combId) {
      const _this = this;
      let params = {
        id: combId,
        projectid: _this.user.projectId,
      };
      _this.axios
        .request({
          url: "/dashboard/DashboardShow/getallcombpages",
          params,
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.$router.push({ name: "8000063", query: { combId } });
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
            return false;
          }
        });
    },
    initData() {
      let _this = this;
      this.axios
        .request({
          url: "/dashboard/DashboardConfig/GetCombList",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.modelList = result.data_comb;
          } else {
            _this.$Message.error(_this.$t("" + result.msg));
          }
        });
    },
    selectComb(obj, index) {
      this.selectIndex = index;
      this.combObj = obj;
      // 当前选择的是组合
      this.selectType = 1;
    },
    selectPage(obj, index) {
      this.selectPageIndex = obj.page_id;
      this.pageObj = obj;
      // 当前选择的是页面
      this.selectType = 2;
    },
    add() {
      this.showModal = true;
      this.modalName = "添加组合";
      this.type = 1; // 类型为添加
      this.addObj = {};
    },
    edit() {
      const _this = this;
      // 如果未选择组合或页面，弹出框提示并终结当前函数执行
      if (!_this.selectType) {
        _this.$Message.error("请选择要修改的组合或页面！");
        return false;
      }
      // 修改组合则在弹出框中修改，修改页面则传参跳转路由
      if (this.selectType == 1) {
        this.addObj = this.combObj;
        this.showModal = true;
        this.modalName = "修改组合";
        // 类型为编辑
        this.type = 2;
      } else if (this.selectType == 2) {
        let obj = _this.pageObj;
        // 修改页面跳转路由
        this.$router.push({
          name: "920086",
          query: {
            combId: obj.comb_id,
            pageCode: obj.page_code,
            pageId: obj.page_id,
            pageTitle: obj.page_title,
          },
        });
      }
    },
    del() {
      let _this = this;
      let combObj = _this.combObj;
      let pageObj = _this.pageObj;
      if (!_this.selectType) {
        _this.$Message.error("请选择要删除的组合或页面！");
        return false;
      }
      if (_this.selectType == 1) {
        if (_this.combObj.combList.length) {
          _this.$Message.error("该组合下仍拥有页面，不可删除");
          return false;
        }
      }
      let data = {
        del_type: _this.selectType,
        comb_id: _this.selectType == 1 ? combObj.id : pageObj.comb_id,
        comb_page_id: _this.selectType == 1 ? 0 : pageObj.page_id,
      };
      _this.$Modal.confirm({
        title: _this.$t("1018"),
        width: "300px",
        closable: true,
        okText: _this.$t("1004"),
        onOk: () => {
          _this.axios
            .request({
              url: "dashboard/DashboardConfig/DelCombPage",
              data,
              method: "post",
            })
            .then((res) => {
              let result = res.data;
              if (result.ret == 1) {
                _this.$Message.success("操作成功！");
                _this.initData();
              } else {
                _this.$Message.error(_this.$t("" + result.msg));
              }
            });
        },
      });
    },
    saveComb() {
      // 拿到当前组件实例
      const _this = this;
      // 对组合名称进行必填验证
      if (!_this.addObj.title) {
        _this.$Message.error("请设置组合名称！");
        return false;
      }
      // 对组合名称进行长度验证
      if (_this.addObj.title.length > 20) {
        _this.$Message.error("组合名称不得超过20个字符！");
        return false;
      }
      // 对组合名称进行特殊字符验证（包括中文特殊字符和英文特殊字符）
      let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
      let regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im;
      if (regEn.test(_this.addObj.title) || regCn.test(_this.addObj.title)) {
        _this.$Message.error("名称不能包含特殊字符！");
        return false;
      }
      // 对组合的时长进行必填验证
      if (!_this.addObj.cycle) {
        _this.$Message.error("请设置时长！");
        return false;
      }
      // 对组合的时长进行负数验证
      if (_this.addObj.cycle < 0) {
        _this.$Message.error("时长不能为负数！");
        return false;
      }
      // 对组合的时长进行范围验证
      if (_this.addObj.cycle < 20) {
        _this.$Message.error("时长不得低于20s！");
        return false;
      }
      // type为 1 添加 type为 2 编辑
      if (_this.type == 1) {
        let data = {
          comb_title: _this.addObj.title,
          cycle: _this.addObj.cycle,
        };
        _this.axios
          .request({
            url: "dashboard/DashboardConfig/AddEditComb",
            data,
            method: "post",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              _this.$Message.success("操作成功！");
              _this.showModal = false;
              _this.$router.push({
                name: "920086",
                query: { combId: result.data },
              });
            } else {
              _this.$Message.error(_this.$t("" + result.msg));
            }
          });
      } else if (_this.type == 2) {
        let data = {
          comb_id: _this.addObj.id,
          edit_comb_title: _this.addObj.title,
          edit_cycle: _this.addObj.cycle,
        };
        _this.axios
          .request({
            url: "/dashboard/DashboardConfig/EditCombChk",
            data,
            method: "post",
          })
          .then((res) => {
            let result = res.data;
            if (result.ret == 1) {
              _this.$Message.success("操作成功！");
              _this.showModal = false;
              _this.initData();
            } else {
              _this.$Message.error(_this.$t("" + result.msg));
              _this.showModal = false;
              _this.initData();
            }
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.echo_fix_top {
  background-color: #fff;
  margin: 0;
  padding-left: 40px;
  height: 50px;
  line-height: 50px;
  left: 171px;
  right: 0;
  z-index: 800;
  position: fixed;
  top: 80px;
}

.filter {
  label {
    width: 100px;
  }

  .filterInput {
    width: 200px;
  }
}

.comb {
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
.row_main {
  padding: 0 20px;
  margin-top: 10px;
}
.shadow {
  box-shadow: 3px 3px 6px 3px #ccc;
  border: 1px solid rgb(52, 122, 184) !important;
}

.pageItem {
  background-color: rgba(30, 159, 255, 0.6) !important;
  color: #fff;
}

.title {
  background-color: #347ab8;
  color: #fff;
  font-size: 16px;
  height: 38px;
  line-height: 38px;
  padding-left: 10px;
}

.scroll {
  height: 150px;
  overflow-y: auto;
  .scroll_i {
    height: 38px;
    line-height: 38px;
    background-color: #eee;
    padding-left: 10px;
    border: 1px solid #fff;
  }
}

.footer {
  border-top: 1px solid #888888;
  height: 38px;
  line-height: 38px;
  text-align: center;
  .footer_i {
    display: inline-block;
    width: 50%;
    border-right: 1px solid #888888;
    div {
      display: inline-block;
      width: 100%;
      border-right: 1px solid #888888;
    }
  }
}
</style>
