<template>
  <div>
    <div v-if="!isShow">
      <div>
        <p-card title="差异处理">
          <div>
            <p-grid-form ref="formTarget" :items="formItems" @submit="hanlderSubmit"> </p-grid-form>
          </div>
          <div>
            <p-table
              ref="logTable"
              style="margin-top: 10px"
              :columns="tableColumns"
              rowKey="id"
              :expandRowByClick="false"
              :remoteUrl="{ url: '/kz/check/getCheckDifference', method: 'get' }"
              :remoteData="remoteParams1"
              :remoteParams="remoteParams1"
              :autoLoad="true"
              :scroll="{ x: true }"
              @clickRow="clickRow"
              dragle
              auto-width
              bordered
            >
              <div slot="action" href="javascript:;" slot-scope="text, record">
                <a slot="action" @click.stop="uploads(record)">上报</a><a-divider type="vertical" />
                <a slot="action" @click.stop="spill(record)">报溢处理</a><a-divider type="vertical" />
                <a slot="action" @click.stop="breakage(record)">报损处理</a><a-divider type="vertical" />
                <a slot="action" @click.stop="Confirm(record)">完成确认</a><a-divider type="vertical" />
                <a slot="action" @click.stop="cancel(record)">计划作废</a>
              </div>
            </p-table>
          </div>
          <!-- <a slot="extra" href="#">
          <p-button type="primary" icon="plus">盘点计划</p-button>
        </a> -->
        </p-card>
      </div>
      <div style="margin-top: 5px">
        <p-card title="明细">
          <p-table
            ref="logTable2"
            style="margin-top: 10px"
            :columns="detailColumns"
            rowKey="id"
            :expandRowByClick="false"
            :remoteUrl="{ url: '/kz/check/getgoodsDetail', method: 'post' }"
            :remoteData="remoteParams2"
            :remoteParams="remoteParams2"
            :autoLoad="false"
            :scroll="{ x: true }"
            :loading="tabLoding"
            dragle
            auto-width
            bordered
          >
          </p-table>
        </p-card>
      </div>
    </div>
    <a-modal
      title="盘点差异上传"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-grid-form ref="formTarget1" :items="addformItems" @submit="hanlderSubmit"> </p-grid-form>
    </a-modal>
    <div>
      <spill
        v-if="isShow"
        :formData="formData"
        :checkTaskNo="checkTaskNo"
        ref="logForm"
        @clickEven="detailEvent"
        :titleName="spillName"
      ></spill>
    </div>
  </div>
</template>
<script>
import { formItems, tableColumns, detailColumns, addformItems } from './js/config'
import { finishConfirm, cancleCheckTask, checkUpload } from './api'
import spill from './components/spill.vue'
export default {
  components: {
    spill: spill
  },
  data() {
    return {
      formItems: formItems(this),
      addformItems: addformItems(this),
      tableColumns: tableColumns,
      detailColumns: detailColumns,
      detailData: [],
      tabLoding: false,
      isShow: false,
      spillName: '',
      remoteParams1: {},
      remoteParams2: {},
      checkTaskNo: '',
      uplodCheckTaskNo: '',
      formData: {},
      visible: false,
      confirmLoading: false
    }
  },
  created() {},
  methods: {
    hanlderSubmit(evnet, form) {
      evnet.preventDefault()
      console.log(form.getFieldsValue())
      this.remoteParams1 = form.getFieldsValue()
    },
    clickRow(event, rowRecordRowkey, rowRecord) {
      this.remoteParams2 = {
        checkTaskNo: rowRecord.checkTaskNo
      }
    },
    edit(text) {
      console.log(text)
    },
    // 报溢
    spill(text) {
      this.isShow = true
      this.spillName = '报溢'
      console.log(text, 'texttexttext')
      this.formData = text
      this.checkTaskNo = text.checkTaskNo
    },
    // 报损
    breakage(text) {
      this.isShow = true
      this.spillName = '报损'
      this.checkTaskNo = text.checkTaskNo
      console.log(text,'报损');
      this.formData = text
    },
    Confirm(record) {
      if (record.checkState == '10' || record.checkState == '20' || record.checkState == '30') {
        this.$message.error('计划盘点中，不可完成确认')
        return
      } else if (record.checkState == '40') {
        this.$message.error('请先上传该盘点计划')
        return
      } else if (record.checkState == '60') {
        this.$message.error('计划已取消,无法确认')
        return
      }
      finishConfirm({ checkTaskNo: record.checkTaskNo }).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }
        this.$message.success(res.message)
        this.$refs.logTable.reload()
      })
    },
    uploads(record) {
      this.visible = true
      this.uplodCheckTaskNo = record.checkTaskNo
    },
    handleOk() {
      this.$refs.formTarget1.form.validateFields((error, values) => {
        if (!error) {
          const params = {
            wmsCheckNo: values.wmsCheckNo,
            checkTaskNo: this.uplodCheckTaskNo
          }
          checkUpload(params).then(res => {
            if (res.success) {
              this.visible = false
              this.$refs.formTarget1.form.resetFields()
              this.$message.success(res.message)
              this.$refs.logTable.reload()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    handleCancel() {
      this.visible = false
      this.$refs.formTarget1.form.resetFields()
    },
    cancel(record) {
      if (record.checkState == '10' || record.checkState == '20' || record.checkState == '30') {
        // this.$message.error('计划盘点中，不可完成确认')
        // return
      } else if (record.checkState == '40') {
        // this.$message.error('请先上传该盘点计划')
        // return
      } else if (record.checkState == '50') {
        this.$message.error('已上传WMS，不可作废')
        return
      } else if (record.checkState == '60') {
        // this.$message.error('计划已取消,无法确认')
        // return
      }
      cancleCheckTask({ checkTaskNo: record.checkTaskNo }).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }
        this.$message.error(res.message)
        this.$refs.logTable.reload()
      })
    },
    detailEvent(event, data) {
      this.isShow = false
      console.log(event, data)
    }
  }
}
</script>
<style lang="less" scoped></style>
