<template>
  <div
    class="publicModal"
    style="width:430px"
  >
    <Spin
      v-if="spinShow"
      size="large"
      fix
    />
    <FormLayout
      ref="formLayout"
      :defaultColumn="formLayout.defaultColumn"
      :defaultconfig="formLayout.defaultConfig"
    >
    </FormLayout>
<!--    <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: () => []
      },
      title: {
        type: String
      }
    },
    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 = {};
                    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: [],
          }
        },
        // formConfig: {
        //   // 表单取值,和下面formData下对象的value一一对应
        //   formValue: {
        //     shopId: '',
        //   },
        //   // 表单配置
        //   formData: [
        //     {
        //       version: '1.4',
        //       style: 'popInput', // 输入框弹框单多选
        //       width: '24',
        //       isActive: true,
        //       isdisabled: false,
        //       inputList: [
        //         {
        //           childs: [{ colname: 'SHOPID', refobjid: 'Y', valuedata: 'Y' }]
        //         }
        //       ],
        //       itemdata: {
        //         col: 1,
        //         colid: 196253, // 下单店铺(字段)
        //         colname: 'SHOPID', // 当前字段的名称
        //         inputname: 'SHOPID', // 这个是做中文类型的模糊查询字段，例如ENAME
        //         refcolval: {
        //           fixcolumn: 'ISACTIVE',
        //           expre: 'equal',
        //           srccol: 'SHOPID'
        //         },
        //         datelimit: 'all',
        //         display: 'text', // 显示什么类型，例如xml表示弹窗多选加导入功能，mrp表示下拉多选
        //         fkdisplay: 'drp', // 外键关联类型
        //         fkdesc: '店铺', // 下单店铺
        //         // inputname: 'CP_C_STORE_IDS:ENAME', // 这个是做中文类型的模糊查询字段，例如ENAME
        //         isfk: true, // 是否有fk键
        //         isnotnull: true, // 是否必填
        //         isuppercase: false, // 是否转大写
        //         length: 65535, // 最大长度是多少
        //         name: '店铺', // 下单店铺 // input前面显示的lable值
        //         readonly: false, // 是否可编辑，对应input   readonly属性
        //         reftable: 'T_IESSHOP', // 对应的表
        //         reftableid: 10621, // 对应的表ID
        //         row: 1,
        //         statsize: -1,
        //         type: 'STRING', // 这个是后台用的
        //         valuedata: '', // 这个是选择的值
        //       },
        //       oneObj: (val) => {
        //         console.log('oneObj::this', this);
        //         console.log('oneObj::val', val);
        //         this.formConfig.formValue.shopId = val.pid;
        //       }
        //     },
        //     // {
        //     //   style: 'select', // 下拉框类型
        //     //   // label: "退货批次", //下拉框前的值
        //     //   label: '店铺',
        //     //   width: '24', // 所占宽度宽度
        //     //   value: 'SHOPID',
        //     //   dataAcessKey: 'SHOPID',
        //     //   disabled: false, // 按钮禁用控制
        //     //   options: [],
        //     //   selectChange() {
        //     //   },
        //     // },
        //   ]
        // },
        btnConfig: {
          typeAll: 'error', // 按钮统一风格样式
          btnsite: 'right', // 按钮位置 (right , center , left)
          buttons: [
            {
              type: '', // 按钮类型
              text: '取消', // 取消 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: () => {
                this.$emit('closeActionDialog');
              } // 按钮点击事件
            },
            {
              type: '', // 按钮类型
              text: '确定', // 下载 按钮文本
              icon: '', // 按钮图标
              size: '', // 按钮大小
              disabled: false, // 按钮禁用控制
              btnclick: async () => {
                // const formValue = this.formConfig.formValue;
                const formLayoutFormValue = this.formLayout.formValue;
                console.log('点击确定按钮::输入框中的值=', formLayoutFormValue);
                if (!formLayoutFormValue.shops.length) {
                  this.$Message.warning('请选择店铺!'); // 请选择需要下载的店铺
                  return;
                }
                const param = {
                  ids: [Number(formLayoutFormValue.shops[0].ID)],
                  param: {},
                  tableName: this.$route.params.tableName,
                  actionName: 'T_IESPRODUCT_更新图片信息_SP',
                  isContainsParam: false
                };
                const res = await this.service.common.exeAction(param);
                console.log('点击确定按钮返回', res);
                if (res.code == 0) {
                  this.$emit('closeActionDialog', true);
                  this.$Message.success(res.message || '更新成功!');
                } else {
                  this.$Message.error(res.message);
                }
              }, // 按钮点击事件
            }
          ],
        },
      };
    },
    async mounted() {
      // const fixedcolumns = {
      //   // PLATFORM: '=[13,22,23,29,27,28,30,20,37,40]'
      // };
      // const fkdrplist = {
      //   // 只查这两列
      //   searchcols: ['SHOPTITLE', 'SELLERNICK', 'ID'],
      // };
      // const query = {
      //   table: 't_iesshop',
      //   isdroplistsearch: true,
      //   range: 1000,
      //   startindex: 0,
      //   fkdrplist,
      //   fixedcolumns,
      // };
      // const res = await this.service.common.listQuery(query);
      // const options = res.rows.map(item => ({
      //   value: item.ID.val || '',
      //   label: item.SHOPTITLE.val || '',
      // }));
      // this.formConfig.formData[0].options = options;
    },
    methods: {
      // formLayout形式获取平台店铺
      async getShop(pageNum = 1, start = 0, range = 10) {
        const query = {
          isdroplistsearch: true,
          refcolid: 198185,
          startindex: (pageNum - 1) * range,
          range,
          fixedcolumns: {}
        };

        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>
