<template>
  <div>
    <!-- <el-row :gutter="10" class="mb8" v-if="mode != 'info'">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
    </el-row> -->
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <!-- <el-table-column label="序号" align="center"  /> -->
      <el-table-column
        v-for="(item, index) in tableColums"
        :key="index"
        :label="item.label"
        align="center"
        :prop="item.prop"
        :width="item.width"
      >
      <template v-slot="scope">
        <el-input-number
          :max="scope.row.max"
          style="width: 150px"
          v-model="scope.row.quantity"
          v-if="item.prop === 'quantity' && mode === 'make'"
          @change="(val) => handleChange(val, index)"
        />
        <div v-else>{{scope.row[item.prop]}}</div>
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-if="mode === 'make'"
            @click="deleteRow(scope.$index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="销线"
        align="center"
        prop="salePath"
        v-if="salePath != ''"
      /> -->
      <!-- <el-table-column
        label="SIZE类型组"
        align="center"
        prop="sizeType"
        width="120"
        v-if="sizeType != ''"
      />
      <el-table-column
        label="产品类别"
        align="center"
        prop="itemType"
        v-if="itemType != ''"
      />
      <el-table-column
        label="段别"
        align="center"
        prop="segment"
        v-if="segment != ''"
      />
      <el-table-column
        label="季度"
        align="center"
        prop="quarter"
        v-if="quarter != ''"
      />
      <el-table-column
        label="特殊Size"
        align="center"
        prop="specSize"
        v-if="specSize != ''"
      />
      <el-table-column
        label="整/半码"
        align="center"
        prop="wholeSize"
        v-if="wholeSize != ''"
      />
      <el-table-column
        label="产品规格"
        align="center"
        prop="prodSpec"
        v-if="prodSpec != ''"
      />
      <el-table-column
        label="标准SIZE类型"
        align="center"
        prop="standardSizeType"
        width="120"
        v-if="standardSizeType != ''"
      />
      <el-table-column label="USA" align="center" prop="usa" v-if="usa != ''" />
      <el-table-column label="UK" align="center" prop="uk" v-if="uk != ''" />
      <el-table-column label="RUS" align="center" prop="pus" v-if="pus != ''" />
      <el-table-column label="JAN" align="center" prop="jan" v-if="jan != ''" />
      <el-table-column label="THA" align="center" prop="tha" v-if="tha != ''" />
      <el-table-column label="CHN" align="center" prop="chn" v-if="chn != ''" />
      <el-table-column label="IND" align="center" prop="ind" v-if="ind != ''" />
      <el-table-column
        label="KKET"
        align="center"
        prop="kket"
        v-if="kket != ''"
      />
      <el-table-column label="US" align="center" prop="us" v-if="us != ''" />
      <el-table-column label="EU" align="center" prop="eu" v-if="eu != ''" />
      <el-table-column label="JP" align="center" prop="jp" v-if="jp != ''" />
      <el-table-column label="MM" align="center" prop="mm" v-if="mm != ''" />
      <el-table-column label="BRA" align="center" prop="bra" v-if="bra != ''" />
      <el-table-column label="EUR" align="center" prop="eur" v-if="eur != ''" />
      <el-table-column label="CM" align="center" prop="cm" v-if="cm != ''" />
      <el-table-column label="U" align="center" prop="u" v-if="u != ''" />
      <el-table-column label="MX" align="center" prop="mx" v-if="mx != ''" />
      <el-table-column label="CHI" align="center" prop="chi" v-if="chi != ''" />
      <el-table-column label="JAP" align="center" prop="jap" v-if="jap != ''" />
      <el-table-column
        label="JAPAN"
        align="center"
        prop="japan"
        v-if="japan != ''"
      />
      <el-table-column label="MEX" align="center" prop="mex" v-if="mex != ''" />
      <el-table-column
        label="METRIC"
        align="center"
        prop="metric"
        v-if="metric != ''"
      />
      <el-table-column
        label="PACK"
        align="center"
        prop="pack"
        v-if="pack != ''"
      />
      <el-table-column label="USM" align="center" prop="usm" v-if="usm != ''" />
      <el-table-column label="USW" align="center" prop="usw" v-if="usw != ''" />
      <el-table-column label="KX" align="center" prop="kx" v-if="kx != ''" />
      <el-table-column label="AU" align="center" prop="au" v-if="au != ''" />
      <el-table-column label="CN" align="center" prop="cn" v-if="cn != ''" />
      <el-table-column
        label="EURO"
        align="center"
        prop="euro"
        v-if="euro != ''"
      />
      <el-table-column label="GEN" align="center" prop="gen" v-if="gen != ''" />
      <el-table-column
        label="JPN-Y"
        align="center"
        prop="jpnY"
        v-if="jpnY != ''"
      />
      <el-table-column label="JPN" align="center" prop="jpn" v-if="jpn != ''" />
      <el-table-column label="UKM" align="center" prop="ukm" v-if="ukm != ''" />
      <el-table-column label="UKW" align="center" prop="ukw" v-if="ukw != ''" />
      <el-table-column label="EUM" align="center" prop="eum" v-if="eum != ''" />
      <el-table-column label="EUW" align="center" prop="euw" v-if="euw != ''" />
      <el-table-column
        label="JAPM"
        align="center"
        prop="japm"
        v-if="japm != ''"
      />
      <el-table-column
        label="JAPW"
        align="center"
        prop="japw"
        v-if="japw != ''"
      />
      <el-table-column label="BR" align="center" prop="br" v-if="br != ''" />
      <el-table-column label="USF" align="center" prop="usf" v-if="usf != ''" />
      <el-table-column
        label="FOOT"
        align="center"
        prop="foot"
        v-if="foot != ''"
      />
      <el-table-column
        label="鞋内长"
        align="center"
        prop="shoeInnerLength"
        v-if="shoeInnerLength != ''"
      />
      <el-table-column label="KOR" align="center" prop="kor" v-if="kor != ''" />
      <el-table-column label="XX" align="center" prop="xx" v-if="xx != ''" />
      <el-table-column label="FR" align="center" prop="fr" v-if="fr != ''" />
      <el-table-column
        label="MULES"
        align="center"
        prop="mules"
        v-if="mules != ''"
      />
      <el-table-column label="S" align="center" prop="s" v-if="s != ''" />
      <el-table-column label="XS" align="center" prop="xs" v-if="xs != ''" />
      <el-table-column label="M" align="center" prop="m" v-if="m != ''" />
      <el-table-column label="L" align="center" prop="l" v-if="l != ''" />
      <el-table-column label="XL" align="center" prop="xl" v-if="xl != ''" />
      <el-table-column label="XXL" align="center" prop="xxl" v-if="xxl != ''" />
      <el-table-column
        label="Re-fit"
        align="center"
        prop="reFit"
        v-if="reFit != ''"
      />
      <el-table-column
        label="JPN(CM)"
        align="center"
        prop="jpnCm"
        v-if="jpnCm != ''"
      />
      <el-table-column label="CMM" align="center" prop="cmm" v-if="cmm != ''" />
      <el-table-column label="CMW" align="center" prop="cmw" v-if="cmw != ''" />
      <el-table-column
        label="EURM"
        align="center"
        prop="eurm"
        v-if="eurm != ''"
      />
      <el-table-column
        label="EURW"
        align="center"
        prop="eurw"
        v-if="eurw != ''"
      />
      <el-table-column label="JPM" align="center" prop="jpm" v-if="jpm != ''" />
      <el-table-column label="JPW" align="center" prop="jpw" v-if="jpw != ''" />
      <el-table-column label="EOR" align="center" prop="eor" v-if="eor != ''" />
      <el-table-column label="MO" align="center" prop="mo" v-if="mo != ''" />
      <el-table-column label="AUS" align="center" prop="aus" v-if="aus != ''" />
      <el-table-column label="USL" align="center" prop="usl" v-if="usl != ''" />
      <el-table-column
        label="MEX(CM)"
        align="center"
        prop="mexCm"
        v-if="mexCm != ''"
      />
      <el-table-column
        label="码数"
        align="center"
        prop="size"
        v-if="size != ''"
      />
      <el-table-column
        label="鞋号"
        align="center"
        prop="shoeNum"
        v-if="shoeNum != ''"
      />
      <el-table-column label="CAD" align="center" prop="cad" v-if="cad != ''" />
      <el-table-column
        label="MONDO"
        align="center"
        prop="mondo"
        v-if="mondo != ''"
      />
      <el-table-column label="ARG" align="center" prop="arg" v-if="arg != ''" />
      <el-table-column
        label="US W’S"
        align="center"
        prop="usws"
        v-if="usws != ''"
      />
      <el-table-column label="M’S" align="center" prop="ms" v-if="ms != ''" />
      <el-table-column
        label="脚长"
        align="center"
        prop="footLength"
        v-if="footLength != ''"
      />
      <el-table-column
        label="法码"
        align="center"
        prop="weights"
        v-if="weights != ''"
      />
      <el-table-column
        label="鞋型"
        align="center"
        prop="shoeShape"
        v-if="shoeShape != ''"
      />
      <el-table-column
        label="楦型"
        align="center"
        prop="lastShape"
        v-if="lastShape != ''"
      />
      <el-table-column
        label="UK/AU/NZ"
        align="center"
        prop="ukAuNz"
        width="120"
        v-if="ukAuNz != ''"
      />
      <el-table-column label="RU" align="center" prop="ru" v-if="ru != ''" />
      <el-table-column
        label="UKAUNZ"
        align="center"
        prop="unaunz"
        v-if="unaunz != ''"
      />
      <el-table-column label="NGG" align="center" prop="ngg" v-if="ngg != ''" />
      <el-table-column label="ENG" align="center" prop="eng" v-if="eng != ''" />
      <el-table-column
        label="韩年龄"
        align="center"
        prop="koreaAge"
        v-if="koreaAge != ''"
      />
      <el-table-column label="US1" align="center" prop="us1" v-if="us1 != ''" />
      <el-table-column label="US2" align="center" prop="us2" v-if="us2 != ''" />
      <el-table-column
        label="CHN&EU"
        align="center"
        prop="chnEu"
        v-if="chnEu != ''"
      />
      <el-table-column
        label="CM(JP)"
        align="center"
        prop="cmJp"
        v-if="cmJp != ''"
      />
      <el-table-column
        label="MONTHS"
        align="center"
        prop="months"
        v-if="months != ''"
      />
      <el-table-column
        label="CN(cm)"
        align="center"
        prop="cnCm"
        v-if="cnCm != ''"
      />
      <el-table-column label="DPS" align="center" prop="dps" v-if="dps != ''" />
      <el-table-column label="NBJ" align="center" prop="nbj" v-if="nbj != ''" />
      <el-table-column label="AR" align="center" prop="ar" v-if="ar != ''" />
      <el-table-column label="POR" align="center" prop="por" v-if="por != ''" />
      <el-table-column
        label="Spain"
        align="center"
        prop="spain"
        v-if="spain != ''"
      />
      <el-table-column label="MP" align="center" prop="mp" v-if="mp != ''" />
      <el-table-column label="UA" align="center" prop="ua" v-if="ua != ''" />
      <el-table-column
        label="CHNW"
        align="center"
        prop="chnw"
        v-if="chnw != ''"
      />
      <el-table-column
        label="CHNM"
        align="center"
        prop="chnm"
        v-if="chnm != ''"
      />
      <el-table-column
        label="US/CAN"
        align="center"
        prop="usCan"
        v-if="usCan != ''"
      />
      <el-table-column
        label="TYPE"
        align="center"
        prop="type"
        v-if="type != ''"
      />
      <el-table-column
        label="USM/USW"
        align="center"
        prop="usmUsw"
        width="120"
        v-if="usmUsw != ''"
      />
      <el-table-column label="CAN" align="center" prop="can" v-if="can != ''" />
      <el-table-column label="ES" align="center" prop="es" v-if="es != ''" />
      <el-table-column label="KR" align="center" prop="kr" v-if="kr != ''" /> -->
    </el-table>
  </div>
</template>

<script>
export default {
  components: {},
  inject: ["mode"],
  data() {
    return {
      /**弹窗状态 */
      showFlag: false,
      /**表格数据 */
      tableData: [],
      /**表单规则 */
      rules: {},
      /**多选 */
      selection: [],
      optType: "add",
      /**表单初始化数据 */
      form: {
        size: "",
        upc3: "",
        dispatch_multiple: "",
        reference_num: "",
      },
      tableColums: [],
      colums: [
        { prop: "idx", label: "序号" },
        { prop: "salesId", label: "销售订单号" },
        { prop: "salesItem", label: "销售订单行项目" },
        { prop: "clientCmd", label: "销售订单指令号" },
        { prop: "quantity", label: "派工数", width: "160" },
        { prop: "lossNum", label: "Loss数" },
        { prop: "brandCode", label: "品牌" },
        { prop: "salePath", label: "销线" },
        { prop: "sizeType", label: "SIZE类型组", width: "120" },
        { prop: "itemType", label: "产品类别" },
        { prop: "segment", label: "段别" },
        { prop: "quarter", label: "季度" },
        { prop: "specSize", label: "特殊Size" },
        { prop: "wholeSize", label: "整/半码" },
        { prop: "prodSpec", label: "产品规格" },
        { prop: "standardSizeType", label: "标准SIZE类型", width: "120" },
        { prop: "usa", label: "USA" },
        { prop: "uk", label: "UK" },
        { prop: "pus", label: "RUS" },
        { prop: "jan", label: "JAN" },
        { prop: "tha", label: "THA" },
        { prop: "chn", label: "CHN" },
        { prop: "ind", label: "IND" },
        { prop: "kket", label: "KKET" },
        { prop: "us", label: "US" },
        { prop: "eu", label: "EU" },
        { prop: "jp", label: "JP" },
        { prop: "mm", label: "MM" },
        { prop: "bra", label: "BRA" },
        { prop: "eur", label: "EUR" },
        { prop: "cm", label: "CM" },
        { prop: "u", label: "U" },
        { prop: "mx", label: "MX" },
        { prop: "chi", label: "CHI" },
        { prop: "jap", label: "JAP" },
        { prop: "japan", label: "JAPAN" },
        { prop: "mex", label: "MEX" },
        { prop: "metric", label: "METRIC" },
        { prop: "pack", label: "PACK" },
        { prop: "usm", label: "USM" },
        { prop: "usw", label: "USW" },
        { prop: "kx", label: "KX" },
        { prop: "au", label: "AU" },
        { prop: "cn", label: "CN" },
        { prop: "euro", label: "EURO" },
        { prop: "gen", label: "GEN" },
        { prop: "jpnY", label: "JPN-Y" },
        { prop: "jpn", label: "JPN" },
        { prop: "ukm", label: "UKM" },
        { prop: "ukw", label: "UKW" },
        { prop: "eum", label: "EUM" },
        { prop: "euw", label: "EUW" },
        { prop: "japm", label: "JAPM" },
        { prop: "japw", label: "JAPW" },
        { prop: "br", label: "BR" },
        { prop: "usf", label: "USF" },
        { prop: "foot", label: "FOOT" },
        { prop: "shoeInnerLength", label: "鞋内长" },
        { prop: "kor", label: "KOR" },
        { prop: "xx", label: "XX" },
        { prop: "fr", label: "FR" },
        { prop: "mules", label: "MULES" },
        { prop: "s", label: "S" },
        { prop: "xs", label: "XS" },
        { prop: "m", label: "M" },
        { prop: "l", label: "L" },
        { prop: "xl", label: "XL" },
        { prop: "xxl", label: "XXL" },
        { prop: "reFit", label: "Re-fit" },
        { prop: "jpnCm", label: "JPN(CM)" },
        { prop: "cmm", label: "CMM" },
        { prop: "cmw", label: "CMW" },
        { prop: "eurm", label: "EURM" },
        { prop: "eurw", label: "EURW" },
        { prop: "jpm", label: "JPM" },
        { prop: "jpw", label: "JPW" },
        { prop: "eor", label: "EOR" },
        { prop: "mo", label: "MO" },
        { prop: "aus", label: "AUS" },
        { prop: "usl", label: "USL" },
        { prop: "mexCm", label: "MEX(CM)" },
        { prop: "size", label: "码数" },
        { prop: "shoeNum", label: "鞋号" },
        { prop: "cad", label: "CAD" },
        { prop: "mondo", label: "MONDO" },
        { prop: "arg", label: "ARG" },
        { prop: "usws", label: "US W’S" },
        { prop: "ms", label: "M’S" },
        { prop: "footLength", label: "脚长" },
        { prop: "weights", label: "法码" },
        { prop: "shoeShape", label: "鞋型" },
        { prop: "lastShape", label: "楦型" },
        { prop: "ukAuNz", label: "UK/AU/NZ", width: "120" },
        { prop: "ru", label: "RU" },
        { prop: "unaunz", label: "UKAUNZ" },
        { prop: "ngg", label: "NGG" },
        { prop: "eng", label: "ENG" },
        { prop: "koreaAge", label: "韩年龄" },
        { prop: "us1", label: "US1" },
        { prop: "us2", label: "US2" },
        { prop: "chnEu", label: "CHN&EU" },
        { prop: "cmJp", label: "CM(JP)" },
        { prop: "months", label: "MONTHS" },
        { prop: "cnCm", label: "CN(cm)" },
        { prop: "dps", label: "DPS" },
        { prop: "nbj", label: "NBJ" },
        { prop: "ar", label: "AR" },
        { prop: "por", label: "POR" },
        { prop: "spain", label: "Spain" },
        { prop: "mp", label: "MP" },
        { prop: "ua", label: "UA" },
        { prop: "chnw", label: "CHNW" },
        { prop: "chnm", label: "CHNM" },
        { prop: "usCan", label: "US/CAN" },
        { prop: "type", label: "TYPE" },
        { prop: "usmUsw", label: "USM/USW", width: "120" },
        { prop: "can", label: "CAN" },
        { prop: "es", label: "ES" },
        { prop: "kr", label: "KR" },
        { prop: "samples", label: "样品数" }
      ],
      currentRowIdx: undefined,
    };
  },
  created() {},
  methods: {
    /**多选 */
    handleSelectionChange(val) {
      this.selection = val;
    },
    /**删除操作 */
    handleDelete() {},
    /**添加操作 */
    handleAdd() {
      this.resetForm();
      this.showFlag = true;
      this.optType = "add";
    },
    /**更新行 */
    updateRow(row, idx) {
      Object.assign(this.form, row);
      this.currentRowIdx = idx;
      this.optType = "edit";
      this.showFlag = true;
    },
    /**删除行 */
    deleteRow(index) {
      this.tableData.splice(index, 1);
      this.$emit('change', this.tableData)
    },
    handleChange(val, index){
      this.$emit('change', this.tableData)
    },
    /**表单提交 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.optType == "add") {
            this.tableData.unshift({ ...this.form });
          } else {
            this.tableData.splice(this.currentRowIdx, 1, this.form);
          }
          this.showFlag = false;
        }
      });
    },
    /**重置表单 */
    resetForm() {
      this.form = {
        size: "",
        upc3: "",
        dispatch_multiple: "",
        reference_num: "",
      };
    },
    /**重置组件状态 */
    resetState() {
      this.resetForm();
      this.tableData = [];
    },
    /**获取组件数据 */
    getComData() {
      return this.tableData;
    },
  },
};
</script>

<style></style>
