<template>
  <div class="modifySyncreateBySearch">
    <div class="partTitle">查询条件</div>
    <FormLayout
      ref="formLayout"
      :default-column="formLayout.defaultColumn"
      :defaultconfig="formLayout.defaultConfig"
    />
    <businessForm :form-config="formConfig" />
    <div class="partTitle">设置同步比例</div>
    <businessForm :form-config="formConfigOne" />
    <businessButton :btn-config="btnConfig" />
  </div>
</template>

<script>
  import businessForm from 'professionalComponents/businessForm';
  import businessButton from 'professionalComponents/businessButton';
  const R3 = window.R3;
  const { network, urlSearchParams } = R3;

  export default {
    components: {
      businessForm,
      businessButton
    },
    props: {},
    data() {
      return {
        vmI18n: window.vmI18n,
        formLayout: {
          defaultColumn: 1,
          defaultConfig: [
            {
              item: {
                type: 'DropMultiSelectFilter',
                required: false,
                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) => {
                    this.formLayout.formValue.platforms = e;
                  },
                  'on-clear': () => {
                    this.formLayout.formValue.platforms = [];
                  },
                  'on-popper-show': async () => {
                    this.getPlatform();
                  },
                  'on-page-change': (value) => {
                    this.getPlatform(value);
                  },
                  'on-input-value-change': async (value) => {
                    let fd = new FormData();
                    fd.append('ak', value);
                    fd.append('colid', 198187);
                    const res = await this.service.common.fuzzyquerybyak(fd);
                    if (res.data.code === 0) {
                      let autoData = []
                      res.data.data.forEach(item => {
                        let obj = {
                          id:item.id,
                          value:item.value
                        }
                        autoData.push(obj)
                      })
                      this.formLayout.defaultConfig[0].item.props.AutoData = autoData;
                    }
                  }
                }
              }
            },
            {
              item: {
                type: 'DropMultiSelectFilter',
                required: false,
                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) => {
                    this.formLayout.formValue.shops = e;
                  },
                  'on-clear': () => {
                    this.formLayout.formValue.shops = [];
                  },
                  'on-popper-show': async () => {
                    this.getShop();
                  },
                  'on-page-change': (value) => {
                    this.getShop(value);
                  },
                  'on-input-value-change': async (value) => {
                    let fd = new FormData();
                    fd.append('ak', value);
                    fd.append('colid', 198185);
                    const res = await this.service.common.fuzzyquerybyak(fd);
                    if (res.data.code === 0) {
                      let autoData = []
                      res.data.data.forEach(item => {
                        let obj = {
                          id:item.id,
                          value:item.value
                        }
                        autoData.push(obj)
                      })
                      this.formLayout.defaultConfig[1].item.props.AutoData = autoData;
                    }
                  }
                }
              }
            },
            {
              item: {
                type: 'DropMultiSelectFilter',
                required: false,
                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) => {
                    this.formLayout.formValue.brands = e;
                  },
                  'on-clear': () => {
                    this.formLayout.formValue.brands = [];
                  },
                  'on-popper-show': async () => {
                    this.getBrand();
                  },
                  'on-page-change': (value) => {
                    this.getBrand(value);
                  },
                  'on-input-value-change': async (value) => {
                    let fd = new FormData();
                    fd.append('ak', value);
                    fd.append('colid', 200110);
                    const res = await this.service.common.fuzzyquerybyak(fd);
                    if (res.data.code === 0) {
                      let autoData = []
                      res.data.data.forEach(item => {
                        let obj = {
                          id:item.id,
                          value:item.value
                        }
                        autoData.push(obj)
                      })
                      this.formLayout.defaultConfig[2].item.props.AutoData = autoData;
                    }
                  }
                }
              }
            },
          ],
          formValue: {
            platforms: [],
            shops: [],
            brands: []
          }
        },
        // 查询条件this.formLayout.formValue.brands
        formConfig: {
          formValue: {
            onShelfType: '', // 上架状态
            numIIds: '', // number
            platformNumIIds: '', // number
          },
          formData: [
            {
              style: 'select', // 单选框
              label: '上架状态', // 订单状态 前面字段
              width: '24', // 宽度
              value: 'onShelfType', // 绑定到formValue的值
              selectChange() {;
              },
              // setRequired: "required", //必选标识,值不为required时无标识
              options: [
                {
                  label: '全部', // 全部
                  value: 1,
                },
                {
                  label: '上架', // 待发货
                  value: 2,
                },
                {
                  label: '下架', // 待发货
                  value: 3,
                },
              ]
            },
            {
              style: 'input',
              label: '商品编码',
              value: 'numIIds', // 输入框的值
              width: '24',
              icon: '',
              placeholder: '输入商品编码，多个以英文逗号隔开',
              ghost: false, // 是否关闭幽灵按钮，默认开启
              inputenter: () => {
              }, // 表单回车事件
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input',
              label: '平台商品编码',
              value: 'platformNumIIds', // 输入框的值
              width: '24',
              icon: '',
              placeholder: '输入平台商品编码，多个以英文逗号隔开',
              ghost: false, // 是否关闭幽灵按钮，默认开启
              inputenter: () => {
              }, // 表单回车事件
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
          ],
        },
        formConfigOne: {
            formValue: {
                lowInventory: '', // number
                scaling: '', // number
            },
            formData: [
                {
                    style: 'input',
                    label: '低库存数',
                    value: 'lowInventory', // 输入框的值
                    width: '24',
                    icon: '',
                    placeholder: '',
                    ghost: false, // 是否关闭幽灵按钮，默认开启
                    regx: /^\d{0,15}?$/, // 正整数
                    inputenter: () => {
                    }, // 表单回车事件
                    iconclick: () => {
                    } // 点击icon图标事件
                    // setRequired: "required" //必选标识,值不为required时无标识
                },
                {
                    style: 'input',
                    label: '调整比例(%)',
                    value: 'scaling', // 输入框的值
                    width: '24',
                    icon: '',
                    placeholder: '',
                    ghost: false, // 是否关闭幽灵按钮，默认开启
                    regx: /^(0|100|([1-9][0-9]?)|(0|[1-9][0-9]?))?$/, // 0-100整数
                    inputenter: () => {
                    }, // 表单回车事件
                    iconclick: () => {
                    } // 点击icon图标事件
                    // setRequired: "required" //必选标识,值不为required时无标识
                },
            ],
            // 表单非空提示
            ruleValidate: {
                lowInventory: [{
                    required: true,
                    message: ' ',
                    trigger: 'blur'
                }],
                scaling: [{
                    required: true,
                    message: ' ',
                    trigger: 'blur'
                }],
            }
        },
        btnConfig: {
          typeAll: '', // 按钮统一风格样式
          btnsite: 'center', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: 'posdefault', // 按钮类型
              text: '确定', // 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              ghost: true, // 是否关闭幽灵按钮，默认开启
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.determine();
              }, // 按钮点击事件
            },
            {
              type: 'fcdefault', // 按钮类型
              text: window.vmI18n.t('common.cancel'), // 取消 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              ghost: true, // 是否关闭幽灵按钮，默认开启
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.$emit('closeActionDialog', false);
              } // 按钮点击事件
            },
          ]
        },
      };
    },
    mounted() {
    },
    methods: {
      // formLayout形式获取平台
      async getPlatform(pageNum = 1, start = 0, range = 10) {
        const query = {
          isdroplistsearch: true,
          refcolid: 198187,
          startindex: (pageNum - 1) * range,
          range,
          fixedcolumns: {
            // PLATFORM: `=${this.PLATFORM[this.$route.params.tableName]}`,
          }
        };
        const fd = new FormData();
        fd.append('searchdata', JSON.stringify(query));
        const res = await this.service.common.QueryList(fd);
        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;
        }
      },
      // formLayout形式获取平台店铺
      async getShop(pageNum = 1, start = 0, range = 10) {
        const query = {
          isdroplistsearch: true,
          refcolid: 198185,
          startindex: (pageNum - 1) * range,
          range,
          fixedcolumns: {
            // PLATFORM: `=${this.PLATFORM[this.$route.params.tableName]}`,
          }
        };
        const fd = new FormData();
        fd.append('searchdata', JSON.stringify(query));
        const res = await this.service.common.QueryList(fd);
        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[1].item.props.data = data;
          this.formLayout.defaultConfig[1].item.props.totalRowCount = res.data.data.totalRowCount;
        }
      },
      // formLayout形式获取品牌
      async getBrand(pageNum = 1, start = 0, range = 10) {
        const query = {
          isdroplistsearch: true,
          refcolid: 200110,
          startindex: (pageNum - 1) * range,
          range,
          fixedcolumns: {
            // PLATFORM: `=${this.PLATFORM[this.$route.params.tableName]}`,
          }
        };
        const fd = new FormData();
        fd.append('searchdata', JSON.stringify(query));
        const res = await this.service.common.QueryList(fd);
        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[2].item.props.data = data;
          this.formLayout.defaultConfig[2].item.props.totalRowCount = res.data.data.totalRowCount;
        }
      },
      // 确定按钮
      determine() {
        const formValue = this.formConfig.formValue;
        const formLayoutFormValue = this.formLayout.formValue;
        const formValueOne = this.formConfigOne.formValue;
        if (!formLayoutFormValue.platforms.length && !formLayoutFormValue.shops.length && !formLayoutFormValue.brands.length && !formValue.onShelfType && !formValue.numIIds && !formValue.platformNumIIds) {
          this.$Message.warning('请选择查询条件！'); // 请选择需要下载的店铺
          return;
        }
        if (!formValueOne.lowInventory) {
          this.$Message.warning('请填写低库存数！'); // 请填写低库存数！
          return;
        }
        if (!formValueOne.scaling) {
          this.$Message.warning('请填写调整比例！'); // 请填写调整比例！
          return;
        }
        let platforms = []
        let shopIds = []
        let brandIds = []
        formLayoutFormValue.platforms.forEach(item => {
          platforms.push(item.ID)
        })
        formLayoutFormValue.shops.forEach(item => {
          shopIds.push(item.ID)
        })
        formLayoutFormValue.brands.forEach(item => {
          brandIds.push(item.ID)
        })
        let params = {
          platforms: platforms,
          shopIds: shopIds,
          brandIds: brandIds,
          approveStatus: formValue.onShelfType==2?1:formValue.onShelfType==3?0:'',
          productCodes: formValue.numIIds,
          numiids: formValue.platformNumIIds,
          lowStock: formValueOne.lowInventory,
          stockScale: formValueOne.scaling,
        }
        network.post('/p/cs/sku/updateStockScale',params).then(res => {
          if(res.data.code == 0){
            this.$Message.success(res.data.message);
            this.$emit('closeActionDialog', true);
          }
        })
        
      }
    }
  };
</script>

<style>
  @import "~@yunque/css/modal/interfacePlatform/downLoadAll.less";

  .ark-col.ark-col-span-24:last-child {
    margin-bottom: 26px;
  }

  .modifySyncreateBySearch {
    width: 600px;
  }

  .modifySyncreateBySearch /deep/ .formlayout {
    padding-right: 28px;
  }

  .modifySyncreateBySearch .formlayout-Item {
    margin-bottom: 16px;
    margin-right: 28px;
  }

  .modifySyncreateBySearch .ark-col-span-24 {
    margin-bottom: 16px;
  }
</style>
<style lang='less' scoped>
    .partTitle {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 12px;
        margin-left: 24px;
    }
</style>
