<!--
 * @Author: 曹捷
 * @Date: 2020-09-01 17:11:49
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-02-07 16:02:01
 * @Description: 流程组件参数设置
-->
<template>
  <div>
    <div class="title">{{ compSetInfo.name }}</div>
    <div class="model-attr">
      <a-form
        :model="formData"
        class="compsetForm"
        label-position="top"
        label-width="80px"
        ref="compsetForm"
      >
        <a-form-item
          :key="item.comptArgId"
          :label="item.argName"
          :prop="item.argKey"
          :rules="{
            required: item.isRequired === 1,
            message: `${item.argDesc}不能为空`,
            trigger: 'change',
          }"
          v-for="item in argsList"
        >
          <a-input
            :placeholder="item.argDesc"
            size="small"
            v-if="item.argType === 1"
            v-model="formData[item.argKey]"
          ></a-input>
          <comDict
            :dictCode="item.valueRange"
            :placeholder="item.argDesc"
            class="width100"
            v-if="item.argType === 2"
            v-model="formData[item.argKey]"
          ></comDict>
        </a-form-item>
        <a-form-item class="t-c m-t-20">
          <a-button @click="saveInfo" type="primary">保存</a-button>
          <a-button @click="cancel">取消</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters('flowlayout', ['compSetInfo']),
  },
  data () {
    return {
      formData: {},
      argsList: [],
    }
  },
  watch: {
    compSetInfo () {
      this.initCompInfo()
      this.initCompSetFormInfo()
    },
  },
  methods: {
    //   获取基本参数类型
    initCompInfo () {
      console.log('compSetInfo', this.compSetInfo)
      let param = {
        comptId: this.compSetInfo.comptId,
      }
      this.$http.getCompInfoArgs(param).then((res) => {
        this.argsList = res
      })
    },
    // 参数数据回显
    initCompSetFormInfo () {
      this.formData = {}
      let param = {
        flowComptId: this.compSetInfo.flowComptId,
      }
      this.$http.getCompDetails(param).then((res) => {
        if (res.argDetails) {
          let arr = res.argDetails.split('~')
          arr.forEach((element) => {
            let citem = element.split(':')
            this.$set(this.formData, citem[0], citem[1])
          })
        }
        console.log('initCompSetFormInfo -> res', res)
      })
    },
    saveInfo () {
      this.$refs.compsetForm.validate((valid) => {
        if (valid) {
          let arr = []
          Object.keys(this.formData).forEach((element) => {
            arr.push(`${element}:${this.formData[element]}`)
          })
          let argDetails = arr.join('~')
          let param = {
            argDetails,
            flowComptId: this.compSetInfo.flowComptId,
          }
          this.$http.saveCompInFlow(param).then((res) => {
            this.$message.success(`${this.compSetInfo.name}参数修改成功`)
            this.cancel()
          })
        }
      })
    },
    cancel () {
      this.$store.commit('setHasCompSet', false)
    },
  },
  mounted () {
    this.initCompInfo()
    this.initCompSetFormInfo()
  },
}
</script>

<style lang="less">
.compsetForm {
  .el-form-item {
    margin: 15px 0;
    .el-form-item__label {
      line-height: 20px;
      padding: 0;
    }
  }
  .width100 {
    width: 100%;
  }
}
</style>