// 连线规则配置界面
/* eslint-disable vue/no-side-effects-in-computed-properties */
<template>
  <div class="InformationBlock">
    <div  class="content">
      <div  :class="`rule_content`">
        <div  class="rule">
          <p class="title">
            <span>配置规则</span>
            <span @click="addRule" v-if="!readOnly">添加规则</span>
          </p>
          <div class="ruleContent" v-if="configData.ruleList.length > 0">
            <RuleConfigurationComponent
              v-for="(rule,index) in configData.ruleList"
              v-bind:key="Math.random()"
              :data="rule"
              :index="index"
              :TABLE_ID="TABLE_ID"
              :readOnly="readOnly"
            >
            <span slot="delete" class="deleteIcon" @click.stop="delectRule(index)" v-if="!readOnly">
              <i class="iconfont iconbj_delete"></i>
            </span>
            </RuleConfigurationComponent>
          </div>
        </div>
      </div>
      
    </div>
    <p>
      <Button type="fcdefault" @click="closeDrawer">取消</Button>
      <Button type="primary" @click="saveConfig" v-if="!readOnly">确定</Button>
    </p>
  </div>
</template>
<script>
import ProcessNodeConfig from '@/components/ProcessNodeConfig'
import RuleConfigurationComponent from '@/components/RuleConfigurationComponent'
export default {
  name:'linkInfo',
  components:{RuleConfigurationComponent},
  props:{
    configData:{
    },
    TABLE_ID:{},  //主表数据
    status:null,
    readOnly:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    defaultData () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      return this.configData
    },
    currentComponent () {
      return ProcessNodeConfig
    }
  },
  data () {
    return {
      defaultObj:{}
    }
  },
  created () {
    
    this.defaultObj = JSON.parse(JSON.stringify(this.configData))
  },
  methods:{
    addRule () {  //添加规则
        this.configData.ruleList.push({
          name: null,
          rule: null,
          ruleType: 0,
          threshold: {
            id:'',
            label:''
          }
        })
    },
    delectRule (itemIndex) { //删除规则
      this.configData.ruleList.splice(itemIndex, 1)
    },
    saveConfig () {  //确定按钮点击
      // 存在配置规则，校验各项是否必填
        let errorFlag = false //判断标志
        if(this.configData.ruleList && this.configData.ruleList.length > 0){
          this.configData.ruleList.map(item => {
            if(item.ruleType === 0 && (!item.fTableInfo || !item.rule || !item.threshold.id)){  //直接选择
              this.$Modal.fcError({
                title:'错误',
                content:'请完善规则配置'
              })
              errorFlag = true
              return
            }

            if(item.ruleType === 1 && !item.businessExpansion){
              this.$Modal.fcError({
                title:'错误',
                content:'请完善规则配置'
              })

              errorFlag = true
              return
            }
          })
        }

        if(!errorFlag){
          this.$emit('closeDrawer')
        }
    },
    closeDrawer () {  //取消按钮点击
      this.$parent.$parent.pathMsg[Number(this.configData.key)] = this.defaultObj
      this.$emit('closeDrawer')
    }
  }
}
</script>
<style lang="scss" scoped>

  
  .InformationBlock{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    >p{
      text-align: right;
      margin-top: 16px;

      >button:first-child{
        margin-right: 10px;
      }
    }
    .content{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: auto;

      

      .rule_content{
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        .rule{
          flex: 1;
          display: flex;
          flex-direction: column;

          >.title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;

            span:first-child{
              font-size:14px;
              font-family:PingFangSC-Regular;
              font-weight:400;
              color:rgba(146,146,146,1);
              line-height:20px;
            }
            span:last-child{
              font-size:14px;
              font-family:PingFangSC-Regular;
              font-weight:400;
              color:rgba(16,142,233,1);
              line-height:20px;
              cursor: pointer;
            }
          }

          >.form{
            height:64px;
            background:rgba(255,255,255,1);
            border:1px solid rgba(220,222,226,1);
            border-bottom: 0;
            margin-bottom: 0;
          }

          >.ruleContent{
            border:1px solid rgba(220,222,226,1);
            overflow: auto;
            max-height: 100%;

            >.RuleConfigurationComponent{
              border-top:1px solid rgba(220,222,226,1);
              &:first-child{
                border-top: none;
              }
            }
          }
        }
      }
    }

    .form{
      background:rgba(255,255,255,1);
      border:1px solid rgba(220,222,226,1);
      padding: 16px 40px 16px 0;
      margin-bottom: 16px;

      >p{
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;

        &:last-child{
          margin-bottom: 0;
        }

        >.label{
          display: inline-block;
          width: 100px;
          text-align: right;
          margin-right: 8px;
        }

        >div{
          flex:1;
        }

        span.tips{
          font-size:12px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(146,146,146,1);
          line-height:16px;
        }

        &.tips{
          margin-top: 4px;
        }
      }
    }

    
  }
</style>