<template>
  <div v-loading="loading" element-loading-text="拼命加载中......请稍等" style="background-color: #F7F7F7">
    <div style="display: flex; height: 140px; background-color: #FFFFFF">
      <div style="display: flex; flex: 1; flex-direction: column; justify-content: center">
        <span
            style="margin-left: 20px; font-size: 16px; font-family: Source Han Sans CN; font-weight: 500; line-height: 27px; color: #393939; opacity: 1;">{{entName }}</span>
        <span
            style="margin-left: 20px; font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">企业税号：{{entTaxId }}</span>
        <span
            style="margin-left: 20px; font-size: 14px; font-family: Source Han Sans CN; font-weight: 400; line-height: 24px; color: #393939; opacity: 1;">开票设备：{{
            taxDiscId
          }}</span>
      </div>
      <div style="display: flex; width: 290px; flex-direction: row; justify-content: space-around; align-items: center">
        <div style="display: flex; flex-direction: column; align-items: center">
          <span
              style="font-size: 28px; font-family: Source Han Sans CN; font-weight: 500; line-height: 48px; color: #3DD08D; opacity: 1">{{serviceNumber}}</span>
          <span
              style="font-size: 12px; font-family: Source Han Sans CN; font-weight: 400; line-height: 20px; color: #888888; opacity: 1">已开通</span>
        </div>
        <div/>
        <div style="display: flex; flex-direction: column; align-items: center">
          <span
              style="font-size: 28px; font-family: Source Han Sans CN; font-weight: 500; line-height: 48px; color: #3DD08D; opacity: 1">{{soonStopNumber}}</span>
          <span
              style="font-size: 12px; font-family: Source Han Sans CN; font-weight: 400; line-height: 20px; color: #888888; opacity: 1">即将结束</span>
        </div>
        <div/>
        <div style="display: flex; flex-direction: column; align-items: center">
          <span
              style="font-size: 28px; font-family: Source Han Sans CN; font-weight: 500; line-height: 48px; color: #3DD08D; opacity: 1">{{stopNumber}}</span>
          <span
              style="font-size: 12px; font-family: Source Han Sans CN; font-weight: 400; line-height: 20px; color: #888888; opacity: 1">已终止</span>
        </div>
      </div>
    </div>
    <div
        style="display: flex; flex-direction: row; justify-content: center; align-items: center; height: 50px; background-color: #FFFFFF; margin-top: 26px">
      <div style="display: flex; flex-direction: column; align-items: center; cursor: pointer"
           v-on:click="selectClick(1)">
        <p v-if="selectType === 1"
           style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #393939; opacity: 1">
          综合服务</p>
        <p v-if="selectType === 2"
           style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #909090; opacity: 1">
          综合服务</p>
        <div v-if="selectType === 1"
             style="border-width: 2px; border-style: solid; border-color: #42B983; width: 48px"/>
      </div>
      <div style="margin-left: 193px; display: flex; flex-direction: column; cursor: pointer; align-items: center"
           v-on:click="selectClick(2)">
        <p v-if="selectType === 2"
           style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #393939; opacity: 1">
          增值服务</p>
        <p v-if="selectType === 1"
           style="font-size: 16px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #909090; opacity: 1">
          增值服务</p>
        <div v-if="selectType === 2"
             style="border-width: 2px; border-style: solid; border-color: #42B983; width: 48px"/>
      </div>
    </div>
    <div v-if="selectType === 1" style="display: flex; flex: 1; justify-content: center">
      <div class="product-item" v-for="(item,index) in productList" :key="index" :product="item"
           v-on:click="productSelect(item)">
        <div v-if="item.isSelect === false" style="border-style: solid; border-width: 2px; border-color: #EAEAEA; width: 120px"/>
        <div v-if="item.isSelect === true" style="border-style: solid; border-width: 2px; border-color: #3DD08D; width: 120px"/>
        <div class="product-top">
          <span class="product-tag">{{ item.tags }}</span>
          <span class="product-name">{{ item.productName }}</span>
        </div>
        <el-image style="width: 80px; height: 80px; margin-top: 11px; margin-bottom: 21px"
                  :src="item.imgUrl"></el-image>
        <span class="product-amount">
          ¥{{ item.favouredPrice }}
          <span class="product-discount">¥{{ item.oriPrice }}</span>
        </span>
      </div>
    </div>
    <div v-if="selectType === 2" style="display: flex; flex: 1; padding-bottom: 20px; justify-content: center">
      <div class="product-item" v-for="(item,index) in addService" :key="index" :product="item"
           v-on:click="productSelect(item)">
        <div v-if="item.isSelect === false" style="border-style: solid; border-width: 2px; border-color: #EAEAEA; width: 120px"/>
        <div v-if="item.isSelect === true" style="border-style: solid; border-width: 2px; border-color: #3DD08D; width: 120px"/>
        <div class="product-top">
          <span class="product-tag">{{ item.tags }}</span>
          <span class="product-name">{{ item.productName }}</span>
        </div>
        <el-image style="width: 80px; height: 80px; margin-top: 11px; margin-bottom: 21px"
                  :src="item.imgUrl"></el-image>
        <span class="product-amount">
          ¥{{ item.favouredPrice }}
          <span class="product-discount">¥{{ item.oriPrice }}</span>
        </span>
        <el-button v-on:click="handleProductBuy(item)" type="primary" style="margin-top: 20px; margin-bottom: 20px">立即购买</el-button>
      </div>
    </div>
    <div v-if="selectType === 1" style="background-color: #FFFFFF; margin-top: 20px">
      <div style="display: flex; flex-direction: row; justify-content: center; align-items: center; height: 50px">
        <span
            style="font-size: 16px; font-family: PingFang SC; font-weight: 400; line-height: 22px; color: #2C2C2C; opacity: 1">套餐特权</span>
        <span
            style="font-size: 16px; font-family: PingFang SC; font-weight: 400; line-height: 22px; color: #A0A0A0; opacity: 0.9">（{{ productSelectData.productName }}）</span>
      </div>
      <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center">
        <div class="product-service" v-for="(item,index) in productSelectData.featureItemList" :key="index">
          <el-image style="width: 48px; height: 48px; margin-top: 11px; margin-bottom: 21px"
                    :src="item.featureImgUrl"></el-image>
          <span>{{ item.featureName }} </span>
        </div>
      </div>
      <div
          style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 20px">
        <div style="display: flex; flex-direction: row">
          <span
              style="font-size: 14px; font-family: PingFang SC; font-weight: 500; line-height: 22px; color: #4B4B4B; opacity: 1">应付金额：</span>
          <span
              style="font-size: 26px; font-family: PingFang SC; font-weight: 500; line-height: 21px; color: #E85033; opacity: 1">¥{{
              productSelectData.favouredPrice
            }}
          <span
              style="font-size: 10px; font-family: Source Han Sans CN; font-weight: 400; line-height: 17px; color: #D8D8D8; opacity: 1; text-decoration: line-through;">¥{{
              productSelectData.oriPrice
            }}</span>
          </span>
        </div>
        <el-button v-on:click="handleProductBuy(null)" type="primary" style="margin-top: 20px; margin-bottom: 20px">立即购买</el-button>
      </div>
    </div>
    <!--    <p class="entinfo">-->
    <!--      <span style="margin-left:40px">企业名称：{{ entName }}</span>-->
    <!--      <span style="margin-left:40px">企业税号：{{ entTaxId }}</span>-->
    <!--      <span style="margin-left:40px">开票设备：{{ taxDiscId }}</span>-->
    <!--    </p>-->
    <!--    <div class="service-container">-->
    <!--      <service-item class="service-item" v-for="(item,index) in serviceList" :key="index"-->
    <!--                    :service="item"></service-item>-->
    <!--    </div>-->
    <!--    <br>-->
    <!--    <br>-->
    <!--    <p class="title">服务办理</p>-->
    <!--    <div class="container">-->
    <!--      <product-item class="item" v-for="(item,index) in productList" :key="index" :product="item"-->
    <!--                    @buy="handleProductBuy"></product-item>-->
    <!--    </div>-->

    <pay-dialog ref="payDialogRef" :product="payDialog.product" @close='handlePayDialogClose'></pay-dialog>
  </div>
</template>

<script>
import cache from '@/utils/cache'
import USER_MANAGEMENT from '@/api/user-management'
import MarketingService from '@/api/marketing'

import ProductItem from './components/product-item'
import PayDialog from './components/pay-dialog'
import ServiceItem from './components/service-item.vue'
import { AxiosRequestData } from '@/data/axios_request'
import DateHelper from '@/utils/date'

export default {
  name: 'ServiceBuy',
  components: {
    ProductItem,
    PayDialog,
    ServiceItem
  },
  data() {
    return {
      loading: false,
      entTaxId: '-',
      entName: '-',
      device: '-',
      taxDiscId: '-',
      deviceType: '-',
      serviceList: [], // 服务列表
      productList: [], // 产品列表
      payDialog: {
        product: {}
      },
      selectType: 1,
      productSelectData: {},
      addService: [],
      serviceNumber: 0,
      token: '',
      soonStopNumber: 0,
      stopNumber: 0
    }
  },
  methods: {
    /**
     * 获取用户信息
     */
    callGetUserPersonalInfo() {
      let user = JSON.parse(cache.getSession('user'))
      const account = user.account
      USER_MANAGEMENT.getUserPersonalInfo(account)
    },
    /**
     * 获取企业所有服务
     */
    callFindEntFeatures() {
      // this.loading = true;
      let _this = this
      MarketingService.findEntFeatures({
        entName: this.entName,
        entTaxId: this.entTaxId,
        deviceType: this.deviceType,
        taxDiscId: this.taxDiscId,
        pageNum: 1,
        pageSize: 1000
      })
          .then((val) => {
            _this.serviceList = val.data.records
          })
          .catch((err) => {
            _this.$message.error(err)
          })
          .finally(() => {
            // _this.loading = false;
          })
    },
    /**
     * 获取所有产品
     */
    callFindProduct() {
      // this.loading = true;
      let _this = this
      MarketingService.findProduct({
        pageNum: 1,
        pageSize: 1000
      })
          .then((val) => {
            _this.addService = []
            _this.productList = []
            let num = 0
            val.data.records.forEach((item, index) => {
              let data = {}
              if (item.type === 'base') {
                if (num === 0) {
                  data = {
                    createTime: item.createTime,
                    enable: item.enable,
                    favouredPrice: item.favouredPrice,
                    featureItemList: item.featureItemList,
                    featureItems: item.featureItems,
                    imgUrl: item.imgUrl,
                    imgid: item.imgid,
                    invoiceProductId: item.invoiceProductId,
                    ispId: item.ispId,
                    oriPrice: item.oriPrice,
                    productDesc: item.productDesc,
                    productId: item.productId,
                    productName: item.productName,
                    tags: item.tags,
                    type: item.type,
                    isSelect: true
                  }
                  this.productSelectData = data
                  num++
                } else {
                  data = {
                    createTime: item.createTime,
                    enable: item.enable,
                    favouredPrice: item.favouredPrice,
                    featureItemList: item.featureItemList,
                    featureItems: item.featureItems,
                    imgUrl: item.imgUrl,
                    imgid: item.imgid,
                    invoiceProductId: item.invoiceProductId,
                    ispId: item.ispId,
                    oriPrice: item.oriPrice,
                    productDesc: item.productDesc,
                    productId: item.productId,
                    productName: item.productName,
                    tags: item.tags,
                    type: item.type,
                    isSelect: false
                  }
                }
                _this.productList.push(data)
              }
              if (item.type === 'ext') {
                if (index === 0) {
                  data = {
                    createTime: item.createTime,
                    enable: item.enable,
                    favouredPrice: item.favouredPrice,
                    featureItemList: item.featureItemList,
                    featureItems: item.featureItems,
                    imgUrl: item.imgUrl,
                    imgid: item.imgid,
                    invoiceProductId: item.invoiceProductId,
                    ispId: item.ispId,
                    oriPrice: item.oriPrice,
                    productDesc: item.productDesc,
                    productId: item.productId,
                    productName: item.productName,
                    tags: item.tags,
                    type: item.type,
                    isSelect: true
                  }
                  // this.productSelectData = data
                } else {
                  data = {
                    createTime: item.createTime,
                    enable: item.enable,
                    favouredPrice: item.favouredPrice,
                    featureItemList: item.featureItemList,
                    featureItems: item.featureItems,
                    imgUrl: item.imgUrl,
                    imgid: item.imgid,
                    invoiceProductId: item.invoiceProductId,
                    ispId: item.ispId,
                    oriPrice: item.oriPrice,
                    productDesc: item.productDesc,
                    productId: item.productId,
                    productName: item.productName,
                    tags: item.tags,
                    type: item.type,
                    isSelect: false
                  }
                }
                _this.addService.push(data)
              }
            })
            // _this.productList = val.data.records
          })
          .catch((err) => {
            _this.$message.error(err)
          })
          .finally(() => {
            // _this.loading = false;
          })
    },
    /**
     * 购买产品
     * @param {object} product 产品信息
     */
    handleProductBuy(data) {
      if (data === null) {
        this.payDialog.product = JSON.parse(JSON.stringify(this.productSelectData))
      } else {
        this.payDialog.product = JSON.parse(JSON.stringify(data))
      }
      this.$refs.payDialogRef.visible = true
    },
    handlePayDialogClose() {
      this.callFindEntFeatures()
    },
    selectClick(type) {
      this.selectType = type
    },
    productSelect(item) {
      this.productList.forEach((item, index) => {
        item.isSelect = false
      })
      item.isSelect = true
      this.productSelectData = item
    },
    // 获取服务数量信息
    async getServiceInfo() {
      let company = JSON.parse(cache.getSession('company'))
      if (this.token && company) {
        const url = '/marketing/ent/features/findPage'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              entName: company.entName,
              entTaxId: company.entTaxId,
              pageNum: 1,
              pageSize: 10
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.serviceNumber = response.data.total
          }
        }
      }
    },
    // 获取开通产品数量相关信息
    async getServiceNum() {
      let timeNow = DateHelper.getNowTime()
      let company = JSON.parse(cache.getSession('company'))
      if (this.token && company) {
        const url = '/marketing/ent/features/getStats'
        let response = await AxiosRequestData(
            url,
            this.token,
            {
              entTaxId: company.entName,
              endDate: timeNow
            },
            false,
            2
        )
        if (response) {
          if (response.code === 0) {
            this.serviceNumber = response.data.featureCnt
            this.soonStopNumber = response.data.preExpireCnt
            this.stopNumber = response.data.expiredCnt
          }
        }
      }
    }
  },
  created() {
    const company = JSON.parse(cache.getSession('company'))
    this.token = cache.getToken()
    this.entTaxId = company.entTaxId
    this.entName = company.entName
    this.device = company.defaultDeviceInfo.deviceLabel
    this.taxDiscId = company.defaultDeviceInfo.taxDiscId
    this.deviceType = company.defaultDeviceInfo.deviceType
    this.callFindProduct()
    this.callFindEntFeatures()
    this.getServiceInfo()
    this.getServiceNum()
  }
}
</script>

<style lang='stylus' scoped>
.title {
  font-size: xx-large;
  font-weight: 600;
  text-align: center;
  color: #2a2c44;
}

.entinfo {
  font-size: large;
  font-weight: 600;
  text-align: left;
}

.container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 40px;
  border: 1px solid #dcdfe6;
}

.container .item {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 40px;
}

.service-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  text-align: left;
  padding: 40px;
  background-color: #2a2c44;
}

.service-item {
  display: inline-block;
  box-sizing: border-box;
  margin-right: 40px;
}

.product-item {
  display flex;
  width: 200px;
  height: 240px;
  background: #FFFFFF;
  opacity: 1;
  border-radius: 4px;
  //margin-left: 20px;
  margin-top 18px;
  align-items center;
  flex-direction column;
  cursor: pointer;
}

.product-top {
  display flex;
  width: 180px;
  height: 72px;
  background: #FFFFFF;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.04);
  opacity: 1;
  align-items center;
  flex-direction column;
  border-bottom-left-radius 50%;
  border-bottom-right-radius 50%;
}

.product-tag {
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #ADADAD;
  opacity: 1;
}

.product-name {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 34px;
  color: #383838;
  opacity: 1;
}

.product-amount {
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  line-height: 48px;
  color: #2A2C44;
  opacity: 1;
}

.product-discount {
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 17px;
  color: #D8D8D8;
  opacity: 1;
  text-decoration: line-through;
}

.product-foot {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #B5B5B5;
  opacity: 1;
}

.product-service {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
  justify-content: center;
  align-items: center;
  width: 100px;
}

</style>
