<template>
  <div class="e-scene-manage">
    <div v-show="!isLoggingViewShow" style="width: 100%">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['project:scene:add']"
            icon="el-icon-plus"
            plain
            size="mini"
            type="primary"
            @click="handleAdd"
            >新增</el-button
          >
          <el-button size="mini" @click="handleQuery">刷新</el-button>
        </el-col>
      </el-row>

      <div class="e-alarm-table">
        <el-table
          v-loading="tableLoading"
          :data="tableList"
          :height="total > 0 ? '470px' : '510px'"
        >
          <el-table-column
            :index="indexFormatter"
            align="center"
            label="序号"
            type="index"
            width="80px"
          ></el-table-column>

          <el-table-column
            align="left"
            label="场景名称"
            prop="sceneName"
            width="200px"
          >
            <template slot-scope="scope">
              <span :title="scope.row.sceneName" class="lay-table-textarea">
                {{ scope.row.sceneName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="场景编码"
            prop="sceneCode"
            width="200"
          >
            <template slot-scope="scope">
              <span :title="scope.row.sceneCode" class="lay-table-textarea">
                {{ scope.row.sceneCode }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            label="场景模式"
            prop="relation"
            width="120"
          >
            <template slot-scope="scope">
              <span :title="scope.row.relation" class="lay-table-textarea">
                {{ scope.row.relation }}
              </span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="状态" prop="runStatus">
            <template slot-scope="scope">
              <span class="lay-table-textarea">
                {{ scope.row.runStatus == "0" ? "启用" : "停止" }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="创建时间"
            prop="createTime"
            width="160px"
          >
            <template slot-scope="scope">
              <span :title="scope.row.createTime" class="lay-table-textarea">
                {{ scope.row.createTime }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="操作"
            prop="alarmTime"
            width="300"
          >
            <template slot-scope="scope">
              <el-button
                v-hasPermi="['project:scene:edit']"
                icon="el-icon-edit"
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                >编辑</el-button
              >

              <el-button
                v-hasPermi="['project:scene:remove']"
                icon="el-icon-delete"
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >

              <el-button
                v-hasPermi="['project:scene:status']"
                :icon="
                  scope.row.runStatus == '0'
                    ? 'el-icon-open'
                    : 'el-icon-turn-off'
                "
                size="mini"
                type="text"
                @click="handleChangeStatus(scope.row)"
                >{{ scope.row.runStatus == "0" ? "停止" : "启用" }}</el-button
              >

              <el-button
                v-hasPermi="['project:scene:run']"
                icon="el-icon-video-play"
                size="mini"
                type="text"
                @click="handleSingleRun(scope.row)"
                >执行</el-button
              >

              <el-button
                icon="el-icon-takeaway-box"
                size="mini"
                type="text"
                @click="handleLoggingView(scope.row)"
                >指令历史</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :limit.sync="page.pageSize"
          :page.sync="page.pageNum"
          :total="total"
          @pagination="getTableList"
        />
      </div>
      <div class="e-dialog">
        <!-- 添加或修改建筑类型对话框 -->
        <dialog-template
          :title="title"
          :visible="open"
          width="880px"
          @close="open = false"
        >
          <el-form
            ref="form"
            slot="dialog-center"
            :model="form"
            :rules="rules"
            label-width="100px"
            style="padding-right: 20px"
          >
            <el-row :gutter="10">
              <el-col :span="12">
                <el-form-item label="场景名称：" prop="sceneName">
                  <el-input
                    v-model="form.sceneName"
                    placeholder="请输入场景名称"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="场景编码：" prop="sceneCode">
                  <el-input
                    v-model="form.sceneCode"
                    placeholder="请输入场景编码"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
              <el-form-item label="描述" prop="buildingTypeName">
                <el-input
                  v-model="form.buildingTypeName"
                  placeholder="请输入类型名称"
                />
              </el-form-item>
            </el-col> -->
              <el-col :span="24">
                <span
                  class="e-form-item__label"
                  style="
                    text-align: right;
                    vertical-align: middle;
                    font-size: 14px;
                    color: #606266;
                    width: 80px;
                    word-break: break-all;
                    font-weight: 600;
                  "
                >
                  触发器列表：
                </span>
                <div>
                  <e-tag-card
                    v-for="(item, idx) in form.triggers"
                    :key="item.guid "
                    style="margin-top: 5px"
                    type="info"
                  >
                    <e-scene-triggers
                      slot="body"
                      :dataItem="item"
                      :sourceId="sourceId"
                      @change="
                        (v) => {
                          form.triggers[idx] = v;
                        }
                      "
                      @handleDel="
                        (v) => {
                          form.triggers.splice(idx, 1);
                        }
                      "
                    ></e-scene-triggers>
                  </e-tag-card>
                </div>
                <el-button
                  icon="el-icon-plus"
                  type="text"
                  @click="handleAddTrigger"
                  >新增触发器</el-button
                >
              </el-col>
              <el-col :span="24">
                <div>
                  <span
                    class="e-form-item__label"
                    style="
                      text-align: right;
                      vertical-align: middle;
                      font-size: 14px;
                      color: #606266;
                      width: 80px;
                      word-break: break-all;
                      font-weight: 600;
                    "
                    >执行动作：</span
                  >
                </div>
                <div>
                  <e-tag-card
                    v-for="(item, idx) in form.actions"
                    :key="item.guid "
                    style="margin-top: 5px"
                    type="info"
                  >
                    <e-scene-action
                      slot="body"
                      :dataItem="item"
                      :sourceId="sourceId"
                      @change="
                        (v) => {
                          form.actions[idx] = v;
                        }
                      "
                      @handleDel="
                        (v) => {
                          form.actions.splice(idx, 1);
                        }
                      "
                    />
                  </e-tag-card>
                </div>
                <el-button
                  icon="el-icon-plus"
                  type="text"
                  @click="handleAddAction"
                  >新增动作</el-button
                >
              </el-col>
            </el-row>
          </el-form>
          <div slot="dialog-footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="submitForm"
              >确 定</el-button
            >
            <el-button size="mini" @click="cancel">取 消</el-button>
          </div>
        </dialog-template>
      </div>
    </div>
    <e-logging
      v-if="isLoggingViewShow"
      :sceneInfo="loggingSourceObject"
      :sourceId="loggingSourceId"
      @handleLinkToHome="
        () => {
          isLoggingViewShow = false;
        }
      "
    ></e-logging>
  </div>
</template>
<script>
import {
  projectSceneList,
  projectSceneAdd,
  projectSceneUpdate,
  projectSceneDetail,
  projectSceneDelete,
  projectSceneChangeStatus,
  projectSceneSingleRun,
} from "@/api/iot/project_new";
import DialogTemplate from "@/components/DialogTemplate";
import ESceneTriggers from "./ESceneTriggers/index";
import ETagCard from "@/components/Cards/ETagCard";
import ESceneAction from "./ESceneAction/index";
import ELogging from "./ELogging";

export default {
  name: "ESceneManage",
  props: {
    projectInfo: {
      type: Object,
      require: true,
    },
    sourceId: {
      type: [Number, String],
      require: true,
    },
    tempType: {
      type: String,
      require: true,
    },
    isFoldRight: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    isShrink: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  components: {
    DialogTemplate,
    ESceneTriggers,
    ETagCard,
    ESceneAction,
    ELogging,
  },
  data() {
    return {
      queryParams: {},
      isLoggingViewShow: false,
      loggingSourceId: null,
      loggingSourceObject: {},
      page: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: "createTime",
        isAsc: "desc",
      },
      title: "新增场景",
      total: 0,
      tableList: [],
      tableLoading: false,
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sceneName: [
          { required: true, message: "场景名称不能为空", trigger: "change" },
        ],
        sceneCode: [
          {
            required: true,
            validator: this.chenking_sceneCode,
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    isFoldRight() {
      this.$forceUpdate();
    },
    isShrink() {
      this.$forceUpdate();
    },
    sourceId(val) {
      if (val !== null && val !== undefined) {
        this.handleQuery();
      }
    },
    tempType(val) {
      if (val) {
        this.init();
      }
    },
  },
  mounted() {},
  created() {
    this.init();
  },
  methods: {
    chenking_sceneCode(rule, value, callback) {
      const isExp = /^[A-Z a-z 0-9 _ - $]{0,36}$/;
      if (!this.form.sceneCode || this.form.sceneCode.length <= 0) {
        callback(new Error("场景编码不能为空！"));
      } else if (this.form.sceneCode && !isExp.test(this.form.sceneCode)) {
        callback(new Error("格式不正确(数字，英文字母大小写，36个字符)！"));
      } else {
        callback();
      }
    },
    handleAddAction() {
      let obj = {
        guid: this.getGuid(),
        orderBy: this.form.actions.length + 1 || 1,
        recordStatus: 0,
        actionId: null,
        sceneId: this.form.recordId || null,
        actionType: "DEVOUTPUT",
        actionAttr: null,
        sceneActionDevices: [],
        sceneActionNotifierContacts: [],
      };
      this.form.actions.push(obj);
    },
    // 获取标记
    handleAddTrigger() {
      let triggersPop = [...this.form.triggers].pop();
      let obj = {
        guid: this.getGuid(),
        orderBy: triggersPop ? triggersPop.orderBy + 1 : 1,
        method: "",
        conditions: [],
        intervalVal: "60",
        intervalUnit: "SECONDS",
        sceneTriggerDevices: [],
        execScript: "",
      };
      this.form.triggers.push(obj);
    },
    // 验证 触发器 条件
    validateTrigger() {
      if (!this.form.triggers || this.form.triggers.length <= 0) {
        this.msgError("至少有一条触发器！");
        return false;
      }
      var isTrue = true;
      this.form.triggers.forEach((e) => {
        if (!e.method) {
          this.msgError("设备触发__至少选择一种类型！");
          isTrue = false;
        }
        if (
          e.method === "DEVICE" &&
          (!e.conditions || e.conditions.length <= 0)
        ) {
          this.msgError("设备触发__至少选择一条设备以及触发条件！");
          isTrue = false;
        }
      });
      return isTrue && this.validateAction();
    },
    // 验证 执行条件
    validateAction() {
      if (!this.form.actions || this.form.actions.length <= 0) {
        this.msgError("至少有一执行条件！");
        return false;
      }
      var isTrue = true;
      this.form.actions.forEach((e) => {
        if (
          e.actionType === "DEVOUTPUT" &&
          e.sceneActionDevices[0] &&
          (!e.sceneActionDevices[0]["cmdKey"] ||
            !e.sceneActionDevices[0]["deviceKey"])
        ) {
          this.msgError("执行条件中有条件未选择设备或者分组！");

          isTrue = false;
        }
        if (e.actionType === "NOTIFIER") {
          let arr = e.sceneActionNotifierContacts.filter((v) => {
            if ((!v["contactsRelList"]) || v["contactsRelList"].length <= 0) {
              return v;
            }
          });
          if (arr && arr.length > 0) {
            this.msgError("执行条件中有条件未选择联系人！");
            isTrue = false;
          }
        }
      });
      return isTrue;
    },
    submitForm() {
      console.log("submit---", this.form);
      this.$refs["form"].validate((valid) => {
        if (valid && this.validateTrigger()) {
          if (this.form.recordId != null) {
            projectSceneUpdate(
              Object.assign(this.form, {
                projectId: this.sourceId,
              })
            ).then((response) => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.handleQuery();
            });
          } else {
            projectSceneAdd(
              Object.assign(this.form, {
                projectId: this.sourceId,
              })
            ).then((response) => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.handleQuery();
            });
          }
        }
      });
    },
    indexFormatter(val) {
      return val + 1 + (this.page.pageNum - 1) * this.page.pageSize;
    },
    handleAdd() {
      this.reset();
      this.title = "新增场景";
      this.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      projectSceneDetail(row.recordId).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "编辑场景";
      });
    },
    handleChangeStatus(row) {
      this.$confirm(
        row.runStatus == "0" ? "是否停止场景?" : "是否开启场景?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(function () {
          return projectSceneChangeStatus({
            recordId: row.recordId,
            runStatus: row.runStatus == "0" ? "1" : "0",
          });
        })
        .then(() => {
          this.handleQuery();
          this.msgSuccess("成功");
        });
    },
    handleLoggingView(row) {
      this.loggingSourceId = row.recordId;
      this.loggingSourceObject = row;
      this.isLoggingViewShow = true;
    },
    /**
     * 场景 执行一次 方法
     * @param {*} row
     */
    handleSingleRun(row) {
      this.$confirm("是否确认执行一次此场景?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return projectSceneSingleRun(row.recordId);
        })
        .then(() => {
          this.handleQuery();
          this.msgSuccess("请求成功!");
        });
    },
    handleDelete(row) {
      const projectIds = row.recordId;
      this.$confirm("是否删除该选项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return projectSceneDelete(projectIds);
        })
        .then(() => {
          this.handleQuery();
          this.msgSuccess("删除成功");
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        recordId: null,
        recordStatus: 0,
        buildingTypeCode: null,
        buildingTypeName: null,
        triggers: [],
        actions: [],
      };
      this.resetForm("form");
    },
    init() {
      this.handleQuery();
    },
    handleQuery() {
      this.page.pageNum = 1;
      this.getTableList();
    },
    // 查询 表格 数据
    getTableList() {
      this.tableLoading = true;
      let query = JSON.parse(JSON.stringify(this.queryParams));
      projectSceneList(
        Object.assign(
          query,
          {
            projectId: this.sourceId,
          },
          this.page
        )
      ).then((res) => {
        this.tableList = res.rows;
        this.tableLoading = false;
        this.total = res.total;
      });
    },
  },
};
</script>
<style lang="scss">
.e-scene-manage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .e-alarm-heard {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .heard-query {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: calc(100% - 300px);
      .data-type {
        width: 32px;
        height: 32px;
        background: #f4f5f7;
        border-radius: 50%;
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #6b778c;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 5px;
        cursor: default;
      }
      .data-type-selected {
        background: #1890ff;
        color: #f4f5f7;
      }
      .other-query {
        display: flex;
        width: 420px;
        justify-content: space-evenly;
        align-items: center;
      }
      .other-print {
        font-size: 20px;
      }
      .other-print:hover {
        color: #1890ff;
      }
    }
  }
  .e-alarm-echarts {
    width: 100%;
    height: 300px;
  }
  .e-alarm-table {
    width: 100%;
    padding-top: 10px;
  }
  .pagination-container {
    margin-top: 5px;
    height: 35px;
  }
  .e-form-item__label {
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    width: 80px;
    word-break: break-all;
    font-weight: 600;
  }
}
</style>
