<template>
  <div>
    <div>
      <p-card title="货主库存转换">
        <div slot="extra">
          <p-button type="primary" icon="to-top" style="margin-right: 20px" @click="extractFun"> 提取 </p-button>
          <p-button type="primary" icon="interaction" @click="cargoOwnerChange"> 货主转换 </p-button>
        </div>
        <p-grid-form
          ref="formTarget"
          :items="gridItems"
          @submit="
            ($event, form) => {
              $event.preventDefault()
              handleSubmit($event, form, 'formTarget')
            }
          "
        />
        <p-table
          ref="logTable"
          style="margin-top: 10px"
          :columns="tableColumns"
          rowKey="headerId"
          :autoLoad="false"
          :scroll="{ x: true, y: 200 }"
          :expandRowByClick="false"
          :editorRowTable="true"
          :rowSelectFixed="true"
          :rowSelectType="1"
          :hasRowSelectCheck="false"
          :selectedRowKeys.sync="selectedRowKeys"
          @clickRow="clickRowFun"
          @selectChange="clickRowHead"
          :remoteUrl="remoteUrl"
          :remoteParams="remoteUrl.params"
          :loading="tabLoding"
          dragle
          auto-width
          bordered
        >
          <a slot="rqcResult" slot-scope="text, record, index">
            <p-select
              :default-value="optionsData[0].value"
              :disabled="record.statusName == '已完成'"
              style="width: 120px"
              :options="optionsData"
              @change="
                (value) => {
                  return handleProvinceChange(value, record, index)
                }
              "
            />
            <!-- :options="provinceDataObj[clickRowRecord]" -->
          </a>
        </p-table>
        <p-table-edit-pro
          hasRowSelectCheck
          dragle
          :scroll="{ x: true }"
          ref="table"
          editorRowTable
          row-key="detailId"
          :bordered="true"
          :loading="tabLoding1"
          :pagination="5"
          :dataSource="dataSource"
          :rowSelectType="false"
          :columns="tableColumnsDetail"
        ></p-table-edit-pro>
      </p-card>
    </div>
    <extrace :wareId="warehouseId" ref="extractTable" @successSource="successSource" />
  </div>
</template>
<script>
import { formItems, tableColumns, tableColumnsDetail } from './js/config'
import { stockChange, stockChangeDetails } from './api/index'
import extrace from './modules/extrace.vue'
import { upcloud_base_wh_operate } from '@/config/serviceSettings'

export default {
  components: {
    extrace,
  },
  data() {
    return {
      optionsData: [
        { title: '合格', value: '0' },
        { title: '不合格', value: '1' },
        { title: '拒绝', value: '3' },
      ],
      remoteUrl: {
        url: upcloud_base_wh_operate + '/stock-change/v1/heads',
        method: 'get',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {},
      },
      tableRemoteUrl1: {
        url: upcloud_base_wh_operate + '/stock-change/v1/details',
        method: 'get',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
      warehouseId: '', //仓库id
      selectedRowKeys: [],
      selectedRows: [],
      dataSource: [],
      tabLoding: false,
      tabLoding1: false,
      detailRecord: [],
      headerRecord: {},
      gridItems: formItems(this),
      tableColumns: tableColumns,
      tableColumnsDetail: tableColumnsDetail,
    }
  },
  created() {},
  mounted() {
    let warehouse = this.$store.state.user.warehouse
    ;(this.warehouseId = warehouse.warehouseId),
      this.$refs.formTarget.form.setFieldsValue({
        warehouseId: warehouse.warehouseId,
        warehouseName: warehouse.warehouseName,
      })
  },
  methods: {
    add(text) {},
    handleProvinceChange(value, record, index) {
      record.rqcResult = value
      this.headerRecord = record
      console.log(value, record, index, 'recordrecordrecordrecordrecordrecord')
    },
    clickRowFun(event, activeID, rowRecord) {
      console.log(event, activeID, rowRecord, '4444444444')
      if (!activeID) return
      this.selectedRowKeys = [activeID]
      this.headerRecord = rowRecord
      this.queryDetail(rowRecord.headerId)
    },
    cargoOwnerChange() {
      // 货主转换
      if (this.selectedRowKeys.length < 1) return this.$message.warn('请选择单据！')
      // this.headerRecord.
      let that = this
      this.$refs.table.validateFields(function (error, values, selectData) {
        if (error) return
        // this.detailRecord
        console.log(values, 'valuesvaluesvaluesvalues')
        that.headerRecord.detailList = values
        let params = [that.headerRecord]
        that.tabLoding = true
        stockChange(params).then((res) => {
          that.tabLoding = false
          if (res.success) {
            that.$message.success('货主转换成功！')
            that.$refs.logTable.reload()
            that.dataSource = []
          } else {
            that.$exception(res)
          }
        })
      })
    },
    successSource(val) {
      // 修改成功
      if (val) {
        this.$refs.logTable.reload()
        this.dataSource = []
      }
    },
    handleSubmit(event, form, formTarget) {
      // 查询
      console.log(form.getFieldsValue, 'form.getFieldsValueform.getFieldsValueform.getFieldsValue')
      form.validateFields((error, values) => {
        if (!error) {
          this.remoteUrl.params = form.getFieldsValue()
        }
      })
    },
    extractFun() {
      // 提取
      // let formTarget = this.$refs.formTarget.getFieldsValue()
      let formTarget = this.$refs.formTarget.form.getFieldsValue()
      if (!formTarget.warehouseId) {
        this.$message.warn('请选择仓库')
        return
      }
      console.log(formTarget, 'formTargetformTarget')
      // if()
      this.$refs.extractTable.logVisible = true
    },
    clickRowHead(selectedRowKeys, selectedRows) {
      // 点击主表信息
      if (selectedRows.length < 1) return
      this.selectedRows = selectedRows
      this.headerRecord = selectedRows[0]
      this.queryDetail(selectedRows[0]?.headerId)
    },
    queryDetail(id) {
      let params = { headerId: id }
      this.tabLoding1 = true
      stockChangeDetails(params).then((res) => {
        this.tabLoding1 = false
        if (!res.success) {
          return this.$exception(res)
        }
        this.dataSource = res.data?.list
      })
    },
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-card-body {
  padding: 12px 18px 18px 18px;
}
</style>
