//参数配置界面
<template>
  <div class="ParameterConfiguration">
    <FormItemComponent class="form" :formItemLists="formLists" :buttonType="false" :defaultColumn="1" @formChange="formChange"></FormItemComponent>
  </div>
</template>
<script>
  import FormItemComponent from '@/components/FormItemComponent';
  import ItemComponent from '@/components/ItemComponent';
  import {
    getColumnList,
    getTabList
  } from '@/api/modeler.js'
  export default {
    components: {
      FormItemComponent
    },
    props: {
      data: {
        type: Object
      }
    },
    watch: {
      data: {
        handler() {
          this.formLists = [{
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'select',
                title: '模版类型',
                filed: 'moduleType',
                value: this.data.moduleType,
                props: {
                  disabled: this.disabled,
                  clearable: false,
                },
                options: [{
                    value: 0,
                    label: '固定模版'
                  },
                  {
                    value: 1,
                    label: '动态模版'
                  }
                ]
              }
            },
            {
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'DropDownSelectFilter',
                title: '单据类型',
                filed: 'businessType',
                required: true,
                hidden: this.data.moduleType === 1,
                props: {
                  columnsKey: ['NAME'],
                  AutoData: [],
                  hidecolumns: ['id'],
                  data: {},
                  totalRowCount: 0,
                  defaultSelected: this.data.businessType,
                  disabled: this.disabled
                },
                event: {
                  inputValueChange: (value) => {
                    // 外键的模糊搜索
                    this.fkFuzzyquerybyak(value)
                  },
                  'on-show': ($this) => {
                    // 当外键下拉站开始去请求数据
                    this.freshDropDownSelectFilterData($this)
                  },
                  pageChange: (currentPage, $this) => {
                    // 外键的分页查询
                    this.freshDropDownSelectFilterData($this, currentPage)
                  },
                  blur: (event, instance) => {
                    if (Object.prototype.toString.call(this.data.businessType) !== '[object Array]' || this.data.businessType
                      .length === 0) {
                      this.data.businessType = []
                      instance.inputValue = ''
                    }

                  }
                }
              }
            },
            {
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'input',
                title: '模版名称',
                filed: 'name',
                required: true,
                value: this.data.name,
                props: {
                  // disabled:this.data.status === 1
                }
              }
            },
            {
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'DropDownSelectFilter',
                title: '查询索引',
                filed: 'businessNumber',
                hidden: this.data.moduleType === 1,
                props: {
                  columnsKey: ['NAME'],
                  AutoData: [],
                  hidecolumns: ['id'],
                  data: {},
                  totalRowCount: 0,
                  defaultSelected: this.data.businessNumber,
                  // disabled:this.data.status === 1
                },
                event: {
                  inputValueChange: (value, instance) => {
                    if (!this.data.businessType || this.data.businessType.lengt == 0 || !this.data.businessType[0].ID) {
                      this.$Modal.fcWarning({
                        title: '警告',
                        content: '请先选择单据类型!'
                      })
                      this.data.businessNumber = []
                      instance.inputValue = ''
                      return
                    }
                    // 外键的模糊搜索
                    this.fkFuzzyquerybyakcolumn(value)
                  },
                  'on-show': ($this) => {
                    // 当外键下拉站开始去请求数据
                    if (!this.data.businessType || this.data.businessType.lengt == 0 || !this.data.businessType[0].ID) {
                      this.$Modal.fcWarning({
                        title: '警告',
                        content: '请先选择单据类型!'
                      })
                      this.data.businessNumber = []
                      $this.inputValue = ''
                      return
                    }
                    this.freshDropDownSelectFilterDataColumn($this)
                  },
                  pageChange: (currentPage, $this) => {
                    // 外键的分页查询
                    this.freshDropDownSelectFilterDataColumn($this, currentPage)
                  },
                  blur: (event, instance) => {
                    if (Object.prototype.toString.call(this.data.businessNumber) !== '[object Array]' || this.data.businessNumber
                      .length === 0) {
                      this.data.businessNumber = []
                      instance.inputValue = ''
                    }

                  }
                }
              }
            },
            {
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'input',
                title: '模版描述',
                filed: 'description',
                value: this.data.description,
                props: {
                  type: 'textarea',
                  // disabled:this.data.status === 1
                }
              }
            },
            {
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'Switch',
                title: '开启自动处理',
                filed: 'autoClose',
                value: this.data.autoClose,
              }
            },
            {
              row: 1,
              col: 1,
              component: ItemComponent,
              item: {
                type: 'input',
                title: '业务数据检查',
                filed: 'businessCheckUrl',
                value: this.data.businessCheckUrl
              }
            }
          ]
        },
        deep: true
      }
    },
    data() {
      return {
        formLists: [{
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'select',
              title: '模版类型',
              filed: 'moduleType',
              value: 0,
              props: {
                disabled: false,
                clearable: false
              },
              options: [{
                  value: 0,
                  label: '固定模版'
                },
                {
                  value: 1,
                  label: '动态模版'
                }
              ]
            }
          },
          {
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'DropDownSelectFilter',
              title: '单据类型',
              filed: 'businessType',
              required: true,
              hidden: this.data.moduleType === 1,
              props: {
                columnsKey: ['NAME'],
                AutoData: [],
                hidecolumns: ['id'],
                data: {},
                totalRowCount: 0
              },
              event: {
                inputValueChange: (value) => {
                  // 外键的模糊搜索
                  this.fkFuzzyquerybyak(value)
                },
                'on-show': ($this) => {
                  // 当外键下拉站开始去请求数据
                  this.freshDropDownSelectFilterData($this)
                },
                pageChange: (currentPage, $this) => {
                  // 外键的分页查询
                  this.freshDropDownSelectFilterData($this, currentPage)
                },
                blur: (event, instance) => {
                  if (Object.prototype.toString.call(this.data.businessType) !== '[object Array]' || this.data.businessType
                    .length === 0) {
                    this.data.businessType = []
                    instance.inputValue = ''
                  }

                }
              }
            }
          },
          {
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'input',
              title: '模版名称',
              filed: 'name',
              required: true,
              value: this.data.name
            }
          },
          {
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'DropDownSelectFilter',
              title: '查询索引',
              filed: 'businessNumber',
              hidden: this.data.moduleType === 1,
              props: {
                columnsKey: ['NAME'],
                AutoData: [],
                hidecolumns: ['id'],
                data: {},
                totalRowCount: 0
              },
              event: {
                inputValueChange: (value, instance) => {
                  if (!this.data.businessType || this.data.businessType.lengt == 0 || !this.data.businessType[0].ID) {
                    this.$Modal.fcWarning({
                      title: '警告',
                      content: '请先选择单据类型!'
                    })
                    this.data.businessNumber = []
                    instance.inputValue = ''
                    return
                  }
                  // 外键的模糊搜索
                  this.fkFuzzyquerybyakcolumn(value)
                },
                'on-show': ($this) => {
                  // 当外键下拉站开始去请求数据
                  if (!this.data.businessType || this.data.businessType.lengt == 0 || !this.data.businessType[0].ID) {
                    this.$Modal.fcWarning({
                      title: '警告',
                      content: '请先选择单据类型!'
                    })
                    this.data.businessNumber = []
                    $this.inputValue = ''
                    return
                  }
                  this.freshDropDownSelectFilterDataColumn($this)
                },
                pageChange: (currentPage, $this) => {
                  // 外键的分页查询
                  this.freshDropDownSelectFilterDataColumn($this, currentPage)
                },
                blur: (event, instance) => {

                  if (Object.prototype.toString.call(this.data.businessNumber) !== '[object Array]' || this.data.businessNumber
                    .length === 0) {
                    this.data.businessNumber = []
                    instance.inputValue = ''
                  }

                }
              }
            }
          },
          {
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'input',
              title: '模版描述',
              filed: 'description',
              value: this.data.description,
              props: {
                type: 'textarea',
              }
            }
          },
          {
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'Switch',
              title: '开启自动处理',
              filed: 'autoClose',
              value: true,
            }
          },
          {
            row: 1,
            col: 1,
            component: ItemComponent,
            item: {
              type: 'input',
              title: '业务数据检查',
              filed: 'businessCheckUrl',
              value: this.data.businessCheckUrl
            }
          }
        ],
        formData: {},
        row: [],
        disabled: false
      }
    },
    methods: {
      formChange(data) { //数据修改
        if (data.businessType && data.businessType.length > 0) {
          this.row.map(item => {
            if (item.ID.val === data.businessType[0].ID) {
              data.businessType[0].val = item.DESCRIPTION.val
              data.businessType[0].Label = item.NAME.val
            }
            return item
          })
        }

        if (data.businessNumber && data.businessNumber.length > 0) {
          this.row.map(item => {
            if (item.ID.val === data.businessNumber[0].ID) {
              data.businessNumber[0].val = item.DESCRIPTION.val
              data.businessNumber[0].Label = item.NAME.val
            }
            return item
          })
        }

        this.formData = Object.assign(this.formData, data)
        this.$emit('dataChange', this.formData)
      },
      fkFuzzyquerybyak(value) { //单据类型模糊搜素
      
        this.formLists[1].item.props.AutoData = []
        getTabList({
          DESCRIPTION: value
        }).then(res => {
          if (res.code === 0) {
            this.row = res.data.row.concat([])
            this.formLists[1].item.props.AutoData = res.data.row.reduce((arr, item) => {
              arr.push({
                value: item.NAME.val,
                id: item.ID.val,
                NAME: item.DESCRIPTION.val
              })
              return arr
            }, []);
          }

        })
      },
      freshDropDownSelectFilterData(instance, currentPage) { //外键列表查询
        getTabList({
          pageSize: instance.pageSize,
          page: currentPage ? currentPage : 1
        }).then(res => {
          if (res.code === 0) {
            this.row = res.data.row.concat([])
            res.data.tabth.forEach(item => {
              if (item.colname === 'DESCRIPTION') {
                item.isak = true
              }
              return item
            })
            // res.data.datas.row.forEach(item => {
            //   item.ID.val = item.NAME.val
            //   return item
            // })
            this.formLists[1].item.props.data = res.data;
            this.formLists[1].item.props.totalRowCount = res.data.totalRowCount;
          }

        })
      },
      fkFuzzyquerybyakcolumn(value) { //单据类型模糊搜素
      console.log(345654)
        this.formLists[3].item.props.AutoData = []
        getColumnList({
          DESCRIPTION: value,
          AD_TABLE_ID: this.data.businessType[0].ID
        }).then(res => {
          if (res.code === 0) {
            this.row = res.data.row.concat([])
            this.formLists[3].item.props.AutoData = res.data.row.reduce((arr, item) => {
              arr.push({
                value: item.NAME.val,
                id: item.ID.val,
                NAME: item.DESCRIPTION.val
              })
              return arr
            }, []);
          }

        })
      },
      freshDropDownSelectFilterDataColumn(instance, currentPage) { //外键列表查询
        getColumnList({
          pageSize: instance.pageSize,
          page: currentPage ? currentPage : 1,
          AD_TABLE_ID: this.data.businessType[0].ID
        }).then(res => {
          if (res.code === 0) {
            this.row = res.data.row.concat([])
            res.data.tabth.forEach(item => {
              if (item.colname === 'DESCRIPTION') {
                item.isak = true
              }
              return item
            })
            // res.data.datas.row.forEach(item => {
            //   item.ID.val = item.NAME.val
            //   return item
            // })
            this.formLists[3].item.props.data = res.data;
            this.formLists[3].item.props.totalRowCount = res.data.totalRowCount;
          }

        })
      }
    },
    created() {
      this.$route.params.id !== '-1' ? this.disabled = true : this.disabled = false
    }
  }
</script>
<style lang="scss" scoped>
  .ParameterConfiguration {
    padding-top: 50px;
    display: flex;
    justify-content: center;

    .form {
      border: none;
      width: 420px;
    }
  }
</style>
