<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="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="nurse_investigate">
          <u-radio-group v-model="form.nurse_investigate">
            <u-radio v-for="(item, index) in nurseInvestigates" :key="item.value" :name="item.value">
              {{ item.label }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <u-form-item label="是否在岗" prop="is_work">
          <u-switch v-model="form.is_work" :active-value="1" :inactive-value="0"></u-switch>
        </u-form-item>
        <u-form-item label="是否准时" prop="is_on_time">
          <u-switch v-model="form.is_on_time" :active-value="1" :inactive-value="0"></u-switch>
        </u-form-item>
        <u-form-item label="护理工具" prop="tools">
          <u-checkbox-group ref="tools" @change="e => checkboxChange(e,'tools')">
            <u-checkbox v-for="(item, index) in tools" :key="index" :name="item.name" v-model="item.checked">
              {{ item.name }}
            </u-checkbox>
            <u-checkbox :name="otherTool.name" v-model="otherTool.checked">
              <view style="display: flex;align-items: center;">
                <text style="word-break: keep-all;">其他</text>
                <u-input style="margin-left: 10rpx;" v-model="otherTool.name" @input="inputRefreshCheckbox('tools')"></u-input>
              </view>
            </u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="是否有工作服">
          <u-switch v-model="temp1" @change="clothesChange"></u-switch>
        </u-form-item>
        <u-form-item label="是否有工作证">
          <u-switch v-model="temp2" @change="cardChange"></u-switch>
        </u-form-item>
        <u-form-item label="服务内容" prop="serve">
          <u-checkbox-group ref="serve" @change="e => checkboxChange(e,'serve')">
            <u-checkbox v-for="(item, index) in serves" :key="index" :name="item.name" v-model="item.checked">
              {{ item.name }}
            </u-checkbox>
            <u-checkbox :name="otherServe.name" v-model="otherServe.checked">
              <view style="display: flex;align-items: center;">
                <text style="word-break: keep-all;">其他</text>
                <u-input style="margin-left: 10rpx;" v-model="otherServe.name" @input="inputRefreshCheckbox('serve')"></u-input>
              </view>
            </u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="其他需求" prop="other">
          <u-checkbox-group ref="other" @change="e => checkboxChange(e,'other')">
            <u-checkbox v-for="(item, index) in others" :key="index" :name="item.name" v-model="item.checked">
              {{ item.name }}
            </u-checkbox>
            <u-checkbox :name="otherOther.name" v-model="otherOther.checked">
              <view style="display: flex;align-items: center;">
                <text style="word-break: keep-all;">其他</text>
                <u-input style="margin-left: 10rpx;" v-model="otherOther.name" @input="inputRefreshCheckbox('other')"></u-input>
              </view>
            </u-checkbox>
          </u-checkbox-group>
        </u-form-item>
        <u-form-item label="回访图片">
          <u-upload ref="uUpload" :custom-btn="true" :action="action" :file-list="fileList"
                    :source-type="['camera']">
            <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="pageTo('/pages/sign/sign')">签名</u-button>

          </view>
        </u-form-item>
        <u-form-item label="调查人员签名">
          <view>
            <u-button type="primary" size="mini" :throttle-time="3000" @click="pageTo('/pages/sign/sign')">签名</u-button>

          </view>
        </u-form-item>
        <u-form-item label="所在位置">
          <view>
            <u-button type="primary" size="mini" :throttle-time="3000" @click="getLoaction">获取位置</u-button>
            <view>
              {{ `${(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>
  </view>
</template>

<script>
import QQMapWX from '@/libs/qqmap-wx-jssdk.js'
import { ROOTPATH } from "@/common/config"
export default {
  data() {
    return {
      temp1: false,
      temp2: false,
      action: `${ROOTPATH}/api/admin/upload-file`,
      fileList: [],
      id: "",
      type: "add",
      form: {
        customer_id: "",
        satisfy: 1,
        nurse_investigate: 1,
        is_work: 1,
        is_on_time: 1,
        tools: [],
        accessory: "",
        serve: "",
        other: "",
        tip: "",
        sign_image_id: "",
        remark: "",
        file_ids: [],
        lat: "",
        lng: "",
        address: ""
      },
      satisfies: [
        {
          label: "90分以上",
          value: 1
        },
        {
          label: "80-90分",
          value: 2
        },
        {
          label: "80分以下",
          value: 3
        },
      ],
      nurseInvestigates: [
        {
          label: "护理中回访",
          value: 1
        },
        {
          label: "日常回访",
          value: 2
        },
      ],
      tools: [
          {
            name: '护理包',
            checked: false
          },
          {
            name: '服务计划表',
            checked: false
          },
          {
            name: '血压器',
            checked: false
          },
          {
            name: '理发器',
            checked: false
          }
      ],
      otherTool: {
        name: undefined,
        checked: false
      },
      serves: [
        {
          name: '理发',
          checked: false
        },
        {
          name: '整理',
          checked: false
        },
        {
          name: '康复训练',
          checked: false
        },
        {
          name: '洗澡',
          checked: false
        },
        {
          name: '按摩',
          checked: false
        },
        {
          name: '个人卫生清洁',
          checked: false
        },
        {
          name: '协助指导',
          checked: false
        },
        {
          name: '生活照料',
          checked: false
        }
      ],
      otherServe: {
        name: undefined,
        checked: false
      },
      others: [
        {
          name: '陪诊',
          checked: false
        },
        {
          name: '康养',
          checked: false
        },
        {
          name: '陪护',
          checked: false
        }
      ],
      otherOther: {
        name: undefined,
        checked: false
      }
    };
  },
  methods: {
    pageTo (url) {
      uni.navigateTo({
        url
      })
    },
    clothesChange (e) {
      let arr = this.form.accessory.split('|').filter(i => i?.trim());
      if (e) {
        if (!arr.includes('工作服')) {
          arr.push('工作服');
        }
      } else {
        arr = arr.filter(i => i !== '工作服');
      }
      this.form.accessory = arr.reduce((pre, cur, index) => (pre + (index === 0 ? cur : `|${cur}`)),'')
    },
    cardChange (e) {
      let arr = this.form.accessory.split('|').filter(i => i?.trim());
      if (e) {
        if (!arr.includes('工作证')) {
          arr.push('工作证');
        }
      } else {
        arr = arr.filter(i => i !== '工作证');
      }
      this.form.accessory = arr.reduce((pre, cur, index) => (pre + (index === 0 ? cur : `|${cur}`)),'')
    },
    checkboxChange (e,key) {
      let arr = e.filter(i => i?.trim())
      this.form[key] = arr.reduce((pre, cur, index) => (pre + (index === 0 ? cur : `|${cur}`)),'')
    },
    inputRefreshCheckbox (refName) {
      this.$refs[refName].emitEvent()
    },
    load() {
      this.qqmapsdk = new QQMapWX({
        key: 'D5EBZ-C3BWP-HZIDG-VO6BE-P2MN5-ESFZO'
      });
    },
    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 () {
      console.log(this.form)
      return
      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.adminSaveCheck(this.form).then(res => {
        uni.showToast({
          icon: 'success',
          title: '保存成功',
        })
        setTimeout(() => {
          uni.navigateBack()
        },1500)
      })
    },

    async getDetail () {
      const res = await this.$u.api.adminCheckDetail(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.customer_id = option.customer_id;
    this.id = option.id;
    this.type = option.id ? 'edit' : 'add';
    if (this.type === 'edit') {
      this.getDetail()
    }
  },
  onReady() {
    this.load();
  },
}
</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>
