<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <el-tab-pane
        label="人流量监测"
        name="first"
      />
      <el-tab-pane
        label="LED屏监测"
        name="second"
      />
    </el-tabs>
    <grid-table
      ref="table"
      :schema="schema"
      size="large"
    >
      <template #header="{ totalCount }">
        <button
          v-if="isSuperAdmin"
          class="c-sibling-item o-button"
          @click="onAdd"
        >
          <i class="o-button__icon el-icon-circle-plus-outline" />新增
        </button>
        <button
          v-if="totalCount"
          class="c-sibling-item o-button o-botton--white"
          @click="onFull"
        >
          <i class="o-button__icon el-icon-full-screen" />全部
        </button>
      </template>
      <grid-table-item v-slot="item">
        <camera-player
          v-if="isActivated"
          :key="item.identifier"
          :class="{ 'u-pointer': canClick && item.onlineStatus }"
          :camera="item"
          @click.native="onClick(item)"
        >
          <div
            class="c-footer l-flex--row"
            @click.stop
          >
            <div class="l-flex__auto c-sibling-item u-ellipsis">{{ item.name }}</div>
            <template v-if="isSuperAdmin">
              <i
                class="o-icon--active el-icon-edit u-pointer"
                @click.stop="onEdit(item)"
              />
              <i
                class="o-icon--active el-icon-delete u-pointer"
                @click.stop="onDel(item)"
              />
            </template>
          </div>
        </camera-player>
      </grid-table-item>
    </grid-table>
    <confirm-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onConfirm"
      @cancel="onCancel"
    >
      <el-form
        ref="cameraForm"
        :model="camera"
        :rules="cameraRules"
        label-width="100px"
        class="c-form"
      >
        <el-form-item
          label="设备名称"
          prop="name"
        >
          <el-input
            v-model.trim="camera.name"
            class="c-form__item"
            placeholder="最多50个字符"
            maxlength="50"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="ID"
          prop="identifier"
        >
          <el-input
            v-model.trim="camera.identifier"
            class="c-form__item"
            :disabled="isEdit"
            placeholder="最多50个字符"
            maxlength="50"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model.trim="camera.username"
            class="c-form__item"
            :disabled="isEdit"
            placeholder="最多50个字符"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item
          v-if="!isEdit"
          label="密码"
          prop="password"
        >
          <el-input
            v-model.trim="camera.password"
            class="c-form__item"
            type="password"
            placeholder="最多50个字符"
            maxlength="50"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="备注"
          prop="remark"
        >
          <el-input
            v-model.trim="camera.remark"
            class="c-form__item"
            type="textarea"
            maxlength="100"
            :rows="3"
            show-word-limit
          />
        </el-form-item>
      </el-form>
    </confirm-dialog>
    <el-dialog
      class="c-dialog--full"
      :visible="detailing"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      fullscreen
    >
      <camera-detail
        v-if="detailing"
        :camera="targetCamera"
        @close="onClose"
      />
    </el-dialog>
    <el-dialog
      class="c-dialog--full"
      :visible="fullscreen"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      fullscreen
    >
      <fullscreen
        v-if="fullscreen"
        :info="fullscreenOptions"
        @close="onClose"
      />
    </el-dialog>
  </wrapper>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getCameras,
  addCamera,
  updateCamera,
  deleteCamera
} from '@/api/camera'
import Fullscreen from './components/Fullscreen'

export default {
  name: 'Cameras',
  components: {
    Fullscreen
  },
  data () {
    return {
      active: 'first',
      schema: {
        pageSize: 6,
        condition: { name: '' },
        list: this.getCameras,
        filters: [
          { key: 'searchname', type: 'search', placeholder: '设备名称' }
        ]
      },
      dialogTitle: '新增',
      isEdit: true,
      camera: {
        name: '',
        identifier: '',
        username: '',
        password: '',
        remark: ''
      },
      cameraRules: {
        name: [{ required: true, message: '请填写设备名称', trigger: 'blur' }],
        identifier: [{ required: true, message: '请填写ID', trigger: 'blur' }],
        username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }]
      },
      detailing: false,
      fullscreen: false,
      targetCamera: null,
      fullscreenOptions: null
    }
  },
  computed: {
    ...mapGetters(['isSuperAdmin']),
    cameraType () {
      return this.active === 'first' ? 2 : 1
    },
    canClick () {
      return this.cameraType === 2
    },
    isActivated () {
      return !this.detailing && !this.fullscreen
    }
  },
  methods: {
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        this.active = active
        this.$refs.table.pageTo(1)
      }
    },
    getCameras (params) {
      return getCameras({
        ...params,
        cameraType: this.cameraType
      })
    },
    onAdd () {
      this.camera = {
        name: '',
        identifier: '',
        username: '',
        password: '',
        remark: ''
      }
      this.dialogTitle = '新增'
      this.isEdit = false
      this.$refs.editDialog.show()
    },
    onEdit (camera) {
      this.$camera = camera.id
      this.camera = {
        name: camera.name,
        identifier: camera.identifier,
        username: camera.username,
        remark: camera.remark
      }
      this.dialogTitle = '编辑'
      this.isEdit = true
      this.$refs.editDialog.show()
    },
    onConfirm (done) {
      this.$refs.cameraForm.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            this.editCamera(done)
          } else {
            this.addCamera(done)
          }
        }
      })
    },
    onCancel () {
      this.$refs.cameraForm.resetFields()
    },
    addCamera (done) {
      addCamera({
        cameraType: this.cameraType,
        ...this.camera
      }).then(() => {
        this.$refs.table.resetCondition({ name: this.camera.name })
        done()
      })
    },
    editCamera (done) {
      updateCamera({
        id: this.$camera,
        cameraType: this.cameraType,
        ...this.camera
      }).then(() => {
        this.$refs.table.pageTo()
        done()
      })
    },
    onDel (camera) {
      deleteCamera({ id: camera.id, name: camera.name }).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onClick (camera) {
      if (this.canClick && camera.onlineStatus) {
        this.targetCamera = camera
        this.detailing = true
      }
    },
    onFull () {
      const { totalCount, params } = this.$refs.table.info()
      if (totalCount > params.pageSize) {
        this.fullscreenOptions = {
          params: {
            ...params,
            cameraType: this.cameraType,
            pageNum: 1,
            pageSize: totalCount
          }
        }
      } else {
        this.fullscreenOptions = {
          list: this.$refs.table.getData()
        }
      }
      this.fullscreen = true
    },
    onClose () {
      this.detailing = false
      this.fullscreen = false
      this.fullscreenOptions = null
    }
  }
}
</script>

<style lang="scss" scoped>
.o-botton--white {
  color: #8e929c;
  border: 1px solid #d5d9e4;
  background-color: #fff;
}

.c-form {
  display: flex;
  flex-direction: column;
  align-items: center;

  &__item {
    width: 400px;
  }
}
</style>
