<!--新增门店-->
<template>
  <div>
    <xy-dialog :width="66" ref="dialog" :is-show.sync="isShow" :title="type === 'add' ? '新增门店' : '编辑门店'" type="form" :form="form" :rules="rules" @submit="submit">
      <template v-slot:belongsMerchant>
        <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-select clearable placeholder="请选择所属商家" v-model="form.belongsMerchant" style="width: 300px;">
              <el-option v-for="item in merchants" :key="item.id" :value="item.id" :label="item.name"></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <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 clearable placeholder="请填写活动名称" v-model="form.name" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:password>
        <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="showPassword" show-password type="password" clearable placeholder="请填写密码"  style="width: 300px;" @input="e => form.password = e"/>
          </div>
        </div>
      </template>
      <template v-slot:address>
        <div style="display: flex;flex-wrap: wrap">
          <div class="xy-table-item" style="margin-bottom: 20px;">
            <div class="xy-table-item-label">
              地址选择
            </div>
            <div class="xy-table-item-content">
              <avue-input-map style="width: 300px;"  :params="option" placeholder="请选择地图" v-model="map" ></avue-input-map>
            </div>
          </div>

          <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 clearable placeholder="请填写地址" v-model="form.address" style="width: 300px;"/>
            </div>
          </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 clearable placeholder="请填写联系人" v-model="form.contact" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:contactNumber>
        <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 clearable placeholder="请填写联系电话" v-model="form.contactNumber" style="width: 300px;"/>
          </div>
        </div>
      </template>
      <template v-slot:lng>
        <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 readonly clearable placeholder="请填写经度" v-model="form.lng" style="width: 120px;"/>
          </div>
        </div>
      </template>
      <template v-slot:lat>
        <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 readonly  clearable placeholder="请填写纬度" v-model="form.lat" style="width: 120px;"/>
          </div>
        </div>
      </template>
      <template v-slot:state>
        <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-switch v-model="form.state"></el-switch>
          </div>
        </div>
      </template>
      <template v-slot:isDefault>
        <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-switch v-model="form.isDefault"></el-switch>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import {index as merchantIndex} from '@/api/merchant'
import {show,save,store} from '@/api/shop'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      merchants:[],
      merchantSelect:{
        pageIndex:1,
        pageSize:10
      },

      type:'add',
      id:null,
      isShow:false,
      showPassword:'',//展示的密码
      form:{
        belongsMerchant:'',
        name:'',
        password:'',
        contact:'',
        contactNumber:'',
        state:true,
        isDefault:true,
        address:'',
        lng:'',//经度
        lat:'',//纬度
      },
      rules:{
        belongsMerchant:[
          {required:true,message:'请选择所属商家'}
        ],
        name:[
          {required:true,message:'请填写名称'}
        ],
        password:[
          {required:true,message:'请填写密码'}
        ],
        contact:[
          {required:true,message:'请填写联系人'}
        ],
        contactNumber:[
          {required:true,message:'请填写联系电话'},
          {pattern: /^[1][3-9][\d]{9}/,message:'手机号格式错误'}
        ],
        address:[
          {required:true,message:'请填写地址'}
        ],
        lng:[
          {required:true,message:'请选择定位'}
        ],
        lat:[
          {required:true,message:'请选择定位'}
        ]
      },
      map:{

      },

      option: {
        column: [
          {
            label: '坐标',
            prop: 'map',
            type: 'map',
            //高德初始化参数
            params:{
              zoom: 10,
              // zoomEnable: false,
              // dragEnable: false,
            }
          }]
      }
    }
  },
  methods: {
    async getMerchants(){
      const res = await merchantIndex({
        page_size:99999
      })
      this.merchants = res.data
    },

    submit(){
      if(this.type === 'add'){
        store({
          merchant_id:this.form.belongsMerchant,
          name:this.form.name,
          password:this.form.password,
          address:this.form.address,
          contact:this.form.contact,
          phone:this.form.contactNumber,
          longitude:this.form.lng,
          latitude:this.form.lat,
          state:this.form.state ? 1 : 0,
          is_default:this.form.isDefault ? 1 : 0
        }).then(res => {
          Message({
            type:'success',
            message:'添加成功'
          })
          this.isShow = false
          this.showPassword = ''
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          merchant_id:this.form.belongsMerchant,
          name:this.form.name,
          password:this.form.password,
          address:this.form.address,
          contact:this.form.contact,
          phone:this.form.contactNumber,
          longitude:this.form.lng,
          latitude:this.form.lat,
          state:this.form.state ? 1 : 0,
          is_default:this.form.isDefault ? 1 : 0
        }).then(res => {
          Message({
            type:'success',
            message:'编辑门店成功'
          })
          this.isShow = false
          this.showPassword = ''
          this.$emit('refresh')
        })
        return
      }
    }
  },
  watch:{
    map(newVal){
      if(!newVal) return
      this.form.lat = newVal[1]
      this.form.lng = newVal[0]
      //this.form.address = newVal[2]
    },
    async isShow(newVal){
      if(newVal){
        await this.getMerchants()
        if(this.type === 'editor'){
          const res = await show({id:this.id})
          this.form.address = res.address
          this.form.contact = res.contact
          this.form.name = res.name
          this.form.password = res.password
          this.form.contactNumber = res.phone
          this.form.belongsMerchant = res.merchant_id
          this.form.lat = res.latitude
          this.form.lng = res.longitude
          this.form.state = res.state == 1 || res.state == 'active' ? true : false
          this.form.isDefault = res.is_default == 1 ? true : false
        }
      }else{
        this.$refs['dialog'].reset()
      }
    }
  },
  mounted() {

  }

}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 166px;
}
</style>
