<template>
  <div>

    <div ref="lxHeader">
      <lx-header icon="md-apps" text="防汛工单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
            <!-- <Select v-model="select.storages_id" style="width: 200px;margin-right: 10px;" placeholder="所在仓库" clearable>
              <Option v-for="item in cangkuList" :key="item.id" :value="item.id">{{ item.cangkumingcheng }}</Option>
            </Select> -->
            <Button type="primary" @click="getindex">查询</Button>
            <Button
              icon="ios-add"
              type="primary"
              style="margin-left: 10px;"
              @click="$refs['addWorkOrder'].isShow = true,$refs['addWorkOrder'].type = 'add'"
            >添加</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      v-loading="loading"
      :list="list"
      :total="total"
      :table-item="table"
      @pageSizeChange="pageSizeChange"
      @pageIndexChange="pageChange"
    >
      <template v-slot:btns>
        <el-table-column label="操作" width="180" header-align="center">
          <template slot-scope="scope">
            <div>
              <Button
                type="primary"
                size="small"
                style="margin-left: 10px;"
                @click="editorMater(scope.row.id,'editor')"
              >编辑</Button>
              <Poptip transfer confirm title="确认要删除吗？" @on-ok="deleteMater(scope.row)">
                <Button type="error" style="margin-left: 10px;" size="small" ghost>删除</Button>
              </Poptip>
            </div>

          </template>
        </el-table-column>
      </template>

    </xy-table>
    <addWorkOrder ref="addWorkOrder" @refresh="getindex" />

  </div>
</template>

<script>
import {
  index,
  destroy
} from '@/api/workOrder.js'
import addWorkOrder from './component/addWorkOrder.vue'
import {
  Message
} from 'element-ui'
export default {
  components: {
    addWorkOrder
  },
  data() {
    return {
      loading: false,
      select: {
        pageSize: 10,
        pageIndex: 1,
        time: ''
      },
      total: 0,
      list: [],
      table: [{
        label: '序号',
        type: 'index',
        fixed: 'left',
        width: 80
      },
      {
        label: '名称',
        width: 240,
        prop: 'title',
        align: 'left'
      },
      {
        label: '发起时间',
        width: 180,
        prop: 'time',
        align: 'center'
      },
      {
        label: '内容',
        prop: 'content',
        align: 'left'
      }
      ]
    }
  },
  mounted() {
    this.getindex()
  },
  methods: {
    async getindex() {
      this.loading = true
      const res = await index({
        page_size: this.select.pageSize,
        page: this.select.pageIndex,
        filter: [{
          'key': 'time',
          'op': 'eq',
          'value': this.select.time ? this.select.time : ''
        }]
      })
      this.list = res.data
      this.total = res.total
      this.loading = false
    },
    pageChange(e) {
      this.select.pageIndex = e
      this.getindex()
    },
    pageSizeChange(e) {
      this.select.pageSize = e
      this.getindex()
    },
    editorMater(id, type) {
      this.$refs['addWorkOrder'].id = id
      this.$refs['addWorkOrder'].type = type
      this.$refs['addWorkOrder'].isShow = true
    },
    deleteMater(row) {
      destroy({
        id: row.id
      }).then(res => {
        Message({
          type: 'success',
          message: '删除成功'
        })
        this.getindex()
      })
    }
  }

}
</script>

<style scoped>
</style>
