<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<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="供应商"
                          prop="pkCubasdoc">
              <el-select clearable
                         v-model="ruleForm.pkCubasdoc"
                         :placeholder="'请选择'">
                <el-option v-for="(item, index) in supplierList"
                           :key="index"
                           :label="item.custName"
                           :value="item.pkId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="采购公司"
                          prop="pkCorp">

              <el-select clearable
                         @change="getStore"
                         v-model="ruleForm.pkCorp"
                         :placeholder="'请选择'">
                <el-option v-for="(item, index) in corpList"
                           :key="index"
                           :label="item.corpName"
                           :value="item.pkId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="订单日期"
                          prop="orderDate">
              <el-date-picker v-model="ruleForm.orderDate"
                              value-format="yyyy-MM-dd"
                              type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="合同号"
                          >
              <el-input clearable
                        v-model="ruleForm.contractCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="价税合计">
              <el-input clearable
                        disabled
                        v-model="ruleForm.priceAll"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="总数量">
              <el-input clearable
                        disabled
                        v-model="ruleForm.numAll"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="备注">
              <el-input clearable
                        v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="tit">列表</div>
        <div class="xian"></div>
        <div v-for="(foremed,index) in ruleForm.poOrderItemsParamList"
             :key="index"
             class="rowEd">
          <el-row>
            <el-col :span="4">
              <el-form-item label="产品编号"
                            :prop="`poOrderItemsParamList.${index}.productCode`"
                            :rules="rules.productCode">
                <el-input clearable
                          @focus="getProduct(index)"
                          v-model="foremed.productCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="产品名称">
                <el-input clearable
                          disabled
                          v-model="foremed.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="产品规格">
                <el-input clearable
                          disabled
                          v-model="foremed.specsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'单位'"
                            :prop="`poOrderItemsParamList.${index}.pkUnit`"
                            :rules="rules.pkUnit">
                <el-select clearable
                           v-model="foremed.pkUnit">
                  <el-option v-for="item in dwList"
                             :key="item.pkId"
                             :label="item.name"
                             :value="item.pkId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="数量"
                            :prop="`poOrderItemsParamList.${index}.nnum`"
                            :rules="rules.nnum">
                <el-input clearable
                          v-model="foremed.nnum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="仓库"
                            :prop="`poOrderItemsParamList.${index}.pkStorehouse`"
                            :rules="rules.pkStorehouse">
                <el-select clearable
                           v-model="foremed.pkStorehouse">
                  <el-option v-for="item in storeList"
                             :key="item.pkId"
                             :label="item.name"
                             :value="item.pkId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="无税单价"
                            :prop="`poOrderItemsParamList.${index}.norigprice`"
                            :rules="rules.norigprice">
                <el-input clearable
                          v-model="foremed.norigprice"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="税率"
                            :prop="`poOrderItemsParamList.${index}.ntaxrate`"
                            :rules="rules.ntaxrate">
                <el-input clearable
                          v-model="foremed.ntaxrate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="含税单价">
                <el-input clearable
                          disabled
                          v-model="foremed.price1"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="无税金额">
                <el-input clearable
                          disabled
                          v-model="foremed.price2"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="税额">
                <el-input clearable
                          disabled
                          v-model="foremed.price3"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="价税合计">
                <el-input clearable
                          disabled
                          v-model="foremed.price4"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="赠品"
                            :prop="`poOrderItemsParamList.${index}.isGift`"
                            :rules="rules.isGift">
                <el-select v-model="foremed.isGift"
                           clearable>
                  <el-option v-for="item in agreeList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="预计到货时间"
                            :prop="`poOrderItemsParamList.${index}.planDate`"
                            :rules="rules.planDate">
                <el-date-picker v-model="foremed.planDate"
                                value-format="yyyy-MM-dd"
                                type="date">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="img">
            <img src="@/assets/images/iconpop.png"
                 @click="reduceProduct(index)"
                 alt="">
          </div>
        </div>
      </el-form>
      <div class="img1">
        <img src="@/assets/images/iconadd.png"
             @click="addNewGoods"
             alt="">
      </div>
    </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'
import * as sys from '@/api/system'

export default {
  name: 'GiftGoodsList',
  data() {
    return {
      ruleForm: {
        poOrderItemsParamList: [
          {
            pkProductBas: '',
            pkStorehouse: '',
            productCode: '',
            planDate: '',
            pkUnit: '',
            nnum: 1,
            norigprice: '',
            ntaxrate: '',
            isGift: 1,
            scmItemSpecsList: [],
          },
        ],
      },
      supplierList: [],
      productList: [],
      dwList: [],
      agreeList: [],
      storeList: [],
      dialogVisible: false,
      dialogList: [], //产品数组
      select: {},
      selectData: {},
      selIndex: 0,
      selSkuList: [],
      specsName: '',
      skuList: [],
      corpList: [],
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: true,
      total: 0,
      showIndex: 0,
      allData: {},
      rules: {
        pkCubasdoc: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        pkCorp: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        orderDate: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        contractCode: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        productCode: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        nnum: [{ required: true, message: '请输入', trigger: 'blur' }],
        norigprice: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        ntaxrate: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        pkUnit: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        pkStorehouse: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        isGift: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        planDate: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
      },
    }
  },
  watch: {
    'ruleForm.poOrderItemsParamList': {
      handler(newValue, oldValue) {
        if (newValue.length > 0) {
          newValue.forEach((item) => {
            if (item.norigprice != '' && item.ntaxrate != '') {
              item.price1 = (
                item.norigprice *
                (1 + Number(item.ntaxrate) / 100)
              ).toFixed(2)
              item.price2 = (item.norigprice * item.nnum || 0).toFixed(2)
              item.price3 = (
                (item.norigprice * (item.nnum || 0) * item.ntaxrate) /
                100
              ).toFixed(2)
              item.price4 = (
                item.norigprice *
                  (1 + Number(item.ntaxrate) / 100) *
                  item.nnum || 0
              ).toFixed(2)
            }
          })
          let a = 0,
            b = 0
          newValue.forEach((item) => {
            if (item.norigprice != '' && item.ntaxrate != '') {
              a += Number(item.nnum)
              b += Number(item.price4)
            }
          })
          this.ruleForm.priceAll = b
          this.ruleForm.numAll = a
        }
      },
      deep: true,
    },
  },
  mounted() {
    if (this.$route.query.data) {
      this.allData = JSON.parse(this.$route.query.data)[0]
      this.allData.poOrderItemsParamList = this.allData.scmReturnbVoList
      delete this.allData.scmReturnbVoList
      this.ruleForm = this.allData
      console.log(
        '%c [  this.ruleForm ]-452',
        'font-size:13px; background:#1c06c8; color:#604aff;',
        this.ruleForm
      )
      this.addOrEdit = false
      this.getStore(this.ruleForm.pkCorp)
    }

    this.getData()
  },
  methods: {
    getData() {
      api.supplierList().then((res) => {
        this.supplierList = res.rows
      })
      api.getEYesNoList().then((res) => {
        this.agreeList = res.data
      })
      pro.unitAll().then((res) => {
        this.dwList = res.data
      })
      api.corpList().then((res) => {
        this.corpList = res.rows
      })
    },
    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
        .productFind(Object.assign({pkCubasdoc:this.ruleForm.pkCubasdoc}, this.queryParams, this.select))
        .then((res) => {
          res.rows.forEach((item) => {
            item.quantity = 1
          })
          this.dialogList = res.rows
          this.total = res.total
        })
    },
    getProduct(index) {
      this.showIndex = index
      this.getDataList()
      this.dialogVisible = true
    },
    reduceProduct(index) {
      this.ruleForm.poOrderItemsParamList.splice(index, 1)
      this.$forceUpdate()
    },
    addNewGoods() {
      this.ruleForm.poOrderItemsParamList.push({
        pkProductBas: '',
        productCode: '',
        pkStorehouse: '',
        planDate: '',
        pkUnit: '',
        nnum: 1,
        norigprice: '',
        ntaxrate: '',
        isGift: 1,
        scmItemSpecsList: [],
      })
    },
    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
        })
    },
    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.poOrderItemsParamList[this.showIndex].productCode =
          this.selectData.productCode
        this.ruleForm.poOrderItemsParamList[this.showIndex].pkProductBas =
          this.selectData.pkId
        this.ruleForm.poOrderItemsParamList[this.showIndex].productName =
          this.selectData.productName
        this.ruleForm.poOrderItemsParamList[this.showIndex].specsName =
          this.selectData.specsName
        this.ruleForm.poOrderItemsParamList[this.showIndex].pkUnit =
          this.selectData.unit
        this.ruleForm.poOrderItemsParamList[this.showIndex].nnum =
          this.selectData.quantity
        this.ruleForm.poOrderItemsParamList[this.showIndex].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
    },
    submit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let url
          if (this.addOrEdit) {
            url = api.insertPoList
          } else {
            url = api.updatePoList
          }
          url(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success',
              })
              this.$router.go(-1)
            }
          })
        }
      })
    },
    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>
