<!--
  @description: 商品管理/参数录入弹框
  @Modifier：dijia
  @date：2021/07/07
-->
<template>
  <div>
    <el-dialog
      v-loading="loading"
      :visible.sync="dialogVisible.dialog"
      :before-close="handleClose"
      title="参数录入"
      width="950px"
      custom-class="shop_mall_dialog"
    >
      <!-- 普通参数 -->
      <p v-if="ordinaryParam.length" class="param-title">
        普通参数
      </p>
      <div v-if="ordinaryParam.length" class="param-box">
        <div v-for="(item,index) in ordinaryParam" :key="index + item.id" class="paramContainer">
          <el-form
            :ref="'ordinaryRef'+ index"
            :model="item"
            :inline-message="true"
            class="param-form"
          >
            <div class="param-label">
              <el-form-item
                :label="item.paramName"
                :prop="item.paramVal"
              />
            </div>
            <div class="param-input">
              <el-input v-model.trim="item.paramVal" placeholder="请输入" />
            </div>
          </el-form>
        </div>
      </div>
      <p v-if="mainParam.length" class="param-title">
        主要参数
      </p>
      <!-- 主要参数 -->
      <div v-if="mainParam.length" class="param-box">
        <div v-for="(item,index) in mainParam" :key="index + item.productId" class="paramContainer">
          <el-form
            :ref="'mainRef'+ index"
            :model="item"
            :inline-message="true"
            class="param-form"
          >
            <div class="param-label">
              <el-form-item
                :label="item.paramName"
                :prop="item.paramVal"
                :rules="[{ required: true, message: '不能为空', trigger: 'blur' }]"
              />
            </div>
            <div class="param-input">
              <el-input v-model.trim="item.paramVal" placeholder="必填项" />
            </div>
          </el-form>
        </div>
      </div>
      <div v-if="mainParam.length===0&&ordinaryParam.length===0" class="empty_text">
        <i class="el-icon-warning-outline" />
        该分类下没有参数！
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="mainParam.length!==0||ordinaryParam.length!==0" type="primary" @click="dialogClick">提 交</el-button>
        <el-button @click="cancelClick">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
/* api*/
import { getProductParams } from '@/api/shoppingmall/products'
import { editProductParams } from '@/api/shoppingmall/products'
export default {
  name: 'CommodityParamDialog',
  props: {
    dialogVisible: {
      type: Object,
      default() {}
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        startTime: null
      },
      // 普通参数
      ordinaryParam: [],
      // 主要参数
      mainParam: []
    }
  },
  watch: {
    'dialogVisible.dialog'(val) {
      if (val) {
        this.initData()
      }
    }
  },
  methods: {
    initData() {
      this.loading = true
      getProductParams(this.dialogVisible.id).then(res => {
        if (res.header.ret === '0') {
          // 主要参数
          this.mainParam = res.data['00'] || []
          // 普通参数
          this.ordinaryParam = res.data['01'] || []
          // 给参数列表添加 productId 字段
          this.mainParam.forEach(item => {
            item.productId = this.dialogVisible.id
          })
          this.ordinaryParam.forEach(item => {
            item.productId = this.dialogVisible.id
          })
          this.loading = false
        }
      })
    },
    // 关闭弹框
    handleClose(done) {
      done()
    },
    // 点击提交
    dialogClick() {
      const paramVals = [
        ...this.ordinaryParam,
        ...this.mainParam
      ]
      // 判断 主要参数 paramVal 不能为空
      const emptyNum = this.mainParam.filter(item => item.paramVal === '' || item.paramVal === null).length
      if (emptyNum) {
        this.$message.warning('主要参数必须全部填写！')
        return
      }
      editProductParams(paramVals).then(res => {
        if (res.header.ret === '0') {
          this.dialogVisible.dialog = false
          this.$message.success('编辑成功！')
        }
      })
    },
    cancelClick() {
      this.dialogVisible.dialog = false
    }
  }
}
</script>

<style lang="less" scoped>
.param-title {
  font-size: 15px;
  padding-left: 10px;
}
.param-box {
  width: 100%;
  display: flex;
  padding: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  .paramContainer {
    width: 49%;
    display: flex;
    .param-form {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
      line-height: 20px;
      border: 1px solid #E0E0E0;
      .el-form-item--small.el-form-item {
        margin: 0;
      }
      .el-input {
        width: 90%;
      }
      .param-label {
        width: 30%;
        padding: 6px;
        background-color: #F5F7F9;
        border-right: 1px solid #E0E0E0;
      }
      .param-input {
        width: 68%;
    }
    }
  }
}
.empty_text {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
}
</style>
