<template>
  <div class="freight">
    <!-- <p-card title="货位管理" :style="{ borderBottom: 'none' }"> -->
    <!-- <template slot="extra"> -->
    <div style="overflow:hidden">
      <p-button style="float:right;margin-left:50px" type="primary" @click="e => logicEdit(e, true)"
        >修改逻辑区</p-button
      >
      <p-button style="float:right" type="primary" icon="plus" @click="e => showModal(e, true)">新增</p-button>
    </div>
    <!-- </template> -->

    <div class="plg-inner-form-mb">
      <p-grid-form
        :label-col="{ span: 8 }"
        ref="search"
        :span="6"
        
        :items="items"
        @submit="hanlderSubmit"
      ></p-grid-form>
    </div>
    <!--  @clickRow="clickRow"  -->
    <p-table
      ref="table"
      rowKey="warehouseLocatorId"
      :bordered="true"
      :autoLoad="false"
      :scroll="{ x: 1200 }"
      :has-row-count="true"
      :row-selection="rowSelection"
      :filterDropdownColum="false"
      :colorTransformRow="false"
      :remoteUrl="{ url: '/api/upcloud-base-wh/locator/page', method: 'get' }"
      :columns="columns"
      :data-source.sync="data"
      :remoteData="remoteParams"
      :remoteParams="remoteParams"
    >
      <template slot="action" slot-scope="text, record">
        <a @click="e => showModal(e, false, record)">修改</a>
        <a-divider type="vertical" />
        <a-popconfirm title="您确定要删除吗?" ok-text="确认" cancel-text="取消" @confirm="delSingle(record)">
          <a @click="e => e.stopPropagation()">删除</a>
        </a-popconfirm>
      </template>
    </p-table>
    <!-- </p-card> -->

    <!-- <p-card title="货位扩展"
            :style="{ borderTop: 'none' }">
      <p-spin :spinning="spinning">
        <a-descriptions title=""
                        :column="4">
          <a-descriptions-item label="预留字段1"> {{ locatorProfiles.attribute11 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段2"> {{ locatorProfiles.attribute12 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段3"> {{ locatorProfiles.attribute13 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段4"> {{ locatorProfiles.attribute14 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段5"> {{ locatorProfiles.attribute15 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段6"> {{ locatorProfiles.segment11 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段7"> {{ locatorProfiles.segment12 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段8"> {{ locatorProfiles.segment13 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段9">{{ locatorProfiles.segment14 }} </a-descriptions-item>
          <a-descriptions-item label="预留字段10"> {{ locatorProfiles.segment15 }}</a-descriptions-item>
        </a-descriptions>
      </p-spin>
    </p-card> -->

    <p-modal
      :title="actionType ? '货位新增' : '货位修改'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :maskClosable="false"
      :enlargeable="true"
      :draggable="true"
      width="80%"
      destroyOnClose
    >
      <p-grid-form
        :label-col="{ span: 8 }"
        ref="modelForm"
        :span="8"
    
        :items="modalItems"
      ></p-grid-form>

      <div class="extend-title">货位扩展</div>
      <p-grid-form
        :label-col="{ span: 8 }"
        ref="attachForm"
        :span="8"
     
        :items="attachItems"
      ></p-grid-form>
    </p-modal>

    <p-modal
      title="修改逻辑区"
      :visible="visibleedit"
      :confirm-loading="confirmLoading"
      @ok="handleOkLogic"
      @cancel="handleCancel"
      :maskClosable="false"
      :enlargeable="true"
      :draggable="true"
      destroyOnClose
    >
      <p-grid-form
        :label-col="{ span: 8 }"
        ref="modelForm2"
        :span="24"
 
        :items="modalItems2"
      ></p-grid-form>
    </p-modal>
  </div>
</template>

<script>
import { items, extendItems, attachItems, modalItems, modalItems2, columns } from './config/freight'
import { freightOne, freightAdd, freightDelete, freightUpdate, updateLogic } from './api/api.js'
// import { setwarehouse } from './config/warehousemixin.js'

export default {
  name: 'Freight',
  //   mixins: [setwarehouse],
  data() {
    return {
      items: items,
      extendItems: extendItems,
      attachItems: attachItems,
      modalItems: modalItems,
      modalItems2,
      visibleedit: false,
      columns: columns,
      data: [],
      remoteParams: {},
      visible: false,
      confirmLoading: false,
      spinning: false,
      actionType: true,
      record: {},
      locatorProfiles: {},
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    rowSelection() {
      let _this = this
      return {
        selectedRowKeys: _this.selectedRowKeys,
        onSelectAll(selected, selectedRows, changeRows) {
          var checked = selected
          var key = changeRows.map(item => item.id)
        },
        onSelect(record, selected, selectedRows, nativeEvent) {
          var checked = selected
          var key = record.id
        },
        onChange(selectedRowKeys, selectedRows) {
          _this.selectedRows = selectedRows
          _this.selectedRowKeys = selectedRowKeys
        }
      }
    }
  },
  methods: {
    getData(params) {
      this.$refs.table.reload()
    },

    hanlderSubmit(event, form) {
      event.preventDefault()
      form.validateFields((err, values) => {
        if (!err) {
          this.remoteParams = values
        }
      })
    },
    logicEdit() {
      if (this.selectedRowKeys < 1) {
        this.$message.error('请至少选择一条数据')
        return
      }
      this.visibleedit = true
    },
    handleOkLogic() {
      this.$refs.modelForm2.form.validateFields(async (error, values) => {
        if (!error) {
          const params = {
            logicId: values.warehouseLogicId,
            locatorIds: this.selectedRowKeys
          }
          updateLogic(params).then(res => {
            if (res.success) {
              this.visibleedit = false
              this.$message.success(res.message || '操作成功')
              this.selectedRowKeys = []
              this.$refs.table.reload()
            } else {
              this.$message.error(res.message || '操作失败')
            }
          })
        }
      })
    },
    async showModal(e, bool, record) {
      e.stopPropagation()
      this.visible = true
      this.actionType = bool
      this.record = record

      if (!bool) {
        const res = await freightOne({ id: record.warehouseLocatorId })
        if (res.success) {
          const { locatorProfiles } = res.data
          this.locatorProfiles = locatorProfiles
        }
      }

      this.$nextTick(() => {
        const { form } = this.$refs.modelForm
        if (bool) {
          form.resetFields()
          this.$refs.attachForm.form.resetFields()
        } else {
          record.isEnable = record.isEnable == 1 ? true : false
          form.setFieldsValue(record)
          this.$refs.attachForm.form.setFieldsValue(this.locatorProfiles)
        }
      })
    },

    delSingle(record) {
      freightDelete({ ids: record.warehouseLocatorId }).then(res => {
        if (res.success) {
          this.visible = false
          this.$message.success(res.message || '操作成功')
          this.getData()
        } else {
          //   this.$message.warning(res.message || '操作失败')
          this.$exception(res)
        }
      })
    },

    handleOk(e) {
      this.confirmLoading = true
      const { actionType, record } = this

      const attachForm = this.$refs.attachForm.form.getFieldsValue()
      this.$refs.modelForm.form.validateFields(async (error, values) => {
        if (!error) {
          values.isEnable = values.isEnable ? 1 : 0
          values = {
            ...values,
            locatorProfiles: attachForm
          }
          const res = actionType
            ? await freightAdd(values)
            : await freightUpdate({ ...values, warehouseLocatorId: record.warehouseLocatorId })
          let msg = res.message
          if (res.success) {
            this.visible = false
            this.$message.success(msg || '操作成功')
          } else {
            // this.$message.warning(msg || '操作失败')
            this.$exception(res)
          }

          this.getData()
        }
        this.confirmLoading = false
      })
    },
    handleCancel(e) {
      this.visible = false
      this.visibleedit = false
    },

    async clickRow(selectedRowKeys, record, row) {
      this.spinning = true
      const res = await freightOne({ id: row.warehouseLocatorId })
      if (res.success) {
        const { locatorProfiles } = res.data
        this.locatorProfiles = locatorProfiles
      }
      this.spinning = false
    }
  }, //methods
  mounted() {
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.card-custom-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.extend-title {
  font-size: 14px;
  font-weight: bold;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 12px;
}
</style>
