import ColSticky from '@/components/col-sticky'
import {
  Area,
  Button,
  CellGroup,
  Field,
  Form,
  Popup,
  Switch,
  Toast
} from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import { areaList } from '@vant/area-data'
import { checkPhone } from '@/helpers/validate'
import request from '@/helpers/request'
// console.log(areaList, '12')
export default defineComponent({
  name: 'edit-address',
  data() {
    const query = this.$route.query
    return {
      id: query.id,
      showPicker: false,
      defaultStatus: true,
      address: '', // 地址
      province: '',
      city: '',
      region: '',
      name: '',
      phoneNumber: '',
      detailAddress: ''
    }
  },
  mounted() {
    // 如果有编号，则需要初始化数据
    this.initData()
  },
  methods: {
    async initData() {
      if (!this.id) return
      try {
        const { data } = await request.get(
          `/api-mall-portal/member/address/${this.id}`
        )

        this.name = data.name
        this.phoneNumber = data.phoneNumber
        this.city = data.city
        this.region = data.region
        this.province = data.province
        this.detailAddress = data.detailAddress
        this.address = `${data.province} ${data.city} ${data.region}`
        this.defaultStatus = data.defaultStatus ? true : false
      } catch {
        //
      }
    },
    async onSubmit() {
      try {
        const params = {
          name: this.name,
          province: this.province,
          city: this.city,
          region: this.region,
          detailAddress: this.detailAddress,
          phoneNumber: this.phoneNumber,
          defaultStatus: Number(this.defaultStatus)
        }
        if (this.id) {
          await request.post(
            `/api-mall-portal/member/address/update/${this.id}`,
            {
              data: {
                ...params
              }
            }
          )
        } else {
          await request.post('/api-mall-portal/member/address/add', {
            data: {
              ...params
            }
          })
        }

        setTimeout(() => {
          Toast((this.id ? '修改' : '添加') + '成功')
        }, 100)
        setTimeout(() => {
          this.$router.back()
        }, 1000)
      } catch {
        //
      }
    }
  },
  render() {
    return (
      <>
        <Form onSubmit={this.onSubmit} style={{ overflow: 'hidden' }}>
          <CellGroup inset class={styles.cellGroup}>
            <Field
              label="收货人"
              placeholder="请输入姓名"
              v-model={this.name}
              rules={[
                {
                  required: true,
                  message: '请输入姓名'
                }
              ]}
            />
            <Field
              label="联系电话"
              placeholder="收货人电话号码"
              v-model={this.phoneNumber}
              type="tel"
              maxlength={11}
              rules={[
                {
                  required: true,
                  message: '请收货人电话号码'
                },
                {
                  validator: checkPhone,
                  message: '输入收货人电话有误'
                }
              ]}
            />
            <Field
              label="所在地区"
              placeholder="请选择"
              readonly
              isLink
              modelValue={this.address}
              onClick={() => {
                this.showPicker = true
              }}
              rules={[
                {
                  required: true,
                  message: '请选择所在地区'
                }
              ]}
            />
            <Field
              label="详细地址"
              type="textarea"
              placeholder="请输入"
              v-model={this.detailAddress}
              rules={[
                {
                  required: true,
                  message: '请输入详细地址'
                }
              ]}
            />
          </CellGroup>
          <CellGroup inset class={[styles.cellGroup, styles.cellAddress]}>
            <Field
              label="设置为默认地址"
              v-slots={{
                input: () => <Switch size="24" v-model={this.defaultStatus} />
              }}
            />
          </CellGroup>
          <ColSticky position="bottom" background="white">
            <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
              <Button round block type="primary" native-type="submit">
                保存收货地址
              </Button>
            </div>
          </ColSticky>
        </Form>

        <Popup v-model:show={this.showPicker} position="bottom" round>
          <Area
            areaList={areaList}
            // columnsPlaceholder={['请选择']}
            onCancel={() => {
              this.showPicker = false
            }}
            onConfirm={area => {
              this.province = area[0].name
              this.city = area[1].name
              this.region = area[2].name

              this.address = `${area[0].name} ${area[1].name} ${area[2].name}`

              this.showPicker = false
            }}
          />
        </Popup>
      </>
    )
  }
})
