<template>
  <ele-modal
    :visible.sync="visible"
    title="追加订单"
    width="75vw"
    append-to-body
  >
    <el-form ref="form" :model="form" label-width="90px">
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="销售订单号:">
            <el-input clearable :maxlength="20" v-model="form.code" />
          </el-form-item>
        </el-col>
<!--        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="订单类型:">
            <DictSelection
              dictName="订单类型"
              clearable
              v-model="form.orderType"
            >
            </DictSelection>
          </el-form-item>
        </el-col> -->
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label="按单按库:">
            <DictSelection
              dictName="按单按库"
              clearable
              :listFormatte="
                (list) => [{ dictCode: null, dictValue: '所有' }, ...list]
              "
              v-model="form.orderLibraryType"
            >
            </DictSelection>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
          <el-form-item label-width="0px">
            <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="search"
            >
              查询
            </el-button>
            <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <ele-pro-table
      ref="table"
      :columns="columns"
      :datasource="datasource"
      :selection.sync="selection"
      cache-key="systemRoleTable2"
      row-key="id"
      @done="setSelect"
	  :initLoad="false"
    >
      <!-- <template v-slot:name='{row}'>
			<el-link :underline="false" @click="openDetails(row)">
			  {{ row.name }}
			</el-link>
		</template> -->
    </ele-pro-table>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { getPageList } from '@/api/saleOrder';
  import dictMixins from '@/mixins/dictMixins';
  export default {
    mixins: [dictMixins],
    props: {
      selectList: Array,
      productCode: String
    },
    data () {
      return {
        columns: [
          {
            width: 45,
            type: 'selection',
            columnKey: 'selection',
            align: 'center',
            reserveSelection: true
          },
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'code',
            label: '销售订单号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            slot: 'code',
            sortable: true
          },
          {
            prop: 'lineNumber',
            label: '行号',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'contractNum',
            label: '订单数量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'productSumWeight',
            label: '订单重量',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'orderLibraryType',
            label: '按单按库',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('按单按库', _row.orderLibraryType);
            }
          },
          {
            prop: 'orderType',
            label: '订单类型',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('订单类型', _row.orderType);
            }
          },
          {
            prop: 'orderSource',
            label: '订单来源',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('订单来源', _row.orderSource);
            }
          },
          {
            prop: 'status',
            label: '生产状态',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('生产状态', _row.status);
            }
          },
          {
            prop: 'releaseTime',
            label: '下达时间',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'deliveryTime',
            label: '交付日期',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'customerName',
            label: '客户名称',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'salesman',
            label: '业务员',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'deliveryRequirements',
            label: '交付要求',
            align: 'center',
            showOverflowTooltip: true,
            minWidth: 110,
            formatter: (_row, _column, cellValue) => {
              return this.getDictValue('交付要求', _row.deliveryRequirements);
            }
          }
        ],
        visible: false,
        loading: false,
        form: {
          orderType: 0,
          orderLibraryType: null
        },
        selection: [],
        tableList: []
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive () {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created () {
      this.requestDict('按单按库');
      this.requestDict('交付要求');
      this.requestDict('订单类型');
      this.requestDict('订单来源');
      this.requestDict('生产状态');
    },
    methods: {
	  reload(where) {
	    this.$nextTick(() =>
	      this.$refs.table.reload({ page: 1, limit: 10, where })
	    );
	  },
      /* 表格数据源 */
      async datasource ({ page, limit, where, order }) {
        const params = {
          size: limit,
          pageNum: page,
          status: [1],
          productCode: this.productCode,
          ...this.form
        };
        const data = await getPageList(params);
        this.tableList = data.list;
        return data;
      },
      // 设置选中
      setSelect () {
        this.$nextTick(() => {
          this.$refs.table.clearSelection();
          this.tableList.forEach((row) => {
            this.selectList.forEach((selected) => {
              if (selected.id === row.id) {
                this.$refs.table.toggleRowSelection(row, true);
              }
            });
          });
        });
      },
      /* 搜索 */
      search () {
        this.$refs.table.reload({ page: 1, size: 10 });
      },
      /*  重置 */
      reset () {
        this.form = {};
        this.search();
      },
      open (orderType) {
		this.$set(this.form,'orderType',orderType)
        this.visible = true;
		this.reload()
      },
      cancel () {
        this.form = {};
        this.$refs.form.clearValidate();
        this.visible = false;
      },
      /* 保存编辑 */
      save () {
        this.$emit('choose', this.selection);
        this.cancel();
      }
    }
  };
</script>
<style lang="scss" scoped>
  .basic-details-title {
    margin: 10px 0;
  }
  .add-product {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 30px;
    color: #1890ff;
    margin: 10px 0;
    cursor: pointer;
  }
</style>
