<template>
  <zj-page-layout :hasFooter="true">
    <view class="all-container">
      <view class="address-container card" @tap="chooseAddress">
        <view class="common-title"><text>*</text>客户信息</view>
        <view class="main">
          <view class="left">
            <view class="icon"><text class="iconfont icon-dingwei1"></text></view>
            <view class="nodata" v-if="!addressInfo">选择联系人地址</view>
            <view class="hasdata" v-else>
              <view class="name">{{addressInfo.name}}<text>{{addressInfo.phone}}</text></view>
              <view class="address ellipsis-2">{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.area}}{{addressInfo.street}}{{addressInfo.address}}{{addressInfo.houseNo}}</view>
            </view>
          </view>
          <text class="right iconfont icon-jinru"></text>
        </view>
      </view>

      <view class="service-container card">
        <view class="common-title">服务信息</view>
        <view class="item">
          <view class="label"><text>*</text>工单类型</view>
          <view class="value">{{typeName}}</view>
        </view>
        <view class="item" v-if="isWorkerUser">
          <view class="label"><text>*</text>所属网点</view>
          <view class="picker" @tap="isShowWebsitDialog = true">
            <text class="value" v-if="websit">{{websit.name}}</text>
            <text class="placeholder" v-else>请选择</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
        <view class="item">
          <view class="label"><text>*</text>预约上门时间</view>
          <view class="picker" @tap="isShowDatePicker = true">
            <text class="value" v-if="date">{{date}}</text>
            <text class="placeholder" v-else>请选择</text>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>
      </view>

      <view class="product-container card">
        <view class="title">
          <view class="common-title"><text>*</text>产品信息</view>
          <view class="right" @tap="toChooseProduct"><u-icon name="plus-circle" color="#3D8FFD" size="18"></u-icon>添加</view>
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in productList" :key="index">
            <image :src="item.imgUrl" mode="aspectFill"></image>
            <view class="main">
              <view class="name">{{item.smallName}}</view>
              <view class="tags">
                <view class="it">{{item.brandName}}</view>
              </view>
              <u-number-box min="1" v-model="item.num">
                <view slot="minus" class="ctrl">
                  <u-icon name="minus" color="#FFFFFF" size="10"></u-icon>
                </view>
                <text slot="input" class="input">{{item.num}}</text>
                <view slot="plus" class="ctrl">
                  <u-icon name="plus" color="#FFFFFF" size="10"></u-icon>
                </view>
              </u-number-box>
            </view>
            <view class="del" @tap="deleteProduct(item, index)"><text class="iconfont icon-shanchu"></text></view>
          </view>
        </view>
      </view>

      <view class="remark-container card">
        <view class="common-title" v-if="typeName.indexOf('维修') >= 0"><text>*</text>故障描述</view>
        <view class="common-title" v-else>备注信息</view>
        <u--textarea v-model="remark" placeholder="请输入内容" border="none" autoHeight></u--textarea>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
      	<u-button text="提交服务单" type="primary" @click="submitData"></u-button>
      </view>
    </template>

    <zjDialogPicker
      ref="websitDialog"
      :isShow="isShowWebsitDialog"
      :multiple="false"
      :styleType="2"
      :title="'所属网点'"
      :list="websitList"
      :keyName="'name'"
      @cancel="isShowWebsitDialog = false"
      @confirm="confirmWebsitDialog">
    </zjDialogPicker>

    <u-datetime-picker
      :show="isShowDatePicker"
      v-model="datePickerValue"
      mode="date"
      :formatter="formatter"
      @cancel="isShowDatePicker = false"
      @close="isShowDatePicker = false"
      @confirm="confirmDate"
      :minDate="minDate"
    ></u-datetime-picker>
  </zj-page-layout>
</template>

<script>
import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";

export default {
  components: {
    zjDialogPicker
  },

  data() {
    return {
      typeId: '',
      typeName: '',
      addressInfo: null,
      userInfo: {},
      websit: null,
      websitList: [],
      isShowWebsitDialog: false,
      date: '',
      datePickerValue: Number(new Date()),
      minDate: Number(new Date()),
      isShowDatePicker: false,

      productList: [],

      remark: '',
    }
  },

  computed:{
    isWorkerUser() { // 是否师傅
      return this.userInfo && this.userInfo.type === 'WORKER';
    },
  },

  async onLoad({typeId, typeName}) {
    this.typeId = typeId;
    this.typeName = typeName;
    this.getWebsitList();

    this.userInfo = await this.$getUserInfo();

    // 接收地址信息
    this.crossPage.$on('chooseAddress', result => {
      this.addressInfo = result;
    })
    // 接收产品分类
    this.crossPage.$on('chooseClassify', result => {
      let index = this.productList.findIndex((item) => item.smallId == result.smallId && item.brandId == result.brandId);
      if (index !== -1) {
        this.productList.splice(index, 1, result);
      } else {
        this.productList.push(result);
      }
    })
  },

  onUnload() {
    this.crossPage.$off('chooseAddress');
    this.crossPage.$off('chooseClassify');
  },

  methods: {

    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },

    // 去选择地址
    chooseAddress() {
      this.$navToPage({
        url: '/packageMine/pages/address/list?isChoose=' + true
      })
    },

    getWebsitList() {
      this.$api.get('/user/apply/websit')
      .then(res => {
        this.websitList = res.data;
      })
    },

    confirmWebsitDialog(e) {
      this.websit = this.websitList[e[0]];
      this.isShowWebsitDialog = false;
    },

    toChooseProduct() {
      this.$navToPage({
        url: '/packageWorkorder/pages/create/classify'
      })
    },

    deleteProduct(item, index) {
      this.$modal({
        content: `确定删除${item.smallName}吗？`
      }).then(() => {
        this.productList.splice(index, 1);
      }).catch(() => {})
    },

    confirmDate(e) {
      this.isShowDatePicker = false;
      let time = new Date(e.value);
      let y = time.getFullYear();
      let m = (time.getMonth()+1) < 10 ? '0' + (time.getMonth()+1) : time.getMonth()+1;
      let d = (time.getDate()) < 10 ? '0' + (time.getDate()) : time.getDate();
      let hh = (time.getHours()) < 10 ? '0' + (time.getHours()) : time.getHours();
      let mm = (time.getMinutes()) < 10 ? '0' + (time.getMinutes()) : time.getMinutes();
      let ss = (time.getSeconds()) < 10 ? '0' + (time.getSeconds()) : time.getSeconds();
      this.date = `${y}-${m}-${d}`;
    },

    submitData() {
      if(!this.addressInfo) return this.$toast('请选择客户信息');
      if(!this.websit && this.isWorkerUser) return this.$toast('请选择所属网点');
      if(!this.date) return this.$toast('请选择预约上门时间');
      if(this.productList.length < 1) return this.$toast('请添加产品信息');
      if(this.typeName.indexOf('维修') >= 0 && !this.remark) return this.$toast('请填写故障描述');

      this.$api.postJson('/pg/order/base/save', {
        orderSmallType: this.typeId,
        userAddressId: this.addressInfo.userAddressId,
        websitId: this.websit ? this.websit.websitId : '',
        appointmentTime: this.date + ' 00:00:00',
        orderProducts: this.productList,
        remark: this.remark,
      }).then(res => {
        this.$successToast();
        if(this.isWorkerUser) {
          this.$navToPage({
            url: `/packageWorkorder/pages/orderList`
          }, 'redirectTo')
        }else {
          this.$navToPage({
            url: `/packageWorkorder/pages/userWorkorderList`
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.card {
  @include zj-card;
  margin-top: 20rpx;
  padding: 30rpx;
}
.common-title {
  font-size: 32rpx;
  font-weight: 500;
  text {
    color: $error-color;
    font-weight: normal;
  }
}
.all-container {
  padding: 0 20rpx;
}
.address-container {
  .main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
  }
  .right {
    font-size: 32rpx;
    color: $sec-font;
    flex-shrink: 0;
  }
  .left {
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    .icon {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
      background: $theme-color;
      display: flex;
      flex-shrink: 0;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      .iconfont {
        font-size: 36rpx;
        color: #ffffff;
      }
    }
    .nodata {
      font-size: 28rpx;
      color: #999999;
    }
    .hasdata {
      .name {
        font-size: 32rpx;
        color: #333333;
        text {
          color: #999999;
          font-size: 28rpx;
          margin-left: 16rpx;
        }
      }
      .address {
        font-size: 28rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 10rpx;
      }
    }
  }
}
.service-container {
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50rpx;
    margin-top: 30rpx;
    .label {
      margin-right: 30rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
  }
}
.product-container {
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      color: $theme-color;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      ::v-deep .u-icon {
        margin-right: 8rpx;
      }
    }
  }
  .list {
    .item {
      padding: 30rpx 0;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      &:last-child {
        border: none;
      }
      image {
        width: 100rpx;
        height: 100rpx;
      }
      .main {
        flex: 1;
        margin-left: 20rpx;
        margin-right: 20rpx;
        .name {
          font-size: 28rpx;
          font-weight: 500;
          line-height: 36rpx;
        }
        .tags {
          display: flex;
          margin-top: 12rpx;
          margin-bottom: 16rpx;
          .it {
            font-size: 24rpx;
            color: $theme-color;
            background: rgba($color: $theme-color, $alpha: .3);
            padding: 8rpx 12rpx;
            border-radius: 8rpx;
          }
        }
        .input {
          width: 30rpx;
          text-align: center;
          padding: 0 10px;
        }
        .ctrl {
          width: 36rpx;
          height: 36rpx;
          background-color: $theme-color;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .del {
        text {
          font-size: 36rpx;
          color: $sec-font;
        }
      }
    }
  }
}
.remark-container {
  ::v-deep .u-textarea {
    margin-top: 20rpx;
    padding: 20rpx 20rpx;
    min-height: 200rpx;
    background: #f5f5f5;
  }
}
</style>
