<template>
  <view style="height: 100%">
    <custom-nav-bar position="fixed" color="black" :left-text="options.name" left-arrow />

    <!-- 问诊记录 -->
    <view class="inquiry">
      <view class="inquiry-bg">
        <view class="flex flex-v-center view inquiry-view-bg">
          <image class="inquiry-icon" :src="inquiriesObj.avatar"></image>
          <text class="inquiry-title">{{ inquiriesObj.patientName }}</text>
          <block v-for="(e, i) in getStatusList" :key="i">
            <view v-if="e.value === inquiriesObj.status + ''" :class="'label-right ' + ('hint-' + e.colorType)">
              {{ e.label }}
            </view>
          </block>
        </view>
        <view class="inquiry-conent">{{ inquiriesObj.inquiriesDesc }}</view>
        <view class="inquiry-image">
          <image class="image" :src="item" v-for="(item, index) in inquiriesObj.inquiriesImages" :key="index"></image>
        </view>
        <view class="inquiry-label">
          <block v-for="(e, i) in getTypeList" :key="i">
            <text v-if="e.value === inquiriesObj.type + ''" class="daily-log">{{ e.label }}</text>
          </block>
          <text class="time">{{ toods.getDateTime(inquiriesObj.createTime) }}</text>
        </view>

        <view class="slot"></view>

        <view class="title flex">
          <text class="title-name">家医回复</text>
        </view>

        <!-- 待回复状态 -->
        <view v-if="state === 1">
          <view class="inquiry-describe">
            <view>描述</view>
            <textarea class="textarea" name="" id="" @input="headleInput" data-name="describe" :value="describe"
              placeholder="请输入"></textarea>
          </view>

          <view class="inquiry-describe">
            <view class="label">快捷标签</view>
            <view class="inquiry-flex">
              <text @tap="clickDescribe" :data-item="item" class="quick-label" v-for="(item, index) in List"
                :key="index">{{ item }}</text>
            </view>
          </view>

          <view class="form-image">
            <van-uploader @after-read="afterRead" :file-list="fileList" :deletable="true" max-count="9"
              @delete="imageDelete">
              <image class="camera" src="/static/images/icon9.png"></image>
            </van-uploader>
          </view>
          <view class="cell-slot">附件不超过9个</view>

          <view class="inquiry-buttom">
            <button @tap="replyMessage" class="buttom">回复信息</button>
          </view>
        </view>

        <!-- 已回复 -->
        <view v-if="state === 2">
          <view class="flex flex-v-center view">
            <image class="inquiry-icon" :src="inquiriesObj.doctorPhoto"></image>
            <text class="inquiry-title">{{ inquiriesObj.doctorName }}</text>
          </view>
          <view class="inquiry-conent">{{ inquiriesObj.replyContent }}</view>
          <view class="inquiry-image">
            <image class="image" :src="item" v-for="(item, index) in inquiriesObj.replyImages" :key="index"></image>
          </view>
          <view class="inquiry-label">
            <text class="time">{{ toods.getDateTime(inquiriesObj.replyTime) }}</text>
          </view>
        </view>
      </view>
    </view>

    <van-dialog use-slot :show="isEvaluate" confirm-button-color="#0090FC" show-cancel-button @close="onClose"
      @confirm="healedOrder">
      <view class="dialog">
        <view>信息回复后将无法修改，确认提交吗？</view>
      </view>
    </van-dialog>
  </view>
</template>
<!-- <script module="toods" lang="wxs" src="@/wxs/util.wxs"></script> -->
<script>
  // const app = getApp();
  // const { publicApi } = app.globalData.api;
  import * as publicApi from '@/api/publicApi';
  const List = ['后台配置', '后台配置本', '后台配置的文本', '信息回复后，线上看房东刷卡独领风骚发'];
  export default {
    components: {},
    data() {
      return {
        options: {
          name: ''
        },

        isEvaluate: false,
        List: List,

        // 上传图片所需
        appealEnclosure: [],

        fileList: [],
        describe: '',
        state: 2,

        inquiriesObj: {
          avatar: '',
          patientName: '',
          status: '',
          inquiriesDesc: '',
          inquiriesImages: [],
          type: '',
          doctorPhoto: '',
          doctorName: '',
          replyContent: '',
          replyImages: []
        },

        getTypeList: [],
        getStatusList: [],
        name: '',
        i: '',

        e: {
          value: '',
          colorType: '',
          label: ''
        }
      };
    },
    onLoad(options) {
      this.setData({
        options
      });
      this.inquiriesOnlineGetApi();
      this.getDictDataApi1();
      this.getDictDataApi2();
    },
    methods: {
      async inquiriesOnlineGetApi() {
        const {
          data = {}
        } = await publicApi.inquiriesOnlineGetApi({
          id: this.options.id
        });
        if (Object.keys(data).length) {
          this.setData({
            inquiriesObj: data
          });
        }
      },

      async getDictDataApi1() {
        const {
          data: {
            list = []
          }
        } = await publicApi.getDictDataApi({
          dictType: 'people_inquiries_online_type'
        });
        if (list.length) {
          this.setData({
            getTypeList: list
          });
        }
      },

      async getDictDataApi2() {
        const {
          data: {
            list = []
          }
        } = await publicApi.getDictDataApi({
          dictType: 'people_inquiries_online_status'
        });
        if (list.length) {
          this.setData({
            getStatusList: list
          });
        }
      },

      // 清楚对应的image图片
      imageDelete(event) {
        const {
          index
        } = event.detail;
        const Image = this.fileList;
        Image.splice(index, 1);
        this.setData({
          fileList: Image
        });
      },

      //  上传图片
      async afterRead(event) {
        const {
          file
        } = event.detail;
        const res = await getApp().globalData.upload({
          file
        });
        if (res.code !== 0) {
          uni.showToast({
            title: '上传图片失败',
            icon: 'none'
          });
          return false;
        }
        const {
          fileList
        } = this;
        const {
          appealEnclosure
        } = this;
        const url = res.data;
        fileList.push({
          url
        });
        appealEnclosure.push(url);
        this.setData({
          fileList,
          appealEnclosure
        });
      },

      // 提示确认按钮
      healedOrder(event) {
        const {
          appealEnclosure,
          describe
        } = this;
        if (describe === '') {
          let message = null;
          if (describe === '') {
            message = '请输入描述';
          }
          uni.showToast({
            title: message,
            icon: 'none'
          });
          return false;
        }
        const params = {
          appealEnclosure,
          describe
        };
        console.log(params);
        uni.showToast({
          title: '回复成功',
          icon: 'none'
        });
      },

      // 取消按钮
      onClose() {
        this.setData({
          isEvaluate: false
        });
      },

      // 点击快捷标签
      clickDescribe(event) {
        const {
          item
        } = event.currentTarget.dataset;
        const value = this.describe + item;
        this.setData({
          ...this,
          describe: value
        });
      },

      // input 输入框
      headleInput(event) {
        const {
          value
        } = event.detail;
        const {
          name
        } = event.currentTarget.dataset;
        this.setData({
          ...this,
          [name]: value
        });
      },

      // 立即回复
      replyMessage() {
        this.setData({
          isEvaluate: !this.isEvaluate
        });
      }
    }
  };
</script>
<style lang="less">
  .hint-success {
    background: #00b477;
  }

  .hint-warning,
  .hint-default {
    background: linear-gradient(270deg, #f38a36 0%, #ff9d4f 100%);
  }

  .hint-danger {
    background: linear-gradient(135deg, #ff3e3e 0%, #f20505 100%);
  }

  .inquiry {
    padding: 20rpx 15rpx;

    .inquiry-bg {
      position: relative;
      border-radius: 16rpx 16rpx 0px 0px;
      padding: 25rpx 12rpx;

      .view {
        padding-bottom: 25rpx;
        padding-top: 12rpx;

        .inquiry-icon {
          width: 68rpx;
          height: 68rpx;
          border-radius: 40px;
          background-color: red;
        }

        .inquiry-title {
          font-size: 32rpx;
          font-weight: 500;
          color: #333333;
          line-height: 32rpx;
          margin-left: 22rpx;
        }
      }

      .inquiry-view-bg {
        background: linear-gradient(182deg, #fef6e9 0%, #ffffff 100%, #ffffff 100%);
      }

      .label-right {
        position: absolute;
        right: 0;
        top: 24rpx;
        width: 130rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        color: #fff;
        // background: #00B477;
        border-radius: 0px 150rpx 0px 500rpx;
        font-size: 24rpx;
        font-weight: 400;
        color: #ffffff;
      }

      .inquiry-conent {
        font-size: 30rpx;
        font-weight: 400;
        color: #333333;
        line-height: 50rpx;
        margin-bottom: 22rpx;
      }

      .inquiry-image {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10rpx;
        margin-bottom: 24rpx;

        .image {
          width: 218rpx;
          height: 200rpx;
          border-radius: 8rpx;
        }
      }

      .inquiry-label {
        .daily-log {
          padding: 7rpx 32rpx;
          background: #fe3b53;
          box-shadow: 2px 2px 2px 0px rgba(254, 61, 85, 0.1);
          border-radius: 5000rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 24rpx;
          margin-right: 16rpx;
        }

        .time {
          font-size: 26rpx;
          font-weight: 400;
          color: #999999;
          line-height: 26rpx;
        }
      }

      .slot {
        height: 1px;
        background-color: #efefef;
        margin: 40rpx 0;
      }

      .title {
        font-size: 36rpx;
        font-weight: 500;
        color: #000000;
        line-height: 36rpx;
        margin-bottom: 60rpx;

        .title-name {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            left: -6rpx;
            bottom: 0;
            z-index: -1;
            width: 160rpx;
            height: 10rpx;
            background: #ffe5e9;
            border-radius: 2rpx;
          }
        }
      }

      .inquiry-describe {
        margin-bottom: 21rpx;

        view {
          font-size: 28rpx;
          font-weight: 400;
          color: #333333;
          line-height: 34rpx;
          margin-bottom: 21rpx;
        }

        .textarea {
          height: 200rpx;
          font-size: 32rpx;
          font-weight: 400;
          color: #333;
          line-height: 32rpx;
        }

        .label {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          line-height: 28rpx;
        }

        .inquiry-flex {
          display: flex;
          flex-wrap: wrap;
        }

        .quick-label {
          padding: 17rpx 23rpx;
          background: #f7faff;
          border-radius: 8rpx;
          border: 1px solid #c5dff4;
          font-size: 26rpx;
          font-weight: 400;
          color: #333333;
          line-height: 28rpx;
          margin: 0rpx 10rpx 10rpx 0rpx;
        }
      }

      .form-image {
        margin-top: 70rpx;
      }

      .form-image>view {
        width: 31.3%;
        position: relative;
        margin-right: 13.5rpx;
      }

      .form-image>view>image:nth-child(1) {
        width: 100%;
        height: 200rpx;
        border-radius: 10rpx;
      }

      .form-image>view>image:nth-child(2) {
        position: absolute;
        top: -0rpx;
        right: 0rpx;
        width: 40rpx;
        height: 40rpx;
      }

      .camera {
        width: 160rpx;
        height: 160rpx;
      }

      .cell-slot {
        margin-top: 24rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
        line-height: 26rpx;
      }

      .inquiry-buttom {
        margin-top: 92rpx;

        .buttom {
          padding: 24rpx 0;
          background: #fe3b53;
          border-radius: 8rpx;
          font-size: 32rpx;
          font-weight: 500;
          color: #ffffff;
          line-height: 32rpx;
        }
      }
    }
  }

  .dialog {
    text-align: center;
    padding: 66rpx 86rpx 76rpx 86rpx;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 60rpx;
    color: #333333;
  }
</style>