<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onConfirm"
    >
      <div class="c-grid-form u-align-self--center">
        <template v-if="!isEdit">
          <span class="c-grid-form__label required">类型</span>
          <schema-select
            v-model.trim="camera.cameraType"
            :schema="cameraTypeSelectSchema"
          />
        </template>
        <span class="c-grid-form__label required">名称</span>
        <el-input
          v-model.trim="camera.name"
          placeholder="最多50个字符"
          maxlength="50"
          clearable
        />
        <span class="c-grid-form__label required">标识</span>
        <el-input
          v-model.trim="camera.identifier"
          placeholder="最多50个字符"
          maxlength="50"
          :disabled="isEdit"
          clearable
        />
        <span class="c-grid-form__label required">账号</span>
        <el-input
          v-model.trim="camera.username"
          placeholder="最多50个字符"
          maxlength="50"
          :disabled="isEdit"
        />
        <template v-if="!isEdit">
          <span class="c-grid-form__label required">密码</span>
          <el-input
            v-model.trim="camera.password"
            class="o-password"
            placeholder="最多50个字符"
            maxlength="50"
          />
        </template>
        <span class="c-grid-form__label">备注</span>
        <el-input
          v-model.trim="camera.remark"
          type="textarea"
          maxlength="100"
          :rows="3"
          show-word-limit
        />
      </div>
    </confirm-dialog>
    <camera-dialog ref="cameraDialog" />
  </wrapper>
</template>

<script>
import {
  getCameras,
  addCamera,
  updateCamera,
  deleteCamera
} from '@/api/camera'
import { Camera } from '@/constant'

export default {
  name: 'Cameras',
  data () {
    const cameraTypeSelectSchema = {
      options: [
        { value: Camera.TRAFFIC, label: '人流量监测' },
        { value: Camera.LED, label: 'LED屏监测' }
      ]
    }

    return {
      cameraTypeSelectSchema,
      schema: {
        condition: { cameraType: void 0, name: '' },
        list: getCameras,
        buttons: [
          { type: 'add', on: this.onAdd }
        ],
        filters: [
          { key: 'cameraType', type: 'select', placeholder: '全部类型', ...cameraTypeSelectSchema },
          { key: 'name', type: 'search', placeholder: '摄像头名称' }
        ],
        cols: [
          { type: 'refresh' },
          { label: '类型', render ({ cameraType }) {
            return ['', '人流量监测', 'LED屏监测'][cameraType]
          } },
          { prop: 'name', label: '名称' },
          { prop: 'identifier', label: '标识' },
          { type: 'tag', 'width': 160, render ({ onlineStatus }) {
            return onlineStatus === 1
              ? { type: 'success', label: '在线' }
              : { type: 'danger', label: '离线' }
          } },
          { prop: 'remark', label: '备注' },
          { type: 'invoke', width: 160, render: [
            { label: '编辑', on: this.onEdit },
            { label: '查看', render ({ onlineStatus }) { return onlineStatus }, on: this.onFullScreen },
            { label: '删除', on: this.onDel }
          ] }
        ]
      },
      camera: {}
    }
  },
  computed: {
    isEdit () {
      return !!this.camera.id
    },
    dialogTitle () {
      if (this.isEdit) {
        return `编辑${this.camera.type === Camera.TRAFFIC ? '人流量监测摄像头' : 'LED屏监测摄像头'}`
      }
      return '新增摄像头'
    }
  },
  methods: {
    onAdd () {
      this.camera = {
        cameraType: this.$refs.table.info().cameraType || Camera.TRAFFIC,
        name: '',
        identifier: '',
        username: '',
        password: '',
        remark: ''
      }
      this.$refs.editDialog.show()
    },
    onEdit (camera) {
      this.camera = {
        id: camera.id,
        name: camera.name,
        identifier: camera.identifier,
        username: camera.username,
        remark: camera.remark
      }
      this.$refs.editDialog.show()
    },
    onConfirm (done) {
      if (!this.camera.name) {
        this.$message({
          type: 'warning',
          message: '请填写设备名称'
        })
        return
      }
      if (!this.camera.name) {
        this.$message({
          type: 'identifier',
          message: '请填写设备标识'
        })
        return
      }
      if (this.isEdit) {
        this.editCamera(done)
      } else {
        this.addCamera(done)
      }
    },
    addCamera (done) {
      if (!this.camera.username) {
        this.$message({
          type: 'identifier',
          message: '请填写账号'
        })
        return
      }
      if (!this.camera.password) {
        this.$message({
          type: 'identifier',
          message: '请填写密码'
        })
        return
      }
      addCamera(this.camera).then(() => {
        this.$refs.table.resetCondition({ cameraType: this.camera.cameraType, name: this.camera.name })
        done()
      })
    },
    editCamera (done) {
      updateCamera(this.camera).then(() => {
        this.$refs.table.pageTo()
        done()
      })
    },
    onDel (camera) {
      deleteCamera({ id: camera.id, name: camera.name }).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onFullScreen (camera) {
      this.$refs.cameraDialog.show(camera)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-password {
  -webkit-text-security: disc;
}
</style>
