<template>
  <div class="page">
    <div class="main">
      <div class="tit">添加</div>
      <div class="xian"></div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="formStyle"
        label-width="auto"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label="产品编号" :rules="rules.productCode">
              <el-input
                clearable
                @focus="getProduct"
                v-model="ruleForm.productCode"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="产品名称">
              <el-input
                clearable
                disabled
                v-model="ruleForm.productName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="产品规格">
              <el-input
                clearable
                disabled
                v-model="ruleForm.specsName"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="批次号" prop="batchCode">
              <el-input clearable v-model="ruleForm.batchCode"></el-input>
            </el-form-item>
          </el-col>
          
          <!-- <el-col :span="8">
            <el-form-item label="首次入库日期" prop="bizDate">
              <el-date-picker
                v-model="ruleForm.bizDate"
                type="date"
                :placeholder="'请选择'"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item label="生产日期" prop="productDate">
              <el-date-picker
                v-model="ruleForm.productDate"
                type="date"
                :placeholder="'请选择'"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="失效日期" prop="expireDate">
              <el-date-picker
                v-model="ruleForm.expireDate"
                type="date"
                :placeholder="'请选择'"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="footer">
      <!-- <el-button size="small"
                     class="cancelBtn"> {{ '取消' }}</el-button> -->
      <el-button size="small" @click="submit('ruleForm')" class="sureBtn">
        {{ '确认' }}</el-button
      >
    </div>
    <!-- 产品弹框 -->
    <el-dialog
      :title="'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="50%"
      center
      :before-close="handleClose"
    >
      <div class="cpHeight">
        <el-row>
          <el-col :span="22">
            <el-input
              v-model="select.query"
              clearable
              :placeholder="'请输入'"
              @keyup.enter.native="getDataList"
              prefix-icon="el-icon-search"
            ></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" size="small" @click="getDataList">
              {{ '搜索' }}</el-button
            >
          </el-col>
        </el-row>
        <div style="height: 10px"></div>
        <el-table
          :data="dialogList"
          ref="multipleTable"
          style="width: 100%"
          @select-all="onSelectAll"
          @select="selected"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
        >
          <el-table-column type="selection" :selectable="selectable" width="55">
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productCode"
            :label="'产品编号'"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'规格'"
          >
            <template slot-scope="scope">
              <div
                class="blueCor"
                v-show="
                  scope.row.specsName == '' || scope.row.specsName == undefined
                "
                @click="selSku(scope.row.productCode, scope.$index)"
              >
                {{ '选择规格' }}
              </div>
              <div
                class="blueCor"
                v-show="
                  scope.row.specsName != '' && scope.row.specsName != undefined
                "
                @click="selSku(scope.row.productCode, scope.$index)"
              >
                {{ scope.row.specsName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="unitStr" :label="'单位'">
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'商品数量'"
          >
            <template slot-scope="scope">
              <el-input-number
                size="mini"
                v-model="scope.row.quantity"
                :min="1"
              ></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDataList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ '取消' }}</el-button>
        <el-button type="primary" @click="sureProduct">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
    <!-- 规格弹框 -->
    <el-dialog
      :title="'规格'"
      :visible.sync="ggVisible"
      :close-on-click-modal="false"
      width="40%"
      center
      :before-close="handleCloseGg"
    >
      <el-form>
        <el-form-item
          :label="item.specsTypeName"
          v-for="(item, index) in skuList"
          :key="index"
        >
          <el-radio-group v-model="item.pkProductSku">
            <el-radio
              v-for="(ctem, cndex) in item.specsList"
              @change="getCheckBox(item.pkId, item.specsName)"
              :key="ctem.pkSpecs"
              :label="ctem.pkSpecs"
              >{{ ctem.name }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseGg">{{ '取消' }}</el-button>
        <el-button type="primary" @click="sureSku">{{
          '确认'
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
    
    <script>
import * as api from "@/api/supply.js";
import * as pro from "@/api/product.js";
export default {
  name: "GiftGoodsList",
  data() {
    return {
      ruleForm: {},
      supplierList: [],
      dwList: [],
      storeList: [],
      dialogVisible: false,
      dialogList: [], //产品数组
      select: {},
      selectData: {},
      selIndex: 0,
      selSkuList: [],
      specsName: "",
      skuList: [],
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: true,
      total: 0,
      showIndex: 0,
      allData: {},
      rules: {
        pkCorp: [
          { required: true, message: '请选择', trigger: "change" },
        ],
        productCode: [
          { required: true, message: '请选择', trigger: "change" },
        ],
        batchCode: [
          { required: true, message: '请输入', trigger: "blur" },
        ],
        bizDate: [
          { required: true, message: '请选择', trigger: "change" },
        ],
        productDate: [
          { required: true, message: '请选择', trigger: "change" },
        ],
        expireDate: [
          { required: true, message: '请选择', trigger: "change" },
        ],
      },
    };
  },
  watch: {},
  mounted() {
    if (this.$route.query.data) {
      this.allData = JSON.parse(this.$route.query.data)[0];
      this.ruleForm = this.allData;
      this.addOrEdit = false;
    }

    this.getData();
  },
  methods: {
    getData() {
      api.supplierList().then((res) => {
        this.supplierList = res.rows;
      });
      pro.unitAll().then((res) => {
        this.dwList = res.data;
      });
    },
    getStore(e) {
      if (e) {
        api
          .getStoreRefer({
            pkCorp: e,
          })
          .then((res) => {
            this.storeList = res.rows;
          });
      }
    },
    selectable(row) {
      if (row.specsName == "" || row.specsName == undefined) {
        return false; //禁用
      } else {
        return true; //可选
      }
    },
    getDataList() {
      api
        .productFindList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          res.rows.forEach((item) => {
            item.quantity = 1;
          });
          this.dialogList = res.rows;
          this.total = res.total;
        });
    },
    getProduct() {
      this.getDataList();
      this.dialogVisible = true;
    },
    handleCloseGg() {
      this.ggVisible = false;
    },
    selSku(productCode, index) {
      this.selIndex = index;
      api
        .productFindInfo({
          productCode: productCode,
        })
        .then((res) => {
          let arr1 = [],
            arr2 = [];
          res.data.productBasSpecsList.forEach((item) => {
            item.pkProductSku = item.specsList[0].pkSpecs;
            arr1.push({
              pkSpecs: item.specsList[0].pkSpecs,
              pkSpecsType: item.pkSpecsType,
            });
            arr2.push(item.specsList[0].name);
          });
          this.selSkuList = arr1;
          this.specsName = arr2.join(",");

          this.skuList = res.data.productBasSpecsList;
          this.ggVisible = true;
        });
    },
    submit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          let url;
          if (this.addOrEdit) {
            //目前只有添加
            url = api.insertBatchCode;
          } else {
            url = api.updateBatchCode;
          }
          url(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.$router.go(-1);
            }
          });
        }
      });
    },
    getCheckBox() {
      let arr1 = [],
        arr2 = [];
      this.skuList.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (ctem.pkSpecs == item.pkProductSku) {
            arr1.push({
              pkSpecs: ctem.pkSpecs,
              pkSpecsType: item.pkSpecsType,
            });
            arr2.push(ctem.name);
          }
        });
      });
      this.selSkuList = arr1;
      this.specsName = arr2.join(",");
    },
    handleClose() {
      this.selectData = [];
      this.dialogVisible = false;
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection();
    },
    selected(selection, row) {
      this.$refs.multipleTable.clearSelection();
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
      this.selectData = row;
    },
    sureProduct() {
      if (this.selectData.length == 0) {
        this.$message({
          message: '请选择产品',
          type: "warning",
        });
        return false;
      } else {
        this.ruleForm.productCode = this.selectData.productCode;
        this.ruleForm.pkProduct = this.selectData.pkProduct;
        this.ruleForm.productName = this.selectData.productName;
        this.ruleForm.specsName = this.selectData.specsName;
        this.ruleForm.scmItemSpecsList = this.selectData.selSkuList;
        this.handleClose();
        this.$forceUpdate();
      }
    },
    sureSku() {
      this.$set(this.dialogList[this.selIndex], "selSkuList", this.selSkuList);
      this.$set(this.dialogList[this.selIndex], "specsName", this.specsName);
      this.ggVisible = false;
    },

    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main_a {
    height: calc(100vh - 144px);
    display: flex;
    flex-direction: column;
  }
  .main {
    background: #ffffff;
    border-radius: 8px;
    // height: calc(100vh - 124px);
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    overflow-x: hidden;
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 0 20px;
  border-left: 5px solid #c8161d;
  margin: 20px 0 10px 0;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.demo-ruleForm {
  padding: 10px 0px;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.topbox {
  align-items: center;
  padding: 0px 0 15px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 0 5px;
    width: 88px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    line-height: 32px;
  }
  .act {
    color: #ffffff;
    background: #c8161d;
  }
}
::v-deep .el-form-item {
  margin-bottom: 20px !important;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__icon {
  line-height: 33px;
}
::v-deep .el-button {
  margin-top: 0;
}
.formStyle {
  padding-right: 10px;
}
.rowEd {
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}
.img {
  text-align: center;
  margin-bottom: 10px;
  img {
    width: 25px;
    height: 25px;
  }
}
.img1 {
  text-align: center;
  padding-right: 10px;
  img {
    width: 25px;
    height: 25px;
  }
}
</style>
    