<template>
  <view class="formManagementWechat">
    <view class="page_tab">
      <view class="page_tab_bar active">
        <view class="tab_dept">快捷接单</view>
      </view>
    </view>
    <view v-if="zxzData.length == 0" class="zwsj">
      <image class="zwsj-img" mode="widthFix" src="../../static/img/zanwushuju.png"></image>
      <view class="zwsj-txt">暂无数据</view>
    </view>
    <view v-if="zxzData.length" class="page_items">
      <scroll-view class="page_items_scroll" scroll-y>
        <checkbox-group @change="checkboxChange">
          <label class="goWorkSelect-item relative" v-for="item in zxzData" :key="item.id">
            <checkbox :value="item.id" :checked="item.checked" />
            <view>{{ item.name }}</view>
          </label>
        </checkbox-group>
      </scroll-view>
    </view>
    <!-- 底部 -->
    <view class="foot_btn2 footerPadding">
      <view class="btn2" @click="confirm">确认接单</view>
      <view class="btn2" @click="goBack">返回</view>
    </view>
  </view>
</template>
<script>
  import {
    get,
    post,
    webHandle
  } from "../../http/http.js";
  export default {
    data() {
      return {
        hosId: uni.getStorageSync("userData").user.currentHospital.id,
        options: {},
        //列表数据
        zxzData: [],
      };
    },
    methods: {
      // 确认接单
      confirm(){
        let ids = this.zxzData.filter(v => v.checked).map(v => v.id).toString();
        if(!ids){
          uni.showToast({
            icon: "none",
            title: "请至少选择一项！",
          });
          return;
        }
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        post("/workerOrder/getReceiveOrderIds", {ids}).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            uni.showModal({
              title: "提示",
              content: `您本次接单包括${res.names.join('、')}，一共含有${res.data.length}个工单，是否确认接单？`,
              success: function(result) {
                if (result.confirm) {
                  uni.showLoading({
                    title: "加载中",
                    mask: true,
                  });
                  post("/workerOrder/receiveOrders", {ids: res.data.toString()}).then((result) => {
                    uni.hideLoading();
                    if (result.status == 200) {
                      uni.showModal({
                        title: "提示",
                        content: `本次接单包括${res.names.join('、')}，${res.data.length}个工单已接单完成`,
                        showCancel: false,
                        success: function(res) {
                          if (res.confirm) {
                            console.log("用户点击确定");
                            uni.navigateTo({
                              url: "../receiptpage/receiptpage",
                            });
                          } else if (res.cancel) {
                            console.log("用户点击取消");
                          }
                        },
                      });
                    } else {
                      uni.showToast({
                        icon: "none",
                        title: result.msg || "接口获取数据失败！",
                      });
                    }
                  });
                } else if (result.cancel) {
                  console.log("用户点击取消");
                }
              },
            });
          } else {
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        });
      },
      // 选择多选框
      checkboxChange: function(e) {
        let items = this.zxzData,
          values = e.detail.value;
        for (let i = 0, lenI = items.length; i < lenI; ++i) {
          const item = items[i]
          if (values.includes(item.id)) {
            this.$set(item, 'checked', true)
          } else {
            this.$set(item, 'checked', false)
          }
        }
      },
      // 返回
      goBack() {
        uni.navigateBack();
      },
      //获取快捷接单类型
      getReceiveRuleType() {
        let postData = {
            "type": "list",
            "key": "receiveRuleType"
        };
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        // 请求列表数据
        post("/common/common/getDictionary", postData).then((res) => {
            let type = res.find(v => v.value == 1);
            this.getList(type);
        });
      },
      //表单列表获取
      getList(type) {
        let postData = {
          "idx": 0,
          "sum": 9999,
          "receiveOrderRule": {
            "hosId": this.hosId,
            type,
          }
        };
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        // 请求列表数据
        post("/simple/data/fetchDataList/receiveOrderRule", postData).then((res) => {
          uni.hideLoading();
          if (res.status == 200) {
            res.list = res.list || [];
            this.zxzData = res.list.map(v => ({
              id: v.id,
              name: v.title,
              checked: false,
            }))
          } else {
            this.zxzData = [];
            uni.showToast({
              icon: "none",
              title: res.msg || "接口获取数据失败！",
            });
          }
        });
      },
      // 阻止浏览器滑动
      stop(e) {
        e.preventDefault();
      },
    },
    onLoad(options) {
      console.log(options);
      this.options = options;
      this.getReceiveRuleType();
      // #ifdef APP-PLUS
      webHandle("no", "app");
      // #endif
      // #ifdef H5
      webHandle("no", "wx");
      // #endif
    },
    onShow() {
      // #ifdef H5
      document.body.addEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
    onHide() {
      // #ifdef H5
      document.body.removeEventListener("touchmove", this.stop, {
        passive: false,
      });
      // #endif
    },
  };
</script>
<style lang="less" scoped>
  .formManagementWechat {
    width: 100%;
    height: 100%;
    position: relative;

    .foot_btn2 {
      position: fixed;
      bottom: 0;
      right: 20rpx;
      left: 20rpx;
      line-height: 66rpx;
      height: 100rpx;
      border-top: 2rpx solid #e5e9ed;
      background: #f9fafb;
      display: flex;
      justify-content: space-between;

      .btn2 {
        height: 66rpx;
        width: 100%;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }

      .btn3 {
        height: 66rpx;
        width: 48%;
        margin: 0 1%;
        background-image: linear-gradient(to right, #72c172, #3bb197);
        color: #fff;
        border-radius: 8rpx;
        font-size: 32rpx;
        margin-top: 16rpx;
        text-align: center;
      }
    }

    .icon_transport {
      color: #49b856;
      font-size: 50rpx;

      &.colorRed {
        color: red;
        font-size: 40rpx;
      }
    }

    .page_tab {
      width: 100%;
      height: 96rpx;
      display: flex;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;

      .page_tab_bar {
        flex: 1;
        font-size: 36rpx;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;

        &:after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          height: 2rpx;
          width: 100%;
          background-color: transparent;
        }

        .tab_dept {
          position: relative;

          .changeDept {
            white-space: nowrap;
            margin: 0;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(105%, -50%);
            padding: 0 0.5em;
            line-height: 2;
          }
        }

        &.active {
          color: #49b856;

          &:after {
            background-color: #49b856;
          }
        }
      }
    }

    .zwsj {
      position: absolute;
      left: 50%;
      top: 180rpx;
      transform: translateX(-50%);

      .zwsj-img {
        width: 560rpx;
      }

      .zwsj-txt {
        font-size: 36rpx;
        font-weight: 700;
        margin-top: 20rpx;
        text-align: center;
      }
    }

    .page_items {
      height: calc(100vh - 284rpx);
      padding: 0 20rpx;
      padding-top: 96rpx;

      .page_items_scroll {
        height: 100%;
        .goWorkSelect-item {
          height: 52rpx;
          display: flex;
          align-items: center;
          border-bottom: 2rpx solid #e5e9ed;
          padding: 16rpx;

          &.relative {
            position: relative;

            .picker {
              position: absolute;
              width: 100%;
              padding-left: 64rpx;
            }
          }

          button {
            font-size: 32rpx;
            height: 52rpx;
            line-height: 52rpx;
            margin: 0;
            margin-left: 16rpx;
            color: rgb(7, 134, 60);
            font-weight: 700;
          }
        }
      }
    }
  }
</style>