<!--品牌编辑-->
<template>
  <el-dialog width="30%" :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="brandForm" label-well-code="right" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="编号" prop="brandCode">
            <el-input v-model.trim="brandForm.brandCode" :disabled="isEditMode" type="text" placeholder="必填，请输入唯一编号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="名称" prop="brandName">
            <el-input v-model.trim="brandForm.brandName" type="text" placeholder="必填，请输入品牌名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="性质" prop="brandProperty">
            <el-input v-model.trim="brandForm.brandProperty" type="text" placeholder="必填，请输入品牌性质" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="供应商" prop="supplierIds">
            <el-select v-model="brandForm.supplierIds" multiple filterable clearable allow-create placeholder="请选择供应商">
              <el-option
                v-for="item in supplierIdList"
                :key="item.id"
                :label="item.supplierName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="品类" prop="categoryIds">
            <el-select v-model="brandForm.categoryIds" multiple clearable filterable allow-create default-first-option placeholder="请选择品类，可多选">
              <el-option
                v-for="item in categoryIdList"
                :key="item.id"
                :label="item.categoryName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="21">
          <el-form-item label="备注">
            <el-input v-model="brandForm.remark" type="textarea" :rows="2" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-show="!isDetailMode" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="saveData">
        保存
      </el-button>
      <el-button @click="cancel">
        取消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { S_list } from '@/api/supplier/supplier'
import { C_list } from '@/api/product/category'
import { update, add } from '@/api/product/brand'

export default {
  name: 'EditBrand',
  data() {
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update,detail
      brandForm: {
        id: '',
        brandName: '',
        brandCode: '',
        brandProperty: '',
        supplierIds: [],
        categoryIds: [],
        remark: ''
      }, // 表单
      textMap: {
        update: '编辑',
        create: '新增',
        detail: '详情'
      }, // 表头显示标题
      supplierIdList: [], // 供应商列表
      categoryIdList: [], // 品类列表
      rules: {
        brandCode: [{ required: true, message: '编号不能为空', trigger: ['blur', 'change'] }],
        brandName: [{ required: true, message: '品牌名称不能为空', trigger: ['blur', 'change'] }],
        brandProperty: [{ required: true, message: '品牌性质不能为空', trigger: ['blur', 'change'] }],
        supplierIds: [{ required: true, message: '供应商不能为空', trigger: ['blur', 'change'] }],
        categoryIds: [{ required: true, message: '所属品类不能为空', trigger: ['blur', 'change'] }]
      }, // 前端校验规则
      isEditMode: false, // 编辑模式
      isDetailMode: false // 详情模式
    }
  },
  mounted() {
    this.fetchBrandSupplier()
    this.fetchBrandCategories()
  },
  methods: {
    // 初始化对话框
    initDialog: function(dialogStatus, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = true
      if (dialogStatus === 'create') { // 如果是新增，清除验证
        this.resetForm()
        this.isEditMode = false
        this.isDetailMode = false
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
        this.brandForm = {
          id: row.id,
          brandName: row.brandName,
          brandCode: row.brandCode,
          brandProperty: row.brandProperty,
          supplierIds: [],
          categoryIds: [],
          remark: row.remark
        }
        // 设置供应商 选中
        if (row.suppliers.length > 0) {
          this.brandForm.supplierIds = row.suppliers.map(item => item.supplierId)
        }
        // 设置所属品类 选中
        if (row.categorys.length > 0) {
          row.categorys.forEach(item => {
            this.brandForm.categoryIds.push(item.categoryId)
          })
        }
        this.isEditMode = true
        this.isDetailMode = false
      } else {
        this.brandForm = {
          id: row.id,
          brandName: row.brandName,
          brandCode: row.brandCode,
          supplierStr: row.supplierStr,
          categoryStr: row.categoryStr,
          brandProperty: row.brandProperty,
          remark: row.remark
        }
        this.isEditMode = false
        this.isDetailMode = true
      }
    },
    // 重置表单
    resetForm() {
      this.brandForm = {
        id: '',
        brandName: '',
        brandCode: '',
        brandProperty: '',
        supplierIds: [],
        supplierIdsStr: '',
        categoryIds: [],
        remark: ''
      }
    },
    // 保存数据
    saveData: function() {
      if (this.dialogStatus === 'update') {
        this.updateData()
      } else if (this.dialogStatus === 'create') {
        this.createData()
      }
    },
    // 新增数据
    createData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          add(this.brandForm).then(response => {
            this.resetForm()
            this.$emit('refresh')
            this.dialogFormVisible = false
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          })
        }
      })
    },
    // 修改数据
    updateData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          update(this.brandForm).then(response => {
            this.$message.success('修改成功')
            this.$emit('refresh')
            this.dialogFormVisible = false
          })
        }
      })
    },
    // 获取品牌供应商
    fetchBrandSupplier() {
      S_list().then(response => {
        this.supplierIdList = response
      })
    },
    // 获取品牌所属品类
    fetchBrandCategories() {
      C_list().then(res => {
        this.categoryIdList = res.data
      })
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('refresh')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-select{
    width: 100%;
  }
  .el-date-editor{
    width: 100%;
  }
</style>