<template>
  <div>
    <!-- 区域资料 -->
    <p-card title="出库任务单管理">
      <span slot="extra">
        <!-- <p-button type="primary" style="margin-right:10px" @click="showmodel()">添加</p-button> -->
      </span>
      <p-grid-form :label-col="{ span: 8 }" :span="8" :items="config.items" @submit="hanlderSubmit" />
      <p-table
        ref="table"
        row-key="id"
        bordered
        :columns="config.columns"
        :remoteUrl="config.remoteUrl"
        :remoteParams="remoteParams"
        :rowSelectType="false"
        :doneBefore="doneBefore"
        :data-source="data"
        :scroll="{ x: 1500 }"
      >
        <template slot="detailCount" slot-scope="text, record">
          <a @click="showDetail(record)"> {{ text }}</a>
        </template>
        <template slot="operation" slot-scope="text, record">
          <!-- {{ text ? '禁用' : '启用' }} -->
          <a @click="showmodel(text)">调整优先级</a>
          <!-- <a-divider type="vertical" />
          <a @click="del(text)">删除</a> -->
        </template>
      </p-table>
    </p-card>

    <p-modal
      title="调整优先级"
      width="50%"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-grid-form :label-col="{ span: 8 }" ref="model" :span="8" :items="config.Modelitems" @submit="hanlderSubmit" />
    </p-modal>

    <p-modal
      title="任务数详情"
      width="90%"
      :visible="visibleDetail"
      :confirm-loading="confirmLoading"
      @ok="handleCancel"
      @cancel="handleCancel"
    >
      <p-table row-key="id" bordered :columns="columns" :rowSelectType="false" :data-source.sync="dataDetail">
      </p-table>
    </p-modal>
  </div>
</template>

<script>
import config from './config.js'

import { diffOption } from '@/views/kzyWMS/utils/index.js'
import { add, deletes, update, getMx } from './api'

export default {
  data() {
    return {
      config: config(this),
      data: [],
      dataDetail: [],
      type: true,
      remoteParamsDetail: {},
      columns: [
        //           outtaskid  库存任务汇总ID
        // lotid  批次
        // itemid  商品ID
        // plannum 计划数量
        // actualnum  实际数量
        // isfinish  是否完成
        // isshortpicking  是否短拣
        // createtime  创建时间
        // starttime  任务开始时间
        // finishtime  任务完成时间
        // enterpriseid  企业id
        // cargoownerid  货主id
        // warehouseid  仓库id
        {
          dataIndex: 'outTaskId',
          key: 'outTaskId',
          align: 'center',
          width: 150,
          ellipsis: true,
          title: '库存任务汇总ID',
        },
        {
          title: '批次',
          dataIndex: 'lotId',
          ellipsis: true,
          align: 'center',
          width: 150,
          key: 'lotId',
          // customRender(text) {
          //   text == 10 && (text = '区域')
          //   text == 20 && (text = '接驳口')
          //   return text
          // }
        },
        {
          title: '商品ID',
          dataIndex: 'itemId',
          ellipsis: true,
          align: 'center',
          width: 150,
          key: 'itemId',
        },
        {
          title: '实际数量',
          key: 'planNum',
          width: 150,
          ellipsis: true,
          dataIndex: 'planNum',
          align: 'center',
        },
        {
          title: '是否完成',
          dataIndex: 'isFinish',
          align: 'center',
          ellipsis: true,
          width: 150,
          key: 'isFinish',
          customRender(text) {
            text == 0 && (text = '否')
            text == 1 && (text = '是')
            return text
          },
        },
        {
          title: '是否短拣',
          key: 'isShortPicking',
          width: 150,
          ellipsis: true,
          dataIndex: 'isShortPicking',
          align: 'center',
          customRender(text) {
            text == 0 && (text = '否')
            text == 1 && (text = '是')
            return text
          },
        },

        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 150,
          align: 'center',
          key: 'createTime',
        },
        {
          title: '任务开始时间',
          dataIndex: 'startTime',
          width: 150,
          align: 'center',
          key: 'startTime',
        },
        {
          title: '任务完成时间',
          dataIndex: 'finishTime',
          width: 150,
          align: 'center',
          key: 'finishTime',
        },
      ],
      remoteParams: {
        // state: 7
        // areaNo: '',
        // areaType: ''
        // cargoOwnerId: '',
        // createTime: '',
        // createTimeFrom: '',
        // createTimeTo: '',
        // detailCount: '',
        // enterpriseId: '',
        // expireDate: '',
        // finishTime: '',
        // isShortPicking: '',
        // orderPoolId: '',
        // outTaskSmyId: '',
        // outboundTaskTypeNo: '',
        // pickingOrderId: '',
        // priority: '',
        // startTime: '',
        // state: '',
        // upperSystemTaskId: '',
        // warehouseId: ''
      },
      visible: false,
      visibleDetail: false,
      confirmLoading: false,
    }
  },
  mounted() {
    // this.getinfo()
  },
  created() {
    diffOption(this.config.columns).then((res) => {
      this.config.columns = res
    })
  },
  methods: {
    //查看任务数明细
    async showDetail(data) {
      console.log(data)
      let res = await getMx({ id: data.id })
      console.log(res)
      if (res.success) {
        this.dataDetail = res.data.list
        this.visibleDetail = true
      } else {
        this.$exception(res)
      }
      //   this.visibleDetail = true
    },
    doneBefore(res) {
      //   res.data.list.forEach(item => {
      //     item.id = item.areaNo
      //   })
      console.log(res)
      return res
    },
    hanlderSubmit(e, form) {
      e.preventDefault()
      form.validateFields((error, values) => {
        console.log(error, values, 'valuesvaluesvaluesvaluesvalues')
        // this.queryName = values.name
        // this.queryType = values.type
        // this.getlistCompanyByAuthId()
        if (!error) {
          this.remoteParams = { ...this.remoteParams, ...values }
        }
      })
    },
    handleOk(e) {
      console.log(this.$refs.model)
      this.$refs.model.form.validateFields(async (err, value) => {
        if (!err) {
          console.log(value)
          this.confirmLoading = true
          if (this.type) {
            let res = await update(value)
            console.log(res)
            if (res.success) {
              this.visible = false
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
            }
          } else {
            let res = await add(value)
            console.log(res)

            if (res.success) {
              this.$message.success(res.message)
              this.visible = false
              this.remoteParams = { ...this.remoteParams }
            } else {
              this.$exception(res)
            }
          }

          this.confirmLoading = false
          //
        }
      })
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
      this.visibleDetail = false
    },
    //点击弹出
    showmodel(data) {
      console.log(data)
      this.visible = true
      if (data) {
        this.$nextTick(() => {
          this.$refs.model.form.setFieldsValue(data)
        })
        this.type = true
      } else {
        this.$nextTick(() => {
          this.$refs.model.form.resetFields()
        })
        this.type = false
      }
    },
    del(text) {
      let that = this
      console.log(text)
      this.$confirm({
        title: '确定是否要删除?',
        content: '',
        async onOk() {
          let res = await deletes({ areaNo: text.areaNo })
          if (res.success) {
            that.$message.success('删除成功')
            that.remoteParams = { ...that.remoteParams }
          } else {
            that.$exception(res)
          }
        },
        onCancel() {},
      })
    },
  },
}
</script>

<style lang="less" scoped></style>
