<!-- 拣选任务管理 -->
<template>
  <div>
    <!-- 商品详情 -->
    <itemDetail ref="detailItem" :itemId="itemId" />
    <p-card title="拣选任务管理" style="border: none">
      <template slot="extra">
        <p-button type="primary" icon="eye" @click="isShow = !isShow">{{ isShow ? '隐藏' : '显示' }}</p-button>
        <!-- <p-button type="primary" icon="check" @click="showModal">确认</p-button> 
			<p-button type="primary" icon="close" @click="hanlderRest">取消任务</p-button>-->
      </template>
      <div class="plg-inner-form-mb" v-show="isShow">
        <p-grid-form ref="search" :span="8" :label-col="{ span: 6 }" :items="items" @submit="hanlderSubmit" />
      </div>
      <!-- hasRowSelectCheck -->
      <p-table
        dragle
        auto-width
        :scroll="{ x: true }"
        hasRowSelectCheck
        :columns="columns"
        :data-source="data"
        rowKey="pickTaskId"
        :selectedRowKeys.sync="selectedRowKeys"
        :row-select-type="1"
        @checkRow="checkRow"
        @clickRow="clickRow"
        @change="changePagination"
        :pagination="pagination"
        :loading="loading"
        bordered
      >
        <!-- <span slot="action"
		         slot-scope="text, record,index">
		 
		     <a @click="showModal(record)">编辑</a>
		     <a-divider type="vertical"
		                style="" />
		     <a @click="del(record)">删除</a>
		 
		   </span> -->
      </p-table>
    </p-card>
    <p-card :title="'任务明细  ' + (activeID || '')" style="border: none">
      <!-- <div style="margin-bottom: 16px;">
		<span>状态：</span>	<p-select default-value=""
			              style="width: 120px"
			              :options="options"
			              @change="handleChange" />
		</div> -->
      <!-- 不分页 -->
      <p-table
        auto-width
        :scroll="{ x: true }"
        :columns="columns2"
        :data-source="data2"
        dragle
        rowKey="_row_count"
        style="margin-top: 10px"
        :loading="loading2"
        @refresh="getData2"
        bordered
      >
        <template v-slot:operation="text, rows, index">
          <a @click="checkItem(rows)">详情</a>
        </template>
      </p-table>
    </p-card>
  </div>
</template>

<script>
// 商品详情
import itemDetail from '@/views/kzyWMS/components/itemDetail'
// 设置默认仓库
import { setwarehouse } from '@/views/kzyWMS/SearchModal/mixins_warehouse.js'
import { items, columns, columns2 } from './api/pickingTask.js'
import { search_page, search_noPage, cancel_picktask } from './api/api.js'
import { sorter } from '@/views/kzyWMS/utils/sort.js'

export default {
  components: { itemDetail },
  mixins: [setwarehouse],
  data() {
    return {
      items: items(this),
      columns: sorter(columns),
      columns2: sorter(columns2),
      data: [],
      selectedRowKeys: [],
      itemId: '',
      data2: [],
      loading: false,
      loading2: false,
      isShow: true,
      activeID: '', //活动主表id
      ids: '', //取消任务
      options: [
        { title: '未索取', value: 0 },
        { title: '已索取', value: 1 },
      ],
      pagination: {
        total: 0,
        pageSize: 10, //每页中显示10条数据
        current: 1,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'], //每页中显示的数据
        showTotal: (total) => `共有 ${total} 条数据`, //分页中显示总的数据
      },
    }
  },
  methods: {
    getData(params) {
      ;(params = {
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        num: '594497230698844160', //id:"[string] 查询接口id" 查询服务菜单
        params: params,
      }),
        (this.loading = true)
      search_page(params).then((res) => {
        if (res.data) {
          if (res.success) {
            this.data = res.data.list
            this.pagination.total = Number(res.data.totalCount)
            this.loading = false
            this.selectedRowKeys.length = 0
          } else {
            this.loading = false
            this.$exception(res)
          }
        } else {
          this.pagination.total = 0
          this.data = []
          this.loading = false
        }
      })
    },
    getData2() {
      this.loading2 = true
      search_noPage({
        num: '594505967211778048', //this.activeID,
        params: { pickTaskId: this.activeID },
      }).then((res) => {
        if (res.success) {
          this.loading2 = false
          this.data2 = res.data
          // this.selectedRowKeys.length = 0;
        } else {
          this.loading2 = false
          this.$exception(res)
        }
      })
    },

    hanlderSubmit(event, form) {
      event.preventDefault()
      this.activeID = ''
      this.data2 = []
      // console.log("getFieldsValue:",form.getFieldsValue());
      // this.getData(form.getFieldsValue())
      this.$refs.search.form.validateFields((err, values) => {
        if (!err) {
          console.log('验证通过: ', values)
          this.getData(values)
        }
      })
    },
    // 取消任务
    hanlderRest(event, form) {
      // this.$refs.search.form.resetFields();
      if (this.ids) {
        cancel_picktask({ pickTaskId: this.ids }).then((res) => {
          if (res.success) {
            this.$message.success('取消成功！')
            this.getData()
          } else {
            // this.$exception(res);
            this.$message.warning(res.message)
          }
        })
      } else {
        this.$message.warning('没有选择数据！')
      }
    },
    changePagination(pagination, filters, sorter) {
      // 分页变化
      console.log(pagination, filters, sorter, '分页变化分页变化')
      this.pagination = pagination
      this.getData({ ...this.$refs.search.form.getFieldsValue() }) //分页查询所有列表
    },
    checkRow(selectedRowKeys, selectedRows) {
      console.log('操作选中行的checkbox：', selectedRowKeys, selectedRows)
      this.ids = selectedRowKeys.toString()
      /* this.activeID = selectedRowKeys[selectedRowKeys.length-1];
			  if(this.activeID){
					this.getData2();
			  } else {
				  this.data2.length = 0;
			  } */
    },
    // 点击当前整条行
    clickRow(event, activeID, rowRecord) {
      console.log('点击当前整条行clickRow：', event, activeID, rowRecord)
      this.activeID = activeID
      this.getData2()
    },
    handleChange(value) {
      console.log(`selected ${value}`)
    },
    // 商品详情
    checkItem(item) {
      // this.itemId = item.itemId;
      // this.$refs.detailItem.open();
      this.itemId = item.itemid
      this.$refs.detailItem.open()
    },
  }, // methods
  mounted() {
    // console.log(Math.max(...[14,25,10]))
    this.getData({ ...this.$refs.search.form.getFieldsValue() })
  },
}
</script>

<style></style>
