// 结束节点配置界面
/* eslint-disable vue/no-side-effects-in-computed-properties */
<template>
  <div class="InformationBlock">
    <div class="content">
      <div  :class="`form_content`">
        <div  class="form">
          <p>
            <span class="label">结束状态名称:</span>
            <Input type="text" v-model="configData.manualConfig" :disabled="readOnly"  />
          </p>
          <p>
            <span class="label">执行程序URL:</span>
            <Input type="text" v-model="configData.actionConfig[0].handleValue" :disabled="readOnly"  />
          </p>
          <p>
            <span class="label">抄送人:</span>
            <complexPop :title="'选择抄送人'" :isUse='false' :isMutiple='true' :disabled="readOnly" :resultData="JSON.parse(configData.actionConfig[1].handleValue)" @getTotalResult="getResult(...arguments)" ></complexPop>
          </p>
          <p v-if="(Object.keys(JSON.parse(configData.actionConfig[1].handleValue)).length > 0) && JSON.parse(configData.actionConfig[1].handleValue).list.length > 0">
            <span class="label">抄送类型:</span>
            <Select  v-model="configData.actionConfig[1].handleType" :disabled="readOnly" clearable>
              <Option  :value="41" :key="41">钉钉抄送人</Option>
              <Option  :value="42" :key="42">微信抄送人</Option>
            </Select>
          </p>
        </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 complexPop from "@/components/complexPop";
import {  mapState,mapMutations } from 'vuex';
export default {
  name:'endNodeInfo',
  components:{complexPop},
  props:{
    configData:{
    },
    TABLE_ID:{},  //主表数据
    status:null,
    readOnly:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    defaultData () {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.infoData = this.configData
      return this.configData
    },
    ...mapState({
      drawerObject:(state) => {
        return state.drawerObject
      }
    }),
    currentComponent () {
      return ProcessNodeConfig
    }
  },
  watch:{
    defaultData:{
      handler () {
        this.infoData = this.defaultData
      },
      deep:true
    }
  },
  data () {
    return {
      infoData:[],
      defaultObj:{}
    }
  },
  created () {
    if(this.configData.actionConfig.length === 0){
      this.configData.actionConfig = [{						//结束节点绑定的业务动作
        "id":null,					//执行动作id，新增为空，修改必传
        "handleValue":null,		//执行的动作，如具体的url
        "handleType":31,			//31：业务系统接口调用,41:钉钉抄送人，42：微信抄送人
        "extra_msg":{}		//动作额外的参数，比如接口调用的入参,抄送人："[{"csPerson":123,"csPersonName":"ABBCCSS"}]
        }]
    }
    this.defaultObj = JSON.parse(JSON.stringify(this.configData))
  },
  methods:{
    ...mapMutations(['drawerObjectChange']),
    addRule () {  //添加规则
        let index = 0
        if(this.infoData.length > 1){
          index = 1
        }else{
          index = 0
        }
        this.infoData[index].config.push({
          name: null,
          rule: null,
          threshold: {
            id:'',
            label:''
          }
        })
    },
    delectRule (itemIndex) { //删除规则
      let index = 0
      if(this.infoData.length > 1){
        index = 1
      }else{
        index = 0
      }
      this.infoData[index].config.splice(itemIndex, 1)
      this.$set(this.infoData,index,this.infoData[index])
    },
    ruleConfigChange (data,itemIndex) {  //数据修改时
      let index = 0
      if(this.infoData.length > 1){
        index = 1
      }else{
        index = 0
      }
      this.infoData[index].config[itemIndex] = data
    },
    getResult(data){
      this.configData.actionConfig[1].handleValue = JSON.stringify(data)
    },
    saveConfig () {  //确定按钮点击
      this.$emit('closeDrawer')
    },
    closeDrawer () {  //取消按钮点击
      this.$parent.$parent.nodeMsg[Number(this.configData.key)] = this.defaultObj
      this.$emit('closeDrawer')
    },
    nodeRuleConfigChange (configData) {  //中间节点数据修改
      console.log(configData)
    }
  }
}
</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;
            }
          }

          >.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>