<template>
  <div class="layout-no-cols right-detail-tabs">

    <div class="layout-col-detail">
      <el-toolbar>
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
        <span class="button-separator"></span>
        <el-button type="button" class="el-button el-button--default save" @click="save" :loading="okBtnLoading"><span><i class="fa fa-save"></i>保存</span></el-button>
      </el-toolbar>
      <el-tabs class="tabs-wrap" v-model="activeTabsName" @tab-click="tabsChangeClickHandler" v-loading="dataLoading">
        <el-tab-pane label="基本信息" name="FromWebTaskInfo">
          <span slot="label">
            <i class="fa fa-list-alt"></i>基础信息
          </span>
          <!--基础信息组件-->
          <fromweb-taskinfo :taskID="id" :createFlag="createFlag" ref="fromwebtaskinfo" @onTypeChange="typeChangeHandler" @getData="getTaskinfoComponentData"></fromweb-taskinfo>
        </el-tab-pane>

        <el-tab-pane label="匹配块" name="FromWebTaskTemplate" v-if="showTaskTemplate">
          <span slot="label">
            <i class="fa fa-th-large" aria-hidden="true"></i>匹配块
          </span>
          <!--匹配块组件-->
          <fromweb-tasktemplate :taskID="id" :createFlag="createFlag" ref="fromwebtasktemplate" @onTypeChange="typeChangeHandler"  @getData="getTasktemplateComponentData"></fromweb-tasktemplate>
        </el-tab-pane>

        <el-tab-pane label="过滤块" name="FromWebTaskFilter">
          <span slot="label">
            <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>过滤块
          </span>
          <!--过滤块组件-->
          <fromweb-taskfilter :taskID="id" :createFlag="createFlag" ref="fromwebtaskfilter" @getData="getTaskfilterComponentData"></fromweb-taskfilter>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>

</template>

<script>
import util from '@src/common/util.js'
import FromWebTaskInfo from './FromWebTaskInfo.vue'
import FromWebTaskTemplate from './FromWebTaskTemplate.vue'
import FromWebTaskFilter from './FromWebTaskFilter.vue'

export default {
  props: {
    ID: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      type: 'create',
      id: 0,
      basicInfoData: {},
      templateData: {},
      filterData: {},
      createFlag: 'create', // create/screate
      dialogVisible: false,
      activeTabsName: 'FromWebTaskInfo',
      interval: null,
      okBtnLoading: false,
      dataLoading: false, // 数据加载状态
      showTaskTemplate: true
    }
  },
  created() {
  // console.log(this.$route)
    this.id = this.ID
    this.type = this.id ? 'similarcreate' : 'create'
  },
  mounted() {
    !!this.id && this.loadSubComponetData()
  },
  methods: {
    // tabs切换事件
    tabsChangeClickHandler(tab, event) {
      this.activeTabsName = tab.name
    // console.log(tab.name)
    },

    // 组件fromweb-taskinfo 采集类别改变事件
    typeChangeHandler(data) {
      if (data === 'D') {
        this.showTaskTemplate = true
      } else if (data === 'T') {
        this.showTaskTemplate = false
      }
    },

    // 保存数据   确定按钮点击处理事件
    async save() {
    // console.log('do save.......')
      await this.$refs.fromwebtaskinfo.emitData()
      await this.$refs.fromwebtasktemplate.emitData()
      await this.$refs.fromwebtaskfilter.emitData()

      let flag = util.isEmptyObject(this.basicInfoData.data)
      if (flag) {
      // console.log('表单未填写正确 ！')
        return
      }
      let param = Object.assign({}, this.basicInfoData.data, this.templateData.data, this.filterData.data)
      delete param.ID
      delete param.id
      delete param.addTime
      delete param.addUser
      // console.log(param)

      this.okBtnLoading = true
      // 提交数据
      try {
        axios.put(`/ui/fromweb`, param).then(res => {
          let data = res.data
          this.okBtnLoading = false
          if (data.status === 1) {
            this.MsgPop(data.message, 'success')
            this.dialogVisible = false
            this.$emit('success')
            let path = `${this.$route.path}`.replace('/new', '/')
            path = `${path}${data.wgID}/tabs/info`
            this.$router.push(path)
            return
          }
          this.Dialog(data.message)
        })
      } catch (e) {
        this.okBtnLoading = false
      }
    },

    // 获取基础信息组件数据
    getTaskinfoComponentData(data) {
      this.basicInfoData = data && !util.isEmptyObject(data) ? data : this.basicInfoData
    },

    // 获取匹配块组件数据
    getTasktemplateComponentData(data) {
      this.templateData = data && !util.isEmptyObject(data) ? data : this.templateData
    },

    // 获取过滤块组件数据
    getTaskfilterComponentData(data) {
      this.filterData = data && !util.isEmptyObject(data) ? data : this.filterData
    },

    // 加载子组件数据
    async loadSubComponetData() {
      this.dataLoading = true
      try {
        this.$refs.fromwebtaskinfo && (await this.$refs.fromwebtaskinfo.init(this.id))
        this.$refs.fromwebtasktemplate && (await this.$refs.fromwebtasktemplate.init(this.id))
        this.$refs.fromwebtaskfilter && (await this.$refs.fromwebtaskfilter.init(this.id))
        this.dataLoading = false
      } catch (e) {
        this.dataLoading = false
      }
    },

    // 显示dialog
    showDialog(type) {
      this.createFlag = !type ? this.createFlag : type
      this.dialogVisible = true
      this.activeTabsName = 'FromWebTaskInfo'
      this.okBtnLoading = false
    },

    // 消息Dialog封装
    Dialog(msg) {
      this.$confirm(msg, '系统提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      })
    },

    // 消息显示封装
    MsgPop(msg, type) {
      if (!type) {
        this.$message(msg)
        return
      }
      this.$message({
        message: msg,
        type: type
      })
    }
  },
  components: {
    'fromweb-taskinfo': FromWebTaskInfo,
    'fromweb-tasktemplate': FromWebTaskTemplate,
    'fromweb-taskfilter': FromWebTaskFilter
  }
}
</script>

<style scoped>
.tabs-wrap {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.info-form-wrap {
  margin-top: 10px;
  padding: 10px 0;
  width: 560px;
}

.tag-item,
.title {
  line-height: 1.5;
  margin: 0.2em 0 0.3em 0;
}

.tag-item .tag-label {
  display: inline-block;
  text-align: right;
  width: 100%;
}

.title {
  margin-top: 1em;
  font-size: 20px !important;
}

</style>
<style>
.tagP {
  font-size: 13px;
  margin: 20px 0 10px 10px;
}

input[type='file'] {
  display: none !important;
}

.el-upload__input {
  display: none !important;
}

label {
  margin: 0 !important;
  font-weight: normal !important;
}

.title .el-checkbox__label {
  font-size: inherit;
}
</style>
