import { required, mobileRequired, mobile, httpUrl, email } from '@/components/template/rules_verify.js'
export default {
  data() {
    return {
      isEditIndex: -1,
      serviceProvider: null,
      specificationList: [],
      hezuoshangjiaList: [],
    }
  },
  watch: {

  },
  computed: {
    product() {
      return [{
        name: 'slot-component',
        md: 24,
        formItemAttributes: {
          'label-width': '0px',
          label: '',
          prop: 'items',
          rules: [...required]
        },
        render: (h, { props }) => {
          return this.convertTableJson(this.formData?.items || [], [
            {
              columnAttributes: {
                label: '商品',
                prop: 'goodsId',
                propName: 'goodsName',
              },
              editRender: (h, { row, column, index }) => {
                return <div class="redbordererr">
                  <el-form-item label="" label-width="0px" prop={`items.${index}.${column.columnAttributes.prop}`} rules={required}>
                    <el-select
                      value={row[column.columnAttributes.prop]}
                      onInput={(val) => { row[column.columnAttributes.prop] = val }}
                      onChange={(val) => {
                        row[column.columnAttributes.propName] = ""
                        row.categoryName = ""
                        row.unit = ""
                        row.goodsSpecification = ""
                        row.marketPrice = ""
                        row.qty = ""
                        row.amount = ""
                        row.goodsCode = ""
                        if (val) {
                          var data = this.goodsList.find(item => item.goodsId == val)
                          if (data) {
                            row[column.columnAttributes.propName] = data.goodsName
                            row.categoryName = data.categoryName
                            row.goodsCode = data.goodsCode
                            row.unit = data.goodsStockUnit
                            row.goodsSpecification = data.goodsSpecification
                            row.marketPrice = data.marketPrice
                            row.qty = ""
                          }
                        }
                      }}
                      placeholder="请选择">
                      {this.goodsList.filter(item => item.goodsId == row.goodsId || !(this.formData?.items || []).find(data => data.goodsId == item.goodsId)).map((item, index_) => <el-option key={index_} label={item.goodsName} value={item.goodsId}></el-option>)}
                    </el-select>
                  </el-form-item>
                </div>
              },
              viewRender: (h, { row, column, index }) => {
                return <div style="padding-left:10px">{row[column.columnAttributes.propName]}</div>
              },
            },
            {
              columnAttributes: {
                label: '分类',
                prop: 'categoryName'
              }
            },
            {
              columnAttributes: {
                label: '单位',
                prop: 'unit'
              }
            },
            {
              columnAttributes: {
                label: '商品代码',
                prop: 'goodsCode'
              }
            },
            {
              columnAttributes: {
                label: '规格型号',
                prop: 'goodsSpecification'
              }
            },
            {
              columnAttributes: {
                label: '销售价格',
                prop: 'marketPrice',
              },
              editRender: (h, { row, column, index }) => {
                return <div class="redbordererr">
                  <el-form-item label="" label-width="0px" prop={`items.${index}.${column.columnAttributes.prop}`} rules={required}>
                    <el-input
                      value={row[column.columnAttributes.prop]}
                      onInput={(val) => { row[column.columnAttributes.prop] = val }}
                      placeholder="请输入内容"
                      type="number"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              },
              viewRender: (h, { row, column, index }) => {
                return <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
              },
            },
            {
              columnAttributes: {
                label: '数量',
                prop: 'qty',
              },
              editRender: (h, { row, column, index }) => {
                return <div class="redbordererr">
                  <el-form-item label="" label-width="0px" prop={`items.${index}.${column.columnAttributes.prop}`} rules={required}>
                    <el-input
                      value={row[column.columnAttributes.prop]}
                      onInput={(val) => { row[column.columnAttributes.prop] = val }}
                      placeholder="请输入内容"
                      type="number"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              },
              viewRender: (h, { row, column, index }) => {
                return <div style="padding-left:10px">{row[column.columnAttributes.prop]}</div>
              },
            },
            {
              columnAttributes: {
                label: '金额（元）',
                prop: 'amount',
              },
              render: (h, { row, column, index }) => {
                return <div style="padding-left:10px">{
                  (Number(row.marketPrice) * Number(row.qty)).toFixed(2)
                }</div>
              },
            },
          ], {
            isEdit: !this.id,
            isAdd: !this.id,
            isDel: !this.id,
          }, {
            // 点击添加触发
            add: () => {
              this.formData.items.unshift({
                "goodsId": "",
                "goodsCode": "",
                "goodsName": "",
                "categoryName": "",
                "unit": "",
                "goodsSpecification": "",
                "marketPrice": "",
                "qty": "",
                "amount": ""
              })
              this.isEditTableIndex = 0
            },
            verify: ({ row, column, index }, isEditTableIndex) => {
              return new Promise(r => {
                if (isEditTableIndex > -1) {
                  this.appointVerify([
                    `items.${isEditTableIndex}.goodsId`,
                    `items.${isEditTableIndex}.marketPrice`,
                    `items.${isEditTableIndex}.qty`,
                  ], (v) => {
                    if (v) {
                      r(true)
                    } else {
                      r(false)
                    }
                  })
                } else {
                  r(true)
                }
              })
            },
          })
        }
      }]
    },
  },
}