<template>
  <div>
    <a-steps :current="current" labelPlacement="vertical">
      <a-step v-for="item in steps" :key="item.title" :title="item.title" />
    </a-steps>
    <div class="steps-content">
      <!-- {{ steps[current].content }} -->
      <Basic v-show="current === 0" ref="basicModel" />
      <ConfigSpec v-show="current === 1" ref="configModel" :editState="editState" />
      <Execute v-show="current === 2" ref="executeModel" />
      <Subscribe v-show="current === 3" ref="subscribeModel" />
    </div>
    <div class="steps-action">
      <a-button type="primary" @click="handleOk">
        取消
      </a-button>

      <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
        上一步
      </a-button>
      <a-button v-if="current < steps.length - 1" style="margin-left: 8px" type="primary" @click="next">
        下一步
      </a-button>
      <a-button style="margin-left: 8px" v-if="current == steps.length - 1" type="primary" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>
</template>
<script>
import Basic from './Basic'
import ConfigSpec from './ConfigSpec'
import Execute from './Execute'
import Subscribe from './Subscribe'
import moment from 'moment'
import { getDetail, getAdd, getUpdate } from '@/api/quality/tasks'
export default {
  components: {
    Basic,
    ConfigSpec,
    Execute,
    Subscribe
  },
  data() {
    return {
      current: 0,
			submitType: null,

      steps: [
        {
          title: '基础配置',
          content: 'First-content'
        },
        {
          title: '配置规则',
          content: 'Second-content'
        },
        {
          title: '执行配置',
          content: 'Last-content'
        },
        {
          title: '订阅配置',
          content: '订阅配置'
        }
      ],
      // 基础配置
      basicForm: {
        id: '',
        taskName: '',
        taskDescription: '',
        treeId: '',
        modelId: '',
        executionMode: '', // 执行
        subscribe: '' // 订阅
      },
      // 配置规则
      configSpecForm: {
        modelId: '',
        dataObject: [],
        rules: []
      },
      // 执行配置
      executeForm: {
        executionMode: '',
        cycle: null, // 周期
        cycleDate: null,
        cycleTime: null // 执行时间
      },
      // 订阅配置
      subscribeModel: {
        subscribe: false,
        noticeState: '',
        subscribes: []
      },
      editState: 0,
      form: {},
      isSubmit: true

    }
  },
  methods: {
    moment,
    next() {
      if (this.current === 0 && this.$refs.basicModel.validataBasicForm()) {
        this.current++
      } else if (this.current === 1 && this.$refs.configModel.validataConfigForm() && this.verifyRules(this.$refs.configModel.configSpecForm.rules)) {
        this.current++
      } else if (this.current === 2 && this.$refs.executeModel.validataExecuteForm()) {
        this.current++
      }
      if (!this.isSubmit) {
         this.$message.warning('请选择配置规则')
      }
      // this.anewData()

      // this.current++
    },
    // 校验配置规则
    verifyRules(data) {
      // data.forEach(item => {
      //   if (item.rulesId) {
      //     return true
      //   } else {
      //     return false
      //   }
      // })
      for (var i = 0; i < data.length; i++) {
        if (data[i].rulesId) {
          this.isSubmit = true
        } else {
          this.isSubmit = false
          break
        }
      }
      return this.isSubmit
    },
    prev() {
      this.current--
    },
    handleOk() {
      this.$emit('handleOk')
    },
    anewData() {
      // 基础配置
      this.form.basic = this.$refs.basicModel.basicForm
      this.form.basic.modelId = this.$refs.configModel.configSpecForm.modelId
      this.form.basic.executionMode = this.$refs.executeModel.executeForm.executionMode

      const subscribe = this.$refs.subscribeModel.subscribeForm.subscribe
      if (subscribe === false) {
        this.form.basic.subscribe = 0
      } else if (subscribe === true) {
        this.form.basic.subscribe = 1
      }

      // 配置规则
      this.form.rules = this.$refs.configModel.configSpecForm.rules

      // 执行配置
      this.form.configuration = this.$refs.executeModel.executeForm
      this.form.configuration.cycleTime = this.$refs.executeModel.endTimeData
      // 订阅配置
      this.form.subscribes = this.$refs.subscribeModel.subscribeForm.subscribes
      // console.log(`anewData：`, this.form)
    },
    // 提交
    onSubmit() {
      this.anewData()
      // this.$emit('handleOk')
      if (this.submitType === 'add') {
        getAdd(this.form).then((res) => {
          console.log(`res--add`, this.form)
          this.handleOk()
        })
      } else if (this.submitType === 'edit') {
        getUpdate(this.form).then((res) => {
          console.log(`res--edit`, this.form)
          this.handleOk()
        })
      }
    },
    // 查看详情
    getDetailArr(id) {
      getDetail(id).then((res) => {
        if (res.code === 200) {
          // console.log('查看详情', res.data)
          // 基本配置
          this.$refs.basicModel.basicForm = res.data.basic
          // 配置规则
          this.editState = 1
          this.configSpecForm.modelId = res.data.basic.modelId
          this.$refs.configModel.configSpecForm = this.configSpecForm
          this.$refs.configModel.onClassSelect(res.data.basic.modelId)
          this.$refs.configModel.editData = res.data.rules
          res.data.rules.forEach((v) => {
            // this.$refs.configModel.getAttribute(v.attrId)
          })
          // console.log('配置规则:', this.$refs.configModel.configSpecForm)

          // 执行配置
          this.$refs.executeModel.executeForm.executionMode = res.data.basic.executionMode.toString()
          if (this.$refs.executeModel.executeForm.executionMode === '0') {
            this.$refs.executeModel.typeState = '0'
          } else if (this.$refs.executeModel.executeForm.executionMode === '1') {
            this.$refs.executeModel.typeState = '1'
          }
          this.$refs.executeModel.executeForm = { ...this.$refs.executeModel.executeForm, ...res.data.configuration }
          if (res.data.basic.executionMode === 1) {
            this.$refs.executeModel.executeForm.cycleTime = moment(res.data.configuration.cycleTime, 'HH:mm:ss')
            this.$refs.executeModel.handleChange(parseInt(this.$refs.executeModel.executeForm.cycle))
            this.$refs.executeModel.endTimeData = res.data.configuration.cycleTime
          }

          // console.log('执行配置:', this.$refs.executeModel.executeForm)

          // 订阅配置
          this.$refs.subscribeModel.subscribeForm.subscribes = res.data.subscribes

          if (res.data.basic.subscribe === 0) {
            this.$refs.subscribeModel.subscribeForm.subscribe = false
            this.$refs.subscribeModel.onChange(this.$refs.subscribeModel.subscribeForm.subscribe)
          } else if (res.data.basic.subscribe === 1) {
            this.$refs.subscribeModel.subscribeForm.subscribe = true
            this.$refs.subscribeModel.onChange(this.$refs.subscribeModel.subscribeForm.subscribe)
          }

          // console.log('订阅配置:', res.data.basic.subscribe)
        }
      })
    }
  }
}
</script>
<style scoped>
.ant-steps {
  margin: 30px auto;
  width: 90%;
}
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background: #fefefe;
  min-height: 200px;
  padding: 40px 40px;
}

.steps-action {
  margin: 24px auto;
  text-align: center;
}
</style>
