<template>
  <div class="container">
    <p-card>
      <template slot="title">
        <div class="card-custom-title">
          <div>建筑物管理</div>
          <div>
            <p-button type="primary" icon="plus" @click="showModal(true)">新增</p-button>
            <p-button type="primary" icon="download" style="margin-left: 10px">导出</p-button>
          </div>
        </div>
      </template>

      <div class="plg-inner-form-mb">
        <p-grid-form
          ref="search"
          :span="6"
          :label-col="{ span: 6 }"
          :items="items"
          @submit="handleSubmit"
        ></p-grid-form>
      </div>
      <p-table
        ref="table"
        :scroll="{ x: 600 }"
        rowKey="bldgId"
        :bordered="true"
        :autoLoad="false"
        :filterDropdownColum="false"
        :colorTransformRow="false"
        :has-row-count="true"
        :remoteUrl="{ url: upcloud_base_wh + '/wmsWhBldg/v1/page', method: 'get' }"
        :selectedRowKeys.sync="selectedRowKeys"
        :columns="columns"
        :remoteData="remoteParams"
        :remoteParams="remoteParams"
        :data-source.sync="data"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="showModal(false, record)">修改</a>
          <a-divider type="vertical" />
          <a-popconfirm title="您确定要删除吗?" ok-text="确认" cancel-text="取消" @confirm="delSingle([record.bldgId])">
            <!-- @click="delSingle([record.bldgId])" -->
            <a>删除</a>
          </a-popconfirm>
        </template>
      </p-table>
    </p-card>

    <p-modal
      :title="actionType ? '建筑物新增' : '建筑物修改'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      :draggable="true"
      width="80%"
    >
      <p-grid-form ref="modelForm" :items="modalItems" />
    </p-modal>
  </div>
</template>

<script>
import { items, modalItems, columns } from './config/building'
import { buildingAdd, buildingDelIds, buildingEdit } from './api/api.js'
import { setwarehouse } from './config/warehousemixin.js'
import { sorter } from '../../utils/sort'
import { upcloud_base_wh } from '@/config/serviceSettings'

export default {
  name: 'Container',
  mixins: [setwarehouse],
  data() {
    return {
      upcloud_base_wh: upcloud_base_wh,
      items,
      modalItems,
      data: [],
      columns: null,
      visible: false,
      confirmLoading: false,
      actionType: true,
      record: {},
      selectedRowKeys: [],
      remoteParams: {},
    }
  },

  mounted() {
    // setTimeout(() => {
    //   this.handleSubmit(null, this.$refs.search.form)
    // }, 100)
  },

  created() {
    this.columns = sorter(columns)
  },

  methods: {
    handleSubmit(event, form) {
      if (event) event.preventDefault()
      let that = this
      this.$refs.search.form.validateFields(function (err, vals) {
        console.log(err, vals,'err, vals');
        if (err) return
        that.remoteParams = vals
      })
    },

    showModal(bool, record) {
      this.visible = true
      this.actionType = bool

      this.$nextTick(() => {
        const { form } = this.$refs.modelForm
        if (bool) {
          form.resetFields()
        } else {
          this.record = record
          form.setFieldsValue(record)
        }
      })
    },

    delSingle(ids) {
      // this.$confirm({
      // content: this.$lang('是否删除选中项?'),
      // onOk: () => {
      return buildingDelIds({ idList: ids }).then((res) => {
        if (res.success) {
          this.$message.success('操作成功')
          this.$refs.table.reload()
        } else {
          this.$exception(res)
        }
      })
      // }
      // });
    },

    handleOk(e) {
      const { actionType, record } = this
      this.confirmLoading = true
      this.$refs.modelForm.form.validateFields(async (error, values) => {
        if (error) {
          return
        }
        const res = actionType ? await buildingAdd(values) : await buildingEdit({ ...values, bldgId: record.bldgId })
        this.confirmLoading = false
        if (res.success) {
          this.visible = false
          this.$message.success('操作成功')
        } else {
          this.$exception(res)
        }

        this.$refs.table.reload()
      })
    },

    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>

<style lang="less" scoped>
.card-custom-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
