<template>
  <div class="subPage">
    <form class="mainForm">
      <ul>
         <li class="flex-h">
          <span>选择案场：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-select v-model="Case" placeholder="请选择">
                <el-option
                  v-for="item in cases"
                  :key="item.CaseId"
                  :label="item.CaseName"
                  :value="item.CaseId">
                </el-option>
              </el-select>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>设备名称：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入设备名称"
                v-model="detail.Name"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li class="flex-h">
          <span>设备Code：<em>*</em></span>
          <div class="flex-item">
            <div style="width:50%">
              <el-input
                placeholder="请输入设备Code"
                v-model="detail.EquipmentCode"
                clearable>
              </el-input>
            </div>
          </div>
        </li>
        <li style="text-align:center">
          <el-button type="primary" size="mini" @click='submit'>保存</el-button>
          <el-button type="danger" size="mini" @click="cancel">取消</el-button>
        </li>
      </ul>
    </form>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'

const { mapState: mapDeviceState, mapActions: mapDeviceActions } = createNamespacedHelpers('device')
export default {
  name: '',
  data () {
    return {}
  },
  components: {},
  computed: {
    ...mapDeviceState({
      detail: x => x.deviceInfo,
    }),
    ...mapState({
      cases: x => x.app.cases.list,
      caseid: x => x.app.cases.default,
      orgid: x => x.app.user.OrgId,
    }),
    Case: {
      get () {
        return this.detail.CaseId || this.caseid
      },
      set (val) {
        this.UpdateInfo({ ...this.detail, CaseId: val })
      }
    }
  },
  methods: {
    ...mapDeviceActions([
      'GetDeviceByID',
      'AddDevice',
      'UpdateDevice',
      'SetDeviceNull',
      'UpdateInfo',
    ]),
    submit () {
      if ((this.detail.EquipmentId || '') === '') {
        if ((this.detail.Name || '') === '') {
          this.$message({
            message: '设备名称不能为空',
            type: 'error'
          })
          return false
        }
        if ((this.detail.EquipmentCode || '') === '') {
          this.$message({
            message: '设备Code不能为空',
            type: 'error'
          })
          return false
        }
        this.detail.OrgId = this.orgid
        if (!this.detail.CaseId || this.detail.CaseId === '') {
          this.detail.CaseId = this.caseid
        }
        this.AddDevice(this.detail).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.$router.push({ name: 'deviceManager' })
        })
      } else {
        if ((this.detail.Name || '') === '') {
          this.$message({
            message: '设备名称不能为空',
            type: 'error'
          })
          return false
        }
        if ((this.detail.EquipmentCode || '') === '') {
          this.$message({
            message: '设备Code不能为空',
            type: 'error'
          })
          return false
        }
        this.UpdateDevice(this.detail).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.$router.push({ name: 'deviceManager' })
        })
      }
    },
    cancel () {
      this.$router.go(-1)
    }
  },
  beforeMount () {
    const { id } = this.$route.query
    if (id && id !== '') {
      this.GetDeviceByID({ deviceid: id })
    } else {
      this.SetDeviceNull()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
