<template>
  <view>
    <cpn-navbar title="回访" :is-back="true"></cpn-navbar>

    <view class="container">
      <u-form :model="form" ref="uForm" :label-width="200" :error-type="['message', 'border-bottom']">
        <u-form-item label="回访方式" prop="way">
          <u-radio-group v-model="form.way">
            <u-radio v-for="(item, index) in ways" :key="item.value" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="是否接通" prop="is_coherent">
          <u-switch v-model="form.is_coherent" :active-value="1" :inactive-value="0"></u-switch>
        </u-form-item>
        <u-form-item label="回访时间" required prop="visit_time">
          <u-input :value="form.visit_time" type="select" @click="isShowTime = true"></u-input>
        </u-form-item>
        <u-form-item label="是否回访" prop="is_serve">
          <u-switch v-model="form.is_serve" :active-value="1" :inactive-value="0"></u-switch>
        </u-form-item>
        <u-form-item label="满意度" required prop="satisfy">
          <u-radio-group v-model="form.satisfy">
            <u-radio v-for="(item, index) in satisfies" :key="item.value" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="服务规范" prop="is_standard">
          <u-radio-group v-model="form.is_standard">
            <u-radio v-for="(item, index) in standards" :key="item.value" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="回访备注" prop="remark">
          <u-input v-model="form.remark" type="textarea"></u-input>
        </u-form-item>
        <u-form-item label="回访图片">
          <u-upload ref="uUpload" :custom-btn="true" :action="action" :file-list="fileList"
                    :source-type="['camera']" @on-choose-fail="test">
            <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
              <u-icon name="camera" size="60" color="#c0c4cc" label="点击拍摄" label-pos="bottom"></u-icon>
            </view>
          </u-upload>
        </u-form-item>
        <u-form-item label="所在位置">
          <view>
            <u-button type="primary" size="mini" :throttle-time="3000" @click="getLoaction">获取位置</u-button>
            <view style="word-break: break-all;">
              {{ `${(form.lng || form.lat) ? ('(' + form.lng + ',' + form.lat + ')') : ''}${form.address}` }}
            </view>
          </view>
        </u-form-item>
      </u-form>
      <u-button type="primary" @click="submit">提交</u-button>
    </view>

    <u-picker mode="time"
              v-model="isShowTime"
              :params="{
                year: true,
                month: true,
                day: true,
                hour: true,
                minute: true,
                second: true
              }" @confirm="timeConfirm"></u-picker>
  </view>
</template>

<script>
import QQMapWX from '@/libs/qqmap-wx-jssdk.js'
import moment from "@/libs/moment.min";
import { ROOTPATH } from "@/common/config"
export default {
  data() {
    return {
      action: `${ROOTPATH}/api/admin/upload-file`,
      fileList: [],
      isShowTime: false,
      type: "add",
      id: "",
      form: {
        schedule_list_id: "",
        way: "",
        is_coherent: 1,
        visit_time: moment().format('YYYY-MM-DD HH:mm:ss'),
        is_serve: 1,
        satisfy: "",
        is_standard: 1,
        remark: "",
        file_ids: [],
        lat: "",
        lng: "",
        address: ""
      },
      rules: {
        visit_time: [
          {
            required: true,
            type: 'string',
            message: '请选择回访时间',
            trigger: ['change','blur']
          }
        ],
        satisfy: [
          {
            required: true,
            type: "number",
            message: '请选择满意度',
            trigger: ['change','blur']
          }
        ]
      },
      standards: [
        {
          label: "不规范",
          value: 0
        },
        {
          label: "规范",
          value: 1
        },
      ],
      satisfies: [
        {
          label: "非常满意",
          value: 1
        },
        {
          label: "满意",
          value: 2
        },
        {
          label: "一般",
          value: 3
        },
        {
          label: "不满意",
          value: 4
        },
      ],
      ways: [
        {
          label: "上门",
          value: 1
        },
        {
          label: "电话",
          value: 2
        }
      ],
    };
  },
  methods: {
    test (e) {
      console.error(e)
    },
    load() {
      this.qqmapsdk = new QQMapWX({
        key: 'I5FBZ-LMN33-BK63F-OGUO7-XE3JK-WJBP5'
      });
    },
    timeConfirm (e) {
      this.form.visit_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`
    },
    getLoaction() {
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: 'gcj02',
          isHighAccuracy: true
        }).then(res => {
          if (res[1]) {
            this.form.lat = res[1]?.latitude
            this.form.lng = res[1]?.longitude

            this.qqmapsdk.reverseGeocoder({
              location: {
                latitude: this.form.lat,
                longitude: this.form.lng
              },
              success: (res) => {
                this.form.address = res.result.address + res.result.formatted_addresses.recommend
                console.log(this.form)
                resolve(res)
              },
              fail: (err) => {
                reject(err)
              }
            })
          } else {
            uni.showToast({
              icon: 'none',
              title: '操作频繁,请稍后再试'
            })
            reject(res)
            console.log(res);
          }
        })
      })
    },

    submit () {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.form.file_ids = this.$refs.uUpload.lists.filter(i => i.progress === 100).map(i => i.response?.id)
          if (this.type === 'add') {
            delete this.form.id
          } else {
            this.form.id = this.id
          }
          this.$u.api.adminSaveCallback(this.form).then(res => {
            uni.showToast({
              icon: 'success',
              title: '保存成功',
            })
            setTimeout(() => {
              uni.navigateBack()
            },1500)
          })
        }
      })
    },

    async getDetail () {
      const res = await this.$u.api.adminCallbackDetail(this.id)
      for (let key in this.form) {
        this.form[key] = res[key]
      }
      console.log(this.form)
      this.fileList = res.files.map(i => ({
        url: i.url,
        response: i
      }))
    }
  },
  onLoad(option) {
    this.form.schedule_list_id = option.schedule_list_id;
    this.id = option.id;
    this.type = option.id ? 'edit' : 'add';
    if (this.type === 'edit') {
      this.getDetail()
    }
  },
  onReady() {
    this.load();
    this.$refs.uForm.setRules(this.rules);
  },
}
</script>

<style lang="scss">
.container {
  border-radius: 10rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(219, 218, 218, 0.5);
  margin: 20rpx;
  padding: 20rpx;
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(244, 245, 246);
  border: 2rpx #108cff solid;
  border-radius: 10rpx;
  box-sizing: content-box;
  filter: drop-shadow(0 0 4rpx #0fc7ff) drop-shadow(0 0 6rpx #00eaff);
}
.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

</style>
