<template>
  <list-page :data="listPageConfig">
    <template v-slot:searchForm>
      <el-form-item label="设备名">
        <el-input v-model="searchForm.name" clearable maxlength="50"/>
      </el-form-item>
      <el-form-item label="型 号">
        <el-input v-model="searchForm.spec" clearable maxlength="202"/>
      </el-form-item>
      <el-form-item label="厂 商">
        <el-input v-model="searchForm.supplier" clearable maxlength="20"/>
      </el-form-item>
      <el-form-item label="存放位置">
        <el-input v-model="searchForm.location" clearable maxlength="50"/>
      </el-form-item>
      <el-form-item label="制造日期">
        <el-date-picker
            v-model="searchForm.manuDate"
            type="date"
            value-format="timestamp"
            clearable
        />
      </el-form-item>
      <el-form-item label="购买日期">
        <el-date-picker
            v-model="searchForm.buyDate"
            type="date"
            value-format="timestamp"
            clearable
        />
      </el-form-item>
      <el-form-item label="状 态">
        <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable = null">
          <el-option :value="true" label="启用"/>
          <el-option :value="false" label="禁用"/>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="temp.createTime"
            format="yyyy-MM-dd"
            range-separator="-"
            type="daterange"
            value-format="timestamp"
        />
      </el-form-item>
    </template>

    <template v-slot:tableColumn>
      <el-table-column align="center" label="#" type="index" width="80"/>
      <el-table-column align="center" label="设 备" prop="name" show-overflow-tooltip/>
      <el-table-column align="center" label="型 号" prop="spec" show-overflow-tooltip/>
      <el-table-column align="center" label="功能简述" prop="introduction" show-overflow-tooltip/>
      <el-table-column align="center" label="厂商" prop="supplier" show-overflow-tooltip/>
      <el-table-column align="center" label="制造日期" width="150">
        <template v-slot="{row}">{{ row.manuDate | timestamp2Date }}</template>
      </el-table-column>
      <el-table-column align="center" label="购买日期" width="150">
        <template v-slot="{row}">{{ row.buyDate | timestamp2Date }}</template>
      </el-table-column>
      <el-table-column align="center" label="存放位置" prop="location" show-overflow-tooltip/>
      <el-table-column align="center" label="创建人" prop="creatorName" show-overflow-tooltip/>
      <el-table-column align="center" label="创建时间" width="150">
        <template v-slot="{row}">{{ row.createTime | timestamp2Date }}</template>
      </el-table-column>
      <el-table-column align="center" label="状 态" width="120">
        <template v-slot="{row}">
          <span :class="row.enable ? 'success' : 'error'" class="dot"/>
          <span>{{ row.enable ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
    </template>
    <edit-dialog v-model="editDialog" :data="row" :type="type" @success="success"/>
  </list-page>
</template>

<script>
import tableMixin from '@/mixin/tablePageMixin'
import ListPage from '@/view/_common/ListPage'
import EditDialog from './EditDialog'
import {add, update, del, search} from "@/api/system/equipment"
import {isEmpty} from '@/util'
import {wic} from "@/util/auth"
import {elConfirm, elError, elSuccess} from "@/util/message"

export default {
  name: "equipmentManagement",

  mixins: [tableMixin],

  components: {ListPage, EditDialog},

  data() {
    return {
      searchForm: {
        name: '',
        spec: '',
        creator:'',
        introduction: '',
        supplier: '',
        manuDate: '',
        buyDate:'',
        location:'',
        enable: null
      },
      temp: {
        createTime: []
      },
      editDialog: false
    }
  },

  computed: {
    ...wic({add, update, del}),

    listPageConfig() {
      return {
        pageLoading: this.config.operating,
        buttons: [
          this.canAdd && {icon: 'el-icon-plus', e: this.add, content: '添 加'},
          {icon: 'el-icon-view', e: this.see, content: '查 看'},
          this.canUpdate && {icon: 'el-icon-edit', e: this.edit, content: '编 辑'},
          this.canDel && {icon: 'el-icon-delete', e: this.del, content: '删 除'}
        ],
        dataLoading: this.config.loading,
        search: {
          props: {model: this.searchForm},
          on: {search: this.search}
        },
        table: {
          props: {data: this.tableData},
          on: {'row-click': this.rowClick}
        },
        pagination: {
          props: {model: this.searchForm},
          on: {'current-change': this.pageChange}
        }
      }
    }
  },

  methods: {
    mergeSearchForm() {
      return {
        ...this.searchForm,
        startTime: this.temp.createTime ? this.temp.createTime[0] : null,
        endTime: this.temp.createTime ? this.temp.createTime[1] + 86400000 : null
      }
    },

    search() {
      if (this.config.loading) return
      this.config.loading = true
      this.row = null
      this.type = 'see'
      search
          .request(this.mergeSearchForm())
          .then(({data: {list, total}}) => {
            this.searchForm.total = total
            this.tableData = list
            console.log(list,total)
          })

          .finally(() => this.config.loading = false)
    },

    add() {
      this.row = null
      this.type = 'add'
      this.editDialog = true
    },

    see() {
      if (isEmpty(this.row)) return elError('请选择要查看的设备')
      this.type = 'see'
      this.editDialog = true
    },

    edit() {
      if (isEmpty(this.row)) return elError('请选择要编辑的设备')
      this.type = 'edit'
      this.editDialog = true
    },

    del() {
      if (isEmpty(this.row)) return elError('请选择要删除的设备')
      if (this.row.enable) return elError('已启用的设备不能删除')
      if (this.config.operating) return
      elConfirm(`确定删除设备【${this.row.name}】？`)
          .then(() => {
            this.config.operating = true
            return del.request({id: this.row.id, name: this.row.name})
          })
          .then(() => this.success('删除成功'))
          .finally(() => this.config.operating = false)
    },

    success(msg) {
      elSuccess(msg)
      this.editDialog = false
      this.search()
    }
  }
}
</script>
