<template>
  <div class="wrap">
    <van-nav-bar
      :title="isEdit ? '编辑时段电话' : '新增时段电话'"
      left-arrow
      @click-left="h5GoBack"
      fixed
      placeholder
      class="nav-bar"
    />

    <div class="content">
      <div class="field">
        <label class="field-label">时段（开始 — 结束，格式 00:00 ~ 23:59）</label>
        <div class="period-row">
          <input
            type="text"
            readonly
            :value="form.startTime"
            placeholder="开始时间"
            @click="openTimePicker('startTime')"
          />
          <span class="sep">—</span>
          <input
            type="text"
            readonly
            :value="form.endTime"
            placeholder="结束时间"
            @click="openTimePicker('endTime')"
          />
        </div>
        <div v-if="periodErr" class="err-msg">{{ periodErr }}</div>
      </div>

      <div class="phone-block" v-for="n in 3" :key="n">
        <div class="phone-block__head">
          <span>电话 {{ n }}{{ n === 1 ? '（必填）' : '（选填）' }}</span>
        </div>
        <input
          type="text"
          v-model="form['phone' + n]"
          :placeholder="'电话号码'"
        />
        <div class="sub-grid">
          <input
            type="text"
            v-model="form['phone' + n + 'Desc']"
            placeholder="备注/负责人"
          />
          <input
            type="text"
            v-model="form['phone' + n + 'WechatId']"
            placeholder="微信号"
          />
        </div>
        <div v-if="phoneErr[n - 1]" class="err-msg">{{ phoneErr[n - 1] }}</div>
      </div>
    </div>

    <div class="footer">
      <button class="btn btn-save" @click="save">保存</button>
    </div>

    <van-popup v-model="showTimePicker" round position="bottom">
      <van-datetime-picker
        v-if="showTimePicker"
        v-model="pickerValue"
        type="time"
        :formatter="timeFormatter"
        @confirm="onTimeConfirm"
        @cancel="showTimePicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { myMixins } from '@/utils/myMixins'
import { isValidPhone, validateTimeRange } from '@/utils/validate'
import { Toast } from 'vant'

const DRAFT_KEY_PREFIX = 'supplierTimePhoneDraft_'

function getSupplierIdFromToken() {
  const token = localStorage.getItem('token')
  if (!token) return null
  try {
    const payload = JSON.parse(atob(token.split('.')[1]))
    return payload.supplierId || null
  } catch (e) {
    return null
  }
}

function getDraftKey(supplierId) {
  return `${DRAFT_KEY_PREFIX}${supplierId}`
}

function emptyRecord() {
  return {
    startTime: '',
    endTime: '',
    phone1: '',
    phone1Desc: '',
    phone1WechatId: '',
    phone2: '',
    phone2Desc: '',
    phone2WechatId: '',
    phone3: '',
    phone3Desc: '',
    phone3WechatId: ''
  }
}

export default {
  name: 'supplierTimePhoneEdit',
  mixins: [myMixins],
  data() {
    return {
      supplierId: null,
      index: -1,
      form: emptyRecord(),
      periodErr: '',
      phoneErr: ['', '', ''],
      showTimePicker: false,
      pickerField: 'startTime',
      pickerValue: ''
    }
  },
  computed: {
    isEdit() {
      return this.index >= 0
    }
  },
  mounted() {
    this.supplierId = this.$route.query.supplierId || getSupplierIdFromToken()
    this.index = Number(this.$route.query.index)
    if (Number.isNaN(this.index)) {
      this.index = -1
    }
    if (this.isEdit) {
      this.loadRecord()
    }
  },
  methods: {
    validate() {
      this.periodErr = ''
      this.phoneErr = ['', '', '']
      let valid = true

      const timeRes = validateTimeRange(this.form.startTime, this.form.endTime)
      if (!timeRes.valid) {
        this.periodErr = timeRes.message
        valid = false
      }

      if (!this.form.phone1) {
        this.phoneErr[0] = '电话 1 为必填项'
        valid = false
      } else if (!isValidPhone(this.form.phone1)) {
        this.phoneErr[0] = '电话 1 格式不正确'
        valid = false
      } else if (!this.form.phone1Desc) {
        this.phoneErr[0] = '电话 1 备注为必填项'
        valid = false
      }

      if (this.form.phone2) {
        if (!isValidPhone(this.form.phone2)) {
          this.phoneErr[1] = '电话 2 格式不正确'
          valid = false
        } else if (!this.form.phone2Desc) {
          this.phoneErr[1] = '电话 2 备注为必填项'
          valid = false
        }
      }
      if (this.form.phone3) {
        if (!isValidPhone(this.form.phone3)) {
          this.phoneErr[2] = '电话 3 格式不正确'
          valid = false
        } else if (!this.form.phone3Desc) {
          this.phoneErr[2] = '电话 3 备注为必填项'
          valid = false
        }
      }

      return valid
    },
    loadRecord() {
      const key = getDraftKey(this.supplierId)
      const raw = localStorage.getItem(key)
      if (!raw) {
        Toast('未找到时段数据')
        this.h5GoBack()
        return
      }
      try {
        const draft = JSON.parse(raw)
        const list = draft.phoneList || []
        if (this.index >= 0 && this.index < list.length) {
          this.form = { ...list[this.index] }
        } else {
          Toast('时段数据不存在')
          this.h5GoBack()
        }
      } catch (e) {
        console.error(e)
        Toast('数据读取失败')
        this.h5GoBack()
      }
    },
    save() {
      if (!this.validate()) return

      try {
        const key = getDraftKey(this.supplierId)
        const draft = JSON.parse(localStorage.getItem(key) || '{}')
        const list = draft.phoneList || []
        const record = {
          startTime: this.form.startTime,
          endTime: this.form.endTime,
          phone1: this.form.phone1,
          phone1Desc: this.form.phone1Desc,
          phone1WechatId: this.form.phone1WechatId,
          phone2: this.form.phone2,
          phone2Desc: this.form.phone2Desc,
          phone2WechatId: this.form.phone2WechatId,
          phone3: this.form.phone3,
          phone3Desc: this.form.phone3Desc,
          phone3WechatId: this.form.phone3WechatId
        }
        if (this.isEdit) {
          list[this.index] = record
        } else {
          list.push(record)
        }
        draft.phoneList = list
        localStorage.setItem(key, JSON.stringify(draft))
        Toast('已保存')
        this.h5GoBack()
      } catch (e) {
        Toast('保存失败')
        console.error(e)
      }
    },
    openTimePicker(field) {
      this.pickerField = field
      this.pickerValue = this.form[field] || '00:00'
      this.showTimePicker = true
    },
    onTimeConfirm(value) {
      this.form[this.pickerField] = value
      this.showTimePicker = false
    },
    timeFormatter(type, value) {
      return value.toString().padStart(2, '0')
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";

.wrap {
  @include wh(100%, 100%);
  box-sizing: border-box;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
}

::v-deep .nav-bar {
  .van-nav-bar {
    background: #2b6cff;
  }
  .van-nav-bar__title,
  .van-nav-bar__arrow {
    color: #fff;
  }
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.field {
  margin-bottom: 16px;
}
.field-label {
  display: block;
  font-size: 13px;
  color: #333;
  font-weight: 600;
  margin-bottom: 7px;
}
.period-row {
  display: flex;
  align-items: center;
  gap: 10px;
  input {
    flex: 1;
  }
  .sep {
    color: #999;
  }
}
input[type='text'] {
  width: 100%;
  height: 42px;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: #1a1a1a;
  background: #fafbfc;
  outline: none;
  box-sizing: border-box;
  &:focus {
    border-color: #2b6cff;
    background: #fff;
  }
  &[readonly] {
    cursor: pointer;
  }
}

.phone-block {
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fcfcfd;
  &__head {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #2b6cff;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
  }
}

.err-msg {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 6px;
}

.footer {
  padding: 10px 12px;
  background: #fff;
  border-top: 1px solid #eee;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  .btn {
    flex: 1;
    height: 46px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .btn-save {
    background: #2b6cff;
    color: #fff;
  }
  .btn-cancel {
    background: #f2f3f5;
    color: #666;
  }
  .btn-del {
    background: #fff;
    color: #ff4d4f;
    border: 1.5px solid #ffccc7;
  }
}
</style>
