<template>
  <!-- 协议管理 新增、编辑 表单组件 -->
  <div>
    <el-form
      label-width="100px"
      size="medium"
      ref="supplierParamsRef"
      :model="supplierParams"
      :rules="supplierParamsRules"
    >
      <el-row type="flex" justify="space-between" :gutter="24">
        <el-col :span="12">
          <el-form-item label="厂家名称" prop="name">
            <el-input v-model="supplierParams.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="厂家地址" prop="address">
            <el-input v-model="supplierParams.address" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="法人代表" prop="companyMan">
            <el-input v-model="supplierParams.companyMan" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要联系人" prop="mainPerson">
            <el-input v-model="supplierParams.mainPerson" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="联系人电话" prop="phone">
            <el-input v-model="supplierParams.phone" :maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="notes">
            <el-input type="textarea" v-model="supplierParams.notes" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="营业执照" prop="picUrl">
            <el-upload
              :http-request="(obj) => uploadData(obj)"
              action="#"
              :file-list="fileList"
              :on-exceed="fileExceed"
              :on-remove="handleRemove"
              :class="{ disabled: uploadDisabled }"
              list-type="picture-card"
              accept=".png, .jpg, .jpeg"
              :limit="1"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主要营业范围" prop="scopeBusiness">
            <el-input type="textarea" v-model="supplierParams.scopeBusiness" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="success" @click="onSubmit">确认</el-button>
        <el-button
          @click="
              () => {
                  this.$emit('closeDialog')
              }
          "
        >取消</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  addSupplierListApi,
  updateSupplierListApi
} from '@/api/material/masupplier'
import {
  fileUpLoad,
  imgUpLoad
} from '@/api/system/upload'
export default {
  name: 'FormSupplier',
  props: {
    editParams: {
      type: Object,
      default: () => null,
    },
  },
  created() {

  },
  mounted() {
    console.log(this.editParams)
    if (this.editParams) {
      Object.assign(this.supplierParams, this.editParams)
      this.subSort = 2
    } else {
      this.subSort = 1
    }
  },
  data() {
    return {
      subSort: '', // 提交类型：新增 1 / 修改 2
      supplierParams: {
        name: undefined, // 厂家名称
        address: undefined, // 厂家地址
        companyMan: undefined, // 法人代表
        mainPerson: undefined, // 主要联系人
        phone: undefined, // 联系人电话
        notes: undefined, // 备注
        scopeBusiness: undefined, // 主要营业范围
        picUrl: undefined, // 营业执照
      },
      // 图片集合
      picList: [],
      // 图片名称集合
      picNameList: [],
      //
      fileList: [],
      // 校验规则
      supplierParamsRules: {
        name: [
            {
                required: true,
                message: '请输入厂家名称',
                trigger: 'blur',
            },
        ]
      },
    }
  },
  computed: {
    //图片上传1张后，隐藏上传框
    uploadDisabled() {
      return this.picList.length > 1
    },
  },
  methods: {
    /** 上传图片/文件 */
    uploadData(param) {
      console.log(param)
      imgUpLoad(param).then(res => {
        console.log(res)
        this.picList.push(res.data.url)
        this.picNameList.push(res.data.name.split('_')[0])
      }).catch(err => {})
    },
    /** 文件变化 */
    dataChange(e) {
      console.log(e)
      this.fileList.push(e.raw)
    },
    /** 移除文件 */
    handleRemove(file) {
      console.log(file)
      console.log(this.picNameList)
      this.picList = []
      // this.fileList = this.fileList.filter(item => item.uid !== e.uid)
    },
    /** 文件超出1个 */
    fileExceed() {
      this.$modal.msgError('最多上传1张图片！')
    },
    /** 确认按钮 */
    onSubmit() {
      this.supplierParams.picUrl = this.picList.join()
      console.log(this.supplierParams)
      this.$refs.supplierParamsRef.validate((valid) => {
          if (valid) {
              console.log('校验通过', this.supplierParams, this.subSort)
              // 1. 表单校验通过后调后台 Api
              if(this.subSort === 1) {
                addSupplierListApi(this.supplierParams).then(res => {
                  console.log(res)
                }).catch(err => {
                  console.log(err)
                })
              } else if(this.subSort === 2) {
                console.log(this.supplierParams)
                updateSupplierListApi(this.supplierParams).then(res => {
                  console.log(res)
                }).catch(err => {
                  console.log(err)
                })
              }
              // 2. 成功之后通知父组件关闭弹框
              this.$emit('closeDialog', true)
          }
      })
    },
  },
}
</script>

<style scoped>
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label{
  font-weight: normal;
}
</style>
