<!-- 采购退货 -->
<script>

import { initColumns, initDicts,initParams } from "@/utils/init/index.js";
import { TableColumns, DetailColumns} from './column';
import orderApi from "@/api/business/purchase/purchase-order";

const NewTableColumns = initColumns(TableColumns);
const NewDetailColumns = initColumns(DetailColumns);

export default{
  name:'purchaseReturn',

  data(){

    return {
      visible: false,
      loading:false,
      puOrderId:'',
      columns:NewTableColumns,
      detailColumns:NewDetailColumns,
      params:{
        ...initParams(NewTableColumns),
        ncProcurementWarehouseDetailModels:[]
      },

    }
  },
  methods:{

    setVisible(prop) {

      this.visible = prop;

      if(!prop){

      }
    
    },

    async fetchStorage(id){

      try{

        this.loading = true;

        this.puOrderId = Number(id);

        let { code, data } = await orderApi.putInStorage({puOrderId: Number(id)});

        if(code == 200){

          console.log(data,'查询入库数据');
          this.params = data[0];
        }

      }catch(err){}
      finally{
        this.loading = false;
      }
    },
    beforeOpen(){},
    // 刷新
    handleRefresh(){

      this.fetchStorage(this.puOrderId);
    },
    // 取消
    handleCancel(){
      this.setVisible(false);
    },
    handleConfirm(){
      try {
        this.loading = true;

        let data = {
          vbillCode:this.params.vbillCode,
          crowno:[],
        }
        let { code, msg} = orderApi.returnedGoods(data);

        if(code == 200){

        }
      } catch (error) {}
      finally{
        this.loading = false;
      }
    },
    handleDetailSelect(selection, row){

    },
    handleReferChange(){}


  },
  created(){
  }
}
</script>

<template>

  <el-drawer 
    direction="btt" 
    size="100%" 
    :with-header="false" 
    :visible.sync="visible" 
    @open="beforeOpen"
    @close="$emit('close')"
    v-loading="loading"
  >
    <el-form
      size="mini"
      label-position="right"
      ref="orderAddForm"
      label-width="140px"
      :model="params"
      >
      <!-- :rules="rules" -->
      <el-card :body-style="{
        padding: '20px',
        display: 'flex',
        'flex-wrap': 'wrap',
        }" 
        style="margin: 10px"
      >
        <div slot="header" 
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <h3></h3>
          <div style="text-align: right">
            <el-button size="mini" @click="handleRefresh">刷新</el-button>
            <el-button size="mini" type="primary" plain @click="handleConfirm">确定</el-button>
            <el-button size="mini" @click="handleCancel">取 消</el-button>
          </div>
        </div>
        
        <el-row style="display:flex; flex-wrap: wrap;">
            <el-col 
              v-for="(column, index) in columns" 
              :key="index" 
              :span="column.span || 6"
              >
              <el-form-item :prop="column.key" :label="column.title">

                <el-input v-if="column.inputType === 'Input'" 
                  v-model="params[column.key]" 
                  :placeholder="column.placeholder"
                  :clearable="column.clearable" 
                  :disabled="column.disabled" 
                  :readonly="column.readonly"
                  style="width: 100%"
                  ></el-input>
                <dr-popover-select v-if="column.inputType === 'PopoverSelect'" 
                  v-model="params[column.key]" 
                  size="mini"
                  :value-key="column.valueKey" 
                  :source.sync="params" 
                  :title="column.title" 
                  :type="column.referName"
                  :multiple="column.multiple" 
                  :placeholder="column.placeholder" 
                  :data-mapping="column.dataMapping"
                  :disabled="column.disabled" 
                  :query-params="column.queryParams"
                  @change="handleReferChange"
                  ></dr-popover-select>
                <el-input v-if="column.inputType === 'Textarea'" 
                  v-model="params[column.key]" 
                  type="textarea"
                  :placeholder="column.placeholder" 
                  :clearable="column.clearable" 
                  :disabled="column.disabled"
                  style="width: 100%"
                  ></el-input>
                <el-input-number v-if="column.inputType === 'InputNumber'" 
                  v-model="params[column.key]"
                  :precision="column.precision"
                  :max="handleIsRevise(params.status) ? params[column.key] : Infinity"
                  :controls-position="column.controlsPosition" 
                  :placeholder="column.placeholder"
                  :clearable="column.clearable" 
                  :disabled="column.disabled" 
                  style="width: 100%"
                  ></el-input-number>
                <el-select v-if="column.inputType === 'Select'" 
                  v-model="params[column.key]" 
                  :disabled="column.disabled"
                  :clearable="column.clearable" 
                  :placeholder="column.placeholder" 
                  style="width: 100%"
                  @change="handleSelectChange(column.key,column.referName)"
                  >
                  <el-option 
                    v-for="item in dict.type[column.referName]" 
                    :key="item.value" 
                    :label="item.label"
                    :value="item.value"
                    ></el-option>
                </el-select>
                <el-select v-if="column.inputType === 'TagSelect'" 
                  v-model="params[column.key]" 
                  multiple 
                  clearable
                  collapse-tags 
                  :placeholder="column.placeholder" 
                  :clearable="column.clearable" 
                  :disabled="column.disabled"
                  style="width: 100%"
                  >
                  <template #prefix>
                    <el-icon class="el-icon-view" style="cursor: pointer" @click.stop="$message.info(234)"></el-icon>
                  </template>
                  <el-option 
                    v-for="item in options" 
                    :key="item.value" 
                    :label="item.label" 
                    :value="item.value"
                    ></el-option>
                </el-select>
                <el-date-picker v-if="column.inputType === 'DatePicker'" 
                  v-model="params[column.key]" 
                  :type="column.type"
                  :placeholder="column.placeholder" 
                  :clearable="column.clearable" 
                  :disabled="column.disabled"
                  :picker-options="column.pickerOptions" 
                  style="width: 100%"
                  ></el-date-picker>
                <el-checkbox v-if="column.inputType === 'Checkbox'" 
                  v-model="params[column.key]" 
                  :disabled="column.disabled"
                  true-label="Y"
                  false-label="N"
                  > </el-checkbox>
                <file-upload-center v-if="column.inputType === 'Upload'" 
                  v-model="params[column.key]"
                  :file-type="column.fileType" 
                  :disabled="handleIsRevise(params.status)"
                  ></file-upload-center>
              </el-form-item>
            </el-col>
          </el-row>
        <!-- <el-table 
          :data="tableData" 
          size="mini"
          highlight-current-row
          @select="handleSelect"
          @row-click="handleFetchDetail"
          height="200"
          style="width: 100%; margin: 20px 0 0 0"
        >
        <el-table-column type="selection" width="45" ></el-table-column>
          <el-table-column 
            v-for="(column, index) in columns" 
            :key="column.key" 
            :prop="column.key" 
            :label="column.title"
            :width="column.width || 180" 
            :show-overflow-tooltip="column.showOverflowTooltip || true"
          >

            <template slot-scope="scope">
              <dict-tag v-if="column.inputType === 'Select'" 
                size="small" 
                :value="scope.row[column.key]"
                :options="dict.type[column.referName]"
              />

              <el-checkbox v-else-if="column.inputType === 'Checkbox'"
                v-model="scope.row[column.key]" 
                disabled 
                true-label="Y"
                false-label="N"
              > </el-checkbox>
              <span v-else>{{ scope.row[column.key] }}</span>
            </template>
          </el-table-column>

        </el-table> -->
      </el-card>


      <el-card :body-style="{
        padding: '20px',
        display: 'flex',
        'flex-wrap': 'wrap',
        position: 'relative',
        }" 
        style="margin: 10px"
      >
        <el-table 
          :data="params['ncProcurementWarehouseDetailModels']" 
          style="width: 100%"
          size="mini"
          highlight-current-row
          @select="handleDetailSelect"
        >
          <el-table-column type="selection" width="45" ></el-table-column>
          <el-table-column 
            v-for="(cColumn, cIndex) in detailColumns" 
            :key="cColumn.key" 
            :prop="cColumn.key"
            :label="cColumn.title" 
            :width="cColumn.width || 180"
            :show-overflow-tooltip="cColumn.showOverflowTooltip || true"
          >
            <template slot-scope="scope">
              <dict-tag v-if="cColumn.inputType === 'Select'" 
                size="small" 
                :value="scope.row[cColumn.key]"
                :options="dict.type[cColumn.referName]"
              />

              <el-checkbox v-else-if="cColumn.inputType === 'Checkbox'"
                v-model="scope.row[cColumn.key]" 
                disabled 
                true-label="Y"
                false-label="N"
              > </el-checkbox>
              <span v-else>{{ scope.row[cColumn.key] }}</span>
            </template>
          </el-table-column>
        </el-table>

      </el-card>
    </el-form>

  </el-drawer>

</template>
