<template>
  <view class="container">
    <view class="containerBody">
      <VNavigationBar background-color="rgba(0,0,0,0)" title="新建工单" title-color="#333"></VNavigationBar>
      <view class="body">
        <view class="card phone">
          <view class="phoneHeader">
            <view class="title">查找手机号</view>
            <view class="desc">根据手机号查找/建立客户信息</view>
          </view>
          <view class="phoneBody">
            <view class="searchBox">
              <input v-model="phone" placeholder="请输入手机号码" type="tel">
            </view>
            <view class="btn">
              <image class="btnIcon" mode="aspectFit" src="/pages-order/static/search.png"></image>
              确认查找
            </view>
          </view>
        </view>

        <view :class="{ 'none': !carList || carList.length === 0 }" class="card cardInfo carCard">
          <template v-if="!carList || carList.length === 0">
            <image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/carNoneIcon.png"></image>
            <view class="btn">
              <image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
              <text @click="editCarInfo()">添加车辆信息</text>
            </view>
          </template>
          <template v-else>
            <view class="carTitle">车辆信息</view>
            <view class="carListTab">
              <view v-for="(item, index) in carList" :key="index" :class="{'active': activeCarIndex === index}"
                    class="carTabItem" @click="() => activeCarIndex = index">
                <image :src="item.image" class="carImage" mode="aspectFit"></image>
                <text>{{ item.licenseNumber }}</text>
              </view>
            </view>
            <view class="carDetail">
              <view class="carHeader">
                <image :src="carList[activeCarIndex].image" class="carImage" mode="aspectFill"></image>
                <view class="carHeaderRight">
                  <text class="carNumber">{{ carList[activeCarIndex].licenseNumber }}</text>
                  <text class="carType">{{ carList[activeCarIndex].carCategory }}</text>
                </view>
              </view>
              <view class="carBody">
                <view style="display: flex;align-items: center">
                  <view class="infoItem" style="flex: 1">
                    <view class="label">车架号</view>
                    <view class="value">{{ carList[activeCarIndex].cjNo }}</view>
                  </view>
                  <view class="infoItem" style="flex: 1">
                    <view class="label">发动机号</view>
                    <view class="value">{{ carList[activeCarIndex].fdjNo }}</view>
                  </view>
                </view>
                <view style="display: flex;align-items: center">
                  <view class="infoItem" style="flex: 1">
                    <view class="label">年检时间</view>
                    <view class="value">{{ carList[activeCarIndex].njDate }}</view>
                  </view>
                  <view class="infoItem" style="flex: 1">
                    <view class="label">保险时间</view>
                    <view class="value">{{ carList[activeCarIndex].bxDate }}</view>
                  </view>
                </view>
                <view class="infoItem">
                  <view class="label">注册日期</view>
                  <view class="value">{{ carList[activeCarIndex].zcrqDate }}</view>
                </view>
              </view>
              <view class="carFoot">
                <image mode="aspectFit" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"></image>
                <text @click="editCarInfo(activeCarIndex)">修改信息</text>
              </view>
            </view>
          </template>
        </view>

        <view :class="{ 'none': !userInfo }" class="card cardInfo userCard">
          <template v-if="!userInfo">
            <image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/userNone.png"></image>
            <view class="btn">
              <image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
              <text @click="editUserInfo()">添加客户信息</text>
            </view>
          </template>
          <template v-else>
            <view class="userTitle">客户信息</view>
            <view class="userContainer">
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">姓名</text>
                  <text class="value">{{ userInfo.name }}</text>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">性别</text>
                  <text class="value">{{ userInfo.sex === '1' ? '女' : '男' }}</text>
                </view>
              </view>
              <view style="display: flex;align-items: center">
                <view class="infoItem" style="flex: 1">
                  <text class="label">联系方式</text>
                  <text class="value">{{ userInfo.phone }}</text>
                </view>
                <view class="infoItem" style="flex: 1">
                  <text class="label">出生年月</text>
                  <text class="value">{{ userInfo.birthday }}</text>
                </view>
              </view>
              <view class="infoItem">
                <text class="label">联系地址</text>
                <text class="value">
                  {{ userInfo.provinceName }} {{ userInfo.cityName }} {{ userInfo.areaName }} {{ userInfo.address }}
                </text>
              </view>
            </view>
            <view class="userFoot">
              <image mode="aspectFit" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"></image>
              <text @click="editUserInfo(userInfo)">修改信息</text>
            </view>
          </template>
        </view>
        <view :class="{ 'none': !selectedProj || selectedProj.length === 0 }" class="card cardInfo projCard">
          <template v-if="!selectedProj || selectedProj.length === 0">
            <image class="cardNoneIcon" mode="widthFix" src="/pages-order/static/projectNone.png"></image>
            <view class="btn">
              <image mode="aspectFit" src="/pages-order/static/addIcon.png" style="width: 28rpx;height: 28rpx"></image>
              <text @click="addProj()">添加维修项目</text>
            </view>
          </template>
          <template v-else>
            <view class="projTitle">维修项目</view>
            <view class="projList">
              <view v-for="item in selectedProj" :key="item.id" class="projItem">
                {{ item.name }}
              </view>
            </view>
            <view class="projFoot">
              <image mode="aspectFit" src="/static/icons/edit.png" style="width: 28rpx;height: 28rpx"></image>
              <text @click="addProj(selectedProj)">修改信息</text>
            </view>
          </template>
        </view>

        <project-picker ref="proj" @confirm="projConfirm"></project-picker>
      </view>

      <view class="footer">
        <view class="btn" @click="submit">创建工单</view>
      </view>
    </view>
  </view>
</template>

<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
import ProjectPicker from "@/components/projectPicker.vue";
import {bus} from "@/utils/eventBus";

export default {
  components: {
    ProjectPicker,
    VNavigationBar,
  },
  data() {
    return {
      phone: '',
      carList: [
        {
          licenseNumber: '川A 184AO1',
          carCategory: '一汽奥迪 2024款 A6L',
          cjNo: '124105112425',
          fdjNo: '124109581905',
          njDate: '2024年',
          bxDate: '2024年',
          zcrqDate: '2023-10-20',
          image: ''
        },
        {
          licenseNumber: '川A 34225A',
          carCategory: '一汽奥迪 2024款 A6L',
          cjNo: '124105112425',
          fdjNo: '124109581905',
          njDate: '2024年',
          bxDate: '2024年',
          zcrqDate: '2023-10-20',
          image: ''
        },
        {
          licenseNumber: '川A 34225A',
          carCategory: '一汽奥迪 2024款 A6L',
          cjNo: '124105112425',
          fdjNo: '124109581905',
          njDate: '2024年',
          bxDate: '2024年',
          zcrqDate: '2023-10-20',
          image: ''
        }
      ],
      activeCarIndex: 0,
      userInfo: null,
      selectedProj: []
    }
  },
  onLoad(data) {
  },
  methods: {
    submit() {
      uni.showToast({
        title: '创建成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack();
      }, 600)
    },
    editCarInfo(index) {
      bus.$off('updateCarInfo')
      bus.$on('updateCarInfo', (carInfo) => {
        console.log('Car', carInfo)
        if (index) {
          this.carList[index] = carInfo
        } else {
          this.carList.push(carInfo)
        }
      })
      uni.navigateTo({
        url: `/pages/myCar/carDetail?car=${index >= 0 ? encodeURIComponent(JSON.stringify(this.carList[index])) : ''}`
      })
    },
    editUserInfo(userInfo) {
      bus.$off('updateUserInfo')
      bus.$on('updateUserInfo', (userInfo) => {
        console.log('userInfo', userInfo)
        this.userInfo = userInfo
      })
      uni.navigateTo({
        url: `/pages/userInfo/editUserInfo?userInfo=${userInfo ? encodeURIComponent(JSON.stringify(userInfo)) : ''}`
      })
    },
    addProj(projList = []) {
      this.$refs.proj.open(projList)
    },
    projConfirm(proj) {
      this.selectedProj = proj
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background-color: #F3F5F7;

  .containerBody {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #C1DEFF 0%, rgba(193, 222, 255, 0) 100%);
    background-size: 100% 500rpx;
    background-repeat: no-repeat;
  }

  .body {
    flex: 1;
    height: 0;
    overflow: auto;

    .card {
      background: #FFFFFF;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      margin: 20rpx 32rpx;
    }

    .phone {
      background: #0174F6;

      .phoneHeader {
        padding: 20rpx 30rpx;

        .title {
          font-weight: bold;
          font-size: 32rpx;
          color: #FFFFFF;
          margin-bottom: 10rpx;
        }

        .desc {
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .phoneBody {
        background: #FFFFFF;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 0 30rpx;

        .searchBox {
          padding: 40rpx 0;
          border-bottom: 1rpx solid #EEEEEE;
        }

        .btn {
          padding: 40rpx 0;

          display: flex;
          align-items: center;
          justify-content: center;
          column-gap: 10rpx;

          font-weight: 500;
          font-size: 32rpx;
          color: #0174F6;

          .btnIcon {
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }

    .cardInfo {
      &.none {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;

        .cardNoneIcon {
          width: 336rpx;
        }

        .btn {
          position: absolute;
          bottom: 40rpx;
          left: 50%;
          transform: translateX(-50%);

          display: flex;
          align-items: center;
          column-gap: 10rpx;

          font-weight: 500;
          font-size: 28rpx;
          color: #0174F6;
        }
      }
    }

    .projTitle, .userTitle, .carTitle {
      padding: 30rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
    }

    .carCard {
      .carListTab {
        display: flex;
        align-items: center;
        column-gap: 32rpx;
        padding: 0 26rpx 22rpx;

        .carTabItem {
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 10rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #333333;

          &.active {
            .carImage {
              border: 2rpx solid #0174F6;
            }

            color: #0174F6;
          }

          .carImage {
            width: 128rpx;
            height: 80rpx;
            background: #F2F2F7;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }
        }
      }

      .carDetail {
        background: linear-gradient(180deg, rgba(1, 116, 246, 0.15) 0%, rgba(255, 255, 255, 0) 100%) no-repeat;
        background-size: 100% 184rpx;
        padding: 30rpx 30rpx 0;

        .carHeader {
          border-radius: 8rpx 8rpx 8rpx 8rpx;

          display: flex;
          align-items: center;
          column-gap: 20rpx;

          padding-bottom: 30rpx;

          .carImage {
            width: 192rpx;
            height: 120rpx;
            background: #F2F2F7;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
          }

          .carHeaderRight {
            display: flex;
            flex-direction: column;
            row-gap: 20rpx;
            font-weight: bold;
            font-size: 32rpx;
            color: #333333;

            .carType {
              font-weight: 500;
              font-size: 28rpx;
              color: #858BA0;
            }
          }
        }

        .carBody {
          display: flex;
          flex-direction: column;
          row-gap: 30rpx;
          padding-top: 30rpx;
          border-top: 1rpx solid #DDDDDD;
        }

        .carFoot {

        }
      }
    }

    .projCard {
      .projList {
        padding: 0 30rpx;
        display: flex;
        gap: 20rpx;
        flex-wrap: wrap;

        .projItem {
          padding: 10rpx 16rpx;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          border: 2rpx solid #0174F6;
          font-weight: 500;
          font-size: 24rpx;
          color: #0174F6;
        }
      }
    }

    .userCard {
      .userContainer {
        display: flex;
        flex-direction: column;
        row-gap: 30rpx;
        margin: 0 30rpx;
      }
    }

    .infoItem {
      display: flex;
      flex-direction: column;

      .label {
        font-weight: 500;
        font-size: 28rpx;
        color: #858BA0;
      }

      .value {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
    }

    .projFoot, .userFoot, .carFoot {
      padding: 30rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: #0174F6;
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 6rpx;
    }
  }

  .footer {
    width: 750rpx;
    height: 136rpx;
    background: #FFFFFF;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    align-items: center;
    justify-content: center;

    .btn {
      width: 510rpx;
      height: 76rpx;
      background: #0174F6;
      border-radius: 38rpx 38rpx 38rpx 38rpx;

      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;

      display: flex;
      align-items: center;
      justify-content: center;

    }
  }

}
</style>
