<template>
  <view class="page">
    <scroll-view class="scroll" scroll-y>
      <uni-list>
        <uni-list-item class="select-item" :class="form.userId ? 'is-filled' : 'is-empty'" clickable
          @click="openRelate('userId')" :rightText="form.userName || '请选择拜访人'" showArrow>
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>拜访人姓名</text></view>
          </template>
        </uni-list-item>

        <uni-list-item>
          <template v-slot:body>
            <view class="item-title"><text class="required">*</text><text>拜访时间</text></view>
          </template>
          <template v-slot:footer>
            <uni-datetime-picker type="date" v-model="form.visitTime" />
          </template>
        </uni-list-item>

        <uni-list-item title="拜访内容">
          <template v-slot:footer>
            <uni-easyinput type="textarea" v-model="form.visitContent" placeholder="请输入拜访内容" :inputBorder="false" />
          </template>
        </uni-list-item>
      </uni-list>
    </scroll-view>

    <view class="footer">
      <button class="btn submit" type="primary" @click="onSubmit">提交</button>
    </view>

    <RelateSelectSheet :visible.sync="relate.visible" :title="relate.title" :source="relate.source"
      :display-fields="relate.display" :multiple="relate.multiple" :row-key="relate.rowKey"
      :selectedKeys.sync="relate.selectedKeys" :source-extra="{ source: 'CUSTOMER_DEVELOP' }"
      @confirm="onRelateConfirm" />
  </view>
</template>

<script>
import RelateSelectSheet from '@/components/relate-select/index.vue'
import storage from '@/utils/storage'
import constant from '@/utils/constant'
import {
  createVisitRecordApi
} from '@/api/devManage.js'

export default {
  name: 'DevManageVisitAdd',
  components: { RelateSelectSheet },
  data() {
    return {
      customerId: '',
      form: {
        userId: '',
        userName: '',
        visitTime: new Date().toISOString().substring(0, 10),
        visitContent: ''
      },
      relate: { visible: false, title: '选择拜访人', source: '', display: [], multiple: false, rowKey: 'id', selectedKeys: [], fieldKey: '' }
    }
  },
  created() {
    const user = storage.get(constant.name)
    const userId = storage.get(constant.id)
    this.form.userName = user || ''
    this.form.userId = userId || ''
  },
  onLoad(query) {
    this.customerId = (query && query.id) || '';
  },
  methods: {
    openRelate(fieldKey) {
      let config = {}
      if (fieldKey === 'userId') {
        config = {
          title: '拜访人',
          source: 'user',
          rowKey: 'id',
          multiple: false,
          display: [
            { label: '姓名', field: 'name' },
            { label: '编号', field: 'code' },
            { label: '状态', field: 'available', format: v => (v ? '启用' : '停用') }
          ]
        }
      }
      const selectedKeys = this.form.userId ? [this.form.userId] : []
      this.relate.title = config.title
      this.relate.source = config.source
      this.relate.display = config.display
      this.relate.multiple = config.multiple
      this.relate.rowKey = config.rowKey
      this.relate.selectedKeys = selectedKeys
      this.relate.fieldKey = fieldKey
      this.$nextTick(() => { this.relate.visible = true })
    },
    onRelateConfirm({ items }) {
      const first = (items && items.length > 0) ? items[0] : null
      this.form.userId = (first && (first.id || first.userId)) || ''
      this.form.userName = (first && (first.name || first.userName)) || ''
    },
    validateRequired() {
      const checks = [
        { key: 'userId', label: '拜访人姓名' },
        { key: 'visitTime', label: '拜访时间' }
      ]
      for (const it of checks) {
        const val = this.form[it.key]
        if (val === undefined || val === null || String(val).trim() === '') {
          uni.showToast({
            title: `请先选择${it.label}`,
            icon: 'none'
          })
          return false
        }
      }
      return true
    },
    onSubmit() {
      if (!this.validateRequired()) return
      const payload = { ...this.form }
      payload.customerId = this.customerId;
      delete payload.userName;
      console.log('visit_add_submit', payload)
      createVisitRecordApi(payload).then(res => {
        uni.showToast({
          title: '提交成功',
          icon: 'success'
        })
        setTimeout(() => { uni.redirectTo({ url: '/pages/dev_manage/index' }) }, 300)
      }).catch(e => {
        uni.showToast({
          title: e.msg || '提交失败',
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scroll {
  flex: 1;
  padding: 12rpx 0 160rpx;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  background: #fff;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
  z-index: 10;

  .btn {
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
  }

  .submit {
    background: $theme-primary;
    color: #fff;
  }
}

::v-deep .uni-list {
  background: transparent;

  &-item {
    &__extra-text {
      font-size: 32rpx;
    }

    &__content-title {
      font-size: 32rpx;
      color: rgba(0, 0, 0, 0.9);
    }

    &__container {
      padding: 32rpx;

      .uni-easyinput {
        &__placeholder-class {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.4);
        }

        &__content {
          border: none;

          &-input {
            padding-left: 0 !important;
            height: 48rpx;
            line-height: 48rpx;
            font-size: 32rpx;
          }

          .content-clear-icon {
            font-size: 44rpx !important;
          }
        }
      }

      .item-title,
      .uni-list-item__content {
        flex: none;
        min-height: 48rpx;
        line-height: 48rpx;
        font-size: 32rpx;
        position: relative;
        width: 210rpx;
        margin-right: 32rpx;
        color: rgba(0, 0, 0, 0.9);

        .required {
          color: red;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -16rpx;
        }
      }

    }

    &.select-item {
      &.is-empty {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.4) !important;
        }
      }

      &.is-filled {
        .uni-list-item__extra-text {
          color: rgba(0, 0, 0, 0.9) !important;
        }
      }
    }

    &.mgb10 {
      margin-bottom: 20rpx;
    }
  }
}
</style>