<template>
  <el-drawer :append-to-body="true" title="条件设置" :visible.sync="$store.state.auditSetting.conditionDrawer" direction="rtl" class="condition_copyer" size="550px" :before-close="saveCondition">
    <select v-model="conditionConfig.priorityLevel" class="priority_level">
      <option v-for="item in conditionsConfig.conditionNodes.length" :value="item" :key="item">优先级{{ item }}</option>
    </select>
    <div class="demo-drawer__content">
      <div class="condition_content drawer_content">
        <el-form ref="saveForm" :model="conditionConfig" label-width="100px" style="height: 500px" :inline="false">
          <div class="tip">
            <p>当审批单同时满足以下条件时进入此流程</p>
            <p>请在下方输入条件表达式（例如data.copyrightName == '示例'）</p>
          </div>
          <Input type="textarea" label="条件表达式" prop="expression" maxlength="100"/>
        </el-form>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCondition">确 定</el-button>
        <el-button @click="$store.commit('updateCondition', false)">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
const AuditTypeEnum = {
  COPYRIGHT: "1",
  ISSUE: "2",
  CONTRACT: "3",
};

export default {
  props: ["auditType"],
  data() {
    return {
      conditionVisible: false,
      conditionsConfig: {
        conditionNodes: [],
      },
      conditionConfig: {
        expression: "",
      },
      PriorityLevel: "",
      conditions: [],
    };
  },
  computed: {
    conditionsConfig1() {
      return this.$store.state.auditSetting.conditionsConfig;
    },
    expressionData() {
      const { COPYRIGHT, ISSUE, CONTRACT } = AuditTypeEnum;
      let data = "";
      switch (this.auditType) {
        case COPYRIGHT:
          data = copyright;
          break;
        case ISSUE:
          data = issue;
          break;
        case CONTRACT:
          data = contract;
          break;
      }
      return result;
    },
  },
  watch: {
    conditionsConfig1(val) {
      this.conditionsConfig = val.value;
      this.PriorityLevel = val.priorityLevel;
      this.conditionConfig = val.priorityLevel
        ? this.conditionsConfig.conditionNodes[val.priorityLevel - 1]
        : { expression: "" };
    },
  },
  methods: {
    saveCondition() {
      this.$store.commit("updateCondition", false);
      var a = this.conditionsConfig.conditionNodes.splice(
        this.PriorityLevel - 1,
        1
      ); //截取旧下标
      this.conditionsConfig.conditionNodes.splice(
        this.conditionConfig.priorityLevel - 1,
        0,
        a[0]
      ); //填充新下标
      this.conditionsConfig.conditionNodes.map((item, index) => {
        if (item.priorityLevel < this.conditionsConfig.conditionNodes.length) {
          item.priorityLevel = index + 1;
        } else {
          item.priorityLevel = 999;
        }
      });
      for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
        this.conditionsConfig.conditionNodes[i].error =
          1 == "请设置条件" &&
          i != this.conditionsConfig.conditionNodes.length - 1;
      }
      this.$store.commit("updateConditionsConfig", {
        value: this.conditionsConfig,
        flag: true,
        id: this.$store.state.auditSetting.conditionsConfig.id,
      });
    },
  },
};
</script>

<style lang="scss">
.condition_copyer {
  .el-drawer__body {
    .priority_level {
      position: absolute;
      top: 11px;
      right: 30px;
      width: 100px;
      height: 32px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(217, 217, 217, 1);
    }
  }

  .condition_content {
    padding: 20px 20px 0;

    .editor {
      width: 600px;
      height: 800px;
    }

    .tip {
      margin: 20px 0;
      width: 510px;
      padding: 17px;
      line-height: 25px;
      background: rgba(241, 249, 255, 1);
      border: 1px solid rgba(64, 163, 247, 1);
      color: #46a6fe;
      font-size: 14px;
    }

    ul {
      max-height: 500px;
      overflow-y: scroll;
      margin-bottom: 20px;

      li {
        & > span {
          float: left;
          margin-right: 8px;
          width: 70px;
          line-height: 32px;
          text-align: right;
        }

        & > div {
          display: inline-block;
          width: 370px;

          & > p:not(:last-child) {
            margin-bottom: 10px;
          }
        }

        &:not(:last-child) > div > p {
          margin-bottom: 20px;
        }

        & > a {
          float: right;
          margin-right: 10px;
          margin-top: 7px;
        }

        select,
        input {
          width: 100%;
          height: 32px;
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          border: 1px solid rgba(217, 217, 217, 1);
        }

        select + input {
          width: 260px;
        }

        select {
          margin-right: 10px;
          width: 100px;
        }

        p.selected_list {
          padding-left: 10px;
          border-radius: 4px;
          min-height: 32px;
          border: 1px solid rgba(217, 217, 217, 1);
          word-break: break-word;
        }

        p.check_box {
          line-height: 32px;
        }
      }
    }

    .el-button {
      margin-bottom: 20px;
    }
  }
}

.condition_list {
  .el-dialog__body {
    padding: 16px 26px;
  }

  p {
    color: #666666;
    margin-bottom: 10px;

    & > .check_box {
      margin-bottom: 0;
      line-height: 36px;
    }
  }
}

.demo-drawer__footer {
  padding: 10px 30px;
  border-top: 1px solid #f2f2f2;
}

.demo-drawer__footer .el-button {
  float: right;
  margin-right: 10px;
}

.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drawer_content {
  flex: 1;
}

.demo-drawer__content > div {
  border-top: 1px solid #f2f2f2;
}
</style>
