<template>
  <div>
    <el-dialog :visible.sync="showVisible" title="地址管理" width="900px" @close="closeDialog">
      <div style="margin-bottom: 20px;"><el-button type="primary" @click="addPrintAddr()">添加地址</el-button></div>
      <div>
        <el-table :data="addrList" border style="width: 100%;height: auto;" v-loading="loading">
          <el-table-column prop="id" label="ID" align="center" width="70"/>
          <el-table-column prop="name" label="姓名" align="center" width="100"/>
          <el-table-column prop="mobile" label="联系方式" align="center" width="120"/>
          <el-table-column label="详细地址">
            <template slot-scope="scope">
              <span>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.district }}{{ scope.row.detail }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="editPrintAddr(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="printVisible" :title="curAddrId ? '编辑地址' : '新增地址'" width="500px">
      <el-form label-width="100px">
        <el-form-item label="姓名：">
          <el-input v-model="printForm.name" type="input" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input v-model="printForm.mobile" type="input" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="省：">
          <el-input v-model="printForm.province" type="input" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="市：">
          <el-input v-model="printForm.city" type="input" placeholder="请输入号" />
        </el-form-item>
        <el-form-item label="区：">
          <el-input v-model="printForm.district" type="input" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="详细地址：">
          <el-input v-model="printForm.detail" type="input" placeholder="街道-小区-门牌号" />
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="printForm.sort" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="printVisible = false">取消</el-button>
        <el-button type="primary" @click="commitPrintAddr()" :loading="btnLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
    
  
</template>

<script>
import { shopAddress, updateShopAddress } from "@/api/shop"

export default {
  props: {
    id: {
      type: Number,
      default: () => {
        return 0
      }
    },
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      btnLoading: false,
      showVisible: false,
      addrList: [],
      curAddrId: '',
      loading: false,

      printForm: {},
      printVisible: false
    }
  },
  methods: {
    getAddrList() {
      this.loading = true
      let params = {
        shop_id: this.id,
        page: 1,
        pageSize: 1000
      }
      shopAddress(params).then((res) => {
        console.log(res)
        this.addrList = res.data.data
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    addPrintAddr() {
      this.curAddrId = ''
      this.printForm = {}
      this.printVisible = true
    },
    commitPrintAddr(){
      if(!this.printForm.name) {
        ElMessage({ type: 'warning', message: '请输入姓名' })
        return
      } else if(!this.printForm.mobile) {
        ElMessage({ type: 'warning', message: '请输入联系电话' })
        return
      } else if(!this.printForm.province || !this.printForm.city || !this.printForm.district || !this.printForm.detail) {
        ElMessage({ type: 'warning', message: '请输入地址信息' })
        return
      }
      this.btnLoading = true
      let params = {
        ...this.printForm
      }
      if(this.curAddrId) {
        params.id = this.curAddrId
        updateShopAddress(params).then((res) => {
          this.$message({ type: 'success', message: '编辑成功' })
          this.printVisible = false
          this.getAddrList()
          this.btnLoading = false
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        params.shop_id = this.id
        updateShopAddress(params).then((res) => {
          this.$message({ type: 'success', message: '添加成功' })
          this.printVisible = false
          this.getAddrList()
          this.btnLoading = false
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    editPrintAddr(row) {
      this.curAddrId = row.id
      this.printForm = JSON.parse(JSON.stringify(row))
      this.printVisible = true
    },
    closeDialog() {
      this.showVisible = false
      this.$emit('close')
    }
  },
  watch: {
    show: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showVisible = true
          this.addrList = []
          this.printList = []
          this.getAddrList()
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped lang="scss">
  
</style>