<template>
  <div class="DetailsCarWash">
    <a-modal
      class="DetailsCarWashModal"
      title="查看详情"
      :width="1000"
      :footer="null"
      :destroyOnClose="true"
      @cancel="isShow=false"
      v-model="isShow">
      <v-select v-show="false" ref="featuredServiceLabel" placeholder="请选择网点标签" code="STORE_LABEL"></v-select>
      <a-row :gutter="20">
        <a-col :span="12" class="item-cont">
          <p class="item-label">网点照片：</p>
          <p class="item-main">
            <img :src="carWashInfo.icon" width="100" height="100" class="wd-icon" />
          </p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">网点名称：</p>
          <p class="item-main">{{ carWashInfo.name || '-' }}</p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">地址：</p>
          <p class="item-main">{{ carWashInfo.addrProvinceName }} - {{ carWashInfo.addrCityName }} - {{ carWashInfo.addrDistrictName }}</p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">详细地址：</p>
          <p class="item-main">{{ carWashInfo.addrDetail || '-' }}</p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">设备ID：</p>
          <p class="item-main">
            <a-tag color="blue" v-if="carWashInfo.deviceVOList">{{ carWashInfo.deviceVOList[0].deviceNo }}</a-tag>
            <span v-else>-</span>
          </p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">网点标签：</p>
          <div class="item-main">
            <a-tag color="blue" v-for="(item, index) in labelList" :key="index">{{ item }}</a-tag>
          </div>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">经度：</p>
          <p class="item-main">{{ carWashInfo.lng || '-' }}</p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">纬度：</p>
          <p class="item-main">{{ carWashInfo.lat || '-' }}</p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">服务类型：</p>
          <p class="item-main">
            <a-tag color="blue" v-for="(item, index) in serviceType" :key="index">{{ item }}</a-tag>
          </p>
        </a-col>
        <a-col :span="12" class="item-cont">
          <p class="item-label">营业时间：</p>
          <p class="item-main">{{ carWashInfo.beginTime ? carWashInfo.beginTime.substr(0,5) : null }} - {{ carWashInfo.endTime ? carWashInfo.endTime.substr(0,5) : null }}</p>
        </a-col>
        <a-col :span="24" class="item-cont">
          <p class="item-label">时段价格：</p>
          <div class="item-main period-price-con">
            <div class="item-period" v-for="(item, index) in storeItemPriceDTOList" :key="index">
              <p class="period" :style="{width: 100/(item.currentPrices.length + 1) + '%'}">{{ item.beginTime }} - {{ item.endTime }}</p>
              <p class="period-price" :style="{width: 100/(item.currentPrices.length + 1) + '%'}" v-for="(subItem, ind) in item.currentPrices" :key="ind">{{ subItem.name }}：<strong class="price">{{ subItem.price }}</strong><span class="price-unit">元</span></p>
            </div>
          </div>
        </a-col>
        <a-col :span="24" class="item-cont">
          <p class="item-label">路段指引：</p>
          <p :class="['item-main', carWashInfo.guidance ? 'guidance-con' : '']" v-html="carWashInfo.guidance || '-'"></p>
        </a-col>
        <a-col :span="24" class="item-cont">
          <p class="item-label">温馨提示：</p>
          <p class="item-main">{{ carWashInfo.reminder || '-' }}</p>
        </a-col>
        <a-col :span="24" class="item-cont">
          <p class="item-label">现场照片：</p>
          <p class="item-main">
            <img :src="pic" class="small-pic" @click="isPicModal=true" />
          </p>
        </a-col>
        <a-col :span="24" class="btn-cont">
          <a-button @click="isShow=false">返回列表</a-button>
        </a-col>
      </a-row>
    </a-modal>

    <!-- 查看现场照片 -->
    <a-modal
      class="picModal"
      title="查看现场照片"
      :width="800"
      :footer="null"
      :destroyOnClose="true"
      @cancel="isPicModal=false"
      v-model="isPicModal">
      <img :src="pic" class="pic" />
    </a-modal>
  </div>
</template>

<script>
import { VSelect } from '@/components'
import { storeFind, findItem, deviceImage, itemQuery } from '@/api/car-wash'
export default {
  name: 'DetailsCarWashModal',
  components: { VSelect },
  props: {
    openModal: { //  弹框是否展示
      type: Boolean,
      default: false
    },
    carWashId: { //  网点id
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  弹框是否展示
      labelList: [], //  网点标签
      isPicModal: false, //  现场照片  弹框是否展示
      pic: require('@/assets/noPic.jpg'), //  现场照片  路径
      carWashInfo: {}, //  网点信息
      serviceType: [], //  服务类型
      storeItemPriceDTOList: [], //  时段价格
      itemQueryList: [] //  服务类型  列表数据
    }
  },
  methods: {
    // 网点详情
    getCarWashInfo (id) {
      this.getItemQuery()
      storeFind({ id: id }).then(res => {
        if (res.status == 200) {
          // 查询门店的服务时段价格
          findItem({ id: id }).then(result => {
            if (result.status == 200) {
              this.carWashInfo = Object.assign(res.data, { storeItemPriceDTOList: result.data })
              // 获取当前设备图片
              deviceImage({ deviceNo: res.data.deviceVOList[0].deviceNo }).then(results => {
                if (results.status == 200) {
                  this.pic = results.data || require('@/assets/noPic.jpg')
                } else {
                  this.pic = require('@/assets/noPic.jpg')
                }
              })
              this.setVal()
            }
          })
        }
      })
    },
    //  赋值
    setVal () {
      const _this = this
      // 网点标签
      setTimeout(() => {
        const featuredServiceLabel = this.carWashInfo.featuredServiceLabel.split(',')
        const arr = []
        featuredServiceLabel.map(k => {
          arr.push(_this.$refs.featuredServiceLabel.getNameByCode(k))
        })
        _this.labelList = arr
      }, 0)
      // 时段价格
      this.setPeriodPrice(this.carWashInfo.storeItemPriceDTOList)
    },
    // 时段价格  赋值处理
    setPeriodPrice (storeItemPriceDTOList) {
      this.storeItemPriceDTOList = []
      for (let i = 0; i < storeItemPriceDTOList.length; i++) {
        this.storeItemPriceDTOList.push({
          beginTime: storeItemPriceDTOList[i][0].beginTime,
          endTime: storeItemPriceDTOList[i][0].endTime,
          currentPrices: []
        })
        this.serviceType = []
        for (let j = 0; j < storeItemPriceDTOList[i].length; j++) {
          const k = storeItemPriceDTOList[i][j]
          this.storeItemPriceDTOList[i].currentPrices.push({ name: k.itemName, price: k.currentPrice, itemId: k.itemId })
          const ind = this.itemQueryList.findIndex(item => item.id == k.itemId)
          this.serviceType.push(this.itemQueryList[ind].itemName)
        }
      }
    },
    // 获取服务类型列表
    getItemQuery () {
      itemQuery({
        pageNo: 1,
        pageSize: 1000
      }).then(res => {
        if (res.status == 200) {
          this.itemQueryList = res.data.list || []
        } else {
          this.itemQueryList = []
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (val) {
      if (!val) {
        this.$emit('close')
      }
    },
    carWashId (newValue, oldValue) {
      if (newValue && this.isShow) {
        this.getCarWashInfo(newValue)
      }
    }
  }
}
</script>

<style lang="less">
  .DetailsCarWashModal{
    p{
      margin: 0;
    }
    .item-cont{
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      .item-label{
        width: 115px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        flex-shrink: 0;
      }
      .item-main{
        flex-grow: 1;
        .wd-icon{
          display: block;
        }
      }
      .guidance-con{
        border: 1px dashed #e8e8e8;
        border-radius: 6px;
        padding: 20px;
        img {
          max-width: 100%;
        }
      }
      .period-price-con{
        border-bottom: 1px solid #e8e8e8;
      }
      .item-period{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        flex-grow: 1;
        border: 1px solid #e8e8e8;
        border-width: 1px 1px 0;
        text-align: center;
        .period, .period-price{
          padding: 5px 0;
          border-right: 1px solid #e8e8e8;
        }
        .period-price:last-child{
          border-right: none;
        }
      }
    }
    .btn-cont{
      text-align: center;
    }
    .small-pic{
      display: block;
      cursor: zoom-in;
      width: 200px;
      border: 1px solid #e8e8e8;
    }
  }
  .pic{
    display: block;
    max-width: 100%;
    margin: 40px auto 50px;
    border: 1px solid #e8e8e8;
  }
</style>
