<template>
  <div class="page-body">
    <vxe-pulldown ref="pulldownRef" transfer>
      <template #default>
        <vxe-input style="width:400px" v-model="searchName" suffix-icon="vxe-icon-table" placeholder="实现下拉分页表格"
          @keyup="keyupEvent" @focus="focusEvent" @suffix-click="suffixClick"></vxe-input>
        <a-icon type="scan" :style="{ fontSize: '22px', color: '#08c', marginLeft: '10px' }" />
      </template>
      <template #dropdown>
        <div class="my-dropdown4">
          <vxe-grid border auto-resize height="auto" :row-config="{ isHover: true }" :loading="loading"
            :pager-config="pagerConfig" :data="tableData" :columns="tableColumn" @cell-click="cellClickEvent"
            @page-change="pageChangeEvent">
          </vxe-grid>
        </div>
      </template>
    </vxe-pulldown>

    <div class="container">
      <div class="left">
        <div class="card">
          <h4>随车联(工序流转卡)信息</h4>
          <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
            :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
          </vxe-form>
        </div>

        <div class="card">
          <h4>报工信息</h4>

          <vxe-form :data="formOptions4.data" ref="xForm" :title-width="formOptions4.titleWidth"
            :title-align="formOptions4.titleAlign" :rules="formOptions4.rules" :items="formOptions4.items" titleColon>
          </vxe-form>
        </div>
      </div>
      <div class="right">

        <div class="card">
          <h4>员工信息</h4>
          <vxe-form :data="formOptions2.data" ref="xForm" :title-width="formOptions2.titleWidth"
            :title-align="formOptions2.titleAlign" :rules="formOptions2.rules" :items="formOptions2.items" titleColon>
          </vxe-form>
          <a-button type="primary">选择员工</a-button>
        </div>

        <div class="card">
          <h4>工序信息</h4>

          <vxe-form :data="formOptions3.data" ref="xForm" :title-width="formOptions3.titleWidth"
            :title-align="formOptions3.titleAlign" :rules="formOptions3.rules" :items="formOptions3.items" titleColon>
          </vxe-form>
          <a-button type="primary">选择工序</a-button>
        </div>


      </div>
    </div>

    <a-button type="primary">确定报工</a-button>

  </div>
</template>

<script>
import BASE_URL from '@/services/mes/api.js';

export default {

  name: '',
  components: {},
  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },

  data() {

    var pageData = {

      actions: {
      },

      keyName: 'id',
      // 是否编辑模式
      isEdit: false,


      formOptions: {
        data: {
        },
        // 标题宽度
        titleWidth: 100,
        // 标题对齐方式
        titleAlign: 'right',
        // 表单校验规则
        rules: {
        },
        // 表单项
        items: [

          {
            title: '左侧',
            span: 9,
            children: [
              { field: '布产单信息', title: '布产单信息', span: 24, titleColon: false, className: 'formtitle' },
              { field: '布产单号', title: '布产单号', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '布产部门', title: '布产部门', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '布产类型', title: '布产类型', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '是否补单', title: '是否补单', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '补单原因', title: '补单原因', span: 24, itemRender: { name: '$MkFormInputShow' } },

            ],
          },
          {
            title: '中侧',
            span: 9,
            children: [
              { field: '料品信息', title: '料品信息', span: 24, titleColon: false, className: 'formtitle' },
              { field: '料品编号', title: '料品编号', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '料品名称', title: '料品名称', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '布产类型', title: '布产类型', span: 24, itemRender: { name: '$MkFormInputShow' } },

            ],
          },
          {
            title: '右侧',
            span: 6,
            children: [
              {
                field: 'image', span: 24, itemRender: {
                  name: 'MkFormCropper', props: {
                    isReadonly: true
                  }
                }
              },
            ],
          },
          {
            title: '下侧',
            span: 24,
            children: [
              { field: '料品信息', title: '随车联信息', span: 24, titleColon: false, className: 'formtitle' },
              { field: '随车联号', title: '随车联号', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '数量', title: '数量', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '是否领料', title: '是否领料', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '开始时间', title: '开始时间', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '计工方式', title: '计工方式', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '车号', title: '车号', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '领料时间', title: '领料时间', span: 6, itemRender: { name: '$MkFormInputShow' } },
              { field: '状态', title: '状态', span: 6, itemRender: { name: '$MkFormInputShow' } },
            ],
          },




        ]
      },

      formOptions2: {
        data: {
        },
        // 标题宽度
        titleWidth: 100,
        // 标题对齐方式
        titleAlign: 'right',
        // 表单校验规则
        rules: {
        },
        // 表单项
        items: [
          {
            span: 6,
            children: [
              {
                field: 'image', span: 24, itemRender: {
                  name: 'MkFormCropper', props: {
                    isReadonly: true
                  }
                }
              },
            ],
          },
          {
            span: 18,
            children: [

              { field: '姓名', title: '姓名', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '工号', title: '工号', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '电话', title: '电话', span: 24, itemRender: { name: '$MkFormInputShow' } },
              { field: '工序', title: '工序', span: 24, itemRender: { name: '$MkFormInputShow' } },
            ],
          },

        ]
      },


      formOptions3: {
        data: {
        },
        // 标题宽度
        titleWidth: 100,
        // 标题对齐方式
        titleAlign: 'right',
        // 表单校验规则
        rules: {
        },
        // 表单项
        items: [
          { field: '工序名称', title: '工序名称', span: 24, itemRender: { name: '$MkFormInputShow' } },
          { field: '工序分类', title: '工序分类', span: 24, itemRender: { name: '$MkFormInputShow' } },
          { field: '工序编号', title: '工序编号', span: 24, itemRender: { name: '$MkFormInputShow' } },

        ]
      },


      formOptions4: {
        data: {
        },
        // 标题宽度
        titleWidth: 110,
        // 标题对齐方式
        titleAlign: 'right',
        // 表单校验规则
        rules: {
        },
        // 表单项
        items: [
          { field: '可报工数量', title: '可报工数量', span: 8, itemRender: { name: '$input', props: { type: 'number' } } },
          { field: '随车剩下张数', title: '随车剩下张数', span: 8, itemRender: { name: '$input', props: { type: 'number' } } },
          { field: '查坯方式', title: '查坯方式', span: 8, itemRender: { name: '$input', props: { type: 'number' } } },


          {
            title: '花面', span: 8,
            field: '花面',
            dataRule: {
              fromField: "id",
              saveField: "material_id"
            },
            itemRender: {
              name: 'MkFormDataSelector', props: {
                params: {
                  dataType: "object",
                  valueField: "id",
                  textField: "name",
                  listdataFieldName: 'MesMaterials',
                  dataUrl: `${BASE_URL.BASE_URL}/MesMaterials/v1/mes/materials/list`
                }
              }
            }
          },

          { field: '合格数量', title: '合格数量', span: 8, itemRender: { name: '$input', props: { type: 'number' } } },
          { field: '报损数量', title: '报损数量', span: 8, itemRender: { name: '$input', props: { type: 'number' } } },
          { field: '土质', title: '土质', span: 8, itemRender: { name: '$input', props: { type: 'number' } } },
          { field: '土质日期', title: '土质日期', span: 8, itemRender: { name: '$input', props: { type: 'date' } } },

        ]
      },


      searchName: '',
      loading: false,
      tableColumn: [
        { field: 'name', title: 'Name' },
        { field: 'role', title: 'Role' },
        { field: 'sex', title: 'Sex' }
      ],
      tableData: [],
      tableList: [
        { name: 'Test1', role: '前端', sex: '男' },
        { name: 'Test2', role: '后端', sex: '男' },
        { name: 'Test3', role: '测试', sex: '男' },
        { name: 'Test4', role: '设计师', sex: '女' },
        { name: 'Test5', role: '前端', sex: '男' },
        { name: 'Test6', role: '前端', sex: '男' },
        { name: 'Test7', role: '前端', sex: '男' }
      ],
      pagerConfig: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      }

    };


    // 合并表单数据及配置
    pageData.formOptions = Object.assign({}, this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },

  computed: {

  },


  created() {



  },
  // 函数
  methods: {

    focusEvent() {
      const $pulldown = this.$refs.pulldownRef
      if ($pulldown) {
        $pulldown.showPanel()
      }
    },
    keyupEvent() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        if (this.searchName) {
          this.tableData = this.tableList.filter((row) => row.name.indexOf(this.searchName) > -1)
        } else {
          this.tableData = this.tableList.slice(0)
        }
      }, 100)
    },
    suffixClick() {
      const $pulldown = this.$refs.pulldownRef
      if ($pulldown) {
        $pulldown.togglePanel()
      }
    },
    cellClickEvent({ row }) {
      const $pulldown = this.$refs.pulldownRef
      if ($pulldown) {
        this.searchName = row.name
        $pulldown.hidePanel()
      }
    },
    pageChangeEvent({ currentPage, pageSize }) {
      this.pagerConfig.currentPage = currentPage
      this.pagerConfig.pageSize = pageSize
    }


  },
  // 监听属性
  watch: {

  }
};

</script>


<style>
.page-body {
  padding: 30px;
  background: #f4f4f4;
}

.formtabs .ant-tabs-tabpane {
  /* background: white; */
  padding: 12px;
}

.gridPanel {
  height: calc(100vh - 600px);
}

.footerbar {
  padding-left: 10px;
}

.imagePanel {
  cursor: pointer;
  padding: 10px;
  width: 100px;

  img {
    width: 80px;
    height: 80px;
  }
}

.oplinks2 svg {
  width: 18px;
  height: 18px;
}

.oplinks2 i {
  margin-left: 5px;
}

.my-dropdown4 {
  width: 600px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
}

.container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.card {
  background-color: white;
  margin-top: 10px;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);
}

.card h4 {
  font-weight: bold;
  font-size: 17px;
}

.left {
  flex: 6;
}

.right {
  flex: 3;
  margin-left: 10px;
}

.card .vxe-form .vxe-form--item-inner {
  min-height: 24px;
}

.card .vxe-form .vxe-form--item {
  padding: 1px;
}

.formtitle {
  font-weight: bold;
  font-size: 14px;
}
</style>
