<template>
  <div class="syncStockBySearch sync_StockBy_Search">
    <Spin
      v-if="spinShow"
      fix
      style="z-index:1000"
    >
      <Icon
        type="ios-loading"
        size="18"
        style="animation: ani-demo-spin 1s linear infinite"
      />
      <div>加载中...</div>
    </Spin>
    <businessForm :form-config="formConfig0" />
    <FormLayout
      ref="formLayout"
      style="margin-top:10px"
      :default-column="formLayout.defaultColumn"
      :defaultconfig="formLayout.defaultConfig"
    />
    <businessForm :form-config="formConfig" />
    <businessButton :btn-config="btnConfig" />
  </div>
</template>

<script>
  import businessForm from 'professionalComponents/businessForm';
  import businessButton from 'professionalComponents/businessButton';

  // 同步库存(根据选择);
  export default {
    components: {
      businessForm,
      businessButton
    },
    props: {
      objList: {
        type: Array,
        defalut: () => []
      },
      idArray: {
        type: Array,
        defalut: () => []
      },
      webid: {
        type: Number
      },
      tablename: {
        type: String
      },
      selectRowData: {
        type: Array,
        defalut: () => []
      }
    },
    data() {
      return {
        spinShow: false,
        formConfig0: {
          // 表单取值,和下面formData下对象的value一一对应
          formValue: {
            PLATFORM: '',
          },
          // 表单配置
          formData: [
            {
              style: 'select', // 下拉框类型
              label: '平台',
              width: '24', // 所占宽度宽度
              value: 'PLATFORM',
              required: true,
              setRequired: 'required',
              dataAcessKey: 'PLATFORMNAME',
              disabled: false, // 按钮禁用控制
              placeholder: '请选择平台',
              filterable: true,
              options: [],
              selectChange: () => {
                console.log('selectChange::this', this);
                this.formLayout.formValue.shops = [];

                this.formLayout.defaultConfig[0].item.props.data.row = [];
                this.$refs.formLayout.$children[0].$children[0].$emit('on-clear');
                // this.getShop();
              },
            },
          ],
          // 校验
          ruleValidate: {
            PLATFORM: [{
              required: true,
              message: ' ',
              trigger: 'blur'
            }]
          },
        },
        formLayout: {
          defaultColumn: 1,
          defaultConfig: [
            {
              item: {
                type: 'DropMultiSelectFilter',
                required: false,
                label: '店铺',
                props: {
                  disabled: true,
                  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');
                    if (!this.formConfig0.formValue.PLATFORM) {
                      this.$Message.error('请先选择平台!');
                      return false;
                    }
                    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);
                    if (this.formConfig0.formValue.PLATFORM) {
                      const fixedcolumns = {
                        whereKeys: {
                          PLATFORM: `=${this.formConfig0.formValue.PLATFORM}`,
                        }
                      };
                      fd.append('fixedcolumns', JSON.stringify(fixedcolumns));
                    } else {
                      fd.append('fixedcolumns', JSON.stringify({}));
                    }
                    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;
                    }
                  }
                }
              }
            },
            {
              item: {
                type: 'Select',
                required: false,
                label: '上架状态',
                props: {
                  transfer: true,
                  placeholder: '',
                  value: 'all',
                  options: [
                    {
                      value: 'all',
                      label: '全部'
                    },
                    {
                      value: 'onsale',
                      label: '销售中'
                    },
                    {
                      value: '"instock"',
                      label: '仓库中'
                    }
                  ]
                },
                style: {
                  width: 60,
                },
                event: {
                  'on-change': (e) => {
                    this.formLayout.formValue.goodStatus = e;
                  }
                }
              }
            }
          ],
          formValue: {
            shops: [],
            goodStatus: 'all',
          }
        },
        formConfig: {
          // 表单取值,和下面formData下对象的value一一对应
          formValue: {
            // PLATFORM: '',
            // SHOPID: '',
            GOODSTATUS: '',
            businessGoodNo: '',
            platformGoodNo: '',
            styleColors: '',
          },
          // 表单配置
          formData: [
            {
              style: 'input',
              label: '商品编码',
              value: 'businessGoodNo', // 输入框的值
              width: '24',
              icon: '',
              placeholder: '输入商品编码,多个以英文逗号/空格隔开',
              ghost: false, // 是否关闭幽灵按钮，默认开启
              inputenter: () => {
              }, // 表单回车事件
              iconclick: () => {
              } // 点击icon图标事件
              // setRequired: "required" //必选标识,值不为required时无标识
            },
            {
              style: 'input',
              label: 'skc',
              value: 'styleColors', // 款色
              width: '24',
              icon: '',
              placeholder: '输入skc,多个以英文逗号/空格隔开',
              ghost: false,
              inputenter: () => {},
              iconclick: () => {}
            },
            {
              style: 'input',
              label: '平台商品编码',
              value: 'platformGoodNo', // 输入框的值
              width: '24',
              icon: '',
              placeholder: '输入平台商品编码,多个以英文逗号/空格隔开',
              ghost: false, // 是否关闭幽灵按钮，默认开启
              inputenter: () => {},
              iconclick: () => {}
            },
          ],
          // 校验
          ruleValidate: {
            PLATFORM: [{
              required: true,
              message: ' ',
              trigger: 'blur'
            }]
          },
        },
        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 formValue0 = this.formConfig0.formValue;
                const formData = this.formConfig.formData;
                const formValue = this.formConfig.formValue;
                const formLayoutFormValue = this.formLayout.formValue;
                console.log('点击确定按钮::输入框中的值=', formValue);
                if (!formValue0.PLATFORM) {
                  this.$Message.error('请选择平台!');
                  return;
                }
                const shopIds = this.formLayout.formValue.shops.map(item => item.ID);
                const goodStatus = formLayoutFormValue.goodStatus == 'all' ? 'onsale,instock' : formLayoutFormValue.goodStatus;
                const query = {
                  bizId: this.idArray.join(','),
                  platForm: formValue0.PLATFORM,
                  shopId: shopIds.length ? shopIds.join(',') : '',
                  approveStatus: goodStatus,
                  productCode: formValue.businessGoodNo,
                  skc: formValue.styleColors,
                  numIId: formValue.platformGoodNo,
                  type: 1,
                };
                this.spinShow = true;
                const res = await this.service.commodityCenter.syncStockBySp(query);
                // this.spinShow = false;
                console.log('点击确定按钮返回', res);
                if (res.data.Code == 0) {
                  this.spinShow = false;
                  this.$Message.success(res.data.Message || '同步成功!');
                  this.$emit('closeActionDialog', true);
                  // const publicModal = this.$parent.$children.find(item => item.name === 'publicModal');
                  // publicModal.$emit('closeActionDialog', true);
                } else {
                  this.spinShow = false;
                  this.$Message.error(res.data.Message);
                }
              }, // 按钮点击事件
            }
          ],
        },
      };
    },
    watch: {
      'formConfig0.formValue.PLATFORM': function (newVal, oldVal) {
        console.log('newVal::', newVal);
        console.log('oldVal::', oldVal);
        this.formLayout.defaultConfig[0].item.props.disabled = !newVal;
      }
    },
    // 可选方法 组件出现时调用自定义的方法
    async mounted() {
      window.syncStockBySearch = this;
      this.getPlatForm();
    },
    methods: {
      // 获取平台
      async getPlatForm() {
        const query = {
          table: 'T_V_OMSPLATFORM', // V_OMS_OMSPLATFORM,2021-09-10更改，只展示系统中所有店铺对应的平台
          isdroplistsearch: true,
          range: 1000,
          startindex: 0,
          fixedcolumns: {
            ISACTIVE: '=Y'
          }
        };
        const res = await this.service.common.listQuery(query);
        console.log('获取平台数据::res', res);
        const options = res.rows.map(item => ({
          value: item.ID.val || '',
          label: item.PLATFORMNAME.val || '',
        }));
        this.formConfig0.formData[0].options = options;
      },
      // formLayout形式获取平台店铺
      async getShop(pageNum = 1, start = 0, range = 10) {
        const query = {
          isdroplistsearch: true,
          refcolid: 198185,
          startindex: (pageNum - 1) * range,
          range,
        };
        if (this.formConfig0.formValue.PLATFORM) {
          query.fixedcolumns = {
            PLATFORM: `=${this.formConfig0.formValue.PLATFORM}`,
          };
        }

        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>

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

  .syncStockBySearch /deep/ .formlayout {
    padding-right: 28px;
  }
.sync_StockBy_Search {
  min-height: 280px;
  /deep/ .unFlodStyle .ark-col.ark-col-span-24:last-child {
    margin-top: 0;
    margin-bottom: 0 !important;
  }
  /deep/ .formlayout {
    .formlayout-Item:not(:first-child) {
      margin-top: 10px;
    }
  }
  /deep/ .orderManageEdit {
    margin-top: 6px;
    .businessForm_a  {
      .ark-col-span-24:not(:first-child) {
        margin-top: 8px;
      }
    }
  }
}
</style>
