<template>
  <div id="addSupplier">
    <div>
      <el-card style="position: relative;">
      <p>新增</p>
      <el-form :model="basicForm" :rules="basicRules" ref="basic" label-width="auto" :show-message="false">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="供应商" prop="supplierName">
              <el-input
                style="width:200px"
                clearable
                :disabled="sonDisable"
                size="mini"
                v-model="basicForm.supplierName"
                @clear="clearHang()"
              >
                <el-button
                  size="mini"
                  :disabled="sonDisable"
                  slot="append"
                  icon="el-icon-more"
                  @click="
                    chooseDept(
                      'SUPPLIER_PARAM',
                      true,
                      '选择供应商'
                    )
                  "
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="备注" prop="remark">
              <el-input
                style="width:200px"
                clearable
                :disabled="sonDisable"
                size="mini"
                v-model="basicForm.remark"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
  
      </el-form>

      <div class="btn_group">
        <el-button type="primary" size="mini"  @click="editPage" v-if="sonPageStu == 'check'">编辑</el-button>
        <el-button type="primary" size="mini"  @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
        <el-button size="mini" plain @click="back">返回</el-button>
      </div>
      
      </el-card>
    </div>

    
    <Refers ref="refer" @doSubmit="selectionsToInput" :single="true" />
  </div>
</template>

<script>
import { addSupplier } from '@/api/innerData/supplier.js'
export default {
  components: {
    Refers: () => import("@/components/Refers/refers.vue"),
  },
  props: ['pageStu','row', 'disable'],
  model: {
    prop: 'isList',
    event: 'jugislist'
  },
  data () {
    return {
      // 不能直接改变props传来的值
      sonPageStu: this.pageStu,
      sonDisable: this.disable,
      basicForm: {
        supplierName: '',
        supplierId: '',
        supplierCode: '',
        remark:''
      },
      basicRules: {},
      referCondition: {
        type: "",
        isPage: true,
        title: "",
      },
    }
  },
  methods: {
    editPage() {
      this.sonPageStu = 'edit'
      this.sonDisable = false
    },
    async save() {
      if(this.basicForm.supplierName == '') {
        this.$modal.notifyWarning("供应商不能为空");
      } else {
        await addSupplier(this.basicForm).then(res => {
          if(res.code === 200) {
            this.$modal.notifySuccess("新增保存成功");
            this.back()
          }
        })
      }
    },
    back() {
      this.$emit('jugislist', true)
      this.$emit('refresh')
    },
    // 明细行选择参照
    chooseDept(type, isPage, title) {
      this.referCondition.type = type;
      this.referCondition.isPage = isPage;
      this.referCondition.title = title;
      this.$refs.refer.init(this.referCondition);
    },
    selectionsToInput(selection) {
      if ( this.referCondition.type == "SUPPLIER_PARAM") {
        this.basicForm.supplierId = selection[0].id;
        this.basicForm.supplierName = selection[0].name;
        this.basicForm.supplierCode = selection[0].code;
      }
    },
    clearHang() {
        this.basicForm.supplierId = ''
        this.basicForm.supplierName = ''
        this.basicForm.supplierCode = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.btn_group {
  // width: 100%;
  // margin: 20px 0;
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 10px;right: 20px;

}  
</style>