<template>
  <div class="app-container">
    <!-- 添加或修改商品对话框 -->
    <el-dialog :title="form.id ? '编辑' : '新增'" :close-on-click-modal="false" :visible.sync="visible" @close="close" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
        <el-form-item label="商品分类" prop="typeId">
          <el-select v-model="form.typeId" placeholder="请选择商品分类">
            <el-option v-for="dict in typeIdOptions" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品标题" prop="title"><el-input v-model="form.title" placeholder="请输入商品标题" clearable /></el-form-item>
        <el-form-item label="商品价格" prop="price"><el-input type="number" v-model="form.price" placeholder="请输入商品价格" clearable /></el-form-item>
        <el-form-item label="商品图片" prop="pic">
          <el-button icon="el-icon-scissors" @click="getImg()">选取图片</el-button>
          <el-image v-if="form.pic" :fit="'contain'" style="max-width:10%;display: block;margin-top: 10px;" :src="form.pic" :preview-src-list="[form.pic]"></el-image>
        </el-form-item>
        <div>
          <el-form-item label="商品详情" prop="details"><Editor v-model="form.details" :min-height="292" /></el-form-item>
        </div>
        <el-form-item label="状态 " prop="state">
          <el-radio-group v-model="form.state">
            <el-radio-button v-for="dict in stateOptions" :key="dict.dictValue" :label="parseInt(dict.dictValue)">{{ dict.dictLabel }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 剪裁图片对话框 -->
    <cropper v-if="show" ref="upload" @img="setImg" :fixed_number="fixedNumber"></cropper>
  </div>
</template>

<script>
import { typeList, listGoods, getGoods, delGoods, addGoods, updateGoods, exportGoods } from '@/api/system/shop/goods';
import Editor from '@/components/Editor';
import cropper from '@/components/cropper';
export default {
  components: {
    Editor,
    cropper
  },
  data() {
    return {
      // 遮罩层
      show: false,
      loading: false,
      visible: false,
      // 图片裁剪比例
      fixedNumber: [1, 1],
      typeIdOptions: [],
      stateOptions: [],
      // 表单参数
      form: { pic: '' },
      // 表单校验
      rules: {
        typeId: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
        title: [{ required: true, message: '商品标题不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '商品价格不能为空', trigger: 'blur' }],
        pic: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        details: [{ required: true, message: '详情不能为空', trigger: 'blur' }],
        state: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      }
    };
  },
  created() {
    typeList().then(response => {
      this.typeIdOptions = response.data;
    });
    this.getDicts('goods_state').then(response => {
      this.stateOptions = response.data;
    });
  },
  methods: {
    init(id) {
      this.visible = true;
      if (id != '') {
        this.loading = true;
        getGoods(id).then(response => {
          this.form = response.data;
          this.loading = false;
        });
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.form.id != null) {
            updateGoods(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功');
                this.$emit('refresh'); //刷新父组件数据
                this.visible = false;
              }
            });
          } else {
            addGoods(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功');
                this.$emit('refresh'); //刷新父组件数据
                this.visible = false;
              }
            });
          }
        }
      });
    },
    //选取图片
    getImg() {
      this.show = true;
      this.$nextTick(() => {
        this.$refs.upload.editCropper();
      });
    },
    //设置图片
    setImg(img) {
      this.form.pic = img;
    },
    // 关闭弹窗表单重置
    close() {
      this.resetForm('form');
      this.form = {};
    }
  }
};
</script>
