<template lang="pug">
  <div class='m_i_l_dialog'>
    <el-dialog   width="400px" :close-on-click-modal='false' :visible.sync='visible' append-to-body>
      .title-bold( slot='title') {{addStatus ? '新增任务' : '修改任务'}}
      <el-form :model='dataForm.leftListOnData' :rules='rules' res="dataForm" style="width:340px" ref='dataForm' label-width="100px">
        <el-form-item label='任务名称:' prop='name' >
          <el-input v-model='dataForm.leftListOnData.name' placeholder="请输入任务名称" ></el-input>
        </el-form-item>
        <el-form-item label='轮巡宫格:' prop='type' >
          <el-select class="myWidth" style='width:100%;' v-model="dataForm.leftListOnData.type" placeholder="请选择" >
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label='轮巡间隔:' prop='pollInterval' >
          <el-input v-model.number='dataForm.leftListOnData.pollInterval' placeholder="请输入轮巡间隔"><template slot="append">秒</template></el-input>
        </el-form-item>
        <el-form-item label='备注:'>
          <el-input v-model='dataForm.leftListOnData.remark' type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot='footer'>
        <el-button type="primary" @click='cancel'>取消</el-button>
        <el-button type="primary" @click='setData' v-prevent-re-click>保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState('d2admin/user', [
      'info'
    ])
  },
  data () {
    return {
      addStatus: true,
      visible: false,
      dataForm: {
        stationId: localStorage.getItem('stationId'),
        subCode: '',
        leftListOnData: {
          name: '',
          type: '1',
          pollInterval: '',
          remark: ''
        }
      },
      rules: {
        name: [{ required: true, message: '请输入任务名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: ['change', 'blur'] }],
        type: { required: true, message: '请选择轮巡宫格', trigger: 'change' },
        pollInterval: [
          { required: true, message: '请输入轮巡间隔', trigger: 'blur' },
          { type: 'number', message: '轮巡间隔为数字值', trigger: ['change', 'blur'] }
        ]
      },
      options: [{
        value: '1',
        label: '1*1'
      }, {
        value: '2',
        label: '2*2'
      }, {
        value: '3',
        label: '3*3'
      }, {
        value: '4',
        label: '4*4'
      }]
    }
  },
  created() {

  },
  methods: {
    init (res, editStatus) {
      this.visible = true

      if (editStatus) {
        this.addStatus = false
        this.dataForm = res
        this.dataForm.leftListOnData.type += ''
      } else {
        this.addStatus = true
        this.dataForm = res
        this.dataForm.leftListOnData = {
          name: '',
          type: '1',
          pollInterval: '',
          remark: ''
        }
        this.$refs.dataForm.resetFields()
      }
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', this.addStatus ? '新增任务' : '修改任务', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.visible = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    },
    setData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          if (this.addStatus) {
            this.saveData()
          } else {
            this.updateData()
          }
        }
      })
    },
    saveData() {
      this.$http({
        url: this.$http.adornUrlEq('/videoTask/save'),
        method: 'post',
        data: {
          name: this.dataForm.leftListOnData.name,
          type: this.dataForm.leftListOnData.type,
          pollInterval: this.dataForm.leftListOnData.pollInterval,
          remark: this.dataForm.leftListOnData.remark,
          stationId: this.dataForm.stationId
        }
      }).then(data => {
        if (data.code == 0) {
          this.$message.success('新增成功')
          this.visible = false
          this.$emit('leftDialogSuccess')
        }
      })
    },
    updateData() {
      this.$http({
        url: this.$http.adornUrlEq('/videoTask/update'),
        method: 'post',
        data: this.dataForm.leftListOnData
      }).then(data => {
        if (data.code == 0) {
          this.$message.success('编辑成功')
          this.visible = false
          this.$emit('leftDialogSuccess')
        }
      })
    }
  }
}
</script>
<style>
</style>
