<!--新增商户-->
<template>
  <div>
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      :title="type === 'add' ? '新增商户' : '编辑商户'"
      :form="form"
      :rules="rules"
      type="form"
      @submit="submit">
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>全称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.name" placeholder="请输入商户全称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:logo>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            图片logo：
          </div>
          <div class="xy-table-item-content">
            <div class="xy-table-item-content">
              <div v-if="form.logo.url" style="position: relative;">
                <img :src="form.logo.url" class="avatar">
                <Button
                  shape="circle"
                  icon="md-close"
                  type="error"
                  size="small"
                  class="img__delete"
                  @click="form.logo = {id:'',url:''}"></Button>
              </div>
              <el-upload
                v-else
                accept="picture"
                :limit="1"
                class="avatar-uploader"
                list-type="picture-card"
                :action="action"
                :show-file-list="true"
                :on-error="uploadFail"
                :on-success="uploadSuccess"
                :before-upload="uploadBefore">
                <i  class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            地址：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.address" placeholder="请输入地址" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:slogan>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            宣传语：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.slogan" placeholder="请输入宣传语" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:boss>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>法人/老板：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.boss" placeholder="请输入法人/老板" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:boss_phone>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>法人/老板电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.boss_phone" placeholder="请输入法人/老板电话" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:contact>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>联系人：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.contact" placeholder="请输入联系人" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:phone>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>联系人电话：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.phone" placeholder="请输入联系人电话" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:business_number>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>营业执照号码：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.business_number" placeholder="请输入营业执照号码" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:certificate>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            营业执照：
          </div>
          <div class="xy-table-item-content">
            <div class="xy-table-item-content">
              <div v-if="form.certificate.url" style="position: relative;">
                <img :src="form.certificate.url" class="avatar">
                <Button
                  shape="circle"
                  icon="md-close"
                  type="error"
                  size="small"
                  class="img__delete"
                  @click="form.certificate = {id:'',url:''}"></Button>
              </div>
              <el-upload
                v-else
                accept="picture"
                :limit="1"
                class="avatar-uploader"
                list-type="picture-card"
                :action="action"
                :show-file-list="true"
                :on-error="uploadFail"
                :on-success="uploadSuccess1"
                :before-upload="uploadBefore">
                <i  class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </div>
      </template>

      <template v-slot:username>
        <Divider />
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>简称/用户名：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.username" placeholder="请输入简称/用户名" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:password>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <template v-if="type === 'add'"><span style="color: red;font-weight: 600;padding-right: 4px;">*</span></template>密码：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="showPassword" placeholder="请输入密码" clearable style="width: 300px;" @input="e => form.password = e"></el-input>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {store,show,save} from '@/api/merchant'
import { Message } from 'element-ui'
export default {
  data() {
    var checkPassword = (rule, value, callback) => {
      if(this.type === 'add'){
        if(!value){
          return callback(new Error('密码不能为空'))
        }
        callback()
      }
      if(this.type === 'editor'){
        callback()
      }
    }
    return {
      id:'',
      type:'add',
      isShow:false,
      action:`${process.env.VUE_APP_BASE_API}api/admin/upload-file`,

      form:{
        name:"",//全称
        logo:{
          id:'',
          url:''
        },//图标地址
        address:"",
        slogan:'',
        boss:'',
        boss_phone:'',
        contact:'',
        phone:'',
        certificate:{
          id:'',
          url:''
        },//营业执照地址
        business_number:'',//营业执照号
        state:1,
        username:"",//简称
        password:"",
      },
      showPassword:'',
      rules:{
        name: [
          { required: true, message: '请填写姓名', trigger: 'blur' }
        ],
        boss:[
          { required: true, message: '请填写法人/老板', trigger: 'blur' }
        ],
        boss_phone:[
          { required: true, message: '请填写法人/老板电话', trigger: 'blur' },
          { pattern: /^[1][3-9][\d]{9}/,message:'手机号格式错误'}
        ],
        contact:[
          { required: true, message: '请填写联系人', trigger: 'blur' }
        ],
        phone:[
          { required: true, message: '请填写联系人电话', trigger: 'blur' },
          { pattern: /^[1][3-9][\d]{9}/,message:'手机号格式错误'}
        ],
        username:[
          { required: true, message: '请填写简称/用户名', trigger: 'blur' }
        ],
        password:[
          { validator: checkPassword, trigger: 'blur' }
        ],
        business_number:[
          { required: true, message:'请填写营业执照编号'}
        ]
      }
    }
  },
  methods: {
    //上传
    uploadFail(err){
      console.log(err)
    },
    uploadSuccess(response){
      console.log(response)
      this.form.logo.id = response.id
      this.form.logo.url = response.url
    },
    uploadSuccess1(response){
      console.log(response)
      this.form.certificate.id = response.id
      this.form.certificate.url = response.url
    },
    uploadBefore(file){
      console.log(file)
      if((file.size/1000) > 2024){
        Message({
          type:'warning',
          message:'上传图片大小超过2M！'
        })
        return false
      }
    },

    submit(){
      if(this.type === 'add'){
        store({
          name:this.form.name,
          logo_id:this.form.logo.id,
          address:this.form.address,
          slogan:this.form.slogan,
          boss:this.form.boss,
          boss_phone:this.form.boss_phone,
          contact:this.form.contact,
          phone:this.form.phone,
          certificate_id:this.form.certificate.id,
          business_number:this.form.business_number,
          username:this.form.username,
          password:this.form.password,
          state:1
        }).then(res => {
          this.isShow = false
          this.$emit('refresh')
          Message({
            type:'success',
            message:'新增商户成功'
          })
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          name:this.form.name,
          logo_id:this.form.logo.id,
          address:this.form.address,
          slogan:this.form.slogan,
          boss:this.form.boss,
          boss_phone:this.form.boss_phone,
          contact:this.form.contact,
          phone:this.form.phone,
          certificate_id:this.form.certificate.id,
          business_number:this.form.business_number,
          username:this.form.username,
          password:this.form.password
        }).then(res => {
          Message({
            type:'success',
            message:'编辑成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        if(this.type === 'editor'){
          show({id:this.id}).then(res => {
            this.form = {
              name:res.name,//全称
              logo: { id:res.logo_id,url:res.logo?.url },//图标地址
              address:res.address,
              slogan:res.slogan,
              boss:res.boss,
              boss_phone:res.boss_phone,
              contact:res.contact,
              phone:res.phone,
              certificate: { id:res.certificate_id,url:res.certificate?.url },//营业执照地址
              business_number:res.business_number,//营业执照号
              state:res.state,
              username:res.username,//简称
              password:res.password,
            }
          })
        }
      }else{
        this.showPassword = ''
        this.id = ''
        this.$refs['dialog'].reset()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.img__delete{
  transform: scale(0.8,0.8);

  position: absolute;
  top: 4px;
  right: 4px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
::v-deep .el-upload--picture-card {
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar {
  width: 80px !important;
  display: block;
  border-radius: 6px;
}

::v-deep .xy-table-item-label{
  width: 160px !important;
}
</style>
