/* 规则配置 */
<template>
  <div class="rule-config">
    <Input
      v-model="showValue"
      placeholder="请输入"
      icon="ios-funnel-outline"
      @on-click="onIconclick"
      disabled
    />
    <Modal
      v-model="openControl"
      :title="modalTitle"
      :mask="true"
      :mask-closable="false"
      :width="472"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <div class="modalCotent">
        <div class="content-head">
          <span class="head-tip">{{headTitle}}</span>
          <span class="head-operate" @click="addRule">添加事件</span>
        </div>
        <div class="rule-item" v-for="(item,index) in ruleLists" :key="index">
          <i class="iconfont iconmd-settings clear-item" @click="clickItem(index)"></i>
          <div class="setting" v-if="item.showTip">
            <div v-bind:class="[isActive?'active':'normal']" @click="up(index)">上移</div>
            <div v-bind:class="[isActive?'active':'normal']" @click="Top(index)">置顶</div>
            <div v-bind:class="[isActive?'active':'normal']" @click="deleteItem(index)">删除</div>
          </div>
          <URLAndField :item="item.config" :tableConfig="tableConfig" />
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import URLAndField from "@/components/URLAndField";
export default {
  components: { URLAndField },
  props: {
    modalTitle: {
      type: String,
      default: "规则配置"
    },
    headTitle: {
      type: String,
      default: "节点必经规则"
    },
    defaultData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      showValue: "", //输入框绑定值
      openControl: false, //控制弹框打开还是关闭
      ruleLists: [
        {
          showTip: false,
          config: {}
        }
      ],
      isActive: false, //是否激活
    };
  },
  methods: {
    onIconclick() {
      this.openControl = true;
    }, //输入框图标点击事件
    ok() {
      this.$emit("getResult");
    }, //确定
    cancel() {}, //取消
    addRule() {
      this.ruleLists.push({
        showTip: false,
        config: {}
      });
    }, //添加规则
    clickItem(index) {
      this.ruleLists[index].showTip = !this.ruleLists[index].showTip;
    }, //清除规则
    up(index) {
      let current = this.ruleLists[index];
      this.ruleLists.splice(index - 1, 1, current);
      this.ruleLists.splice(index + 1, 1);
    }, //上移
    Top(index) {
      let current = this.ruleLists[index];
      this.ruleLists.splice(index, 1);
      this.ruleLists.unshift(current);
    }, //置顶
    deleteItem(index) {
      this.ruleLists.splice(index, 1);
    } //删除
  },
  mounted() {}
};
</script>
<style lang="scss">
.rule-config {
}
.modalCotent {
  width: 440px;
  .content-head {
    padding: 0 10px 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .head-tip {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(146, 146, 146, 1);
      line-height: 20px;
    }
    .head-operate {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(16, 142, 233, 1);
      line-height: 20px;
    }
  }
  .rule-item {
    width: 440px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(220, 222, 226, 1);
    padding: 8px 40px 8px 0px;
    position: relative;
    margin-bottom: 10px;
    .setting {
      width: 100px;
      height: 112px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      position: absolute;
      right: 10px;
      top: 38px;
      z-index: 100;
    }

    .clear-item {
      position: absolute;
      right: 10px;
      top: 16px;
      width: 14px;
      height: 14px;
      color: rgba(16, 142, 233, 1);
    }
    .normal {
      height: 34px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(81, 90, 110, 1);
      line-height: 34px;
      padding-left: 16px;
    }
    .active {
      height: 34px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(16, 142, 233, 1);
      height: 34px;
      background: rgba(243, 243, 243, 1);
      padding-left: 16px;
    }
    .url-and-field .showDetail {
      margin-top: 10px;
      margin-left: 10px;
      /* margin-right: -10px; */
      width: 420px;
    }
  }
}
</style>