<template>
    <el-dialog
      :title="titleMap[mode]"
      v-model="visible"
      :size="1000"
      destroy-on-close
      @closed="$emit('closed')"
    >
      <el-container v-loading="loading">
        <el-main style="padding: 0 20px 20px 20px">
          <el-form 
            ref="dialogForm" 
            :model="form" 
            :rules="rules" 
            label-position="right" 
            label-width="80px" 
            style="padding: 0 10px;"
          >
            <el-row>
              <el-col :lg="12" :md="24">
                <el-form-item label="月份" prop="date">
                  <el-date-picker
                      v-model="form.date"
                      type="month"
                      value-format="YYYY-MM"
                      format="YYYY-MM"
                      placeholder="月"
                      style="width: 100%;"
                  />
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="24">
                <el-form-item label="关联物料" prop="material">
                  <el-select
                    v-model="form.material"
                    placeholder="关联物料"
                    clearable
                    style="width: 100%;"
                  >
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="24">
                <el-form-item label="单位成本" prop="price_unit">
                  <el-input-number 
                  v-model="form.price_unit" 
                  controls-position="right" 
                  :precision="2" 
                  style="width: 100%;"
                  clearable>
                  </el-input-number>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-main>
        <el-footer>
          <el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
          <el-button @click="visible = false">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </template>
  
  <script>
  const defaultForm = {
    date:'',
		year: "",
		month:'',
		material:'',
    price_unit:'',
	};
  export default {
    emits: ["success", "closed"],
    data() {
      return {
        loading: false,
        mode: "add",
        titleMap: {
          add: '新增物料价格',
					edit: '编辑物料价格',
					show: '查看物料价格'
        },
        //表单数据
				form: {
        },
        //验证规则
        rules: {
            date: [{required: true, message: "请选择月份", trigger: "blur"}],
            material: [{required: true, message: "请选择主要产品", trigger: "blur"}],
            price_unit: [{required: true, message: "请输入单位成本", trigger: "blur"}]
          },
        visible: false,
        isSaveing: false,
        options: [],
        setFiltersVisible: false,
      };
    },
    mounted() {
			this.getMaterial();
    },
    methods: {
     //获取物料列表
			getMaterial(){
				this.$API.mtm.material.list.req({page:0}).then(res=>{
					this.options = res;
				})
			},
       //显示
      open(mode = "add") {
        this.mode = mode;
        this.visible = true;
        return this;
      },
      //表单注入数据
      setData(data) {
        let year = data.year+'';
        let month = data.month<10?'0'+data.month:data.month+'';
        month = year+'-'+month;
        data.date = month;
        Object.assign(this.form,data);
      },
      getReceptionist(data) {
        this.form.leader=data.id;
        this.form.leader_name=data.name
      },
      //表单提交方法
      submit() {
        let that = this;
        that.$refs.dialogForm.validate(async (valid) => {
          if (valid) {
            that.isSaveing = true;
            let arr = that.form.date.split('-');
            that.form.year = Number(arr[0]);
            that.form.month = Number(arr[1]);
            if(that.mode==='add'){
              that.$API.fim.priceset.create.req(that.form).then(res=>{
                that.isSaveing = false;
                that.$emit("success", that.form, that.mode);
                that.visible = false;
                that.$message.success("操作成功");
              }).catch(res=>{
                that.isSaveing = false;
              })
            }else{
              let form = {};
              form.year = that.form.year;
              form.month = that.form.month;
              form.material = that.form.material;
              form.price_unit = that.form.price_unit;
              res = that.$API.fim.priceset.update.req(that.form.id,form).then(res=>{
                that.isSaveing = false;
                that.$emit("success", that.form, that.mode);
                that.visible = false;
                that.$message.success("操作成功");
              }).catch(res=>{
                that.isSaveing = false;
              })
            }
          }
        });
      },
      
      //设置过滤项
      setFilters(filters) {
        this.selectionFilters = filters;
        this.setFiltersVisible = true;
      },
    },
  };
  </script>
  
  <style>
  </style>
  