<template>
  <div
    class="downloadVIPRefundOrder"
    style="width:430px"
  >
    <Spin
      v-if="spinShow"
      size="large"
      fix
    />
    <FormLayout
      ref="formLayout"
      :defaultColumn="formLayout.defaultColumn"
      :defaultconfig="formLayout.defaultConfig"
      style="padding-right: 28px;"
    >
    </FormLayout>
    <businessForm :form-config="DownLoadForm"/>
    <businessForm :form-config="formConfig"/>
    <businessButton :btn-config="btnConfig"/>
  </div>
</template>

<script>
  import businessForm from 'professionalComponents/businessForm';
  import businessButton from 'professionalComponents/businessButton';
  import common from '@yunque/service/modules/common';

  export default {
    components: {
      businessForm,
      businessButton,
    },
    data() {
      return {
        spinShow: false,
        formLayout: {
          defaultColumn: 1,
          defaultConfig: [
            {
              item: {
                type: 'DropDownSelectFilter',
                required: true,
                label: '店铺',
                props: {
                  disabled: false,
                  totalRowCount: 100,
                  pageSize: 10,
                  hidecolumns: ['ID'],
                  showColnameKey: 'isak', // 选中展示字段：对应表头需要增加改字段为true（isak：true）
                  AutoData: [],
                  defaultSelected: [],
                  data: {
                    start: 0,
                    totalRowCount: 70,
                    pageSize: 10,
                    tabth: [],
                    row: []
                  },
                },
                style: {
                  width: 60,
                },
                event: {
                  'on-fkrp-selected': (e) => {
                    console.log('on-fkrp-selected::e', e);
                    this.formLayout.formValue.shops = e;
                  },
                  'on-clear': () => {
                    console.log('on-clear');
                    this.formLayout.formValue.shops = [];
                  },
                  'on-popper-show': async () => {
                    console.log('on-popper-show');
                    this.getShop();
                  },
                  'on-page-change': (value) => {
                    console.log('on-page-change', value);
                    this.getShop(value);
                  },
                  'on-input-value-change': async (value) => {
                    console.log('on-input-value-change::val', value);
                    let fd = new FormData();
                    fd.append('ak', value);
                    fd.append('colid', 198185);
                    const fixedcolumns = {
                      whereKeys: {
                        PLATFORM: '=19',
                      }
                    };
                    fd.append('fixedcolumns', JSON.stringify(fixedcolumns));
                    const res = await this.service.common.fuzzyquerybyak(fd);
                    console.log('on-input-value-change::fuzzyquerybyak::res', res);
                    if (res.data.code === 0) {
                      this.formLayout.defaultConfig[0].item.props.AutoData = res.data.data;
                    }
                  }
                }
              }
            },
          ],
          formValue: {
            shops: [],
          }
        },
        DownLoadForm: {
          formValue: {
            downloadType: 0
          },
          formData: [
            {
              style: 'radio',
              label: '下载方式',
              value: 'downloadType', // 输入框的值
              width: '24', // 宽度
              radioChange: () => {
                let formValue = this.DownLoadForm.formValue;
                this.formConfig.formValue.jitWarehouseCodes = '';
                this.formConfig.formValue.startEndTimes = '';
                this.formConfig.formValue.refundForm = '';
                if (!formValue.downloadType) {
                  this.formConfig.formData[0].style = 'select';
                  this.formConfig.formData[1].style = 'date';
                  this.formConfig.formData[2].style = ' ';
                } else {
                  this.formConfig.formData[0].style = ' ';
                  this.formConfig.formData[1].style = ' ';
                  this.formConfig.formData[2].style = 'input';
                }
              }, // 切换时的方法
              // setRequired: "required", //必选标识,值不为required时无标识
              options: [
                {
                  label: '根据JIT仓库', // 全部
                  value: 0,
                },
                {
                  label: '根据退供单号', // 待发货
                  value: 1,
                },
              ]
            }
          ],
        }, // 下载方式
        formConfig: {
          // 表单取值,和下面formData下对象的value一一对应
          formValue: {
            jitWarehouseCodes: '',
            startEndTimes: '',
            refundForm: '',
          },
          // 表单配置
          formData: [
            {
              style: 'select', // 输入框类型
              label: 'JIT仓库', // 输入框前文字
              value: 'jitWarehouseCodes', // 输入框的值
              width: '24', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '不选择则下载所有JIT仓库的退供单', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              // setRequired: "required" //必选标识,值不为required时无标识
              selectChange: () => {
              },
              options: []
            },
            {
              style: 'date',
              type: 'datetimerange', // 日期组件类型,默认为data  (daterange)为双日期区间选择
              value: 'startEndTimes',
              label: '时间', // 平台修改时间
              width: '24',
              placeholder: '请选择时间', // 占位文本，默认为请输入
              format: 'yyyy-MM-dd HH:mm:ss', // 格式参照burgeonui
              options: {
                disabledDate(time) {
                  let curDate = (new Date()).getTime();
                  let seven = 180 * 24 * 60 * 60 * 1000;
                  let evenDays = curDate - seven;
                  return time.getTime() > curDate || time.getTime() < evenDays;
                }
              },
            },
            {
              style: '', // 输入框类型
              label: '退供单', // 输入框前文字
              value: 'refundForm', // 输入框的值
              width: '24', // 所占的宽度 (宽度分为24份,数值代表所占份数的宽度)
              icon: '', // 输入框后带的图标,暂只有输入框支持
              placeholder: '一次只能填写一个', // 占位文本，默认为请输入
              ghost: false, // 是否关闭幽灵按钮，默认开启
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
          ]
        },
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '取消', // 取消 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.$emit('closeActionDialog', false);
              } // 按钮点击事件
            },
            {
              type: '', // 按钮类型
              text: '确定', // 下载 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: async () => {
                const formValue = this.formConfig.formValue;
                const formLayoutFormValue = this.formLayout.formValue;
                const DownLoadFormValue = this.DownLoadForm.formValue.downloadType;
                console.log('点击确定按钮::输入框中的值=', formValue);
                if (!formLayoutFormValue.shops.length) {
                  this.$Message.warning('请选择需要下载的店铺'); // 请选择需要下载的店铺
                  return;
                }
                if (!formValue.startEndTimes[0] && !DownLoadFormValue) {
                  this.$Message.error('请选择时间!');
                  return;
                }
                const query = {
                  shopId: Number(formLayoutFormValue.shops[0].ID),
                  startTime: formValue.startEndTimes ? this.$comUtils.dateFormat(formValue.startEndTimes[0], 'yyyy-MM-dd hh:mm:ss') : '',
                  endTime: formValue.startEndTimes ? this.$comUtils.dateFormat(formValue.startEndTimes[1], 'yyyy-MM-dd hh:mm:ss') : '',
                  refundNos: formValue.refundForm ? formValue.refundForm : '',
                  jitWarehouseCodes: formValue.jitWarehouseCodes ? formValue.jitWarehouseCodes : ''
                };
                const res = await this.service.operationPlatform.vipDownloadRefund(query);
                console.log('点击确定按钮返回', res);
                if (res.data.code == 0) {
                  this.$Message.success(res.data.message || '下载成功!');
                  this.$emit('closeActionDialog', true);
                } else {
                  // this.$Message.error(res.data.message || '下载失败!');
                }
              }, // 按钮点击事件
            }
          ],
        },
      };
    },
    // 可选方法 组件出现时调用自定义的方法
    async mounted() {
      this.getJITWarehouse();
    },
    methods: {
      async getJITWarehouse() {
        // 获取"JIT仓库"信息
        let { rows } = await common.listQuery({
          table: 'T_V_IESJITWAREHOUSE',
          fixedcolumns: {
            ISACTIVE: '=Y'
          },
          range: 1000
        });
        rows.forEach(item => {
          this.formConfig.formData[0].options.push({
            label: item.JITWAREHOUSENAME.val,
            value: item.JITWAREHOUSECODE.val
          });
        });
        console.log(this.formConfig.formData[0].options);
      },
      // formLayout形式获取平台店铺
      async getShop(pageNum = 1, start = 0, range = 10) {
        const query = {
          isdroplistsearch: true,
          refcolid: 198185,
          startindex: (pageNum - 1) * range,
          range,
          fixedcolumns: {
            PLATFORM: '=19',
          }
        };

        const fd = new FormData();
        fd.append('searchdata', JSON.stringify(query));
        const res = await this.service.common.QueryList(fd);
        console.log('getShop::res', res);
        if (res.data.code == 0) {
          let data = {
            start,
            totalRowCount: res.data.data.totalRowCount,
            pageSize: range,
            tabth: res.data.data.tabth,
            row: res.data.data.row
          };
          this.formLayout.defaultConfig[0].item.props.data = data;
          this.formLayout.defaultConfig[0].item.props.totalRowCount = res.data.data.totalRowCount;
        }
      },
    }
  };
</script>

<style>
  @import "~@yunque/css/modal/interfacePlatform/downLoadAll.less";
  .downloadVIPRefundOrder /deep/ .formlayout {
    padding-right: 28px;
  }
</style>
