<template>
  <el-dialog
    :title="modalTitle"
    :visible.sync="modalVisible" :width="formLabelWidth" top="2vh" @close="handleCancel">
    <div class="mobile">
        <el-form label-width="90px" :model="form" :rules="rules" ref="from" class="from">
          <el-form-item label="碳汇量:" prop="carbonVal">
            <el-input type="text" v-model="form.carbonVal" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="认购期:" prop="goodsSaleDate">
             <el-date-picker
                v-model="form.goodsSaleDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="销售方式">
            <el-radio-group v-model="form.saleType">
              <el-radio v-for="(item,index) in saleTypeList" :label="item.val">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="销售价格:" prop="price">
            <el-input type="number" v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="商品用途:" prop="goodsUse">
           <el-checkbox-group v-model="form.goodsUse">
               <el-checkbox
                  v-for="(item,index) in goodsUseList"
                  :label="item.val">{{item.lable}}</el-checkbox>
           </el-checkbox-group>
          </el-form-item>
          <el-form-item label="销售对象:" prop="saleTargets">
            <el-checkbox-group v-model="form.saleTargets">
                <el-checkbox
                   v-for="(item,index) in saleTargetsList"
                   :label="item.val">{{item.lable}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { createProduct } from "@/api/productManage/productInfo";
export default {
  name: 'addMobiel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'title'
    },
    selectRow: {
      type: Object,
      default:null
    }
  },
  watch: {
    visible(newVal, oldVal) {
      this.modalVisible = newVal;
    },
    title(newVal, oldVal) {
      this.modalTitle = newVal;
    },
    selectRow(newVal, oldVal) {
      this.modalSelectRow = newVal;
    }
  },
  data() {
    return {
      modalTitle: this.title,
      modalVisible: this.visible,
      modalSelectRow: this.selectRow,
      formLabelWidth: '624px',
      //窗口权限
      limit: {
        isRead: false, //是否只读
        isAdd: false //是否可写
      },
      //验证
      rules: {
        carbonVal: [{ required: true, message: '碳汇量不能为空!', trigger: 'blur' }],
        goodsSaleDate: [{ required: true, message: '认购期不能为空!', trigger: 'blur' }],
        price: [{ required: true, message: '销售价格不能为空!', trigger: 'blur' }],
        goodsUse: [{ required: true, message: '商品用途不能为空!', trigger: 'blur' }],
        saleTargets: [{ required: true, message: '销售对象不能为空!', trigger: 'blur' }]
      },
      //销售方式
      saleTypeList:[
        {
          label:"按整体销售",
          val:1
        },
        {
          label:"按公斤销售",
          val:2
        }
      ],
      //商品用途
      goodsUseList:[
        {
          lable:'履约',
          val:1
        },
        {
          lable:'中和',
          val:2
        },
        {
          lable:'普惠',
          val:3
        }
      ],
      //销售对象
      saleTargetsList:[
        {
          lable:'自然人',
          val:'1'
        },
        {
          lable:'履约企业',
          val:'2'
        },
        {
          lable:'认证企业',
          val:'3'
        }
      ],
      //表单
      form: {
        goodsUse:[],
        saleTargets:[]
      }
    };
  },
  created() {
    this.form.carbonVal = this.modalSelectRow.carbonSink
    // this.form.productInfoForm = this.modalSelectRow
    switch (this.modalAction) {
      case 'add':
        this.limit.isAdd = true;
        break;
      case 'edit':
        this.limit.isAdd = true;
        break;
      case 'view':
        this.limit.isRead = true;
        break;
      default:
        break;
    }
  },
  methods: {
    //表单提交
    submit() {
      this.$refs.from.validate(valid => {
        if (valid) {
          let goodsInfoForm = Object.assign({}, this.form);
          goodsInfoForm.goodsUse = goodsInfoForm.goodsUse.join(";")
          goodsInfoForm.saleTargets = goodsInfoForm.saleTargets.join(";")
          let params = {
            goodsInfoForm:goodsInfoForm,
            productInfoForm:this.modalSelectRow
          }
          createProduct(params).then(response => {
              if (response.retHead.errCode === 0) {
                this.msgSuccess("操作成功");
                this.modalVisible = false
               	this.$emit('closeexportmodal', true);
              }
          });
        } else {
          return false;
        }
      });
    },
    //窗口关闭
    handleCancel() {
      this.$emit('closeexportmodal', false);
    }
  }
};
</script>

<style lang="scss" scoped>
.hc-box {
  border: 1px solid #e9e9e9;
  margin-bottom: 20px;
  .hc-box-header {
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-weight: bold;
    color: #333;
    padding: 0 15px;
    margin-bottom:20px;
    .action {
      margin-left: 10px;
      color: #304ffe;
    }
  }
  .hc-box-wrap{
    .uploadImg{
      padding:0 30px 30px 30px;
    }
  }
}
</style>
