<template>
  <div>
    <div>
      <p-card title="货位限定">
        <div>
          <p-grid-form ref="formTarget" :items="formItems" @submit="hanlderSubmit"> </p-grid-form>
        </div>
        <a-row :gutter="16">
          <div>
            <div>
              <p-table
                ref="logTable"
                style="margin-top: 10px"
                :columns="tableColumns"
                rowKey="id"
                :remoteUrl="remoteUrl"
                :remoteData="remoteUrl.data"
                :expandRowByClick="false"
                :autoLoad="true"
                :dataSource.sync="dataSource"
                :loading="tabLoding"
                @clickRow="clickRow"
                @selectChange="selectChange"
                :rowSelectType="false"
                draglerowSelectType
                auto-width
                bordered
              >
                <div slot="action" href="javascript:;" slot-scope="text">
                  <a slot="action" style="margin: 0 5px" @click.stop="edit(text)">修改</a>
                  <a slot="action" style="margin: 0 5px" @click.stop="deleteOne(text)">删除</a>
                </div>
              </p-table>
            </div>
          </div>
        </a-row>
        <div slot="extra">
          <p-button type="primary" @click="add"> 新增商品 </p-button>
          <!-- <p-button type="primary" style="margin-left: 10px" @click="detailAdd"> 新增点位编号 </p-button> -->
       
        </div>
      </p-card>
    </div>
    <div>
      <p-modal
        :title="Title"
        :width="800"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @cancel="handleCancel"
        :footer="null"
      >
        <p-grid-form
          v-if="show"
          ref="detailForm"
          :span="24"
          :labelCol="{ span: 5 }"
          :items="items"
          @submit="submitAdd"
        />
        <p-grid-form
          v-if="!show"
          ref="detailInfo"
          :span="24"
          :labelCol="{ span: 5 }"
          :items="detailItems"
          @submit="detailSubmit"
        />
      </p-modal>
    </div>
  </div>
</template>
<script>
import { formItems, tableColumns, detailItem, detailColumns, detailItems } from './js/config'
import {
  insertLimitedGoods,
  detailtLimitedGoods,
  updateLimitedGoods,
  deleteLimitedGoods,
  insertLocationNo,
} from './api'

import { QN_BASEURL } from '../serviceSettings'
const baseUrl = QN_BASEURL
export default {
  components: {},
  data() {
    return {
      remoteUrl: {
        url: baseUrl + '/api/v1/locationRestricted/query',
        method: 'post',
        data: { code: 'goods_big_type' },
      },
      formItems: formItems(this),
      tableColumns: tableColumns,
      dataSource: [],
      tabLoding: false,
      visible: false,
      confirmLoading: false,
      items: detailItem(this),
      selectedRow: [],
      detailColumns: detailColumns,
      detailData: [],
      detailLoding: false,
      result: null,
      detailItems: detailItems(this),
      show: false,
      selectedRowKeys: null,
      selectedRows: null,
      Title: '',
    }
  },
  created() {},
  methods: {
    hanlderSubmit(e, form) {
      e.preventDefault()
      const params = this.$refs.formTarget.form.getFieldsValue()
      var code = { code: 'goods_big_type' }
      this.remoteUrl.data = { ...this.remoteUrl.data, ...params }
      // this.remoteUrl.data.isHangUp = 40
      console.log(form.getFieldsValue())
    },
    //主表
    selectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      console.log(selectedRowKeys, selectedRows, 'selectChange')
    },
    //明细
    detailChange(selectedRowKeys, selectedRows) {},
    //主表
    clickRow(event, activeID, record) {
      console.log(event, activeID, record, 'event, activeID, record')
      detailtLimitedGoods({ limitedArea: record.limitedArea }).then((res) => {
        if (!res.success) {
          this.$exception(res)
          return false
        }
        console.log(res, 'res')
        this.detailData = res.data
      })
    },

    add() {
      this.Title = '新增货位信息'
      this.visible = true
      this.show = true
      this.result = 0
      this.$nextTick(() => {
        this.$refs.detailForm.form.resetFields()
        this.$refs.detailForm.form.enableItem(['itemHealthCategoryName', 'itemHealthCategory'])
      })
    },
    //限定区域
    detailAdd() {
      if (!this.selectedRows) {
        this.$message.warning('请先选择货位再进行区域新增')
        return
      }
      this.Title = '新增点位编号'
      this.visible = true
      this.show = false
      this.$nextTick(() => {
        this.$refs.detailInfo.form.setFieldsValue({ id: this.selectedRows[0].id })
      })
      console.log(this.selectedRowKeys, this.selectedRows[0].id, 'this.selectedRowKeys')
    },
    detailSubmit(e, form) {
      e.preventDefault()
      form.validateFields((err, values) => {
        if (!err) {
          console.log(err, values, '1111111111111111')
          insertLocationNo(values).then((res) => {
            if (!res.success) {
              this.$exception(res)
              return false
            }
            this.visible = false
            this.$message.success(this.$lang('新增成功'))
            this.$refs.logTable.reload()
            this.detailData = []
          })
        }
      })
    },

    submitAdd(e, form) {
      e.preventDefault()
      // debugger
      form.validateFields((err, values) => {
        if (!err) {
          //result 值0是保存、1是修改
          if (this.result === 0) {
            console.log(values, '保存')
            insertLimitedGoods(values).then((res) => {
              if (!res.success) {
                this.$exception(res)
                return false
              }
              this.visible = false
              this.$message.success(this.$lang('新增成功'))
              this.$refs.logTable.reload()
            })
          } else if (this.result === 1) {
            updateLimitedGoods(values).then((res) => {
              if (!res.success) {
                this.$exception(res)
                return false
              }
              this.visible = false
              this.$message.success(this.$lang('修改成功'))
              this.$refs.logTable.reload()
            })
          }
          return
        }
        console.log('123', values)
      })
    },
    edit(text) {
      console.log(text, 'text')
      //   console.log(text.goodsBigType, ' 5555555')
      //   let a = text.goodsBigType.toString()

      this.show = true
      this.Title = '修改货位信息'
      this.result = 1
      this.visible = true
      this.$nextTick(() => {
        // text.goodsBigType = text.goodsBigType.toString()
        this.$refs.detailForm.form.setFieldsValue(text)
        this.$refs.detailForm.form.disableItem(['itemHealthCategoryName', 'itemHealthCategory'])
      })
    },
    deleteOne(text) {
      var that = this
      this.$confirm({
        title: '是否确认删除?',
        // content: 'Some descriptions',
        okText: '是',
        cancelText: '否',
        onOk() {
          deleteLimitedGoods({ id: text.id }).then((res) => {
            if (!res.success) {
              that.$exception(res)
              return false
            }
            that.$message.success(that.$lang('删除成功'))
            that.$refs.logTable.reload()
          })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    handleCancel(e) {
      this.visible = false
    },
  },
}
</script>
<style lang="less" scoped></style>
