<!--
  @description: 供应商维护
  @Modifier：dijia
  @routerPath:/personalCenter/supplierInfo
  @date：2021/08/11
-->
<template>
  <div>
    <div class="shopmall-page-title">
      供应商维护
    </div>
    <div class="supplierContainer">
      <el-form
        ref="supplierRef"
        :rules="rules"
        :model="fromData"
        label-width="135px"
        size="medium"
      >
        <el-row :gutter="20">
          <el-col :span="6" :offset="2">
            <div class="flex_img">
              <p class="user-avatar-title">
                店铺图片
              </p>
              <upload
                ref="upload"
                list-type="picture"
                :limit="1"
                :on-change="supplierFileChange"
                :data="supplierFileType"
                :file-list="fileList"
                :auto-delete="true"
                :auto-upload="true"
                file-ref="supplierFileRef"
                but-text="图片上传"
                :title="''"
                accept="image/jpg,image/jpeg,image/png"
                :class="{ 'showDeleteBtn': editFlag }"
              />
            </div>
          </el-col>
          <el-col :span="10">
            <el-form-item label="名称" prop="departName">
              <el-input v-model="fromData.departName" :disabled="editFlag" />
            </el-form-item>
            <el-form-item label="供应商全称" prop="departFullName">
              <el-input v-model="fromData.departFullName" :disabled="editFlag" />
            </el-form-item>
            <el-form-item label="部门qq" prop="departQq">
              <el-input v-model="fromData.departQq" maxlength="10" show-word-limit :disabled="editFlag" @input="proving" />
            </el-form-item>
            <el-form-item label="部门电话" prop="departPhone">
              <el-input v-model="fromData.departPhone" :disabled="editFlag" />
            </el-form-item>
            <el-form-item label="统一社会信用编码" prop="uniformSocialCreditCode">
              <el-input v-model="fromData.uniformSocialCreditCode" :disabled="editFlag" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-show="editFlag" class="footer">
        <el-button type="purple" @click="editFlag = false">
          修 改
        </el-button>
      </div>
      <div v-show="!editFlag" class="footer">
        <el-button type="purple" @click="save">
          保 存
        </el-button>
        <el-button @click="editFlag = true">
          取 消
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* api*/
import { getSupplierDetail, editSupplier } from '@/api/shoppingmall/products'
import { phoneAndText, creditCode, checkRate, En_Ch_NumTest } from '@/assets/js/validate'// 校验输入内容
/* 公共组件*/
import upload from '@comp/common/updownload/upload'// 文件上传组件
export default {
  name: 'SupplierInfo',
  components: {
    upload
  },
  props: {
  },
  data() {
    return {
      editFlag: true,
      fromData: {},
      rules: {
        departName: [
          { required: true, validator: En_Ch_NumTest, trigger: 'blur' }
        ],
        departFullName: [
          { required: true, validator: En_Ch_NumTest, trigger: 'blur' }
        ],
        departQq: [
          { required: true, validator: checkRate, trigger: 'blur' }
        ],
        departPhone: [
          { required: true, validator: phoneAndText, trigger: 'blur' }
        ],
        uniformSocialCreditCode: [
          { required: true, validator: creditCode, trigger: 'blur' }
        ]
      },
      fileList: [],
      supplierFileType: {
        bizId: '', // 业务主键Id
        fileType: 'ds_supllier_log' // 文件类型
      },
      // 是否上传图片
      imgFlag: false
    }
  },
  watch: {
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      getSupplierDetail().then(res => {
        this.fromData = res.data
        this.supplierFileType.bizId = res.data.id
      })
    },
    // input过滤只能输入自然数
    proving() {
      // 先把非数字的都替换掉，除了数字
      this.fromData.departQq = this.fromData.departQq.replace(/[^\d]/g, '')
      // 不能是0开头
      this.fromData.departQq = this.fromData.departQq.replace(/^(0)/g, '')
    },
    supplierFileChange(file, fileList) {
      fileList.length > 0 ? this.imgFlag = true : this.imgFlag = false
    },
    save() {
      if (!this.imgFlag) {
        this.$message.info('请上传店铺图片！')
        return
      }
      this.$refs.supplierRef.validate(valid => {
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.fromData))
          editSupplier(params).then(res => {
            if (res.header.ret === '0') {
              this.initData()
              this.editFlag = true
              this.$message.success('修改信息成功！')
            }
          }).catch(err => {
            throw new Error('修改失败' + err)
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.showDeleteBtn {
  /deep/ .file-image {
    &:hover .bottom {
      display: none !important;
    }
  }
}
.supplierContainer {
  margin-top: 10vh;
  .user-avatar-title {
    // color: #999999;
    text-align: center;
  }
  .flex_img {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /deep/.fileBtn {
    margin-right: 0;
  }
  /deep/.fileBtn .el-upload>.el-button--upload {
    margin-top: 20px;
  }
  .footer {
    margin-top: 20px;
    text-align: center;
    >.el-button {
      margin-right: 20px;
    }
  }
}
</style>
