import { listPageV2 } from '@/api/auxiliaryFittings/supplier'
import { materialCategoryList } from '@/api/auxiliaryMaterialClass'
import { materialNormList } from '@/api/auxiliaryPriceManagement'
import { listPageV2 as peijianList } from '@/api/auxiliaryFittings/attachmentProfile'
import { required, mobileRequired, mobile } from '@/components/template/rules_verify.js'
import { storageListPageV2 } from '@/api/storage'
import { getCategory } from '@/api/auxiliaryFittings/auxiliarySalesOrder'
import { getGoods } from '@/api/auxiliaryFittings/auxiliarySalesOrder'
export default {
  data() {
    return {
      materialNormList: [],
      peijianList: []
    }
  },
  computed: {
    // 事件组合
    columns() {
      return [
        ...(() => {
          if (this.formData.type == 'M') {
            return [
              {
                columnAttributes: {
                  label: '大类名称',
                  prop: 'parentCategoryId'
                },
                render: (h, { row, column, index }) => {
                  return row.isEditRow ? (
                    <div class="redbordererr">
                      <el-form-item
                        label=""
                        lebel-width="0px"
                        prop={`items.${index}.parentCategoryId`}
                        rules={required}
                      >
                        <el-select
                          disabled={this.formDialogType == 2}
                          value={row[column.columnAttributes.prop]}
                          onInput={val => {
                            row[column.columnAttributes.prop] = val
                          }}
                          onChange={val => {
                            row['goodsCategoryId'] = ''
                            row['goodsCategoryName'] = ''
                            row['goodsId'] = ''
                            row['goodsName'] = ''
                            this.materialNormList = []
                            this.qkrow(row)
                            if (val) {
                              row['parentCategoryName'] = this.mainList.find(
                                item => item.categoryId == val
                              ).categoryName
                            } else {
                              row['parentCategoryName'] = ''
                            }
                            this.$nextTick(this.jiaoyan)
                          }}
                          placeholder="请选择"
                        >
                          {this.mainList.map((item, index_) => (
                            <el-option key={index_} label={item.categoryName} value={item.categoryId}></el-option>
                          ))}
                        </el-select>
                      </el-form-item>
                    </div>
                  ) : (
                    <div>{row['parentCategoryName']}</div>
                  )
                }
              }
            ]
          }
          return []
        })(),
        ...(() => {
          if (this.formData.type == 'M') {
            return [
              {
                columnAttributes: {
                  label: '小类名称',
                  prop: 'goodsCategoryId'
                },
                render: (h, { row, column, index }) => {
                  return row.isEditRow ? (
                    <div class="redbordererr">
                      <el-form-item label="" lebel-width="0px" prop={`items.${index}.goodsCategoryId`} rules={required}>
                        <el-select
                          disabled={this.formDialogType == 2}
                          value={row[column.columnAttributes.prop]}
                          onInput={val => {
                            row[column.columnAttributes.prop] = val
                          }}
                          placeholder="请选择"
                          onChange={val => {
                            row['goodsId'] = ''
                            row['goodsName'] = ''
                            this.qkrow(row)
                            if (val) {
                              row['goodsCategoryName'] = (
                                this.mainList.find(item => item.categoryId == row.parentCategoryId)?.items || []
                              ).find(item => item.categoryId == val).categoryName
                              materialNormList({
                                isShowStockQty: true,
                                websitId: this.formData.websitId,
                                storageId: this.formData.storageId,
                                pageNum: 1,
                                pageSize: -1,
                                params: [
                                  { param: 'b.category_id', compare: '=', value: val },
                                  { param: 'a.status', compare: '=', value: 'ON' }
                                ]
                              }).then(res => {
                                this.materialNormList = res.data.records
                              })
                            } else {
                              this.materialNormList = []
                              row['goodsCategoryName'] = ''
                            }
                            this.$nextTick(this.jiaoyan)
                          }}
                        >
                          {(this.mainList.find(item => item.categoryId == row.parentCategoryId)?.items || []).map(
                            (item, index_) => (
                              <el-option key={index_} label={item.categoryName} value={item.categoryId}></el-option>
                            )
                          )}
                        </el-select>
                      </el-form-item>
                    </div>
                  ) : (
                    <div>{row['goodsCategoryName']}</div>
                  )
                }
              }
            ]
          }
          return []
        })(),
        ...(() => {
          if (this.formData.type == 'M') {
            return [
              {
                columnAttributes: {
                  label: '辅材',
                  prop: 'goodsId'
                },
                render: (h, { row, column, index }) => {
                  return row.isEditRow ? (
                    <div class="redbordererr">
                      <el-form-item label="" lebel-width="0px" prop={`items.${index}.goodsId`} rules={required}>
                        <el-select
                          disabled={this.formDialogType == 2}
                          value={row[column.columnAttributes.prop]}
                          onInput={val => {
                            row[column.columnAttributes.prop] = val
                          }}
                          placeholder="请选择"
                          onChange={val => {
                            if (val) {
                              var data = this.materialNormList.find(item => item.goodsId == val)
                              row['goodsName'] = data.goodsName
                              this.qkrow(row, {
                                goodsStockUnit: data.goodsStockUnit,
                                goodsCode: data.goodsCode,
                                goodsSpecification: data.goodsSpecification,
                                brand: '',
                                productCategory: ''
                              })
                            } else {
                              row['goodsName'] = ''
                              this.qkrow(row)
                            }
                            this.$nextTick(this.jiaoyan)
                          }}
                        >
                          {this.materialNormList
                            .filter(
                              item =>
                                !~[
                                  ...this.formData.items.map(val => val.goodsId).filter(val => val != row.goodsId)
                                ].indexOf(item.goodsId)
                            )
                            .map((item, index_) => (
                              <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
                            ))}
                        </el-select>
                      </el-form-item>
                    </div>
                  ) : (
                    <div>{row['goodsName']}</div>
                  )
                }
              }
            ]
          }
          return []
        })(),
        ...(() => {
          if (this.formData.type == 'P') {
            return [
              {
                columnAttributes: {
                  label: '配件',
                  prop: 'goodsId'
                },
                render: (h, { row, column, index }) => {
                  return row.isEditRow ? (
                    <div class="redbordererr">
                      <el-form-item label="" lebel-width="0px" prop={`items.${index}.goodsId`} rules={required}>
                        <el-select
                          disabled={this.formDialogType == 2}
                          value={row[column.columnAttributes.prop]}
                          onInput={val => {
                            row[column.columnAttributes.prop] = val
                          }}
                          placeholder="请选择"
                          onChange={val => {
                            this.materialNormList = []
                            if (val) {
                              var data = this.peijianList.find(item => item.goodsId == val)
                              row['goodsName'] = data.goodsName
                              this.qkrow(row, {
                                goodsStockUnit: data.goodsStockUnit,
                                goodsCode: data.goodsCode,
                                goodsSpecification: data.goodsSpecification,
                                brand: data.brandRelaName,
                                productCategory: data.productRelaName
                              })
                            } else {
                              row['goodsName'] = ''
                              this.qkrow(row)
                            }
                            this.$nextTick(this.jiaoyan)
                          }}
                        >
                          {this.peijianList
                            .filter(
                              item =>
                                !~[
                                  ...this.formData.items.map(val => val.goodsId).filter(val => val != row.goodsId)
                                ].indexOf(item.goodsId)
                            )
                            .map((item, index_) => (
                              <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>
                            ))}
                        </el-select>
                      </el-form-item>
                    </div>
                  ) : (
                    <div>{row['goodsName']}</div>
                  )
                }
              }
            ]
          }
          return []
        })(),
        {
          columnAttributes: {
            label: '单位',
            prop: 'goodsStockUnit'
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'qty'
          },
          render: (h, { row, column, index }) => {
            return row.isEditRow ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  lebel-width="0px"
                  prop={`items.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    disabled={this.formDialogType == 2}
                    type="number"
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请选择"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div>{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        ...(() => {
          if (this.formData.type == 'M') {
            return [
              {
                columnAttributes: {
                  label: '商品代码',
                  prop: 'goodsCode'
                }
              },
              {
                columnAttributes: {
                  label: '规格型号',
                  prop: 'goodsSpecification'
                }
              }
            ]
          }
          return []
        })(),
        ...(() => {
          if (this.formData.type == 'P') {
            return [
              {
                columnAttributes: {
                  label: '配件编码',
                  prop: 'goodsCode'
                }
              },
              {
                columnAttributes: {
                  label: '适用品牌',
                  prop: 'brand'
                }
              },
              {
                columnAttributes: {
                  label: '适用产品大类',
                  prop: 'productCategory'
                }
              }
            ]
          }
          return []
        })(),
        ...(() => {
          if (!!~[0, 1].indexOf(this.formDialogType)) {
            return [
              {
                columnAttributes: {
                  label: '操作',
                  prop: ''
                },
                render: (h, { row, column, index }) => {
                  return (
                    <div class="operation-btns">
                      <el-button
                        type="text"
                        onClick={() => {
                          this.formData.items.splice(index, 1)
                        }}
                      >
                        删除
                      </el-button>
                      {row.isEditRow ? (
                        <el-button
                          type="text"
                          onClick={() => {
                            this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
                              if (valid) {
                                this.formData.items.splice(index, 1, {
                                  ...this.formData.items[index],
                                  isEditRow: false
                                })
                              }
                            })
                          }}
                        >
                          确定
                        </el-button>
                      ) : null}
                      {!row.isEditRow ? (
                        <el-button
                          type="text"
                          onClick={() => {
                            this.formData.items.map((item, index_) => {
                              if (index_ == index) {
                                this.formData.items.splice(index, 1, {
                                  ...this.formData.items[index],
                                  isEditRow: true
                                })
                                if (this.formData.type == 'M' && row.goodsCategoryId) {
                                  materialNormList({
                                    isShowStockQty: true,
                                    websitId: this.formData.websitId,
                                    pageNum: 1,
                                    pageSize: -1,
                                    params: [
                                      { param: 'b.category_id', compare: '=', value: row.goodsCategoryId },
                                      { param: 'a.status', compare: '=', value: 'ON' }
                                    ]
                                  }).then(res => {
                                    this.materialNormList = res.data.records
                                  })
                                }
                              } else {
                                this.formData.items.splice(index_, 1, {
                                  ...this.formData.items[index_],
                                  isEditRow: false
                                })
                              }
                            })
                          }}
                        >
                          编辑
                        </el-button>
                      ) : null}
                    </div>
                  )
                }
              }
            ]
          }
          return []
        })()
      ]
    },
    formItems2() {
      return [
        {
          md: 24,
          isShow: true,
          name: 'slot-component',
          formItemAttributes: {
            label: '',
            prop: 'items',
            'label-width': '0px',
            rules: [...required]
          },
          render: (h, { props, onInput }) => {
            var { value } = props
            return (
              <div>
                {!!~[0, 1].indexOf(this.formDialogType) ? (
                  <div style="margin-bottom:8px">
                    <el-button
                      onClick={() => {
                        this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
                          if (valid || (Object.keys(invalidFields).length == 1 && invalidFields.items)) {
                            this.formData.items.map(item => {
                              item.isEditRow = false
                            })
                            this.formData.items.push({
                              isEditRow: true,
                              brand: '',
                              goodsCategoryId: '',
                              goodsCategoryName: '',
                              goodsCode: '',
                              goodsId: '',
                              goodsName: '',
                              goodsSpecification: '',
                              goodsStockUnit: '',
                              goodsType: '',
                              parentCategoryId: '',
                              parentCategoryName: '',
                              productCategory: '',
                              qty: 0,
                              websitGoodsMoveId: '',
                              websitId: '',
                              websitName: ''
                            })
                          }
                        })
                      }}
                    >
                      添加
                    </el-button>
                  </div>
                ) : null}
                <zj-table
                  columns={this.columns}
                  tableData={this.formData.items}
                  tableAttributes={{
                    size: 'mini',
                    border: true
                  }}
                />
              </div>
            )
          }
        }
      ]
    }
  },
  watch: {
    'formData.websitId'(newVal) {
      this.biyaowebsitId(newVal)
      this.biyaooutwarehouseList()
    },
    'formData.type'(newVal) {
      this.biyaooutwarehouseList()
    },
    'formData.outStorageId'(newValue) {
      this.biyaooutStorageId()
    }
  },
  methods: {
    biyaooutwarehouseList() {
      if (this.formData.type && this.formData.websitId) {
        storageListPageV2({
          pageNum: 1,
          pageSize: -1,
          params: [
            { param: 'a.websit_id', compare: '=', value: this.formData.websitId },
            { param: 'a.status', compare: '=', value: 'true' },
            {
              param: 'a.type',
              compare: 'like',
              value: (() => {
                if (this.formData.type == 'M') {
                  return '辅材'
                } else if (this.formData.type == 'P') {
                  return '配件'
                }
                return ''
              })()
            }
          ]
        }).then(res => {
          this.warehouseList = res.data.records
        })
      } else {
        this.warehouseList = []
      }
    },
    biyaooutStorageId() {
      if (this.formData.outStorageId && this.formData.websitId) {
        getGoods({
          websitId: this.formData.websitId,
          type: 'P',
          saleType: '零售',
          storageId: this.formData.outStorageId
        }).then(res => {
          this.peijianList = res.data
        })
      } else {
        this.peijianList = []
      }
    },
    biyaowebsitId(newVal) {
      if (newVal) {
        getCategory({ websitId: newVal }).then(res => {
          this.mainList = res.data
        })
        if (this.formData.outStorageId && this.formData.websitId) {
          getGoods({
            websitId: this.formData.websitId,
            type: 'P',
            saleType: '零售',
            storageId: this.formData.outStorageId
          }).then(res => {
            this.peijianList = res.data
          })
        }
      } else {
        this.warehouseList = []
        this.mainList = []
        this.peijianList = []
      }
    },

    qkrow(row, data = {}) {
      ;['goodsStockUnit', 'goodsCode', 'goodsSpecification', 'brand', 'productCategory'].map(key => {
        if (row[key] !== undefined) {
          row[key] = data[key] !== undefined ? data[key] : ''
        }
      })
    },
    // 添加
    addData() {
      this.formDialogType = 0
      this.openForm()
    },
    // 关闭弹窗
    formCancel() {
      this.$refs.formRef.$refs.inlineForm.clearValidate()
      this.$data.formData = this.$options.data().formData
      this.formDialog = false
    },
    jiaoyan() {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {}, false)
    },
    setNumber(val) {
      return Number(val.toFixed(2))
    }
  }
}