<template>
  <div class="warehouse">
    <!-- 新增弹出 -->
    <add_warehouse
      :visible.sync="visible"
      :rows.sync="rows"
      :warehouse_page="warehouse_page"
      :wmsdc_page="wmsdc_page"
      @handleAdd="handleAdd"
    />

    <p-card title="库房资料定义">
      <span slot="extra">
        <p-button type="primary" icon="plus" @click="showModal({})" style="margin-right: 1rem;">新增</p-button>
        <p-button type="primary" icon="delete">批量删除</p-button>
      </span>
      <p-form
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 18 }"
        :form="form"
        ref="search"
        @submit="handleSubmit"
        style="margin-bottom: 10px;"
      >
        <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
                style=""
                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="建筑物名称">
              <!--查询 隐藏的id -->
              	<p-input type="hidden" v-decorator="['bldgId']" />
              <!--查询 隐藏的编码 -->
              	<p-input type="hidden" v-decorator="['bldgCode']" />
              
              <p-search-modal
                title="建筑物名称"
                v-decorator="['bldgName', { rules: [{ required: false, message: '请输入！' }] }]"
                :target-click="true"
                :remoteUrl="{
                  url: '/api/upcloud-base-wh/wmsWhBldg/v1/page',
                  method: 'get'
                }"
                rowSelectType="radio"
                targetValueKey="bldgName"
                rowKey="bldgId"
                :tableConfig="{
                  columns: [
                    { dataIndex: 'bldgName', title: '建筑物名称' },
                    { dataIndex: 'bldgCode', title: '建筑物编号' },
                    { dataIndex: 'bldgId', title: '建筑物ID' }
                  ]
                }"
                :toolBar="{
                  items: [
                    {
                      type: 'input',
                      name: 'bldgName',
                      label: '建筑物名称',
                      value: ''
                    },
                    {
                      type: 'input',
                      name: 'bldgCode',
                      label: '建筑物编号',
                      value: ''
                    }
                  ]
                }"
                @ok="setBldg"
								@change="clearBldg"
              />
            </p-form-item>
          </a-col>
          <a-col :span="8">
            <p-form-item label="库房名称">
              <p-input
                allow-clear
                v-decorator="['warehouseRoomName', { rules: [{ required: false, message: '请输入！' }] }]"
              />
            </p-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <p-form-item label="库房编码">
              <p-input
                allow-clear
                v-decorator="['warehouseRoomCode', { rules: [{ required: false, message: '请输入！' }] }]"
              />
            </p-form-item>
          </a-col>
          <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-item style="float: right;"> 
								<p-button type="primary" icon="plus"  @click="handleAdd">新增</p-button>
							</p-form-item> -->
      </p-form>
      <p-spin :spinning="spinning">
        <p-table
          dragle
		      auto-width
		       :scroll="{x:true}"
          :columns="columns"
          :data-source="data"
          rowKey="warehouseRoomId"
          @checkRow="checkRow"
          @change="changePagination"
          :pagination="pagination"
          :loading="loading"
          bordered
        >
          <!-- <template slot="dcId"
                    slot-scope="text,row,index">
            {{ returnDcId(text) }}
          </template> -->
          <!-- <template slot="warehouseId"
                    slot-scope="text,row,index">
            {{ returnWarehouseName(text) }}
          </template> -->
          <template slot="isEnable" slot-scope="text, row, index">
            {{ text == '1' ? '启用' : '未启用' }}
          </template>
          <template slot="warehouseRoomType" slot-scope="text, row, index">
            {{ returnWarehouseLayoutType(text) }}
          </template>
          <!-- <template slot="accessLevel" slot-scope="text,row,index">
					{{ text=='9'?'':text }}
				</template> -->
          <span slot="action" slot-scope="text, record, index">
            <a @click="showModal(record)">修改</a>
            <a-divider type="vertical" style="" />
            <a @click="del(record.warehouseRoomId)">删除</a>
          </span>
        </p-table>
      </p-spin>
    </p-card>
    <!-- <p-card title="库房扩展属性"
            style="margin-top: -5px; border: none;">
      <span slot="extra"></span>
      <p-spin :spinning="spinning2">
        <a-descriptions title=""
                        :column="4">
          <a-descriptions-item label="库房id"> {{rows.warehouseRoomId}} </a-descriptions-item>
          <a-descriptions-item label="隶属行业"> </a-descriptions-item>
          <a-descriptions-item label="上架"> {{rows.inMode=='1'?'整散不分':rows.inMode=='2'?'整散分离上架':''}} </a-descriptions-item>
          <a-descriptions-item label="收货"> {{ rows.inWorkFlow }} </a-descriptions-item>
          <a-descriptions-item label="拣货"> {{ rows.outMode=='1'?'按单据拣货':rows.outMode=='2'?'按区域拣货':'' }} </a-descriptions-item>
          <a-descriptions-item label="出库"> {{rows.outWorkFlow }} </a-descriptions-item>
          <a-descriptions-item label="仓库布局类型"> {{ rows.warehouseLayoutType }} </a-descriptions-item>
          <a-descriptions-item label="作业模方法"> {{ rows.warehouseWorkingMethod}} </a-descriptions-item>
          <a-descriptions-item label="预留字段1">{{rows.attribute11}} </a-descriptions-item>
          <a-descriptions-item label="预留字段2"> {{rows.attribute12}} </a-descriptions-item>
          <a-descriptions-item label="预留字段3"> {{rows.attribute13}} </a-descriptions-item>
          <a-descriptions-item label="预留字段4"> {{rows.attribute14 }} </a-descriptions-item>
        </a-descriptions>
      </p-spin>
    </p-card> -->
  </div>
</template>

<script>
import moment from 'moment'
import add_warehouse from './components/add_warehouse.vue'
import { dict_listbytype } from '../api/api_warehouse.js'
import {
  baseWmsWarehouseRoomMst_page,
  baseWmsWarehouseRoomMst_page2,
  baseWmsWarehouseRoomProfil_page,
  baseWmsWarehouseRoomMst_infoWithExpand,
  baseWmsWarehouseRoomMst_add,
  baseWmsWarehouseRoomMst_addWithExpand,
  baseWmsWarehouseRoomMst_edit,
  baseWmsWarehouseRoomMst_editWithExpand,
  baseWmsWarehouseRoomMst_delete,
  warehouse_page,
  wmsdc_page
} from '../api/api_warehouse.js'
const columns = [
  { dataIndex: 'warehouseRoomName', title: '库房名称' },
  { dataIndex: 'warehouseRoomCode', title: '库房编码' },
  { dataIndex: 'warehouseRoomType', title: '库房类型', scopedSlots: { customRender: 'warehouseRoomType' } },
  { dataIndex: 'dcName', title: '所属仓配中心', width: 80 },
  { dataIndex: 'warehouseName', title: '仓库名称', width: 80 },
  { dataIndex: 'bldgName', title: '建筑物名称', width: 80 },
  { dataIndex: 'warehouseRoomDistance', title: '作业距离(米)', width: 80 },
  { dataIndex: 'floorNum', title: '所在楼层', width: 80 },
  { dataIndex: 'isEnable', title: '是否启用', scopedSlots: { customRender: 'isEnable' }, width: 80 },
  /* {dataIndex: 'accessLevel', title: '数据访问控制级别',scopedSlots: { customRender: 'accessLevel' },width:80,}, */
  //   { dataIndex: 'attribute1', title: '预留字段1', scopedSlots: { customRender: 'attribute1' }, width: 80, },
  //   { dataIndex: 'attribute2', title: '预留字段2', scopedSlots: { customRender: 'attribute2' }, width: 80, },
  //   { dataIndex: 'segment1', title: '预留字段3', scopedSlots: { customRender: 'segment1' }, width: 80, },
  //   { dataIndex: 'segment2', title: '预留字段4', scopedSlots: { customRender: 'segment2' }, width: 80, },
  { dataIndex: 'creatorName', title: '创建人', width: 80 },
  { dataIndex: 'modifierName', title: '最后修改人', width: 80 },
  { dataIndex: 'gmtCreate', title: '创建日期', width: 80 },
  { dataIndex: 'gmtModified', title: '最后修改日期', width: 80 },
  {
    dataIndex: 'action',
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 90,
    fixed: 'right',
    align: 'center'
  }
]
export default {
  components: { add_warehouse },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'horizontal_login' }),
      columns,
      rows: {},
      data: [],
      data2: [],
      warehouseLayoutTypeOption: [], //库别
      visible: false,
      spinning: false,
      spinning2: false,
      warehouse: this.$store.state.user.warehouse, //vuex库房共享资料
      warehouse_page: [], //所属仓库
      wmsdc_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, //仓库id
        warehouseCode: selectData[0].warehouseCode //仓库代码
      })
    },
    // 清除查询仓库时设置仓库代码
    clearWarehouseCode(event, selectId, selectData) {
     
      if (!selectId) {
        this.$refs.search.form.setFieldsValue({
          warehouseCode: '' ,//仓库代码
		  warehouseId:''
        })
      }
    },
		// 查询仓库时设置仓库代码
		setBldg(event, selectId, selectData) {
		  this.$refs.search.form.setFieldsValue({
		    bldgId: selectData[0].bldgId, //仓库id
		    bldgCode: selectData[0].bldgCode //仓库代码
		  })
		},
		// 清除查询仓库时设置仓库代码
		clearBldg(event, selectId, selectData) {
		  if (!selectId) {
		    this.$refs.search.form.setFieldsValue({
		      bldgCode: '' ,//仓库代码
					bldgId:''
		    })
		  }
		},
		
    showModal(rows) {
      this.visible = true;
			rows = {...rows};
      if (rows.warehouseRoomId) {
        this.$nextTick(() => {
          baseWmsWarehouseRoomMst_infoWithExpand({ id: rows.warehouseRoomId }).then(res => {
            if (res.success) {
              let profil = res.data.profil //扩展属性；
              this.rows = Object.assign(profil, rows, { id: '编辑id', isEnable: rows.isEnable == '1' ? true : false })
            }
          })
        })
      } else {
        this.rows = { isEnable: true }
      }
    },
    // 选择时的变化, 必须点到 checkbox 上或者'hasRowSelectCheck=true'点击行
    checkRow(selectedRowKeys, selectedRows) {
      this.spinning2 = true
      /* baseWmsWarehouseRoomMst_infoWithExpand({ id: selectedRowKeys[0] }).then(res => {
        if (res.success) {
          if (res.data.profil) {
            this.rows = res.data.profil;
            this.spinning2 = false;
          } else {
            this.rows = {};
            this.spinning2 = false;
          }
        }
      }) */
      // this.rows = this.data.find(item=>item.warehouseRoomId==selectedRowKeys[0]);
    },
    getData(params) {
      ;(params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        ...params
      }),
        (this.loading = true)
      baseWmsWarehouseRoomMst_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: '' //仓库名称
      })
    },
    // 删除主表
    del(id) {
      let _this = this
      this.$confirm({
        title: '是否删除?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          baseWmsWarehouseRoomMst_delete({ ids: id }).then(res => {
            if (res.success) {
              _this.$message.success(`删除成功！${res.message}`)
              _this.getData({}) //分页查询所有列表
            } else {
              _this.$exception(res)
            }
          })
        }
      })
    },
    // 新增 / 修改
    handleAdd(rows) {
      if (this.rows.id) {
        // id存在,则进入编辑状态。
        baseWmsWarehouseRoomMst_editWithExpand({ master: rows, profil: 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)
          }
        })
      } else {
        if (this.data.find(item => item.warehouseRoomCode == rows.warehouseRoomCode)) {
          this.$message.warning('库房编码已存在')
        } else {
          baseWmsWarehouseRoomMst_addWithExpand({ master: rows, profil: rows }).then(res => {
            if (res.success) {
              this.visible = false
              this.$message.success(`新增成功！${res.message}`)
              this.getData({}) //分页查询所有列表
            } else {
              this.$exception(res)
            }
          })
        }
      }
    },
    // 库房主表 分页查询
    /* baseWmsWarehouseRoomMst_page(params) {
      this.spinning = true;
      baseWmsWarehouseRoomMst_page2(params).then(res => {
        if (res.success) {
          this.data = res.data;
          this.spinning = false;
        } else {
          this.spinning = false;
          this.$exception(res);
        }
      })
    }, */
    // 库房类型（库别）
    warehouseLayoutType(params) {
      dict_listbytype(params).then(res => {
        if (res.success) {
          this.warehouseLayoutTypeOption = res.data
        }
      })
    },
    // 过滤库别
    returnWarehouseLayoutType(text) {
      let temp = this.warehouseLayoutTypeOption.find(v => v.dictCode == text)
      return temp ? temp.dictName : text
    }
  }, //methods
  created() {
    this.warehouseLayoutType({ dicttypeCodes: 'wms_storeroom' }) // 库房类型（库别）
  },
  mounted() {
    // 库房主表 分页查询
    this.getData({})
    this.$refs.search.form.setFieldsValue({
      warehouseCode: this.warehouse.warehouseCode, //仓库代码
      warehouseId: this.warehouse.warehouseId 		//仓库id
    })
  }
}
</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>
