<template>
  <list-page :data="listPageConfig">
    <template v-slot:searchForm>
      <el-form-item label="编 码">
        <el-input v-model="searchForm.id" clearable maxlength="100"/>
      </el-form-item>
      <el-form-item label="名 称">
        <el-input v-model="searchForm.name" clearable maxlength="100"/>
      </el-form-item>
      <el-form-item label="级 别">
        <el-select v-model="searchForm.level" clearable @clear="searchForm.level=null">
          <el-option :value="1" label="一级"/>
          <el-option :value="2" label="二级"/>
        </el-select>
      </el-form-item>
      <el-form-item label="类 型">
        <el-select v-model="searchForm.type" clearable @clear="searchForm.type=null">
          <el-option :value="1" label="常温"/>
          <el-option :value="2" label="冷藏"/>
        </el-select>
      </el-form-item>
      <el-form-item label="状 态">
        <el-select v-model="searchForm.enable" clearable @clear="searchForm.enable=null">
          <el-option :value="0" label="停用"/>
          <el-option :value="1" label="启用"/>
        </el-select>
      </el-form-item>
    </template>

    <template v-slot:tableColumn>
      <el-table-column align="center" label="编 码" prop="id" width="80"/>
      <el-table-column align="center" label="名 称" prop="name" show-overflow-tooltip/>
      <el-table-column align="center" label="级 别" show-overflow-tooltip>
        <template v-slot="{row}">{{ row.level == 1 ? '一级' : '二级' }}</template>
      </el-table-column>
      <el-table-column align="center" label="类 型" show-overflow-tooltip>
        <template v-slot="{row}">{{ row.type == 1 ? '常温' : '冷藏' }}</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>

      <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>
    </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/storehouse"
import {isEmpty} from '@/util'
import {wic} from "@/util/auth"
import {elConfirm, elError, elSuccess} from "@/util/message"

export default {
  name: "storehouseManagement",

  mixins: [tableMixin],

  components: {ListPage, EditDialog },

  data() {
    return {
      searchForm: {
        id: '',
        name: '',
        level: '',
        type: '',
        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>
