<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:900px;">
      <q-card-section>
        <div class="text-h6">{{addMsg.Id==0?'新增供应商':'修改供应商'}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="text-caption q-mb-lg q-px-md text-grey-6">供应商信息</div>
        <div class="row wrap">
          <q-input filled stack-label maxlength="25" :dense="false" v-model="addMsg.Name" ref="Name"
            class="col-6 q-pr-lg q-pb-lg" label="供应商名称" :rules="[val => !!val || '请填写供应商名称']" />
          <q-select filled stack-label option-value="Id" option-label="Name" v-model="addMsg.Type" ref="Post_Id"
            :options="supplierTypeList" label="类别" :dense="false" class="col-6 q-pb-lg" emit-value map-options />
          <q-input filled stack-label maxlength="25" :dense="false" v-model="addMsg.LinkMan" ref="LinkMan"
            class="col-6 q-pr-lg q-pb-lg" label="联系人" />
          <q-input filled stack-label maxlength="25" :dense="false" v-model="addMsg.LinkTel" ref="LinkTel"
            class="col-6 q-pb-lg" label="联系电话" />
          <q-input filled stack-label maxlength="100" :dense="false" v-model="addMsg.LinkAddress" ref="LinkAddress"
            class="col-6 q-pr-lg q-pb-lg" label="地址" />
          <q-input filled stack-label :dense="false" v-model="addMsg.CommissionMoney" ref="CommissionMoney" label="返佣"
            class="col-6 q-pb-lg" @keyup.native="checkPrice(item, 'CommissionMoney')" maxlength="6">
            <template v-slot:append>
              <div class="text-dark text-center text-dark cursor-pointer"
                style="width:30px;margin-right:-12px;height:100%;font-size:14px;border-left:1px solid #ddd;padding-top:15px;">
                <span>{{addMsg.CommissionType==0?'%':'￥'}}</span>
                <q-menu auto-close>
                  <q-list>
                    <q-item clickable v-close-popup @click="addMsg.CommissionType=0">
                      <q-item-section>按百分比（%）</q-item-section>
                    </q-item>
                    <q-item clickable v-close-popup @click="addMsg.CommissionType=1">
                      <q-item-section>按固定额度（￥）</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </div>
            </template>
          </q-input>
          <div class="row wrap" style="margin-bottom:10px;">
            <div class="col-12">
              <div style="display:flex;align-items:center;">
                <el-upload class="upload-demo" action="" :show-file-list="false" :http-request="UploadAttachment"
                  :multiple="uploadMultple">
                  <q-btn color="accent" size="sm" icon="add" label="上传供应商合同" />
                </el-upload>
                <a v-if="addMsg.ContractUrl" style="margin-left:10px;color:#2961FE;text-decoration:none;"
                  :href="addMsg.ContractUrl" target="_blank">
                  <template v-if="fileObj.FileName&&fileObj.FileName!=''">
                    {{fileObj.FileName}}
                  </template>
                  查看合同</a>
              </div>
            </div>
          </div>
          <q-input filled stack-label :dense="false" maxlength="200" v-model="addMsg.Remark" type="textarea"
            class="col-12" label="备注" />
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="立即提交" color="accent q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="saveInfo" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    saveSupplier,
    querySupplierInfo,
    querySupplierType
  } from '../../api/studyabroad/index'
  import {
    UploadSelfFile
  } from '../../api/common/common'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        persistent: true,
        saveLoading: false,
        addMsg: {
          Id: 0, //编号
          Type: 0, //供应商类型
          Name: '', //供应商名称
          LinkMan: "", //联系人
          LinkTel: "", //联系电话
          LinkAddress: "", //地址
          Remark: "", //备注
          CommissionType: 0, //返佣类型(0-百分比，1-固定金额)
          CommissionMoney: 0, //返佣值
          ContractUrl: "", //供应商合同
        },
        supplierTypeList: [], //供应商类型列表
        uploadMultple: true,
        fileObj: {
          FileName: '',
          FileUrl: ''
        }
      }
    },
    created() {
      this.getSupplierTypeList();
    },
    mounted() {
      this.initObj()
    },
    methods: {
      //获取供应商类型
      getSupplierTypeList() {
        querySupplierType().then(res => {
          if (res.Code == 1) {
            let obj = {
              Name: '请选择',
              Id: 0
            }
            this.supplierTypeList = res.Data;
            this.supplierTypeList.unshift(obj);
          }
        })
      },
      //初始化表单
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          querySupplierInfo({
            Id: this.saveObj.Id
          }).then(res => {
            if (res.Code == 1) {
              var tempObj = res.Data;
              if (tempObj) {
                this.addMsg.Id = tempObj.Id;
                this.addMsg.Type = tempObj.Type;
                this.addMsg.Name = tempObj.Name;
                this.addMsg.LinkMan = tempObj.LinkMan;
                this.addMsg.LinkTel = tempObj.LinkTel;
                this.addMsg.LinkAddress = tempObj.LinkAddress;
                this.addMsg.Remark = tempObj.Remark;
                this.addMsg.CommissionType = tempObj.CommissionType;
                this.addMsg.CommissionMoney = tempObj.CommissionMoney;
                this.addMsg.ContractUrl = tempObj.ContractUrl;
              }
            }
          })
        } else {
          this.addMsg.Id = 0;
          this.addMsg.Type = 0;
          this.addMsg.Name = "";
          this.addMsg.LinkMan = "";
          this.addMsg.LinkTel = "";
          this.addMsg.LinkAddress = "";
          this.addMsg.Remark = "";
          this.addMsg.CommissionType = 0;
          this.addMsg.CommissionMoney = 0;
          this.addMsg.ContractUrl = "";
        }
      },
      //关闭弹窗
      closeSaveForm() {
        this.$emit('close');
        this.persistent = false;
      },
      //保存供应商
      saveInfo() {
        this.$refs.Name.validate();
        if (!this.$refs.Name.hasError) {
          this.saveLoading = true;
          saveSupplier(this.addMsg).then(res => {
            this.saveLoading = false
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit("success");
            this.closeSaveForm();
          })
        }
      },
      //上传附件
      UploadAttachment(files) {
        UploadSelfFile('Attachment', files.file, res => {
          if (res.Code == 1) {
            this.fileObj.FileName = res.FileName;
            this.fileObj.FileUrl = res.FileUrl;
            this.addMsg.ContractUrl = res.FileUrl;
          }
        })
      },
    }
  }

</script>
