import { listPageV2 } from "@/api/auxiliaryFittings/attachmentProfile";
import { websitStockListP } from "@/api/inventoryManagement";
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  data() {
    return {
      peijianSel: []
    }
  },
  computed: {
    productColumns() {
      return [
        {
          columnAttributes: {
            label: '配件名称',
            prop: 'goodsId',
            propName: 'goodsName',
            width: 160
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item
                label=""
                lebel-width="0px"
                prop={`websitPartsRetItems.${index}.${column.columnAttributes.prop}`}
                rules={required}
              >
                <el-select
                  value={row[column.columnAttributes.prop]}
                  onInput={val => {
                    row[column.columnAttributes.prop] = val
                  }}
                  onChange={val => {
                    this.delItemKey(3, row)
                    if (val) {
                      var data = this.peijianSel.find(item => item.goodsId == val)
                      row[column.columnAttributes.propName] = data?.goodsName || ""
                      console.log(data)
                      if (data) {
						row.goodsCode = data.goodsCode
                        row.goodsSalesUnit = data.goodsStockUnit
                        row.brandRelaName = data.brandRelaName
                        row.productRelaName = data.productRelaName
                        row.stockQty = data.oldQty
                      }
                    } else {
                      row[column.columnAttributes.propName] = ''
                    }
                    this.$refs.formRef.validateField([`websitPartsRetItems.${index}.${column.columnAttributes.prop}`], (valid, invalidFields, errLabels) => { })
                  }}
                  placeholder="请选择"
                  disabled={this.openType == 1 || !!~["OK", "FAIL"].indexOf(this.formData.flag)}
                >
                  {this.peijianSel.map((item, index_) => (
                    <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
                  ))}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '单位',
            prop: 'goodsSalesUnit',
            width: 160
          }
        },
        {
          columnAttributes: {
            label: '配件编码',
            prop: 'goodsCode',
            width: 160
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'oldRefundQty',
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item
                label=""
                lebel-width="0px"
                prop={`websitPartsRetItems.${index}.${column.columnAttributes.prop}`}
                rules={required}
              >
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={val => {
                    row[column.columnAttributes.prop] = val
                    this.$nextTick(() => {
                      this.$refs.formRef.validateField([`websitPartsRetItems.${index}.${column.columnAttributes.prop}`], (valid, invalidFields, errLabels) => { })
                    })
                  }}
                  type="number"
                  placeholder="请输入"
                  // disabled={this.openType == 1 || !!~["OK", "FAIL"].indexOf(this.formData.flag)}
				  disabled={this.openType > 0 && this.formData.flag != 'SAVE'}
                ></el-input>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '适用品牌',
            prop: 'brandRelaName',
            width: 160
          }
        },
        {
          columnAttributes: {
            label: '适用产品大类',
            prop: 'productRelaName',
            width: 160
          }
        }, {
          columnAttributes: {
            label: '创建时旧件库存',
            prop: 'stockQty',
            width: 180
          }
        },
        ...(() => {
          if (this.openType != 1 && !~["OK", "FAIL"].indexOf(this.formData.flag)) {
            return [{
              columnAttributes: {
                label: '操作',
                fixed: 'right',
                width: 140
              },
              render: (h, { row, column, index }) => {
                return (
                  <div style="padding:0 6px" class="operation-btns">
                    <el-button
                      type="text"
                      onClick={() => {
                        this.formData?.websitPartsRetItems?.splice(index, 1)
                      }}
                    >
                      删除
                    </el-button>
                  </div>
                )
              }
            }]
          }
          return []
        })()
      ]
    },
    product() {
      return [{
        name: 'slot-component',
        md: 24,
        formItemAttributes: {
          label: '',
          'label-width': '0px',
          prop: 'websitPartsRetItems',
          errLabel: '旧件信息',
          rules: [...required],
        },
        render: (h, { props }) => {
          return [
            (this.openType != 1 && !~["OK", "FAIL"].indexOf(this.formData.flag) ? <div style="margin-bottom:10px">
              <el-button type="primary" onClick={() => { this.addItem() }} disabled={this.formData.websitId ? false : true}>
                添加
              </el-button>
            </div> : null),
            <zj-table
              columns={this.productColumns}
              table-data={this.formData.websitPartsRetItems}
            />
          ]
        }
      }]
    },
  },
  methods: {
    getProductSel() {
      if (this.formData.websitId) {
        // 获取配件下拉数据
        websitStockListP({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.websit_id", "compare": "=", "value": this.formData.websitId }] }).then(res => {
          this.peijianSel = res.data.records
        });
      }
    },
    addItem() {
      this.formData.websitPartsRetItems.unshift({
        "brandRelaId": "",
        "brandRelaName": "",
        "examineQty": "",
        "goodsId": "",
		"goodsCode": "",
        "goodsName": "",
        "goodsPriceId": "",
        "goodsSalesUnit": "",
        "goodsSpecification": "",
        "goodsType": "P",
        "marketPrice": "",
        "newRefundQty": "",
        "oldRefundQty": "",
        "partsRetId": "",
        "payType": "",
        "price": "",
        "productRelaId": "",
        "productRelaName": "",
        "refundAmount": "",
        "saleAmount": "",
        "salesId": "",
        "salesQty": "",
        "secondPrice": "",
        "stockQty": "",
        "websitId": "",
        "websitName": ""
      })
    },
    delItemKey(num, row) {
      if (num <= 1) {
        row.goodsCategoryId = ""
        row.goodsCategoryName = ""
      }
      if (num <= 2) {
        row.goodsId = ""
        row.goodsName = ""
      }
      if (num <= 3) {
        row.brandRelaId = ""
        row.brandRelaName = ""
        row.productRelaId = ""
        row.productRelaName = ""
        row.goodsSalesUnit = ""
        row.stockQty = ""
      }
    },
  },
}
