/* 服务节点配置 */
<template>
  <div class="service-node-config">
    <div class="node-name">节点配置</div>
    <FormItemComponent
      class="node-config-content"
      :formItemLists="formLists"
      :buttonType="false"
      :defaultColumn="1"
      @formChange="formChange"
    ></FormItemComponent>
    <div class="btnArea">
      <Button type="text" class="cancel" @click="cancel">取消</Button>
      <Button type="primary" @click="ok">确定</Button>
    </div>
  </div>
</template>
<script>
import FormItemComponent from "@/components/FormItemComponent";
import ItemComponent from "@/components/ItemComponent";
export default {
  components: { FormItemComponent },
  props: {
    configData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      formLists: [
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "select",
            title: "服务实现",
            filed: "handleType",
            value: "",
            required: true,
            // show: true, //控制组件是否显示
            props: {
              clearable: false
            },
            options: [
              // {
              //   value: 51,
              //   label: "RESET"
              // },
              // {
              //   value: 52,
              //   label: "消息系统"
              // }
            ],
            event: {
              change: val => {
                this.onChange(val);
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "select",
            title: "请求状态",
            filed: "requestStaus",
            required: true,
            value: "",
            hidden: true, //是否隐藏该字段
            props: {
              regx: /^[0-9]*$/
            },
            options: [
              {
                value: 1,
                label: "异步"
              },
              {
                value: 2,
                label: "同步"
              }
            ],
            event: {
              change: val => {
                this.statusChange(val);
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "selectInput",
            title: "重试次数",
            filed: "tryNum",
            required: true,
            hidden: true,
            value: "",
            slot: true,
            slotValue: "",
            slotfiled: "tryType",
            props: {
              readonly: false
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "Switch",
            title: "阻塞",
            filed: "block",
            value: false,
            hidden: true
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "URL",
            filed: "url",
            required: true,
            hidden: true
            // props: {
            //   regx: /^[0-9]*$/
            // }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "select",
            title: "消息类型",
            filed: "msgType",
            value: null,
            required: true,
            hidden: true, //控制组件是否显示
            props: {
            },
            options: [],
            event: {
              change: val => {
                
              }
            }
          }
        },
        {
          row: 1,
          col: 1,
          component: ItemComponent,
          item: {
            type: "input",
            title: "服务参数",
            filed: "extraMsg",
            value: "",
            required: true,
            // show: true, //控制组件是否显示
            props: {
              
            }
          }
        }
      ],
      defaultData: {}, //默认值
      resultData: {}, //最终的结果
      verifyMessage: "" //提示信息
    };
  },
  computed: {
    tryType: function() {
      return this.formLists[2].item.slotValue;
    }
  },
  watch: {
    tryType: {
      handler: function(newVal) {
        if (newVal === 1) {
          this.formLists[2].item.value = "不限次数";
          this.formLists[2].item.props.readonly = true;
          if(this.formLists[2].item.props.number){
            this.formLists[2].item.props.number=false;
          }
          if(this.formLists[2].item.props.regx){
            delete this.formLists[2].item.props.regx
          }
        } else {
          this.formLists[2].item.props.readonly = false;
          this.formLists[2].item.value=''
          this.formLists[2].item.props.number?this.formLists[2].item.props.number=true:this.$set(this.formLists[2].item.props, "number", true);
          this.$set(this.formLists[2].item.props,'regx',/^[0-9]*$/);
        }
      },
      deep: true
    }
  },
  methods: {
    getTypes () {
      this.$network.post('/p/cs/node/service/type',{})
        .then(res => {
          if(res.data.resultCode === 0){
            this.formLists = this.formLists.map(temp => {
              if(temp.item.filed === 'handleType'){
                temp.item.options = res.data.data.serviceType
              }

              if(temp.item.filed === 'msgType'){
                temp.item.options = res.data.data.msgType
              }

              return temp
            })
          }
        })
    },
    statusChange(val) {
      if (val === 2) {
        this.formLists = this.formLists.map(item => {
          if (item.item.filed === "requestStaus") {
            item.item.value = val;
          }
          if (item.item.filed === "tryNum") {
            delete item.item.hidden;
          }
          if (item.item.filed === "block") {
            delete item.item.hidden;
          }
          return item;
        });
      } else {
        this.formLists = this.formLists.map(item => {
          if (item.item.filed === "requestStaus") {
            item.item.value = val;
          }
          if (item.item.filed === "tryNum") {
            item.item.hidden = true;
            item.item.value='';
            item.item.slotValue='';
          }
          if (item.item.filed === "block") {
            item.item.hidden = true;
            item.item.value='';
          }
          return item;
        });
      }
    }, //请求状态change事件
    onChange(val) {
      if (val === 51) {
        this.formLists = this.formLists.map(item => {
          if (item.item.filed === "handleType") {
            item.item.value = val;
          }
          if (item.item.filed === "requestStaus") {
            delete item.item.hidden;
          }
          if (item.item.filed === "url") {
            delete item.item.hidden;
          }

          if (item.item.filed === "msgType") {
            item.item.hidden = true;
            item.item.value='';
          }
          return item;
        });
      } else {
        this.formLists = this.formLists.map(item => {
          if (item.item.filed === "handleType") {
            item.item.value = val;
          }
          if (item.item.filed === "requestStaus") {
            item.item.hidden = true;
            item.item.value='';
          }
          if (item.item.filed === "url") {
            item.item.hidden = true;
            item.item.value='';
          }
          if (item.item.filed === "tryNum") {
            item.item.hidden = true;
            item.item.value='';
            item.item.slotValue='';
          }
          if (item.item.filed === "block") {
            item.item.hidden = true;
            item.item.value='';
          }

          if (item.item.filed === "msgType") {
            item.item.hidden = false;
            item.item.value='';
          }
          return item;
        });
      }
    }, //服务实现change事件
    formChange(data) {
      let result = Object.assign({}, data);
      Object.keys(result).forEach(item => {
        this.formLists.forEach(inner => {
          if (item === inner.item.filed) {
            inner.item.value = result[item];
          }
          if (inner.item.type === "selectInput") {
            if (item === inner.item.slotfiled) {
              inner.item.slotValue = result[item];
            }
          }
        });
      });
    },
    checkMessage(item, title) {
      let tipMessage = "";
      if (item.type !== "selectInput") {
        tipMessage = item.rexMessage || "请输入" + title;
      } else {
        tipMessage = "尝试类型与尝试次数都不能为空";
      }
      this.verifyMessage = tipMessage;
      return this.verifyMessage;
    }, //提示信息
    verifyCheck(item, required,hidden) {
      if (required && required === true && (!item.item.value && item.item.value !== 0) && !hidden) {
        if (item.item.type === "selectInput") {
          if (!item.item.value || !item.item.slotValue) {
            this.checkMessage(item.item, item.item.title);
          }
        } else {
          this.checkMessage(item.item, item.item.title);
        }
        return true;
      } else {
        return false;
      }
    },
    verify() {
      this.verifyMessage = "";
      this.formLists.some(item => {
        return this.verifyCheck(item, item.item.required,item.item.hidden);
      });
      return this.verifyMessage;
    }, //调用校验函数
    ok() {
      if (this.verify() !== "") {
        this.$Message.warning(this.verify());
        return false;
      }
      let handleValue = {};
      this.formLists.forEach(item => {
        if (item.item.filed == "handleType" || item.item.filed === "extraMsg") {
          this.$set(this.resultData, item.item.filed, item.item.value);
        } else {
          handleValue[item.item.filed] = item.item.value;
          if (item.item.type === "selectInput") {
            handleValue[item.item.slotfiled] = item.item.slotValue;
          }
        }
      });
      this.$set(this.resultData, "handleValue", handleValue);
      this.configData.actionConfig[0] = this.resultData
      this.$emit('closeDrawer')
    }, //确定
    cancel() {
      this.$parent.$parent.nodeMsg[Number(this.configData.key)] = this.defaultData
      this.$emit('closeDrawer')
    } //取消
  },
  created () {
    this.getTypes()
  },
  mounted() {
    this.defaultData = JSON.parse(JSON.stringify(this.configData))
    if (this.configData.actionConfig[0]) {
      Object.keys(this.configData.actionConfig[0]).forEach(key => {
        this.formLists.forEach(item => {
          if (key === item.item.filed) {
            item.item.value = this.configData.actionConfig[0][key];
          }
        });
      });
      if (this.configData.actionConfig[0].handleValue) {
        Object.keys(this.configData.actionConfig[0].handleValue).forEach(key => {
          this.formLists.forEach(item => {
            if (key === item.item.filed) {
              item.item.value = this.configData.actionConfig[0].handleValue[key];
              if(this.configData.actionConfig[0].handleValue[key]){
                item.item.hidden=false;
              }
            }
            if (key === item.item.slotfiled) {
              item.item.slotValue = this.configData.actionConfig[0].handleValue[key];
            }
          });
        });
      }
    }
  }
};
</script>
<style lang="scss">
.service-node-config {
  position: relative;
  width: 440px;
  .node-name {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(146, 146, 146, 1);
    line-height: 20px;
    margin-bottom: 10px;
  }
  .node-config-content {
    width: 440px;
    height: 513px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(220, 222, 226, 1);
    box-sizing: border-box;
    padding: 1px 39px 17px;
    .ItemComponentRoot {
      padding-top: 16px;
      .itemComponent {
        overflow: visible;
      }
    }
  }
  .btnArea {
    margin-top: 16px;
    position: absolute;
    right: 0;
    .cancel {
      border: 1px solid rgba(91, 133, 228, 1);
      color: rgba(91, 133, 228, 1);
      margin-right: 10px;
    }
  }
}
</style>