<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-width="120px"
        >
          <el-row>
            <el-col :md="12" :sm="24">
              <el-form-item label="合同名称" prop="name">
                <el-input v-model="form.name" placeholder="合同名称"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="合同编号" prop="number">
                <el-input v-model="form.number" placeholder="合同编号"/>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
                <el-form-item label="合同金额" prop="amount">
                    <el-input-number v-model="form.amount"  :precision="2" :min="0" controls-position="right" placeholder="合同金额" style="width:100%"/>
                </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
              <el-form-item label="签订日期" prop="place">
                <el-date-picker
                  v-model="form.sign_date"
                  type="date"
                  placeholder="签订日期"
                  value-format="YYYY-MM-DD"
                  style="width:100%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :md="12" :sm="24">
                <el-form-item label="关联客户" prop="customer">
                    <el-select
                        v-model="form.customer"
                        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 :md="12" :sm="24">
              <el-form-item label="描述">
                <el-input v-model="form.description" placeholder="描述"/>
              </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>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增合同",
        edit: "编辑合同",
        show: "查看合同",
      },
      form: {},
      rules: {
          name: [{required: true, message: "请输入合同名称", trigger: "blur"}],
          number: [{required: true, message: "请输入合同编号", trigger: "blur"}],
          customer: [{required: true, message: "请选择关联客户", trigger: "blur"}],
          sign_date: [{required: true, message: "请选择签订日期", trigger: "blur"}]
        },
      visible: false,
      isSaveing: false,
      setFiltersVisible: false,
      options: [],
    };
  },
  mounted() {
    this.getCustomer();
  },
  methods: {
    //客户
    getCustomer(){
      this.$API.sam.customer.list.req({page:0}).then(res=>{
					this.options = res;
				});
			},
    //显示
    open(mode = "add",type) {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //提交
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          try {
            var res;
            if (this.mode == "add") {
              res = await this.$API.sam.contract.create.req(this.form);
            } else if (this.mode == "edit") {
              res = await this.$API.sam.contract.update.req(this.form.id,this.form);
            }
            this.isSaveing = false;
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } catch (err) {
            //可以处理校验错误
            this.isSaveing = false;
            return err;
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      Object.assign(this.form, data);
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style>
</style>
