import { getClassifyList } from '@/api/goods'
import { getDataDictionary } from '@/api/dataDictionary.js'
import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  data() {
    return {
      orderBrands: [],
      classifyList: [],
      classifyListLv2: []
    }
  },
  computed: {
    productColumns() {
      return [
        {
          columnAttributes: {
            label: '产品品牌',
            prop: 'brandId'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-select
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    if (val) {
                      var data = this.orderBrands.find(item => item.value == val)
                      row.brandName = data.label
                    } else {
                      row.brandName = ""
                    }
                  }}
                  placeholder="请选择"
                  disabled={this.formData.status == "OK"}>
                  {this.orderBrands.map((item, index_) => <el-option key={index_} label={item.label} value={item.value}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '产品大类',
            prop: 'mainId'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-select
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    row.smallId = ""
                    row.smallName = ""
                    if (val) {
                      var data = this.classifyList.find(item => item.categoryId == val)
                      row.mainName = data.name
                    } else {
                      row.mainName = ""
                    }
                  }}
                  placeholder="请选择"
                  disabled={this.formData.status == "OK"}>
                  {this.classifyList.map((item, index_) => <el-option key={index_} label={item.name} value={item.categoryId}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '产品小类',
            prop: 'smallId'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-select
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  onChange={(val) => {
                    if (val) {
                      var data = this.classifyListLv2.find(item => item.categoryId == val)
                      console.log(data)
                      row.smallName = data.name
                      row.imgUrl = data.imgUrl
                    } else {
                      row.smallName = ""
                      row.imgUrl = ""
                    }
                  }}
                  placeholder="请选择"
                  disabled={this.formData.status == "OK"}>
                  {this.classifyListLv2.filter(item => item.parentId === row.mainId).map((item, index_) => <el-option key={index_} label={item.name} value={item.categoryId}></el-option>)}
                </el-select>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '产品机型',
            prop: 'specsName'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  placeholder="请输入内容"
                  disabled={this.formData.status == "OK"}
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '内机条码',
            prop: 'insideCode'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  placeholder="请输入内容"
                  disabled={this.formData.status == "OK"}
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
        {
          columnAttributes: {
            label: '外机条码',
            prop: 'outCode'
          },
          render: (h, { row, column, index }) => {
            return <div class="redbordererr">
              <el-form-item label="" label-width="0px" prop={`punishOrderProducts.${index}.${column.columnAttributes.prop}`} rules={required}>
                <el-input
                  value={row[column.columnAttributes.prop]}
                  onInput={(val) => { row[column.columnAttributes.prop] = val }}
                  placeholder="请输入内容"
                  disabled={this.formData.status == "OK"}
                >
                </el-input>
              </el-form-item>
            </div>
          }
        },
      ]
    },
    product() {
      return [{
        name: 'slot-component',
        md: 24,
        formItemAttributes: {
          label: '',
          'label-width': '0px',
          prop: 'punishOrderProducts',
          errLabel: '产品信息',
          rules: [...required],
        },
        render: (h, { props }) => {
          return (
            <div>
              <zj-table
                columns={this.productColumns}
                table-data={this.formData.punishOrderProducts}
              />
            </div>
          )
        }
      }]
    },
  },
  methods: {
    getProductSel() {
      // 获取品牌
      getDataDictionary({ "pageNum": 1, "pageSize": -1, "params": [{ "param": "a.status", "compare": "=", "value": "ON" }, { "param": "a.dict_type", "compare": "=", "value": "BRAND" }] }).then(res => {
        this.orderBrands = res.data.records.map(item => ({
          value: item.dictCode,
          label: item.dictValue
        }))
      })
      // 获取产品大类小类
      getClassifyList({ type: 2, status: true }).then(res => {
        var classifyListLv2 = []
        this.classifyList = res.data.map(item => {
          var { children, ...data } = item
          classifyListLv2.push(...(children || []))
          return {
            ...data
          }
        });
        this.classifyListLv2 = classifyListLv2
      })
    }
  },
}