<template>
  <div class="logicalArea">
    <!-- 新增弹出 -->
    <add_logicalArea
      :visible.sync="visible"
      :rows.sync="rows"
      :addTypeName="addTypeName"
      :warehouse_page="warehouse_page"
      :baseWmsWarehouseRoomMst_page="baseWmsWarehouseRoomMst_page"
      :baseWmsWarehouseArea_page="baseWmsWarehouseArea_page"
      @handleAdd="handleAdd"
    />

    <p-card title="逻辑区分组">
      <span slot="extra">
        <!-- 新增弹出 -->
        <p-button type="primary" icon="plus" style="margin-right: 1rem;" @click="showModal({})">新增</p-button>
        <p-button type="primary" icon="delete" @click="del(ids)">批量删除</p-button>
      </span>
      <p-form :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }" :form="form" ref="search" @submit="handleSubmit">
        <a-row>
          <a-col :span="8">
            <p-form-item label="仓库名称">
              <!--查询 隐藏的仓库id -->
              <p-input type="hidden" v-decorator="['warehouseId']" />
              <!--查询 隐藏的仓库编码 -->
              <p-input type="hidden" v-decorator="['warehouseCode']" />

              <p-search-modal
                title="仓库名称"
                v-decorator="[
                  'warehouseName',
                  { initialValue: warehouse.warehouseName },
                  { rules: [{ required: false, message: '请输入！' }] }
                ]"
                :target-click="true"
                :remoteUrl="{
                  url: '/api/upcloud-base-wh/warehouse/page',
                  method: 'get'
                }"
                rowSelectType="radio"
                targetValueKey="warehouseName"
                rowKey="warehouseId"
                :tableConfig="{
                  columns: [
                    { dataIndex: 'warehouseName', title: '仓库名称' },
                    { dataIndex: 'warehouseCode', title: '仓库编码' },
                    { dataIndex: 'warehouseType', title: '仓库类型' },
                    { dataIndex: 'dcName', title: '所属仓配中心' }
                  ]
                }"
                :toolBar="{
                  items: [
                    {
                      type: 'input',
                      name: 'warehouseName',
                      label: '仓库名称',
                      value: ''
                    },
                    {
                      type: 'input',
                      name: 'warehouseCode',
                      label: '仓库编码',
                      value: ''
                    }
                  ]
                }"
                @ok="setWarehouseCode"
                @change="clearWarehouseCode"
              />
            </p-form-item>
          </a-col>
          <a-col :span="8">
            <p-form-item label="逻辑区名称">
              <p-input
                allow-clear
                v-decorator="['warehouseLogicName', { rules: [{ required: false, message: '请输入！' }] }]"
              />
            </p-form-item>
          </a-col>
          <a-col :span="8">
            <p-form-item label="逻辑区编码">
              <p-input
                allow-clear
                v-decorator="['warehouseLogicCode', { rules: [{ required: false, message: '请输入！' }] }]"
              />
            </p-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <p-form-item label="是否启用">
              <p-select
                v-decorator="['isEnable', { rules: [{ required: false, message: '请输入！' }] }]"
                :options="[
                  { title: '全部', value: '' },
                  { title: '停用', value: '0' },
                  { title: '启用', value: '1' }
                ]"
              />
            </p-form-item>
          </a-col>
          <a-col :span="8" style="text-align: center;">
            <p-form-item>
              <p-button type="primary" icon="search" html-type="submit">查询</p-button>
              <p-button type="" icon="undo" @click="handleReset" style="margin-left: 1rem;">重置</p-button>
            </p-form-item>
          </a-col>
        </a-row>
      </p-form>
      <p-spin :spinning="spinning" style="margin-top: 16px;">
        <p-table
          dragle
		  auto-width
		  :scroll="{x:true}"
          :columns="columns"
          :data-source="data"
          rowKey="warehouseLogicId"
          @checkRow="checkRow"
          @change="changePagination"
          :pagination="pagination"
          :loading="loading"
          bordered
        >
          <!--<template slot="warehouseRoomId" slot-scope="text,row,index">
					{{ returnWarehouseRoomId(text) }}
				</template>	 
				 <template slot="warehouseId" slot-scope="text,row,index">
					{{ returnWarehouseName(text) }}
				</template> -->
          <template slot="isEnable" slot-scope="text, row, index">
            {{ text == '1' ? '启用' : '禁用' }}
          </template>

          <span slot="action" slot-scope="text, record, index">
            <a @click="showModal(record, 1)">编辑</a>
            <a-divider type="vertical" style="" />
            <a @click="del(record.warehouseLogicId)">删除</a>
          </span>
        </p-table>
      </p-spin>
    </p-card>
  </div>
</template>

<script>
import add_logicalArea from './components/add_logicalArea.vue'
import {
  baseWmsWarehouseLogic_page,
  baseWmsWarehouseLogic_page2,
  baseWmsWarehouseLogic_add,
  baseWmsWarehouseLogic_edit,
  baseWmsWarehouseLogic_delete,
  warehouse_page,
  baseWmsWarehouseRoomMst_page,
  baseWmsWarehouseArea_page
} from '../api/api_warehouse.js'

const columns = [
  { dataIndex: 'warehouseLogicCode', title: '逻辑区编码', width: 80 },
  { dataIndex: 'warehouseLogicName', title: '逻辑区名称', width: 80 },
  { dataIndex: 'warehouseLogicType', title: '逻辑区类型', width: 80 },
  { dataIndex: 'warehouseName', title: '仓库名称', width: 80, scopedSlots: { customRender: 'warehouseName' } },
  { dataIndex: 'bldgName', title: '建筑物名称', width: 80, scopedSlots: { customRender: 'bldgName' } },
  /* { dataIndex: 'warehouseRoomName', title: '库房名称', width: 80, scopedSlots: { customRender: 'warehouseRoomName' } },
  { dataIndex: 'warehouseAreaName', title: '库区名称', width: 80, scopedSlots: { customRender: 'warehouseAreaName' } },
   {dataIndex: 'dcId', title: '冗余字段',width:80,}, */
  { dataIndex: 'floorNum', title: '所在楼层', width: 80 },
  { dataIndex: 'isEnable', title: '是否启用', width: 80, scopedSlots: { customRender: 'isEnable' } },
  { dataIndex: 'warehouseLogicDistance', title: '作业距离(米)', width: 80 },
  /* {dataIndex: 'accessLevel', title: '数据访问控制级别',width:80,}, */
  { dataIndex: 'creatorName', title: '创建人', width: 80 },
  { dataIndex: 'modifierName', title: '最后修改人', width: 80 },
  { dataIndex: 'gmtCreate', title: '创建日期', width: 80 },
  { dataIndex: 'gmtModified', title: '最后修改日期', width: 80 },
  { dataIndex: 'attribute1', title: '预留字段1', width: 80 },
  { dataIndex: 'attribute2', title: '预留字段2', width: 80 },
  { dataIndex: 'attribute3', title: '预留字段3', width: 80 },
  { dataIndex: 'attribute4', title: '预留字段4', width: 80 },
  { dataIndex: 'attribute5', title: '预留字段5', width: 80 },
  { dataIndex: 'segment1', title: '预留字段6', width: 80 },
  { dataIndex: 'segment2', title: '预留字段7', width: 80 },
  { dataIndex: 'segment3', title: '预留字段8', width: 80 },
  { dataIndex: 'segment4', title: '预留字段9', width: 80 },
  { dataIndex: 'segment5', title: '预留字段10', width: 80 },
  {
    dataIndex: 'action',
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 90,
    fixed: 'right',
    align: 'center'
  }
]
export default {
  components: { add_logicalArea },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
      columns,
      rows: {},
      addTypeName: '新增逻辑区',
      data: [],
      visible: false,
      spinning: false,
      ids: '',
      warehouse_page: [], //仓库
      warehouse: this.$store.state.user.warehouse, //vuex库房共享资料
      baseWmsWarehouseRoomMst_page: [], //库房
      baseWmsWarehouseArea_page: [], //库区
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      }
    }
  }, //data
  methods: {
    // 查询仓库时设置仓库代码
    setWarehouseCode(event, selectId, selectData) {
      this.$refs.search.form.setFieldsValue({
        warehouseId: selectData[0].warehouseId, //仓库代码
        warehouseCode: selectData[0].warehouseCode //仓库代码
      })
    },
    // 清除查询仓库时设置仓库代码
    clearWarehouseCode(event, selectId, selectData) {
      if (!selectId) {
        this.$refs.search.form.setFieldsValue({
          warehouseCode: '', //仓库代码
          warehouseId: '' //仓库id
        })
      }
    },
    showModal(rows, num) {
      this.visible = true
      rows = { ...rows }
      if (num == 1) {
        // 编辑
        this.addTypeName = '修改逻辑区'
        this.rows = Object.assign(rows, { id: '编辑id', isEnable: rows.isEnable == '1' ? true : false })
      } else {
        this.addTypeName = '新增逻辑区'
        this.rows = { isEnable: true }
      }
    },
    getData(params) {
      params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...params
      }
      this.loading = true
      baseWmsWarehouseLogic_page2(params).then(res => {
        if (res.success) {
          this.data = res.data.list
          this.pagination.total = Number(res.data.totalCount)
          this.loading = false
        } else {
          this.loading = false
          this.$exception(res)
        }
      })
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      this.pagination = pagination
      this.getData() //分页查询所有列表
    },
    // 查询
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.getData(values) //分页查询所有列表
        }
      })
    },
    handleReset() {
      this.form.resetFields()
      this.$refs.search.form.setFieldsValue({
        warehouseName: '' //仓库名称
      })
    },
    // 选择时的变化, 必须点到 checkbox 上或者'hasRowSelectCheck=true'点击行
    checkRow(selectedRowKeys, selectedRows) {
      this.ids = this.ids = selectedRows.map(item => item.warehouseLogicId).join()
    },

    // 根据库存id删除一条或批量删除
    del(ids) {
      let _this = this
      if (ids) {
        this.$confirm({
          title: '是否删除?',
          okText: '确认',
          cancelText: '取消',
          onOk() {
            baseWmsWarehouseLogic_delete({ ids: ids }).then(res => {
              if (res.success) {
                _this.$message.success(`删除成功！${res.message}`)
                _this.getData({}) //分页查询所有列表
              } else {
                _this.$exception(res)
              }
            })
          }
        })
      } else {
        this.$message.warning('请选择要删除记录')
      }
    },

    // 新增 / 修改
    handleAdd(rows) {
      if (this.rows.id) {
        // id存在,则进入编辑状态。
        baseWmsWarehouseLogic_edit(rows).then(res => {
          if (res.success) {
            this.visible = false
            this.$message.success(`编辑成功！${res.message}`)
            this.getData({}) //分页查询所有列表
          } else {
            // this.$message.error(`编辑失败！${res.message}`);
            this.$exception(res)
            this.spinning = false
          }
        })
      } else {
        baseWmsWarehouseLogic_add(rows).then(res => {
          if (res.success) {
            this.visible = false
            this.$message.success(`新增成功！${res.message}`)
            this.getData({}) //分页查询所有列表
          } else {
            // this.$message.error(`新增失败！${res.message}`);
            this.$exception(res)
            this.spinning = false
          }
        })
      }
    },
    // 逻辑区 分页查询
    /* baseWmsWarehouseLogic_page(params){
		this.spinning =true;
		baseWmsWarehouseLogic_page2(params).then(res=>{
			if(res.success){
				this.data = res.data;
				this.spinning = false;
			} else {
				this.spinning =false;
				this.$exception(res)
			}
		})
	}, */
    // 过滤仓库id为名称
    returnWarehouseName(text) {
      let temp = this.warehouse_page.find(v => v.value == text)
      return temp ? temp.title : text
    },
    // 过滤库房id为名称
    returnWarehouseRoomId(text) {
      let temp = this.baseWmsWarehouseRoomMst_page.find(v => v.value == text)
      return temp ? temp.title : text
    }
  }, //methods
  mounted() {
    this.getData({})
    this.$refs.search.form.setFieldsValue({
      warehouseCode: this.warehouse.warehouseCode, //仓库代码
      warehouseId: this.warehouse.warehouseId
    })
    // 所属仓库
    /* warehouse_page({pageNum:1,pageSize:100}).then(res=>{
			if(res.success){
				this.warehouse_page = res.data.list.map(item=>{
					return {
						title:item.warehouseName,
						value:item.warehouseId,
					}
				})
			}
		}); */
    // 库房
    /* baseWmsWarehouseRoomMst_page({}).then(res=>{
			if(res.success){
				// this.data = res.data;
				this.baseWmsWarehouseRoomMst_page = res.data.map(item=>{
					return {
						title:item.warehouseRoomName,
						value:item.warehouseRoomId,
					}
				})
			}
		}); */
    // 库区
    /* baseWmsWarehouseArea_page({}).then(res=>{
		if(res.success){
			// this.data = res.data;
			this.baseWmsWarehouseArea_page = res.data.map(item=>{
				return {
					title:item.warehouseAreaName,
					value:item.warehouseAreaId,
				}
			})
		}
	}); */
  }
}
</script>

<style scoped lang="less">
::v-deep {
  .ant-card-body {
    text-align: left;
  }
  .ant-card-head-title {
    text-align: left;
  }
  .ant-form-inline .ant-form-item {
    margin-right: 2rem;
  }
}
</style>
