<template>
  <p-card title="自提复核">
    <a-modal v-model="visible" destroyOnClose title="复核" :confirmLoading="confirmLoading" @ok="handleOk">
      <p-grid-form ref="gridFrom" :labelCol="{ span: 8 }" :wrapperCol="{ span: 12 }">
        <p-grid-form-item label="提货人姓名" type="input" :required="true" name="shipperName" />
        <p-grid-form-item
          label="身份证号"
          type="input"
          trigger="blur"
          placeholder="请输入身份证后7位"
          :rules="[
            {
              validator: (rule, value, callback) => {
                if (value.length == 7) {
                  callback()
                } else {
                  callback('请输入身份证后7位')
                }
              },
            },
          ]"
          :required="true"
          name="shipperCard"
        ></p-grid-form-item>
        <p-grid-form-item
          label="提货时间"
          type="date"
          :required="true"
          name="pickUpDate"
          :value="$moment().format('YYYY-MM-DD HH:mm:ss')"
        />
        <p-grid-form-item label="备注" type="textarea" hidden name="remarks" />
        <p-grid-form-item label="拍照" name="photoId" :required="true" message="请自提拍照">
          <photograph :photographUrl="photographUrl" @photograph="takePhoto" />
        </p-grid-form-item>
        <p-grid-form-item type="input" hidden name="srcCode" />
      </p-grid-form>
    </a-modal>
    <p-grid-form ref="searchGridForm" layout="inline" :items="searchFromItems" @submit="hanlderSubmit"></p-grid-form>
    <a-tabs v-model="activeKey" default-active-key="1" @change="(key) => (activeKey = key)">
      <a-tab-pane key="1" tab="自提任务" force-render>
        <p-table
          dragle
          :rowSelectType="false"
          rowKey="_row_count"
          :dataSource="mainDataSource"
          :remoteUrl="remoteUrl"
          :remoteParams="params"
          :scroll="{ x: 3000, y: 240 }"
          :autoLoad="false"
          :columns="columns"
          @clickRow="mainClickRow"
          bordered
        >
          <template v-slot:operation="text, record">
            <a class="table-operator" href="javascript:;" @click="handleApprove(record)">复核</a>
          </template>
        </p-table>

        <p-table
          dragle
          :rowSelectType="false"
          :scroll="{ x: 3000 }"
          :pagination="20"
          :autoLoad="false"
          rowKey="_row_count"
          :remoteUrl="particularsRemoteUrl"
          :remoteParams="particularsParams"
          :columns="detailColumns"
          bordered
        ></p-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="自提记录" force-render>
        <p-table
          dragle
          :rowSelectType="false"
          rowKey="id"
          :remoteUrl="logRemoteUrl"
          :remoteParams="logParams"
          :scroll="{ x: true }"
          :autoLoad="false"
          :columns="logColumns"
          bordered
        >
          <!-- <template v-slot:operation="text, record">
            <a class="table-operator" href="javascript:;" @click="handleApprove(record)">审批</a>
          </template>-->
        </p-table>
      </a-tab-pane>
    </a-tabs>
  </p-card>
</template>
<script>
import { mapGetters } from 'vuex'
import { getFromItems, getMinCol, getDetailCol, getLogCol } from './config/setConfg'
import { uploadFile, outercheckSelfConfirm, getPageUnoutercheckh, getDictCode } from './api'
import photograph from '@/components/photograph'
import { sorter } from '@/views/kzyWMS/utils/sort.js'
import { upcloud_base_wh_outbound } from '@/config/serviceSettings'

export default {
  components: { photograph },
  data() {
    return {
      activeKey: '1',
      confirmLoading: false,
      photographUrl: 'http://127.0.0.1:6060/camera',
      file: null,
      currentRowRecord: null,
      visible: false,
      columns: sorter(getMinCol(this)),
      detailColumns: sorter(getDetailCol(this)),
      logColumns: sorter(getLogCol(this)),
      warehouseId: '',
      remoteUrl: {
        url: upcloud_base_wh_outbound + '/picktask/page-unoutercheckh-self',
      },
      particularsRemoteUrl: {
        url: upcloud_base_wh_outbound + '/picktask/list-outercheckd',
      },
      particularsParams: {},
      logRemoteUrl: {
        url: upcloud_base_wh_outbound + '/pickup-record/page-record',
      },
      logParams: {},
      mainDataSource: [],
      particularsDataSource: [],
      params: { warehouseId: '', bldgId: '' },
      rowSelection: [],
      deliver_type: [],

      // searchFromItems:[]
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'warehouse']),
    //建筑物
    bldgIdRemoteParams() {
      return {
        warehouseId: this.warehouseId,
      }
    },
    searchFromItems() {
      if (this) {
        return getFromItems(this)
      }
    },
  },
  mounted() {
    let _this = this
    getDictCode('pub_workstage_delivertype').then((response) => {
      _this.deliver_type = response.data
    })
    this.warehouseId = this.warehouse.warehouseId
    this.params.warehouseId = this.warehouseId
    //  this.searchFromItems= getFromItems(this)
    this.$refs.searchGridForm.form.setFieldsValue({
      ...this.warehouse,
    })
  },

  methods: {
    takePhoto(file) {
      let _this = this
      this.file = file
      uploadFile.call(this, this.file).then((response) => {
        if (response.success && response.data) {
          _this.$message.success('拍照成功！')
          _this.$refs.gridFrom.form.setFieldsValue({ photoId: response.data.id })
        }
      })
    },

    getPageUnoutercheckh,
    mainClickRow(event, activeID, rowRecord) {
      const bldgId = this.$refs.searchGridForm.form.getFieldValue('bldgId')
      this.particularsParams = { warehouseId: this.warehouseId, bldgId, srcCode: rowRecord.srcCode }
    },
    //打开审核弹框
    handleApprove(record) {
      this.visible = true
      this.confirmLoading = false
      this.$nextTick(() => {
        this.$refs.gridFrom.form.setFieldsValue({ srcCode: record.srcCode })
      })
      this.currentRowRecord = record
    },
    //审批提交
    handleOk(e) {
      e.preventDefault()
      this.$refs.gridFrom.form.validateFields((error, values) => {
        if (!error) {
          this.confirmLoading = true
          values.warehouseId = this.warehouseId
          const { bldgId, operatorCode } = this.$refs.searchGridForm.form.getFieldsValue(['bldgId', 'operatorCode'])
          values.bldgId = bldgId
          values.operatorCode = operatorCode
          return outercheckSelfConfirm(values)
            .then((response) => {
              this.confirmLoading = false
              if (response.success) {
                this.visible = false
                this.$message.success(response.message)
                this.params = this.$refs.searchGridForm.form.getFieldsValue()
              } else {
                this.$exception(response)
              }
            })
            .catch(() => {
              this.confirmLoading = false
              this.visible = false
            })
        }
      })
    },
    hanlderSubmit(event, form) {
      event.preventDefault()
      form.validateFields((error, values) => {
        if (!error) {
          if (this.activeKey == '1') {
            this.params = values
          } else {
            this.logParams = values
          }
        }
      })
    },
  },
}
</script>
<style lang="less">
.ant-table td {
  white-space: nowrap;
}
</style>
