<template>
  <div>



    <el-dialog :title="'查看任务'" :close-on-click-modal="false" :visible.sync="visible">

      <el-form :model="job_info" label-width="200px"  v-loading="jobDataListLoading">
        <el-form-item label="任务名称 :" prop="name">
          <!--                  <el-input v-model="goal_info.config.name"></el-input>-->
          <span>{{ job_info.jobName }}</span>
        </el-form-item>
        <el-form-item label="度量名称 :">
          <span>{{ job_info.measureName }}</span>
          <!--                  <el-input v-model="goal_info.config.description"></el-input>-->
        </el-form-item>
        <el-form-item label="度量类型 :">
          <span>{{ job_info.measureType }}</span>
        </el-form-item>

        <el-form-item label="处理方式 :">
          <span>{{ job_info.processType }}</span>
        </el-form-item>
        <el-form-item label="探测周期 :">
          <span>{{ job_info.cronExpression }}</span>
      </el-form-item>
        <el-form-item label="时  区 :">
          <span>{{ job_info.cronTimeZone }}</span>
        </el-form-item>
        <el-form-item label="单次探测起始时间 :">
          <span>{{ job_info.rangeConfig.begin}}</span>
      </el-form-item>
        <el-form-item label="单次探测持续时间 :">
          <span>{{ job_info.rangeConfig.length }}</span>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="visible=false">确定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'jobWatch',
  data () {
    return {
      job_info: {
        jobName: '',
        measureName: '',
        measureType: '',
        processType: '',
        cronExpression: '',
        cronTimeZone: '',
        rangeConfig: ''
      },
      visible: false,
      jobDataListLoading: false
    }
  },
  methods: {
    init (info) {
      this.visible = true
      this.jobDataListLoading = false
      this.getJobInfo(info)
      // console.log(info)
    },
    getJobInfo (info) {
      this.job_info = info
      const mesureId = info['measureId']
      this.getMeasureById(mesureId)
      for (const item of info['dataSegments']) {
        // console.log(item['segment.range'])
        this.job_info.rangeConfig = item['segment.range']
      }
    },
    getMeasureById (id) {
      this.jobDataListLoading = true
      this.$http({
        url: this.$http.snoopUrl('/v1/measures/') + id,
        methods: 'get'
      }).then((data) => {
        if (data && data.status === 200) {
          var measureData = data.data
          this.job_info.measureName = measureData.name
          this.job_info.measureType = measureData['dq.type'].toLowerCase()
          this.job_info.processType = measureData['process.type'].toLowerCase()
        }
        this.jobDataListLoading = false
      }

        )
    }

  }
}
</script>

<style scoped>

</style>
