<template>
  <div>
    <a-row type="flex">
      <a-col :span="stepStyle.flex">
        <a-steps
          :type="stepStyle.type"
          :current="current"
          :direction="stepStyle.direction"
          :labelPlacement="stepStyle.labelPlacement"
          :progressDot="stepStyle.false"
          :size="stepStyle.size"
          :initial="initial"
          :status="status"
          @chaneg="onChange"
        >
          <a-step
            v-for="(item, index) in this.configContent.step.steps"
            :key="'step-'+item.name"
            :title="item.title"
            :description="item.description"
            :sub-title="item.subTitle"
            :disabled="item.disabled">
            <a-icon v-if="current === index" slot="icon" :type="iconType" />
          </a-step>
        </a-steps>
      </a-col>
      <a-col :span="panelStyle.flex">
        <template v-for="(item, index) in this.configContent.step.steps">
          <a-card
            v-if="current === index"
            :bordered="false"
            :key="'stepCard-'+item.name">
            <template v-if="item.content.card.type === 'text'">
              <p>{{ item.content.card.value }}</p>
            </template>
            <x-add-native-form v-else-if="item.content.card.type === 'form'" :ref="'XAddNativeForm'+ item.name" @onSubmit="submit"/>
            <x-table v-else-if="item.content.card.type === 'table'" :fixed-query-form="item.content.card.queryFrom" @action="action" :query-params-name="item.content.card.queryParamsName" :ref="'XAddNativeForm'+item.name" />
            <a-button v-if="status === 'error'" @click="success" style="color: v-bind()">下一步</a-button>
          </a-card>
        </template>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import XAddNativeForm from '@vue2-client/base-client/components/common/XAddNativeForm/XAddNativeForm.vue'
import { post } from '@vue2-client/services/api'
import XTable from '@vue2-client/base-client/components/common/XTable/XTable.vue'

export default {
  name: 'XStepView',
  components: { XTable, XAddNativeForm },
  computed: {
    stepStyle () {
      const style = this.configContent.step.style
      if (style) {
        return style
      } else {
        return {
          flex: 5,
          type: 'default',
          progressDot: 'false',
          direction: 'horizontal',
          labelPlacement: 'horizontal',
          size: 'default',
        }
      }
    },
    panelStyle () {
      const style = this.configContent.panelStyle
      if (style) {
        return style
      } else {
        return {
          flex: 19
        }
      }
    }

  },
  props: {
    params: {
      type: Object,
      required: true,
    },
    configContent: {
      type: Object,
      required: true,
    }
  },
  data () {
    return {
      current: -1,
      initial: 0,
      status: 'wait',
      iconType: 'loading',
      timeOut: undefined
    }
  },
  watch: {
    async current (newValue) {
      this.changeIcon()
      if (this.timeOut !== undefined) { window.clearTimeout(this.timeOut) }

      const setpes = this.configContent.step.steps[newValue]
      const type = setpes.content.card.type
      const formValue = setpes.content.card.value
      console.warn('formValue = ', formValue)
      if (setpes.before) {
        const postName = setpes.before.name.split('@')
        this.timeOut = window.setTimeout(() => {
          post('/api/af-system/' + postName[0] + '/' + postName[1], setpes.before.params).then(res => {
            console.warn(setpes.before.name + '执行结果', res)
            if (res.code === 200) {
              window.clearInterval(this.timeOut)
              this.success()
            } else {
              setpes.content.card.value = res.msg
            }
          }).catch(e => {
            console.warn(setpes.before.name + '执行结果', e)
            window.clearInterval(this.timeOut)
            this.error()
          })
        }, 10 * 1000)
      }
      if (type === 'form') {
        this.$nextTick(() => {
          const stepsss = this.$refs['XAddNativeForm' + setpes.name][0]
          stepsss.init({
            formItems: formValue
          })
        })
      } else if (type === 'table') {
        console.warn('formValue = ', formValue)
        this.$nextTick(() => {
          const stepsss = this.$refs['XAddNativeForm' + setpes.name][0]
          stepsss.init({
            tableColumns: formValue,
            buttonState: {
              add: false,
              edit: true,
              delete: false,
              import: false,
              export: false
            }
          })
        })
      } else {
        if (setpes.run) {
          post('/api/af-system/logic/' + setpes.run.name, setpes.run.params).then(t => {
            console.warn(setpes.run.name + '执行结果', t)
            if (t.code === 200) {
              this.success()
            } else {
              setpes.content.card.value = t.msg
            }
          }).catch(e => {
            console.warn(setpes.run.name + '执行结果', e)
            this.error()
          })
        }
      }
    }
  },
  mounted () {
    let paramsStr = JSON.stringify(this.configContent.step)
    for (const item in this.params) {
      const regex = new RegExp('\\$\\{' + item + '\\}', 'g')
      paramsStr = paramsStr.replace(regex, this.params[item])
    }
    const params = JSON.parse(paramsStr)
    this.init({ step: params })
    this.current++
  },
  methods: {
    init (params) {
      const {
        style,
        panel,
        step
      } = params
      if (style) {
        this.stepStyle = style
      }
      if (panel) {
        this.panelStyle = panel
      }
      if (step) {
        this.configContent.step = step
      }
    },
    steps () {
      return this.steps
    },
    onChange (current) {
      this.current = current
    },
    submit (res) {
      console.warn('res', res)
      const setpes = this.configContent.step.steps[this.current]
      if (setpes.run) {
        post('/api/af-system/logic/' + setpes.run.name, res.realForm).then(t => {
          console.warn(setpes.run.name + '执行结果', t)
          if (t.code === 200) {
            this.success()
          }
        }).catch(e => {
          console.warn(setpes.run.name + '执行结果', e)
          this.error()
        })
      }
    },
    error () {
      this.status = 'error'
      this.iconType = 'close-circle'
    },
    success () {
      this.changeIcon()

      this.current++
    },
    changeIcon () {
      this.status = 'wait'
      this.iconType = 'loading'
    },
    previous () {
      this.current--
    },
    action (record, id, actionType) {
      console.warn('record', record)
      console.warn('id', id)
      console.warn('actionType', actionType)
      const setpes = this.configContent.step.steps[this.current]
      if (setpes.run) {
        post('/api/af-system/logic/' + setpes.run.name, { data: record }).then(t => {
          console.warn(setpes.run.name + '执行结果', t)
          if (t.code === 200) {
            this.success()
          }
        }).catch(e => {
          console.warn(setpes.run.name + '执行结果', e)
          this.error()
        })
      }
    }
  },
}
</script>

<style lang="less" scoped></style>
