<template>
  <div class="RuleConfigurationComponent">
    <slot name="delete"></slot>

    <p class="first">
      <span class="label">选择规则:</span>
      <Select
        v-model="confiData.ruleType"
        transfer
        @on-change="ruleTypeChange"
        :disabled="readOnly"
      >
        <Option  :value="0" :key="0">直接选择</Option>
        <Option  :value="1" :key="1">扩展程序</Option>
      </Select>
    </p>

    <p  v-if="confiData.ruleType === 0">
      <span class="label">字段名称:</span>
      <DropDownSelectFilter
        v-if="confiData.ruleType === 0"
        :disabled="readOnly"
        :data="items.props.data"
        :total-row-count="items.props.totalRowCount"
        :page-size="items.props.pageSize"
        :auto-data="items.props.AutoData"
        :hidecolumns="items.props.hidecolumns"
        :default-selected="items.props.defaultSelected"
        :transfer="true"
        :isBackRowItem="true"
        @on-fkrp-selected="fkrpSelected"
        @on-page-change="pageChange"
        @on-input-value-change="inputValueChange"
        @on-popper-show="fkrpSelectedPopperShow"
        @on-clear="fkrpSelectedClear"
      />
    </p>

    <p v-if="confiData.ruleType === 0">
      <span class="label">规则设置:</span>
      <Select v-model="confiData.rule" ref="ruleType" transfer @on-change="onChange" :disabled="readOnly || confiData.isFk">
        <Option v-for="item in options" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    </p>

    <p  v-if="confiData.ruleType === 0 && !confiData.isFk">
      <span class="label">阀值:</span>
      <Input v-if="confiData.rule !== 6" v-model="confiData.threshold.id"  :disabled="readOnly"/>
      <span class="between" v-if="confiData.rule === 6">
        <Input v-model="confiData.mixValue" @on-change="inputChange" :disabled="readOnly"/>
        <span>
          ≤   当前字段   ≤
        </span>
        <Input v-model="confiData.maxValue" @on-change="inputChange" :disabled="readOnly"/>
      </span>
    </p>

    <p v-show="confiData.isFk" v-if="confiData.ruleType === 0">
      <span class="label">阈值:</span>
      <DropDownSelectFilter
        :disabled="readOnly"
        :data="refcolumn.props.data"
        :total-row-count="refcolumn.props.totalRowCount"
        :page-size="refcolumn.props.pageSize"
        :auto-data="refcolumn.props.AutoData"
        :hidecolumns="refcolumn.props.hidecolumns"
        :default-selected="refcolumn.props.defaultSelected"
        :transfer="true"
        @on-fkrp-selected="refcolumnFkrpSelected"
        @on-page-change="refcolumnPageChange"
        @on-input-value-change="refcolumnInputValueChange"
        @on-popper-show="refcolumnFkrpSelectedPopperShow"
        @on-clear="refcolumnFkrpSelectedClear"
      />
    </p>

    <p v-if="confiData.ruleType === 1">
      <span class="label">业务扩展	:</span>
      <Input v-model="confiData.businessExpansion" :disabled="readOnly" />
    </p>

     <!-- <p>
      <span class="label">扩展参数:</span>
      <Input v-model="confiData.expansionMsg" />
    </p> -->

  </div>
</template>
<script>
  import {
      ruledconfig,
      ruledconfigzid,
      ruledfrr
    } from "@/api/activiti/definition";
export default {
  name:'RuleConfigurationComponent',
  props:{
    index:{
      type:Number,
      default:0
    },
    deleteFlag:{
      type:Boolean,
      default:false
    },
    data:{
      type:Object,
      default () {
        return {}
      }
    },
    TABLE_ID:{},  //主表数据
    readOnly:{
      type:Boolean,
      default:false
    }
  },
  data () {
    return {
      ruleData:{},
      confiData:{},
      options:[
        {
          value:1,
          label:'大于等于'
        },
        {
          value:2,
          label:'小于'
        },
        {
          value:3,
          label:'大于'
        },
        {
          value:4,
          label:'小于等于'
        },
        {
          value:5,
          label:'等于'
        },
        {
          value:6,
          label:'介于两个数之间'
        }
      ],
      items:{
        props:{
          data:{},
          totalRowCount:0,
          pageSize:10,
          AutoData:[],
          hidecolumns:['id','rowItem','OBTAINMANNER','REF_COLUMN_ID'],
          defaultSelected:[]
        }
      },
      refcolumn:{
        props:{
          data:{},
          totalRowCount:0,
          pageSize:10,
          AutoData:[],
          hidecolumns:['id'],
          defaultSelected:[]
        }
      }
    }
  },
  methods:{
    ruleTypeChange () {
        this.confiData.businessExpansion = ''
        this.confiData.threshold.id = null
        this.confiData.threshold.label = null
        this.confiData.target = ''
        this.confiData.targetName = ''
        this.confiData.maxValue = null
        this.confiData.minValue = null
        this.confiData.rule = null
        this.confiData.fTableInfo = {}
        this.refcolumn.props.totalRowCount = 0
        this.refcolumn.props.data = {}
        this.refcolumn.props.defaultSelected = []
        this.refcolumn.props.AutoData = []
        this.items.props.totalRowCount = 0
        this.items.props.data = {}
        this.items.props.defaultSelected = []
        this.items.props.AutoData = []
    },
    inputChange () {
      this.confiData.threshold.id = `${this.confiData.mixValue}-${this.confiData.maxValue}`
    },
    onChange () {
      this.confiData.mixValue = null
      this.confiData.maxValue = null
      this.confiData.threshold = {
        id:'',
        label:''
      }
    },
    // fkrpSelected event
    fkrpSelected(value) {
      console.log(value)
      // 判断多选字段中是否存在ak字段，处理ak字段的阀值
      if(value.length === 0){
        this.confiData.isFk = false
        this.confiData.fTableInfo.REF_COL_ID = null
      }else{
        let isak = 0

        let isNormal = false
        value.map((item) => {
          if(!item.rowItem.OBTAINMANNER){
            this.$Modal.fcError({
              title:'错误',
              content:'请将字段表的OBTAINMANNER字段配置为列表可见！'
            })

            this.items.props.defaultSelected = []

            return
          }
          if(item.rowItem && item.rowItem.OBTAINMANNER.val === '外键(FK)关联'){  //ak字段
            isak++
          }else{
            isNormal = true
          }
          return item
        })

        if((isak && isNormal) || isak > 1){  //同时存在两种字段
          this.$Modal.fcWarning({
            title:'警告',
            content:'同时存在多种类型字段或多个外健关联字段，请生成新的配置规则!'
          })
          let targetArr = this.data.target.split(',')
          let targetNameArr = this.data.targetName.split(',')

          setTimeout(() => {
            this.items.props.defaultSelected = targetArr.map((item,index) => {
              return {
                'ID':targetArr[index],
                'Label':targetNameArr[index]
              }
            })
          },200)

          return
        }else{
          this.confiData.isFk = isak?true:false
          if(isak){
            this.confiData.rule = 5
          }
        }
      }
      if(this.confiData.isFk){
        this.confiData.fTableInfo.REF_COL_ID = value[0].rowItem.REF_COLUMN_ID.val.split('.')[0]
      }
      this.confiData.fTableInfo.rowItem = value.map(item => item.rowItem)
      this.confiData.target = value.map(item => item.ID).join(',')
      this.confiData.targetName = value.map(item => item.Label).join(',')
    },
    inputValueChange(value) {
      console.log(34556)
      ruledconfig({
        DESCRIPTION:value,
        AD_TABLE_ID:this.TABLE_ID[0].ID
        }).then(res => {
        if(res.code === 0){
          if(res.data.row && res.data.row.length > 0 && !res.data.row[0].OBTAINMANNER){
            this.$Modal.fcError({
              title:'错误',
              content:'请将字段表的OBTAINMANNER字段配置为列表可见！'
            })
            this.items.props.defaultSelected = []
            return
          }
          this.items.props.AutoData = res.data.row.reduce((arr,item) => {
            arr.push(Object.assign({
              value:item.NAME.val,
              id:item.ID.val,
              NAME:item.DESCRIPTION.val,
            },{OBTAINMANNER:item.OBTAINMANNER,REF_COLUMN_ID:item.REF_COLUMN_ID}))
            return arr
          },[]);
        }

      })
    },
    fkrpSelectedClear() {
      this.confiData.target = null
      this.confiData.targetName = null
      this.confiData.isFk = false
      this.confiData.fTableInfo.REF_COL_ID = null
      this.confiData.threshold = {
        id:'',
        label:''
      }
      this.items.props.defaultSelected = []
    },
    pageChange(value, instance) {
      console.log(34556)
      ruledconfig({
        pageSize:instance.pageSize,
        page:value,
        AD_TABLE_ID:this.TABLE_ID[0].ID
      }).then(res => {
        if(res.code === 0){
          if(res.data.row && res.data.row.length > 0 && !res.data.row[0].OBTAINMANNER){
            this.$Modal.fcError({
              title:'错误',
              content:'请将字段表的OBTAINMANNER字段配置为列表可见！'
            })
            return
          }
          this.items.props.data = res.data;
          this.items.props.totalRowCount = res.data.totalRowCount;
        }

      })

    },
    fkrpSelectedPopperShow(instance) {

      ruledconfig({
          pageSize:instance.pageSize,
          page:1,
          AD_TABLE_ID:this.TABLE_ID[0].ID
        }).then(res => {
          if(res.code === 0){
            if(res.data.row && res.data.row.length > 0 && !res.data.row[0].OBTAINMANNER){
              this.$Modal.fcError({
                title:'错误',
                content:'请将字段表的OBTAINMANNER字段配置为列表可见！'
              })
              return
            }
            this.items.props.data = res.data;
            this.items.props.totalRowCount = res.data.totalRowCount;
            console.log(res.data.totalRowCount,34556)
            console.log(this.items.props.data)
          }

        })
    },

    //refcolumn event
    refcolumnFkrpSelected(value) {
      // this.confiData.target = value.map(item => item.ID).join(',')
      // this.confiData.targetName = value.map(item => item.Label).join(',')
      this.confiData.threshold = {
        id:value[0].ID,
        label:value[0].Label
      }
    },
    refcolumnInputValueChange(value) {
      ruledconfigzid({
        AK:value,
        REF_COL_ID:this.confiData.target,
        TABLE_NAME:this.confiData.fTableInfo.REF_COL_ID
        }).then(res => {
        if(res.code === 0){
          this.refcolumn.props.AutoData = res.data.reduce((arr,item) => {
            arr.push({
              value:item.value,
              id:item.id,
              NAME:item.CUSTOMER_NAME
            })
            return arr
          },[]);
        }

      })
    },
    refcolumnFkrpSelectedClear() {
      this.confiData.threshold = {
        id:'',
        label:''
      }
    },
    refcolumnPageChange(value, instance) {
      ruledfrr({
        pageSize:instance.pageSize,
        page:value,
        REF_COL_ID:this.confiData.target,
        TABLE_NAME:this.confiData.fTableInfo.REF_COL_ID
      }).then(res => {
        if(res.code === 0){
          this.refcolumn.props.data = res.data;
          this.refcolumn.props.totalRowCount = res.data.totalRowCount;
        }

      })

    },
    refcolumnFkrpSelectedPopperShow(instance) {
      ruledfrr({
          pageSize:instance.pageSize,
          page:1,
          REF_COL_ID:this.confiData.target,
          TABLE_NAME:this.confiData.fTableInfo.REF_COL_ID
        }).then(res => {
          if(res.code === 0){
            this.refcolumn.props.data = res.data;
            this.refcolumn.props.totalRowCount = res.data.totalRowCount;
          }

        })
    },
  },
  created () {
    this.confiData = this.data
    this.$set(this.confiData,'isFk',this.data.isFk?this.data.isFk:false)
    if(this.confiData.rule === 6){
      this.confiData.mixValue = this.confiData.threshold.id?this.confiData.threshold.id.split('-')[0]:''
      this.confiData.maxValue = this.confiData.threshold.id?this.confiData.threshold.id.split('-')[1]:''
    }else{
      this.confiData.mixValue = ''
      this.confiData.maxValue = ''
    }

    //处理字段名称默认值
    if(!this.data.fTableInfo){
        this.confiData.fTableInfo = {
          REF_COL_ID:null,
          rowItem:{}
        }
      }
    if(this.data.target){
      let targetArr = this.data.target.split(',')
      let targetNameArr = this.data.targetName.split(',')
      this.items.props.defaultSelected = targetArr.map((item,index) => {
        return {
          'ID':targetArr[index],
          'Label':targetNameArr[index],
          'rowItem':this.confiData.fTableInfo?this.confiData.fTableInfo.rowItem[index]:{}
        }
      })
    }else{
      this.items.props.defaultSelected = []
    }


    //处理阀值默认值
    if(this.data.threshold){
      this.refcolumn.props.defaultSelected = [{
        'ID':this.data.threshold.id,
        'Label':this.data.threshold.label
      }]
    }else{
      this.refcolumn.props.defaultSelected = []
    }
    this.ruleData = this.data
  }
}
</script>
<style lang="less" scoped>
.RuleConfigurationComponent{
  padding: 16px 40px 16px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;

  .deleteIcon{
    position: absolute;
    right: 10px;
    color:rgba(16, 142, 233, 1);
    cursor: pointer;
  }

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

    &.first{
      margin-top: 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;
    }

    .between{
      flex: 1;
      display: flex;

      >div{
        flex: 1;
      }

      >span{
        display: flex;
        width: 100px;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
