<template>
  <base-list>
    <template slot="n_header">
      <el-form v-model="pagerDto" inline>
        <el-form-item label="库房名字">
          <el-select v-model="pagerDto._Eq_RoomId" placeholder="请选择库房" clearable>
            <el-option
              v-for="room in rooms"
              :key="room.Id"
              :label="room.Name"
              :value="room.Id"
            /> </el-select>
        </el-form-item>
        <el-form-item label="库区名字">
          <el-input v-model="pagerDto._Eq_Name" placeholder="库区名字 " clearable />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-select v-model="pagerDto._Eq_IsEnable" placeholder="请选择" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            /> </el-select></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pagerSerach()">搜索</el-button>
        </el-form-item>
      </el-form>
    </template>
    <template slot="n_option">
      <el-button type="primary" size="mini" @click="showAddRoomArea"> 添加库区 </el-button>
    </template>
    <template>
      <el-table
        v-loading="dataLoading"
        :data="data"
        :highlight-current-row="true"
        :select-on-indeterminate="true"
        width="100%"
      >
        <el-table-column prop="Name" label="名称" />
        <el-table-column prop="RoomId" :formatter="colFormatRoomName" label="所属库区" />
        <el-table-column prop="Description" label="描述" />
        <el-table-column prop="Sort" label="排序" />
        <el-table-column prop="CreateTime" :formatter="colFormatDate" label="创建日期" />
        <el-table-column prop="IsEnable" label="是否启用">
          <template slot-scope="r">
            <el-switch
              v-model="r.row.IsEnable"
              active-color="#1890ff"
              inactive-color="#ccc"
              @change="changeEnable($event, r.row.Id)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="r">
            <el-link
              icon="el-icon-edit"
              type="primary"
              @click="showEditRoomArea(r.row)"
            >编辑</el-link>
            <el-link
              icon="el-icon-delete"
              type="danger"
              @click="showDeleteRoomArea(r.row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 40, 100, 400]"
        :current-page="pagerDto.PageIndex"
        :page-size.sync="pagerDto.PageSize"
        background
        layout="prev, pager, next ,total ,jumper,sizes,slot "
        :total="pagerDto.total"
        @size-change="changePager"
        @current-change="pagerSerach"
      />
    </template>
    <el-dialog
      v-loading="modelLoading"
      title="添加/编辑库区"
      :visible.sync="modelDialogShow"
    >
      <edit-room-area :model="editModel" :rooms="rooms" @save="saveRoomArea" />
    </el-dialog>
  </base-list>
</template>
<script>
import BaseList from '@/components/Xyy/baselist'
import {
  queryRoomArea,
  CreateRoomArea,
  GetRoomArea,
  UpdateRoomArea,
  DisableRoomArea,
  EnableRoomArea,
  DeleteRoomArea
} from '@/api/stock/roomArea'
import { getAllEnabledRooms } from '@/api/stock/room'
import colFormatDate from '@/utils/columnFormat'
import editRoomArea from './components/editRoomArea'
export default {
  name: 'StockAreaList',
  components: { 'base-list': BaseList, editRoomArea },
  data() {
    return {
      rooms: [],
      options: [
        { value: true, label: '是' },
        { value: false, label: '否' }
      ],

      data: [],
      editModel: {},

      dataLoading: false,
      pagerDto: { PageIndex: 0, PageSize: 10, total: 0 },
      modelDialogShow: false,
      modelLoading: false
    }
  },
  mounted() {
    this.pagerSerach(1)
    this.getAllRooms()
  },
  methods: {

    colFormatDate,
    colFormatRoomName(row, column) {
      const roomId = row.RoomId
      const room = this.rooms.find(r => r.Id == roomId)
      if (room) {
        return room.Name
      } else {
        return 'null'
      }
    },
    getAllRooms() {
      getAllEnabledRooms().then((res) => {
        this.rooms = res
      })
    },
    pagerSerach(index) {
      this.dataLoading = true
      if (index) {
        this.pagerDto.PageIndex = index
      }
      queryRoomArea(this.pagerDto)
        .then((res) => {
          this.data = res.Result
          this.pagerDto.total = res.TotalCount
        })
        .finally((res) => {
          this.dataLoading = false
        })
    },
    changePager(v) {
      this.PageSize = v
      this.pagerSerach()
    },
    changeEnable($event, rowId) {
      var that = this
      if ($event) {
        EnableRoomArea({ Id: rowId }).then((r) => {
          that.$message({ type: 'success', message: '启用成功' })
        })
      } else {
        DisableRoomArea({ Id: rowId }).then((r) => {
          that.$message({ type: 'success', message: '停用成功' })
        })
      }
    },

    showEditRoomArea(row) {
      this.editModel = row
      this.modelDialogShow = true
    },
    showAddRoomArea() {
      this.editModel = { Id: 0 }
      this.modelDialogShow = true
    },
    showDeleteRoomArea(m) {
      this.$confirm('是否删除该库区?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        DeleteRoomArea({ id: m.Id }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.pagerSerach()
        })
      })
        .catch(() => {

        })
    },
    saveRoomArea(m) {
      if (m.Id > 0) {
        this.modelLoading = true
        UpdateRoomArea(m)
          .then((x) => {
            this.$message({ type: 'success', message: '修改成功' })
            this.pagerSerach()
            this.modelDialogShow = false
          })
          .finally((r) => {
            this.modelLoading = false
          })
      } else {
        this.modelDialogShow = true
        this.modelLoading = true
        CreateRoomArea(m)
          .then((x) => {
            this.$message({ type: 'success', message: '添加成功' })
            this.pagerSerach()
            this.modelDialogShow = false
          })
          .finally((r) => {
            this.modelLoading = false
          })
      }
    }
  }
}
</script>
