<template>
  <ht-page-data-show
    class="ht-page-data-show-demo"
    :title-data="titleData"
    :search-data="searchFromData"
    :tree-data="treeData"
    :table-data="tableData"
  ></ht-page-data-show>
</template>

<script>
  export default {
    name: 'HtPageDataShowDemo',
    data() {
      return {
        titleData: {
          title: '数据展示'
        },
        searchFromData: {
          dataInfo: {
            inquiryName: '12',
            inquiryCode: '1111',
            inquiryNumber: 0,
            professionalOrgId: '',
            purchaseCategory: '1',
            quoteEndDateStart: '',
            quoteEndDateEnd: '',
            publishTimeStart: '',
            publishTimeEnd: ''
          },//搜索数据
          // labelWidth: '100',//标签的宽度
          // inputWidth: '200',//栏位的宽度
          serialNumCount: 2,//显示几行
          rowCount: 2,//每行显示几个元素
          // rowMargin:50,//行间距
          columns: [
            {
              componentType: 'HtBaseInput',
              labelName: '采购单名称',
              placeholder: '请输入采购单名称',
              prop: 'inquiryName',
              rules: [
                {
                  required: true,
                  message: '不能为空',
                  trigger: 'blur'
                }
              ]
            },
            {
              componentType: 'HtBaseInputNumber',
              labelName: '采购数量',
              placeholder: '请输入采购单编号',
              max: 100,
              min: 0,
              prop: 'inquiryNumber',
            },
            {
              componentType: 'HtBaseSelect',
              labelName: '采购机构',
              placeholder: '请输入采购机构',
              prop: 'professionalOrgId',
              children: {
                sytnax: 'Option',
                items: [
                  {label: '物资类', value: '1'},
                  {label: '施工类', value: '2'},
                  {label: '服务类', value: '3'}
                ]
              },
              rules: [
                {
                  required: true,
                  message: '不能为空',
                  trigger: 'change'
                }
              ]
            },
            {
              componentType: 'HtBaseSelect',
              labelName: '采购类别',
              placeholder: '请选择采购类别',
              prop: 'purchaseCategory',
              children: {
                sytnax: 'Option',
                items: [
                  {label: '物资类', value: '1'},
                  {label: '施工类', value: '2'},
                  {label: '服务类', value: '3'}
                ]
              }
            },
            {
              componentType: 'HtBaseDatePicker',
              labelName: '报价开始日期',
              placeholder: '请输入开始时间',
              prop: 'quoteEndDateStart',
              format: 'yyyy-MM-dd HH:mm:ss',
              on: {
                'on-change': param => {
                  this.formData.dataInfo['quoteEndDateStart'] = param;
                }
              },
              rules: [
                {
                  required: true,
                  message: '不能为空',
                  trigger: 'change'
                }
              ]
            }
          ],//全部的栏位信息
          buttonsInfo: {//按钮信息
            buttons: [
              {label: '查询', type: 'primary', action: 'submit', click: this.search, iconType: 'ios-search'},
              {label: '重置', type: 'info', action: 'reset', click: this.reset, iconType: 'ios-refresh'},
              {label: '其他', type: 'warning', click: this.other}
            ]
          }
        },
        treeData: {
          data:
            [
              {
                title: 'parent 1',
                expand: true,
                children: [
                  {
                    title: 'parent 1-1',
                    expand: true,
                    children: [
                      {
                        title: 'leaf 1-1-1'
                      },
                      {
                        title: 'leaf 1-1-2'
                      }
                    ]
                  },
                  {
                    title: 'parent 1-2',
                    expand: true,
                    children: [
                      {
                        title: 'leaf 1-2-1'
                      },
                      {
                        title: 'leaf 1-2-1'
                      }
                    ]
                  }
                ]
              }
            ],
        },
        tableData: {
          // url: 'http://ohaotian.tydicdev.com:8084/rest/authority/tenant/search',
          data: [
            {
              tenantName: 'fdsfdsf',
              remark: "备注",
              status: 0
            }
          ],
          position: 'right',//按钮位置
          buttons: [//按钮信息
            {label: '新增', componentType: 'success', iconType: 'md-add', click: this.add}
          ],
          showElevator: true,
          columns: [
            {
              type: 'selection',
              width: 50,
            },
            {
              title: '租户名称',
              key: 'tenantName',
              align: 'center',
              width: 200,
              minWidth: 200,
              tooltip: true,
            },
            {
              title: '备注',
              key: 'remark',
              align: 'center',
              minWidth: 300,
              tooltip: true,
            },
            {
              title: '状态',
              key: 'status',
              align: 'center',
              width: 100,
              minWidth: 100,
              tooltip: true,
              render: (h, {row, column, index}) => {
                if (row.status === 0) {
                  return h('Tag', {
                    props: {
                      color: 'primary'
                    }
                  }, '有效')
                } else if (row.status === 2) {
                  return h('Tag', {
                    props: {
                      color: 'error'
                    }
                  }, '无效')
                }
              }
            },
            {
              title: '操作',
              align: 'center',
              width: 180,
              minWidth: 180,
              tooltip: true,
              render: (h, {row, column, index}) => {
                return h('div', [
                  h('span', {
                    attrs: {
                      class: 'add'
                    },
                    style: {
                      margin: '5px',
                      cursor: 'pointer',
                      color: '#2d8cf0'
                    },
                    on: {
                      click: () => {
                      }
                    }
                  }, '定制'),
                ]);
              }
            }
          ]
        }
      }
    }
  }
</script>
<style>
  .ht-page-data-show-demo {

  }
</style>

