<!--
 * @Description : 测试调用公共表格组件
 * @Author      : jinxin
 * @Date        : 2023-2-01 11:50:43
-->

<template>
  <div class="table">
    <JxOricoTable 
      v-model:listHeader="data.listHeader" 
      v-model:mergeColData="data.mergeColData" 
      v-model:defaultRow="data.defaultRow" 
      v-model:beforeStrList="data.beforeStrList" 
      v-model:tableHeader="data.tableHeader" 
      v-model:staticList="data.staticList"
      @getClickBtnType="getClickBtnType" 
    />
  </div>
</template>
<script>
import { defineComponent, reactive, getCurrentInstance, ref, onMounted, onActivated } from "vue"
export default defineComponent({
  name: 'SkuVxeTable',
  props: {},
  emits: ['update:clickEvent', 'transmitTableDate'],
  components: {},
  setup (props, context) {
    // 生命周期
    onMounted(() => {
      data.listHeader = [
        { type: 'checkbox', align: 'center', width: '50' },
        { type: 'index', field: 'index', title: '序号', width: '50', align: 'center' },
        { type: 'editable_ipt', field: 'ipt1', title: '输入1', width: '280', align: 'left' },
        { type: 'text', field: 'testTxt1', title: '测试文本1', width: '120', align: 'center' },
        { type: 'text', field: 'testTxt2', title: '测试文本2', width: '120', align: 'center' },
        // { type: 'text', field: 'testTxt3', title: '测试文本3', width: '120', align: 'center' },
        { type: 'editable_sel', field: 'select1', title: '选择框1', width: '160', align: 'left',beforeStr:'mt'},
        { type: 'editable_mhsel', field: 'mh_sel', title: '模糊匹配1', width: '140', align: 'left',reqUrl:'v1/product/get_supplier_list',beforeStr:'dsp'},
        { type: 'check_box_if', field: 'fast', title: '复选框-是否', width: '140', align: 'center' },
        { type: 'switch', field: 'status', title: '开关', width: '120', align: 'center' },
        { type: 'router', field: 'links', title: '跳转', width: '120', align: 'center' },
        { type: 'img', field: 'cover', title: '图片', width: '80', align: 'center' },
        { type: 'img_upload', field: 'image', title: '图片上传', width: '80', align: 'center' },
        { type: 'text', field: 'price1', title: '价格1', width: '80', align: 'center' },
        { type: 'text', field: 'price', title: '价格', width: '80', align: 'center'}
      ]
      data.defaultRow = [
        {
          index: 1,
          ipt1:'',
          testTxt1:'',
          testTxt2:'',
          testTxt3:'',
          select1:'',
          mh_sel:'',
          fast:'',
          status:'',
          links:'查看',
          cover:'',
          image:'',
          price:22,
          price1:11
      },{
          index: 2,
          ipt1:'',
          testTxt1:'',
          testTxt2:'',
          testTxt3:'',
          select1:'',
          mh_sel:'',
          fast:'',
          status:'',
          links:'查看',
          cover:'',
          image:'',
          price:11,
          price1:31
      }]
    })
    onActivated(() => {
      data.headerIndex = data.headerIndex + 1
    })
    // 获取实例
    const { proxy } = getCurrentInstance()
    // 创建实例
    let getDom = ref(null)
    // 变量
    let data = reactive({
      listHeader: [],
      defaultRow:[],
      mergeColData:[{name:'和值',field:['price','price1'],mergeFooterItems:{row: 0, col: 1, rowspan: 1, colspan: 11}}],
      tableHeader:[{name:'需要显示列',type:'popup'},{name:'导入',type:'import'},{name:'导出',type:'export'},{name:'新增',type:'add'},{name:'删除',type:'del'}],
      beforeStrList:['mt','dsp'],
      staticList:{mtlist: [{ id: 1, name: '测试1' }, { id: 2, name: '测试2' }, { id: 3, name: '测试3' }]}
    })
    // 获取点击方法
    const getClickBtnType = (type,selRow) => {
      console.log('click type -->',type)
      console.log('selRow -->',selRow)
    }
    return {
      data,
      props,
      getDom,
      getClickBtnType
    }
  }
})
</script>
<style scoped>
.table {
  padding: 0;
  width: 100%;
}
.title_box1 .title {
  margin: 0;
}
::v-deep(.el-upload-list--picture-card .el-upload-list__item) {
  margin-bottom: 0px !important;
  width: 40px !important;
  height: 40px !important;
}
::v-deep(.el-upload-list__item),
::v-deep(.vxe-body--row) {
  width: 40px !important;
  height: 50px !important;
  line-height: 40px !important;
}
::v-deep(.el-upload-list__item) {
  position: absolute;
}

::v-deep(.avatar) {
  width: 40px;
  height: 40px;
  padding-top: 5px;
  padding-bottom: 5px;
}
::v-deep(.el-icon-plus) {
  width: 40px;
  height: 40px;
  border-radius: 2px;
  line-height: 40px;
  border: 1px dashed rgba(0, 0, 0, 0.1);
}
.img-show {
  width: 150px;
  height: 150px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 9;
  background-color: #fff;
  vertical-align: middle;
  margin-top: -60px;
  text-align: center;
}
.img-show img {
  z-index: 10;
  max-width: 150px;
  vertical-align: middle;
}
::v-deep(.el-select-dropdown) {
  z-index: 9997 !important;
}
</style>