<template>
  <div>
    <hs-input
      v-model="formData.username"
      :elInfo="elInfo"
    ></hs-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        username: 123
      },
      elInfo: {
        position: 'inputabc',
        el: 'hsInput'
      },
      allSourceData: {
        config: {
          highlightCurrentRow: false,
          hover: { hoverBackground: '', leaveBackground: '' },
          showIndex: false, // 是否显示 序号
          hsConfig: {
            default_type: 1 // mes风格
          },
          showHandle: true, // 是否显示操作栏
          selection: true, // 是否显示复选框
          handleWidth: 180, // 操作栏宽度
          isAdaptive: true, // 宽度自适应
          toolItems: [
            // 工具栏
            {
              label: '测试2',
              icon: '',
              type: 'text',
              isHide: false, // 是否隐藏
              disabled: false, // 是否禁用
              click: () => {
                alert('测试2')
              }
            }
          ],
          handleColumns: [
            // 操作栏
            {
              label: '测试1',
              icon: '',
              isHide: false, // 是否隐藏
              type: 'text',
              disabled: false, // 是否禁用
              click: () => {
                alert('测试')
              }
            },
            {
              label: '测试2',
              icon: '',
              isHide: false, // 是否隐藏
              type: 'text',
              disabled: false, // 是否禁用
              click: () => {
                this.allSourceData.sourceData.push({})
              }
            }
          ],
          columnsConfig: [
            // 列信息
            {
              prop: 'order_size', //对应后端的字段
              label: '型号', // 列名
              showOverflowTooltip: true, // 超出时 显示省略
              showType: 'hsSelectPlus', // 列类型
              allSourceData: {
                // 参照配置
                config: {
                  url: '',
                  isInnerRequest: true, // 是否在内部请求
                  proxyTag: 'commonUtilAPI', // 代理前缀
                  ref: {
                    const_id: '0', // 常量值
                    table_name: 'im_store_group', // 表名
                    columns: 'id,name', //列名
                    remote_condition: '', // 是否远程搜索
                    displayfield: '', // 显示默认值
                    writebackfield: [] //回写字段
                  },
                  dyncQueryParms: {}, // 查询参数
                  multiple: false, // 是否多选
                  disabled: false,
                  size: 'mini',
                  clearable: true,
                  title: '',
                  placeholder: '请选择',
                  value: 'id', // 对应的后端字段
                  label: 'name', // 对应的后端字段
                  is_computed: false // 是否是计算属性
                },
                sourceData: []
              },
              requestMethod: this.requestMethod // 参照请求方法
            },
            {
              prop: 'style_code',
              label: '款号',
              showOverflowTooltip: true,
              showType: 'input' // 普通输入框
            },
            {
              prop: 'customer_name',
              label: '客户',
              showOverflowTooltip: true,
              showType: 'text' // 文本
            }
          ]
        },
        sourceData: [] //表格数据
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async getTableConfig() {
      // 初始化main上面的工具栏
      const data = {
        control_name: this.elInfo.position,
        sAppCode: this.elInfo.sAppCode,
        sPage: this.elInfo.page,
        return_type: 1
      }
      const res = await request.getPageInfo(data)
      if (res.length) {
        this.allSourceData.config = JSON.parse(res[0].json_config)
      }
    },
    init() {
      this.allSourceData.sourceData = [
        {
          customer_name: 1,
          style_code: 2,
          order_size: '0',
          _styleRowSetting_: { color: 'blue', background: 'red' }
        },
        {
          customer_name: 1,
          style_code: 2,
          order_size: '0',
          _styleRowSetting_: { color: 'blue', background: 'blue' }
        }
      ]
    }
  }
}
</script>