import { getClassifyList } from '@/api/goods'
import { getDataDictionary } from '@/api/dataDictionary.js'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
import {
  orderBaseProductList,
  orderBaseProductAdd,
  orderBaseProductUpdate,
  orderBaseProductDelete
} from '@/api/workOrderPool.js'
export default {
  data() {
    return {
      isEditIndex: -1,
      productList_wb: []
    }
  },
  computed: {
    productColumns_wb() {
      return [
        {
          columnAttributes: {
            label: '产品品牌',
            prop: 'brandId'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`orderProducts.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      if (val) {
                        var data = this.huoquweiyi('brandId', 'brandName').find(item => item.value == val)
                        row.brandName = data.label
                      } else {
                        row.brandName = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.huoquweiyi('brandId', 'brandName').map((item, index_) => (
                      <el-option key={index_} label={item.label} value={item.value}></el-option>
                    ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row.brandName}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '产品大类',
            prop: 'mainId'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`orderProducts.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      row.smallId = ''
                      row.smallName = ''
                      if (val) {
                        var data = this.huoquweiyi('mainId', 'mainName')
                          .filter(item => {
                            return !!this.productList_wb
                              .filter(v => v.mainId == item.value)
                              .find(v2 => v2.brandId == row.brandId)
                          })
                          .find(item => item.value == val)
                        row.mainName = data.label
                      } else {
                        row.mainName = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.huoquweiyi('mainId', 'mainName')
                      .filter(item => {
                        return !!this.productList_wb
                          .filter(v => v.mainId == item.value)
                          .find(v2 => v2.brandId == row.brandId)
                      })
                      .map((item, index_) => (
                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                      ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row.mainName}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '产品小类',
            prop: 'smallId'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`orderProducts.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-select
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    onChange={val => {
                      if (val) {
                        var data = this.huoquweiyi('smallId', 'smallName', 'smallImg')
                          .filter(item => {
                            return !!this.productList_wb
                              .filter(v => v.smallId == item.value)
                              .find(v2 => v2.brandId == row.brandId && v2.mainId == row.mainId)
                          })
                          .find(item => item.value == val)
                        row.smallName = data.label
                        row.imgUrl = data.smallImg
                      } else {
                        row.smallName = ''
                        row.imgUrl = ''
                      }
                    }}
                    placeholder="请选择"
                  >
                    {this.huoquweiyi('smallId', 'smallName', 'smallImg')
                      .filter(item => {
                        return !!this.productList_wb
                          .filter(v => v.smallId == item.value)
                          .find(v2 => v2.brandId == row.brandId && v2.mainId == row.mainId)
                      })
                      .map((item, index_) => (
                        <el-option key={index_} label={item.label} value={item.value}></el-option>
                      ))}
                  </el-select>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row.smallName}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '产品机型',
            prop: 'productName'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`orderProducts.${index}.${column.columnAttributes.prop}`}
                >
                  <el-input
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '内机条码',
            prop: 'insideCode'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item label="" label-width="0px">
                  <el-input
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '数量',
            prop: 'num'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item
                  label=""
                  label-width="0px"
                  prop={`orderProducts.${index}.${column.columnAttributes.prop}`}
                  rules={required}
                >
                  <el-input
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        {
          columnAttributes: {
            label: '备注',
            prop: 'remark'
          },
          render: (h, { row, column, index }) => {
            return this.isEditIndex == index ? (
              <div class="redbordererr">
                <el-form-item label="" label-width="0px">
                  <el-input
                    disabled={!this.formOptions.orderProducts.isEdit}
                    value={row[column.columnAttributes.prop]}
                    onInput={val => {
                      row[column.columnAttributes.prop] = val
                    }}
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
              </div>
            ) : (
              <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
            )
          }
        },
        ...(() => {
          if (this.formOptions.orderProducts.isEdit) {
            return [
              {
                columnAttributes: {
                  label: '操作'
                },
                render: (h, { row, column, index }) => {
                  return (
                    <div style="padding-left:10px">
                      <el-button
                        type="text"
                        onClick={() => {
                          this.delProduct_wb(row, index)
                        }}
                      >
                        删除
                      </el-button>
                      {this.isEditIndex == index && (
                        <el-button
                          type="text"
                          onClick={() => {
                            this.eidtProduct_wb(row, index)
                          }}
                        >
                          确定
                        </el-button>
                      )}
                      {this.isEditIndex == -1 && (
                        <el-button
                          type="text"
                          onClick={() => {
                            this.isEditIndex = index
                          }}
                        >
                          编辑
                        </el-button>
                      )}
                    </div>
                  )
                }
              }
            ]
          }
          return []
        })()
      ]
    },
    product_wb() {
      return [
        {
          isShow: this.formOptions.orderProducts.isShow,
          name: 'slot-component',
          md: 24,
          formItemAttributes: {
            label: '',
            'label-width': '0px',
            prop: 'orderProducts',
            errLabel: '产品信息',
            rules: this.formOptions.orderProducts.isRules
          },
          render: (h, { props }) => {
            return (
              <div>
                {this.formOptions.orderProducts.isEdit ? (
                  <div>
                    <el-button
                      size="mini"
                      type="primary"
                      onClick={() => {
                        this.appointVerify(this.getVfyKey_wb(this.isEditIndex, false), v => {
                          if (v) {
                            try {
                              this.orderInfo.orderProducts.map((item, index_) => {
                                var row = this.orderInfo.orderProducts[index_ + 1]
                                if (row) {
                                  if (
                                    `${row.brandId}_${row.mainId}_${row.smallId}_${row.productName}` ==
                                    `${item.brandId}_${item.mainId}_${item.smallId}_${item.productName}`
                                  ) {
                                    throw new Error('')
                                  }
                                }
                              })
                            } catch (error) {
                              this.$message.warning('产品机型重复')
                              return
                            }
                            this.isEditIndex = 0
                            this.orderInfo.orderProducts.unshift({
                              brandId: '',
                              brandName: '',
                              createBy: '',
                              createTime: '',
                              mainId: '',
                              mainName: '',
                              num: '',
                              insideCode: '',
                              orderBaseId: this.id || '',
                              productId: '',
                              productName: '',
                              remark: '',
                              smallId: '',
                              smallName: '',
                              imgUrl: ''
                            })
                          }
                        })
                      }}
                    >
                      新增
                    </el-button>
                  </div>
                ) : null}
                <zj-table columns={this.productColumns_wb} table-data={this.orderInfo.orderProducts} />
              </div>
            )
          }
        }
      ]
    }
  },
  methods: {
    huoquweiyi(value, label, ...keys) {
      var obj = {}
      this.productList_wb.map(item => {
        obj[item[value]] = {
          label: item[label]
        }
        for (var key of keys) {
          obj[item[value]][key] = item[key]
        }
      })
      return Object.keys(obj).map(value => {
        return {
          value: value,
          ...obj[value]
        }
      })
    },
    getVfyKey_wb(index, bool = true) {
      return [
        ...(() => {
          if (bool) {
            return [`orderProducts`]
          }
          return []
        })(),
        ...(() => {
          if (index > -1) {
            return [
              `orderProducts.${index}.brandId`,
              `orderProducts.${index}.mainId`,
              `orderProducts.${index}.smallId`,
              `orderProducts.${index}.productName`,
              `orderProducts.${index}.num`,
              `orderProducts.${index}.remark`
            ]
          }
          return []
        })()
      ]
    },
    // 重新获取赋值
    getOrderBaseProduct_wb() {
      if (this.id) {
        orderBaseProductList({
          orderBaseId: this.id
        }).then(res => {
          this.orderInfo.orderProducts = res.data || []
        })
      }
    },
    eidtProduct_wb(row, index) {
      try {
        this.orderInfo.orderProducts.map((item, index_) => {
          if (
            `${row.brandId}_${row.mainId}_${row.smallId}_${row.productName}` ==
              `${item.brandId}_${item.mainId}_${item.smallId}_${item.productName}` &&
            index_ != index
          ) {
            throw new Error('')
          }
        })
      } catch (error) {
        this.$message.warning('产品机型重复')
        return
      }
      this.appointVerify(this.getVfyKey_wb(this.isEditIndex), v => {
        if (v) {
          if (this.id) {
            ;[orderBaseProductAdd, orderBaseProductUpdate][row.id ? 1 : 0](row).then(res => {
              this.isEditIndex = -1
              this.getOrderBaseProduct_wb()
              this.getOrderBaseLogList()
            })
          } else {
            this.isEditIndex = -1
          }
        }
      })
    },
    delProduct_wb(row, index) {
      this.appointVerify(this.getVfyKey_wb(this.isEditIndex), v => {
        if (v && this.id && row.id) {
          orderBaseProductDelete({
            orderProductId: row.id
          }).then(res => {
            this.getOrderBaseProduct_wb()
            this.getOrderBaseLogList()
          })
        } else {
          this.orderInfo.orderProducts.splice(index, 1)
        }
      })
    }
  }
}
