<template>
  <el-dialog v-model="show" :title="title" width="1000px" append-to-body>
    <el-button @click="add" type="primary" plain class="mb20">
      {{language==0?'新建':'Add'}}
    </el-button>
    <el-table height="50vh" ref="allBills" :data="tableData" v-loading="loading">
      <el-table-column prop="contact" :label="language==0?'联系人':'Contact'" min-width="100px">
        <template #default="scope">
          <div v-if="scope.row.id">{{scope.row.contact}}</div>
          <el-input v-else v-model="scope.row.contact"/>
        </template>
      </el-table-column>
      <el-table-column prop="phone" :label="language==0?'联系电话':'Phone'" min-width="120px">
        <template #default="scope">
          <div v-if="scope.row.id">{{scope.row.phone}}</div>
          <el-input v-else v-model="scope.row.phone"/>
        </template>
      </el-table-column>
      <el-table-column prop="id" :label="language==0?'地区':'Detail'" min-width="150px">
        <template #default="scope">
          <div v-if="scope.row.id">{{scope.row.provinceName}}{{scope.row.cityName}}{{scope.row.areaName}}</div>
          <el-cascader v-else v-model="scope.row.regionArr" style="width: 100%;" :options="regionsList"
            :props="{ label:'text' }" @change="changeRegion"
          />
        </template>
      </el-table-column>
      <el-table-column prop="address" :label="language==0?'详细地址':'Address'" min-width="150px">
        <template #default="scope">
          <div v-if="scope.row.id">{{scope.row.address}}</div>
          <el-input v-else type="textarea" rows="1" v-model="scope.row.address"/>
        </template>
      </el-table-column>
      <el-table-column prop="total" :label="language==0?'操作':'Operation'" fixed="right" align="center" width="100">
        <template #default="scope">
          <div v-if="scope.row.id">
            <a class="text-primary mr10" @click="del(scope.row.id)">{{language==0?'删除':'Delete'}}</a>
<!--            <el-button text type="primary" @click="edit(scope.row.id)">{{language==0?'编辑':'Edit'}}</el-button>-->
            <a class="text-primary" @click="choose(scope.row)">{{language==0?'选择':'Choose'}}</a>
          </div>
          <div v-else>
            <a class="text-primary mr10" @click="save(scope.row)">{{language==0?'保存':'Save'}}</a>
            <a class="text-primary" @click="saveCancel(scope.row.id)">{{language==0?'取消':'Cancel'}}</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <paginationPc
        v-show="total>0"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="total"
        @pagination="getList"
    />
  </el-dialog>
</template>

<script setup>
import {reactive, ref, toRefs, watch} from 'vue'
import {getCurrentInstance} from "@vue/runtime-core";
import {useStorage} from "@vueuse/core/index";
import {addAddress, addressList, delAddress, getCanInvoiceBills} from "@/apiPc/booking";
import {ElMessage, ElMessageBox} from "element-plus";
import useUserStore from "@/store/modules/user";
import * as match from "@/apiPc/match";
const {proxy} = getCurrentInstance()
const emit = defineEmits([ 'submit'])
const language= useStorage('language',0)
const user = useUserStore().user
const data = reactive({
  tableData: [],
  regionsList:[],
  show: false,
  loading: false,
  title: '',
  query:{
    status:1
  },
  total:0
})
const { tableData,regionsList,show,loading,title,query,total} = toRefs(data)

const open = (params) => {
  title.value = params.title
  show.value = true
  if(params.id == '0'){
    // 新建

  } else {
    getList()
  }
  getRegionsList()
}
defineExpose({
  open
})
const getList = () => {
  loading.value = true
  addressList(user.userId).then(res=>{
    loading.value = false
    tableData.value = res.rows
  })
}
function getRegionsList() {
  match.regionsList().then(res => {
    regionsList.value = res.data
  })
}
const changeRegion = (val) => {
  console.log(val)
}
const save = (row) => {
  console.log(row)
  row.province = row.regionArr[0]
  row.city = row.regionArr[1]||''
  row.area = row.regionArr[2]||''
  addAddress(row).then(res=>{
    ElMessage.success('保存成功')
    getList()
  })
}
const choose = (row) => {
  emit('submit',row)
  show.value = false
}
const add = () => {
  tableData.value.push({})
}
const edit = (row) => {

}
const del = (row) => {
  ElMessageBox.confirm('确认删除？').then(() => {
    delAddress(row.id).then(res=>{
      ElMessage.success('删除成功')
      getList()
    })
  })
}
const saveCancel = (row) => {
  //删除最后一条
  getList()
}
</script>

<style scoped lang="scss">

</style>