<template>
  <ele-modal
    :visible.sync="visible1"
    :close-on-click-modal="false"
    width="70%"
    append-to-body
    @close="close"
    :maxable="true"
  >
    <el-form :model="searchForm" label-width="70px" @submit.native.prevent>
      <el-row :gutter="10">
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="编码">
            <el-input
              @keyup.enter.native="doSearch"
              clearable
              size="small"
              v-model="searchForm.code"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="名称">
            <el-input
              @keyup.enter.native="doSearch"
              clearable
              size="small"
              v-model="searchForm.name"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item label="型号">
            <el-input
              @keyup.enter.native="doSearch"
              clearable
              size="small"
              v-model="searchForm.modelType"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { md: 6 } : { span: 6 }">
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="doSearch"
              >查询</el-button
            >

            <el-button
              @click="reset"
              icon="el-icon-refresh"
              class="ele-btn-icon"
              size="medium"
              >重置</el-button
            >
            <slot></slot>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-container class="assets-dialog">
      <el-aside width="200px" class="wrapper-assets">
        <AssetTree
          ref="treeList"
          :treeIds="[]"
          itemType="5"
          @handleNodeClick="handleNodeClick"
        />
      </el-aside>
      <el-main>
        <ele-pro-table
          ref="table"
          :columns="columns"
          :datasource="tableData"
          :selection.sync="selection"
          row-key="id"
          :needPage="false"
        >
        </ele-pro-table>
        <div style="text-align: center; padding: 10px">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size.sync="searchForm.size"
            :current-page.sync="searchForm.pageNum"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
    <div slot="footer">
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import AssetTree from './assetTree.vue';
  import { getProductList } from '@/api/saleManage/quotation';
  import order from '@/store/modules/order';
  import { mapGetters } from 'vuex';
  export default {
    components: { AssetTree },
    computed: {
      ...mapGetters(['getDictValue']),
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    data() {
      return {
        visible1: false,
        searchForm: {
          // code: '',
          // name: '',
          categoryLevelId: '',
          pageNum: 1,
          size: 10
        },
        categoryLevelId: '',
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            fixed: 'left'
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: 'categoryCode',
            label: '编码',
            align: 'center'
          },
          {
            prop: 'categoryName',
            label: '名称',
            align: 'center'
          },
          {
            prop: 'categoryModel',
            label: '型号',
            align: 'center'
          },
          {
            prop: 'specification',
            label: '规格',
            align: 'center'
          },
          {
            prop: 'level',
            label: '级别',
            align: 'center'
          },
          {
            prop: 'weight',
            label: '重量',
            align: 'center'
          },
          {
            prop: 'weightUnit',
            label: '重量单位',
            align: 'center'
          }
        ],
        tableData: [],
        selection: [],
        total: 0
      };
    },

    methods: {
      open() {
        this.visible1 = true;
        // this.warehouseData();
        this.$nextTick(() => {
          this.$refs.treeList.getTreeData().then((data) => {
            this.handleNodeClick(data);
          });
        });
      },
      close() {
        this.visible1 = false;
      },
      handleNodeClick(data) {
        this.categoryLevelId = data.id;
        this.searchForm.categoryLevelId = data.id;
        this.doSearch();
      },
      doSearch() {
        this.searchForm.pageNum = 1;
        this.warehouseData();
      },
      //
      confirm() {
        if (this.selection.length == 0) {
          this.$message.warning('请选择一条数据');
          return;
        }

        if (this.selection.length > 1) {
          this.$message.warning('只能选择一条数据');
          return;
        }
        this.$emit('changeParent', {
          // orderCode: this.rowClickData.orderNo,
          // orderId: this.selection.id,
          orderCode: this.selection[0].categoryCode,
          orderId: this.selection[0].id,
          tableList: this.selection
        });
        this.close();
      },
      handleSizeChange() {
        this.searchForm.pageNum = 1;
        this.warehouseData();
      },
      handleCurrentChange() {
        this.warehouseData();
      },
      async warehouseData() {
        const res = await getProductList(this.searchForm);
        let list = res.list.map((el) => {
          el.categoryModel = el.modelType;
          el.categoryName = el.name;
          el.categoryCode = el.code;
          return el;
        });
        this.tableData = list;
        this.total = res.count;
      },
      reset() {}
    }
  };
</script>
