<!--品类新增弹窗-->
<template>
  <el-dialog
    :title="title"
    width="840px"
    :visible.sync="isShowInfo"
    append-to-body
    @close="close"
  >
    <div class="categoryDialog">
      <el-form ref="dataForm" :rules="rules" :model="categoryInfo" class="inputContent" label-position="right" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="编号" prop="categoryCode">
              <el-input v-model.trim="categoryInfo.categoryCode" placeholder="必填" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称" prop="categoryName">
              <el-input v-model.trim="categoryInfo.categoryName" placeholder="必填" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上级品类" prop="pCategoryCode">
              <el-select
                v-model="categoryInfo.pCategoryCode"
                filterable
                placeholder="请选择"
                style="width: 100%"
              >
                <!-- <el-option
                  label="无"
                  value=""
                /> -->
                <el-option
                  v-for="item in categoryList"
                  :key="item.categoryCode"
                  :label="item.categoryName"
                  :value="item.categoryCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="资质要求" prop="qualifyIds">
              <el-select
                v-model="categoryInfo.qualifyIds"
                filterable
                multiple
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in certificationList"
                  :key="item.id"
                  :label="item.qualifyName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-mode.triml="categoryInfo.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="AddContent">
          <div class="addBtn">
            <el-button type="primary" @click="pushAry">
              添加产品参数
            </el-button>
          </div>
          <div style="padding: 15px 20px">
            <div v-for=" (item,index) of categoryInfo.productParams" :key="index" class="addItem">
              <el-form-item label="名称" :prop="`productParams[${index}].paramName`" :rules="{required: true, message: `请输入名称`, trigger: ['change','blur']}" label-width="60px">
                <el-input v-model.trim="item.paramName" placeholder="必填" />
              </el-form-item>
              <el-form-item label="排序" :prop="`productParams[${index}].paramOrder`" :rules="{required: true, message: `请输入排序`, trigger: ['change','blur']}" label-width="60px">
                <el-input-number v-model="item.paramOrder" :min="0" :max="9999" />
              </el-form-item>
              <div class="isRequire item" style="height:40px;margin-left: 20px">
                <el-checkbox v-model="item.paramRequire" true-label="1" false-label="0">
                  必填
                </el-checkbox>
              </div>
              <div class="delete item" style="margin-left: 15px">
                <el-button type="primary" @click="removeAry(index)">
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <div class="btnBox">
        <el-button type="primary" class="save" @click="save">
          保存
        </el-button>
        <el-button type="info" class="close" @click="close">
          取消
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { C_add, C_list, C_update, detail } from '../../../api/product/category'
import { getCertification } from '../../../api/systemNew/systemNew'

export default {
  props: {
    isShowInfo: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogType: '', // add新增，update
      // 品类信息
      categoryInfo: {
        categoryCode: '',
        categoryName: '',
        pCategoryCode: '',
        remark: '',
        qualifyIds: '',
        productParams: [
          {
            paramName: '',
            paramOrder: 0,
            paramRequire: 0
          }
        ]
      },
      rules: {
        categoryCode: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        categoryName: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        pCategoryCode: [{ required: false, message: '此项不能为空', trigger: ['blur', 'change'] }],
        qualifyIds: [{ type: 'array', required: true, message: '此项不能为空', trigger: ['blur', 'change'] }],
        productParams: [{ required: true, message: '此项不能为空', trigger: ['blur', 'change'] }]
      },
      categoryList: [], // 品类列表
      certificationList: [] // 资质列表
    }
  },
  mounted() {
    C_list().then(res => {
      this.categoryList = res.data
    })
    getCertification().then(res => {
      this.certificationList = res
    })
  },
  methods: {
    initDialog(dialogType, row) {
      C_list().then(res => {
      this.categoryList = res.data
    })
      this.dialogType = dialogType
      if (dialogType === 'add') {
        this.resetData()
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else {
        if (!row.id) return
        detail({ id: row.id }).then(res => {
          console.log(res.data, 'row')
          this.categoryInfo = {
            id: res.data.id,
            categoryCode: res.data.categoryCode,
            categoryName: res.data.categoryName,
            pCategoryCode: res.data.pCategoryCode,
            remark: res.data.remark,
            qualifyIds: res.data.qualifyIds,
            productParams: res.data.productParams.map(item => {
              return {
                paramName: item.paramName,
                paramOrder: item.paramOrder,
                paramRequire: item.paramRequire
              }
            })
          }
        })
      }
    },
    close() {
      this.$emit('close')
      this.resetData()
    },
    save() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.title === '品类新增') {
            C_add(this.categoryInfo).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })

                this.close()
                // 保存后刷新数据
                this.$emit('refresh')
              }
            })
          } else {
            // this.categoryInfo.productParams = this.dealAry(this.categoryInfo.productParams)
            console.log(this.categoryInfo.productParams)
            C_update(this.categoryInfo).then(res => {
              if (res.code === 200) {
                this.$message({
                  message: '更新成功',
                  type: 'success'
                })
                this.close()
                // 保存后刷新数据
                this.$emit('refresh')
              }
            })
          }
        }
      })
    },
    resetData() {
      this.categoryInfo = {
        categoryCode: '',
        categoryName: '',
        pCategoryCode: '',
        remark: '',
        qualifyIds: '',
        productParams: [
          {
            paramName: '',
            paramOrder: 0,
            paramRequire: '0'
          }
        ]
      }
    },
    // 删除指定数组
    removeAry(index) {
      this.categoryInfo.productParams.splice(index, 1)
    },
    //  添加数组
    pushAry() {
      this.categoryInfo.productParams.push({
        paramName: '',
        paramOrder: 0,
        paramRequire: '0'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.categoryDialog {
  width: 800px;
  box-sizing: border-box;

  .content {
    padding: 10px;
    display: flex;
    justify-content: space-between;

    .inputContent {
      flex: 1;
      padding: 0 10px;
      box-sizing: border-box;

      .inputbox {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
      }
    }
  }

  .AddContent {
    //max-height: 180px;
    overflow: auto;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #c9c9c9;
    padding: 10px 10px 20px;

    .addBtn {
      margin-bottom: 10px;
    }

    .addItem {
      display: flex;
      align-items: flex-start;
      .item {
        padding-right: 10px;
        display: flex;
        align-items: center;
      }
    }
  }

  .btnBox {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .save,
    .close {
      width: 100px;
    }
  }
}
</style>