<template>
    <div class="integral_management">
        <!-- 商户积分管理 -->
      <Card class="item_management" style="margin-bottom:30px">
        <div class="heard">
          <h2> 平台积分</h2>
          <Button type="primary" v-if="this.platformInfo != null" @click="platMerchant">转账</Button>
        </div>
        <div class="shop_points_details" v-if="this.platformInfo != null">
          <p class="item_points_details">
            <span class="points_details_lable">{{platformInfo.name}}</span>
            <span class="points_details_info">{{platformInfo.label}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">积分账户</span>
            <span class="points_details_info">{{platformInfo.account}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">积分余额</span>
            <span class="points_details_info">{{platformInfo.balanceNum}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">积分价格</span>
            <span class="points_details_info">{{platformInfo.price}}￥</span>
          </p>
        </div>
      </Card>
      <Card class="item_management" v-if="this.shopInfo==null">
        <div class="heard">
          <h2 class="merchant_title">商户积分</h2>
          <Button type="primary" @click="issuingMerchant = true" class="issue">发行</Button>
        </div>
      </Card>
      <Card class="item_management" v-else>
        <div class="heard">
          <h2>商户积分</h2>
          <Button type="primary" @click="merchantTransfer" v-if="shopInfo.status==5">转账</Button>
          <Button type="primary" @click="issuingMerchant = true" class="issue" v-if="shopInfo.status==2||shopInfo.status==4">重新发行</Button>
        </div>
        <div class="shop_points_details">
          <p class="item_points_details">
            <span class="points_details_lable">积分账户</span>
            <span class="points_details_info">{{shopInfo.account}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">积分余额</span>
            <span class="points_details_info">{{shopInfo.balanceNum}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">标识</span>
            <span class="points_details_info">{{shopInfo.label}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">初始发行量</span>
            <span class="points_details_info">{{shopInfo.issueNum}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">名称</span>
            <span class="points_details_info">{{shopInfo.name}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">LOGO</span>
            <img :src="shopInfo.logo" style="width:30px;height:30px;vertical-align: middle;margin-left:10px;">
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">状态</span>
            <span class="points_details_info">{{shopInfo.status | deliveryState2String}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable">发行时间</span>
            <span class="points_details_info">{{shopInfo.createTime}}</span>
          </p>
          <p class="item_points_details">
            <span class="points_details_lable" style="height:80px;line-height:40px">描述</span>
            <span class="points_details_info" style="height:80px;">{{shopInfo.description}}</span>
          </p>
        </div>
      </Card>
      <Modal
        title="发行商户积分"
        v-model="issuingMerchant"
        :styles="{top: '200px'}"
        @on-cancel="issuing"
      >
      <Form
        ref="dto"
        :model="dto"
        :label-width="100"
      >
        <FormItem label="标识" prop="label" class="shopList">
          <Input
            placeholder="请输入标识(6位 以大写字母开头 纯大写字母或者大写字母和数字组合)"
            :maxlength="30"
            v-model="dto.label"
          />
        </FormItem>
        <FormItem label="名称" prop="name" class="shopList">
          <Input
            placeholder="请输入名称"
            :maxlength="30"
            v-model="dto.name"
          />
        </FormItem>
        <FormItem label="LOGO" prop="logo" class="shopList">
            <file-upload
                :maxNum="1"
                :defaultList="defauleLogoImg"
                v-model="logoImg"
            />
        </FormItem>
        <FormItem label="发行量" prop="issueNum" class="shopList">
          <Input
            placeholder="请输入发行量"
            :maxlength="30"
            v-model="dto.issueNum"
          />
        </FormItem>
        <FormItem label="描述" prop="description" class="shopList">
          <Input
            placeholder="请输入描述"
            :maxlength="30"
            type="textarea"
            v-model="dto.description"
          />
        </FormItem>
      </Form>

      <div slot="footer">
        <Button
          @click="updateShopIntegral"
          :loading="updatePwdLoading"
          type="primary"
          long
          >确 定</Button
        >
      </div>
    </Modal>
    <Modal
        title="商户积分转账"
        v-model="point"
        :styles="{top: '200px'}"
        @on-cancel="merchantPoint"
      >
      <Tabs type="card" v-model="currentTab" @on-click="shopTab">
        <TabPane label="单个" name="single">
        <p>
          <span class="currentTab_info">转账手机号</span>
          <Input
            placeholder="请输入转账手机号"
            :maxlength="30"
            v-model="shopPhone"
            style="width:180px"
          />
        </p>
        <p>
          <span class="currentTab_info" style="margin-top: 30px;">转账数量</span>
          <Input
            placeholder="请输入转账数量"
            :maxlength="30"
            v-model="shopAmount"
            style="width:180px"
          />
        </p>
        </TabPane>
        <TabPane label="批量" name="batch" style="padding-left:10px">
          <p>
            <h5>上传批量转账文件</h5>
            <file-upload
              :width="45"
              style="margin: 5px 0"
              :maxNum="1"
              :maxSize="30"
              iconType="md-cloud-upload"
              v-model="shopUpload"
              :defaultList="defaultShopUpload"
            />
          </p>
          <span class="downLoad" @click="downloadFile">下载批量转账文件</span>
        </TabPane>
    </Tabs>
      <div slot="footer">
        <Button
          @click="shopAccounts"
          :loading="updatePwdLoading"
          type="primary"
          long
          >确 定</Button
        >
      </div>
    </Modal>
    <Modal
        title="平台积分转账"
        v-model="platformMerchant"
        :styles="{top: '200px'}"
        @on-cancel="platformPoint"
      >
      <Tabs type="card" v-model="currentTab" @on-click="shopTab">
        <TabPane label="单个" name="single">
        <p>
          <span class="currentTab_info">转账手机号</span>
          <Input
            placeholder="请输入转账手机号"
            :maxlength="30"
            v-model="platformPhone"
            style="width:180px"
          />
        </p>
        <p>
          <span class="currentTab_info" style="margin-top: 30px;">转账数量</span>
          <Input
            placeholder="请输入转账数量"
            :maxlength="30"
            v-model="platformAmount"
            style="width:180px"
          />
        </p>
        </TabPane>
        <TabPane label="批量" name="batch" style="padding-left:10px">
          <p>
            <h5 >上传批量转账文件</h5>
            <file-upload
              :width="45"
              style="margin: 5px 0"
              :maxNum="1"
              :maxSize="30"
              iconType="md-cloud-upload"
              v-model="platformUpload"
              :defaultList="defaultPlatformUpload"
            />
          </p>
          <span class="downLoad" @click="downloadFile">下载批量转账文件</span>
        </TabPane>
    </Tabs>
      <div slot="footer">
        <Button
          @click="platformAccounts"
          :loading="updatePwdLoading"
          type="primary"
          long
          >确 定</Button
        >
      </div>
    </Modal>
    </div>
</template>
<script>
import FileUpload from '_c/file-upload'
import { formatTime } from '@/libs/tools'
import config from '@/config'
import store from '@/store'
import axios from 'axios'
const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev.mall
    : config.baseUrl.pro.mall
export default{
  components: {
    FileUpload
  },
  data () {
    return {
      issuingMerchant: false,
      platformMerchant: false,
      point: false,
      currentTab: 'single',
      shopInfo: null,
      platformInfo: null,
      dto: {
        description: '',
        issueNum: '',
        logo: '',
        name: '',
        label: ''
      },
      logoImg: [],
      defauleLogoImg: [],
      updatePwdLoading: false,
      shopPhone: '',
      shopAmount: '',
      shopUpload: [],
      defaultShopUpload: [],
      type: 2,
      platformPhone: '',
      platformAmount: '',
      platformUpload: [],
      defaultPlatformUpload: []
    }
  },
  filters: {
    deliveryState2String (val) {
      const states = {
        1: '发行中',
        2: '发行失败',
        3: '待审核',
        4: '审核失败',
        5: '可用',
        6: '禁用'
      }
      return states[val] || 'unknow'
    }
  },
  methods: {
    issuing () {
      this.$refs.dto.resetFields()
      this.logoImg = []
    },
    // 下载批量转账文件
    downloadFile () {
      axios({
        headers: {
          adminId: store.state.admin.uid,
          token: store.state.admin.token
        },
        method: 'GET',
        url: `${baseUrl}/integralManage/downloadexcel`,
        responseType: 'blob'
      }).then((res) => {
        let content = res.data
        let blob = new Blob([content])
        let fileName = '批量转账文件.xlsx'
        if ('download' in document.createElement('a')) {
          let link = document.createElement('a')
          link.download = fileName
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // 商户积分转账取消
    merchantPoint () {
      this.shopPhone = ''
      this.shopAmount = ''
      this.currentTab = 'single'
    },
    // 平台积分转账取消
    platformPoint () {
      this.platformPhone = ''
      this.platformAmount = ''
      this.currentTab = 'single'
    },
    // 商户积分转账
    merchantTransfer () {
      this.point = true
    },
    // 平台积分转账
    platMerchant () {
      this.platformMerchant = true
    },
    shopTab (name) {
      this.currentTab = name
    },
    // 商户转账
    shopAccounts () {
      let { shopPhone, shopAmount, type, shopUpload } = this
      let dto
      if (this.currentTab == 'single') {
        dto = {
          phone: shopPhone,
          amount: shopAmount,
          type: type
        }
      } else {
        dto = {
          path: shopUpload[0]
        }
      }

      let apiName = this.currentTab == 'single' ? 'merchantTransSingle' : 'merchantTransBatch'
      let title = this.currentTab == 'single' ? '单个转账中！' : '批量转账中！'
      if (dto.phone == '' && this.currentTab == 'single') {
        return this.$Notice.warning({ title: '请输入转账手机号' })
      } else if (dto.amount == '' && this.currentTab == 'single') {
        return this.$Notice.warning({ title: '请输入转账数量' })
      } else if (dto.path == undefined && this.currentTab == 'batch') {
        return this.$Notice.warning({ title: '请上传批量转账文件' })
      }
      console.log('path', dto.path)
      this.api({
        apiName,
        postdata: dto,
        success: (res) => {
          this.point = false
          this.shopPhone = ''
          this.shopAmount = ''
          this.$Notice.success({ title })
        }
      })
    },
    // 平台转账
    platformAccounts () {
      let { platformPhone, platformAmount, type, platformUpload } = this
      let dto
      if (this.currentTab == 'single') {
        dto = {
          phone: platformPhone,
          amount: platformAmount,
          type: type
        }
      } else {
        dto = {
          path: platformUpload[0]
        }
      }
      let apiName = this.currentTab == 'single' ? 'merchantBaseTransSingle' : 'merchantBaseTransBatch'
      let title = this.currentTab == 'single' ? '单个转账中！' : '批量转账中！'
      if (dto.phone == '' && this.currentTab == 'single') {
        return this.$Notice.warning({ title: '请输入转账手机号' })
      } else if (dto.amount == '' && this.currentTab == 'single') {
        return this.$Notice.warning({ title: '请输入转账数量' })
      } else if (dto.path == undefined && this.currentTab == 'batch') {
        return this.$Notice.warning({ title: '请上传批量转账文件' })
      }
      this.api({
        apiName,
        postdata: dto,
        success: (res) => {
          // console.log('res', res)
          this.platformMerchant = false
          this.platformPhone = ''
          this.platformAmount = ''
          this.$Notice.success({ title })
        }
      })
    },
    // 发行积分
    updateShopIntegral () {
      let { dto } = this
      dto.logo = this.logoImg[0]
      if (dto.label == '') {
        return this.$Notice.warning({ title: '请输入标识' })
      } else if (dto.name == '') {
        return this.$Notice.warning({ title: '请输入名称' })
      } else if (dto.logo == '') {
        return this.$Notice.warning({ title: '请上传LOGO' })
      } else if (dto.issueNum == '') {
        return this.$Notice.warning({ title: '请输入发行量' })
      } else if (dto.description == '') {
        return this.$Notice.warning({ title: '请输入描述' })
      } else if (!/^[A-Z][A-Z0-9]{5}$/.test(dto.label)) {
        return this.$Notice.warning({ title: '请输入正确标识' })
      }
      this.api({
        apiName: 'issueMerchantIntegral',
        postdata: dto,
        success: (res) => {
          this.issuingMerchant = false
          this.$Notice.success({ title: '积分发行成功' })
          this.getmerchantIntegralDetail()
        }
      })
    },
    // 获取商户积分详情
    getmerchantIntegralDetail () {
      this.api({
        apiName: 'merchantIntegralDetail',
        success: (res) => {
          this.shopInfo = res.data
          if (this.shopInfo != null) {
            this.shopInfo.createTime = formatTime(this.shopInfo.createTime)
          }
        }
      })
    },
    // 获取平台基础积分详情
    getplatformBaseIntegralDetail () {
      this.api({
        apiName: 'platformBaseIntegralDetail',
        success: (res) => {
          this.platformInfo = res.data
        }
      })
    }
  },
  created () {
    this.getmerchantIntegralDetail()
    this.getplatformBaseIntegralDetail()
  }
}
</script>
<style scoped lang="less">
.integral_management{
  min-width: 1200px;
  .item_management{
    // width: 80%;
    .heard{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .points_details{
      margin-top: 20px;
      width: 80%;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
    .shop_points_details{
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      .item_points_details{
        width: 50%;
        border: 1px solid #F8F8F8;
      }
    }
    .points_details_lable{
      display: inline-block;
      width: 35%;
      height: 40px;
      padding-right:10px;
      line-height: 40px;
      text-align: right;
      background: #F8F8F8;
    }
    .points_details_info{
      display: inline-block;
      width: 60%;
      padding-left:10px;
      line-height: 40px;
    }
  }
}
.currentTab_info{
    width:80px;
    display: inline-block;
  }
.downLoad{
  cursor:pointer;
}
.downLoad:hover{
        color: #2d8cf0;
      }
</style>
