<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="1000px">
    <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="80px" style="width: 1000px;">
      <el-form-item label="任务名称" prop="name">
        <el-input v-model="form.name" style="width: 200px;"/>
      </el-form-item>
      <el-form-item label="任务类型" prop="tasktype">
        <!--<el-input v-model="form.tasktype" style="width: 200px;"/>-->
        <el-select v-model="form.tasktype" clearable placeholder="请选择任务类型" class="filter-item" style="width: 200px" @change="changeTime()">
          <el-option v-for="item in dicts" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="任务时间" prop="tasktime">
        <!--<el-input v-model="form.tasktime" style="width: 200px;"/>-->
        <el-time-picker
          v-if="timeFlg"
          v-model="form.tasktime"
          :format = "format"
          :value-format = "valueformat"
          placeholder="选择时间"/>
        <el-date-picker
          v-if="dateFlg"
          v-model="form.tasktime"
          :format = "format"
          :value-format = "valueformat"
          type="datetime"
          placeholder="选择日期时间"/>
      </el-form-item>
      <el-form-item label="控制器" prop="deviceid">
        <!--<el-input v-model="form.deviceid" style="width: 200px;"/>-->
        <el-select v-model="form.deviceid" :disabled="isAdd ? false : true" clearable placeholder="请选择控制器" class="filter-item" style="width: 370px" @change="loadway()">
          <el-option v-for="item in relays" :key="item.deviceid" :label="item.name" :value="item.deviceid"/>
        </el-select>
      </el-form-item>
      <el-table v-loading="loadingtab" :data="taskways" :row-class-name="tableRowClassName" size="small" style="width: 90%;padding: 20px; text-align: center;">
        <!--<el-table-column prop="deviceid" label="设备ID" min-width="130%"/>-->
        <!--<el-table-column prop="wayname" label="支路名称" />-->
        <el-table-column prop="nt" label="支路名称">
          <template slot-scope="scope">
            <div v-for="item in deviceWays" :key="item.id">
              <div v-if="parseInt(scope.row.nt) === item.id">{{ item.wayname }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="way" label="支路" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-loading.fullscreen.lock="false" v-model="scope.row.status" active-value="1" inactive-value="0" active-text="开" inactive-text="关" />
          </template>
        </el-table-column>
        <el-table-column label="是否控制" align="center">
          <template slot-scope="scope">
            <!--<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteway(scope.row, scope)"/>-->
            <el-switch v-loading.fullscreen.lock="false" v-model="scope.row.valid" value="true" active-value="1" inactive-value="0" active-text="是" inactive-text="否" @change="changeDisable(scope.row, scope)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add, edit } from '@/api/sTask'
import { loadByTaskid } from '@/api/sTaskWay'
import { queryAllRelayByUseridNoPage } from '@/api/sDevice'
import { loadTaskwayByDeviceid, sDeviceWayNoPage } from '@/api/sDeviceWay'
import initDict from '@/mixins/initDict'
export default {
  mixins: [initDict],
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false, className: '',
      loadingtab: false,
      format: 'yyyy-MM-dd HH:mm:ss',
      valueformat: 'yyyy-MM-dd HH:mm:ss',
      taskways: [],
      dateFlg: true,
      timeFlg: false,
      deviceWays: [],
      relays: '',
      form: {
        id: '',
        name: '',
        tasktype: '',
        tasktime: '',
        deviceid: '',
        commond: '',
        wayinfo: '',
        valid: '',
        userid: '',
        createTime: '',
        updateTime: '',
        nt: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入任务名称', trigger: 'blur' }
        ],
        tasktype: [
          { required: true, message: '请选择任务类型', trigger: 'blur' }
        ],
        tasktime: [
          { required: true, message: '请选择任务时间', trigger: 'blur' }
        ],
        deviceid: [
          { required: true, message: '请选择控制器', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getRelay()
    this.getDict('tasktype')
    this.sDeviceWayNoPage()
    this.getDafultFlg()
  },
  methods: {
    sDeviceWayNoPage() {
      sDeviceWayNoPage().then(res => {
        this.deviceWays = res
      }).catch(err => {
        // this.loading = false
        console.log(err.response.data.message)
      })
    },
    changeDisable(data, scope) {
      var size = this.taskways.length
      var length = 0
      for (var i = 0; i < size; i++) {
        if (this.taskways[i].valid === '1') {
          length = length + 1
        }
      }
      console.log(length)
      if (length === 0) {
        this.$notify({
          title: '至少保留一路控制器',
          type: 'warning',
          duration: 2500
        })
        if (data.valid === '0') {
          data.valid = '1'
        } else {
          data.valid = '0'
        }
      }
      // scope.
      // console.log(data, scope, '11111111')
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.valid === '0') {
        return 'danger-row'
      } else {
        if (row.status === '0') {
          return 'warning-row'
        } else if (row.status === '1') {
          return 'success-row'
        }
      }
      return ''
    },
    getDafultFlg() {
      console.log(this.form.tasktype, '111')
      if (this.form.tasktype === '1') {
        this.format = 'HH:mm:ss'
        this.timeFlg = true
        this.dateFlg = false
      }
    },
    changeTime() {
      // console.log('gaibian')
      // 0单次任务  1每天任务  2每月任务 3每周任务
      if (this.form.tasktype === '0') {
        this.format = 'yyyy-MM-dd HH:mm:ss'
        this.timeFlg = false
        this.dateFlg = true
      } else if (this.form.tasktype === '1') {
        this.format = 'HH:mm:ss'
        this.timeFlg = true
        this.dateFlg = false
      } else if (this.form.tasktype === '2') {
        this.format = 'dd HH:mm:ss'
        this.timeFlg = false
        this.dateFlg = true
      } else if (this.form.tasktype === '3') {
        this.format = 'dd HH:mm:ss'
        this.timeFlg = false
        this.dateFlg = true
      }
    },
    loadByTaskid() {
      loadByTaskid(this.form.id).then(res => {
        this.taskways = res
      }).catch(err => {
        // this.loading = false
        console.log(err.response.data.message)
      })
    },
    loadway() {
      if (this.form.deviceid === '') {
        this.taskways = []
      } else {
        loadTaskwayByDeviceid(this.form.deviceid).then(response => {
          this.taskways = response
          // for (var i = 0; i < this.taskways.length; i++) {
          //   this.taskways[i].status = '0'
          //   this.taskways[i].msg = '1'
          // }
          // console.log(response)
        })
      }
    },
    getRelay() {
      queryAllRelayByUseridNoPage().then(res => {
        this.relays = res
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        } else {
          return false
        }
      })
    },
    doAdd() {
      add(this.form, this.taskways).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      edit(this.form, this.taskways).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.taskways = []
      this.timeFlg = false
      this.dateFlg = true
      this.format = 'yyyy-MM-dd HH:mm:ss'
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        name: '',
        tasktype: '',
        tasktime: '',
        deviceid: '',
        commond: '',
        wayinfo: '',
        valid: '',
        userid: '',
        createTime: '',
        updateTime: '',
        nt: ''
      }
    }
  }
}
</script>

<style scoped>

</style>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #E1F3D8;
    }

    .el-table .danger-row {
        background: #FDE2E2;
    }
</style>
