<template>
  <ele-modal
    :visible.sync="visible"
    title="创建工单"
    width="65vw"
    append-to-body
    :maxable="true"
  >
    <div class="search-box">
      计划编号
      <el-input placeholder="请输入" v-model="searchCode"></el-input>
    </div>
    <!-- 数据表格 -->
    <ele-pro-table
      ref="table"
      :columns="columns"
      @done="handleDone"
      row-key="id"
      :datasource="datasource"
      :current.sync="current"
      highlight-current-row
      height="45vh"
      @row-click="choose"
    >
    </ele-pro-table>
    <div class="footer" slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="confirm" type="primary">确定</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { getList } from '@/api/aps/index';
  export default {
    props: ['produceVersionId'],
    data () {
      return {
        visible: false,
        current: null,
        searchCode: '',
        isSingle: false,
        callback: null,
        radio: '',
        planType: [
          { label: '所有计划类型', value: null },
          { label: '内销计划', value: '1' },
          { label: '外销计划', value: '2' },
          { label: '预制计划', value: '3' }
        ]
      };
    },
    computed: {
      columns () {
        const list = [
          {
            label: '计划编号',
            prop: 'code'
          },
          {
            label: '物料编码',
            prop: 'productCode'
          },
          {
            label: '牌号',
            prop: 'brandNo'
          },
          {
            label: '型号',
            prop: 'model'
          },
          {
            prop: 'productNum',
            label: '计划数量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'productWeight',
            label: '计划重量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'requiredFormingNum',
            label: '要求生产数量',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'orderType',
            label: '计划类型',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (row) => {
              const obj = this.planType.find((i) => i.value == row.planType);
              return obj && obj.label;
            }
          }
        ];
        return list;
      }
    },
    methods: {
      open (memo, callback) {
        this.memo = memo;
        this.callback = callback;
        this.visible = true;
      },
      handleDone ({ data }) {
        if (this.memo?.id) {
          this.$nextTick(() => {
            this.$refs.table.setCurrentRow(
              data.find((item) => item.id == this.memo.id)
            );
          });
        }
      },
      datasource ({ page, limit }) {
        return getList({
          pageNum: page,
          size: limit,
          code: this.searchCode
        });
      },
      confirm () {
        if (!this.current) return this.$message.error('请选择数据');

        this.callback && this.callback(this.current);

        this.cancel();
      },
      cancel () {
        this.$refs.table.clearSelection();
        this.searchCode = '';
        this.current = null;
        this.visible = false;
      },
      // 单击获取id
      choose (row) {
        this.current = row;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .search-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .el-input {
      width: 220px;
      margin: 0 32px;
    }
  }
</style>
