<template>
  <div class="app-list content-layer min-h">
    <div class="list-head">
      <!-- <p>{{$t('my_applications')}}</p> -->
      <p>{{$t('place_1')}}</p>
    </div>

    <Steps :current="current" class="steps">
        <Step :title="$t('place_1')" content=""></Step>
        <Step :title="$t('place_2')" content=""></Step>
        <Step :title="$t('place_3')" content="" style="width: 120px"></Step>
    </Steps>

    <!-- <div v-if="current == 0"> -->
       <Form :model="formItem" :label-width="80">
        <FormItem :label="$t('place_4')">
            <Input class="inputbox" disabled v-model="formItem.apiname"></Input>
        </FormItem>
        <FormItem :label="$t('place_5')">
            <RadioGroup v-if="current === 0" v-model="formItem.versions" @on-change="changeVersions">
                <Radio v-for="item in other_product_list" :key="item.key" :label="item.key">{{item.name}}</Radio>
            </RadioGroup>
            <RadioGroup  v-if="current === 1"  v-model="formItem.versions" @on-change="changeVersions">
                <Radio v-for="item in other_product_list" :key="item.key" :label="item.key" v-if="formItem.versions == item.key">{{item.name}}</Radio>
            </RadioGroup>
            <!-- <Select v-model="formItem.versions" class="inputbox" @on-change="changeVersions" v-if="current === 0">
                <Option v-for="item in other_product_list" :key="item.key" :value="item.key">{{item.name}}</Option>
            </Select>
            <Select v-model="formItem.num" class="inputbox" @on-change="changeVersions" v-if="current === 1" disabled>
                <Option v-for="item in other_product_list" :key="item.key" :value="item.key">{{item.name}}</Option>
            </Select> -->
        </FormItem>
        <FormItem :label="$t('place_24')">
            <Input class="inputbox" disabled v-model="formItem.expire_time_desc"></Input>
        </FormItem>
        <FormItem :label="$t('place_6')">
            <Select v-model="formItem.num" class="inputbox" @on-change="changeNum" v-if="current === 0">
                <Option v-for="item in order_amount_list" :key="item.key" :value="item.key">{{item.name}}</Option>
            </Select>
            <Select v-model="formItem.num" class="inputbox" @on-change="changeNum" v-if="current === 1" disabled>
                <Option v-for="item in order_amount_list" :key="item.key" :value="item.key">{{item.name}}</Option>
            </Select>
        </FormItem>
        <FormItem :label="$t('place_7')" v-if="current === 0">
            <!-- 富文本 -->
            <quill-editor class="inputbox" disabled v-model="formItem.product_desc" :options="quillOption"></quill-editor>
        </FormItem>
        <FormItem :label="$t('place_8')" v-if="current === 0">
            <Input v-model="formItem.note" class="inputbox" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder=""></Input>
        </FormItem>
        <FormItem :label="$t('place_9')" v-if="current === 1" >
           <RadioGroup v-model="pay_type" @on-change="changePayType">
             <!-- <img src="../../assets/images/cash.png" alt="">
                <Radio v-for="item in pay_list" :key="item.type" :label="item.type"> <img :src="item.src" alt="" /> </Radio> -->
                <Radio v-for="item in pay_list" :label="item.key" :key="item.key"> <img :src="item.src" :alt="item.name"> </Radio>
            </RadioGroup>
        </FormItem>
        <FormItem :label="$t('place_10')">
            <p style="font-size: 30px;color: red;font-weight: bold">{{ $t('my_order_list_1') }}{{ formItem.price }} </p>
        </FormItem>
        <FormItem v-if="current === 0">
            <CheckboxGroup v-model="formItem.checkbox">
              <Checkbox :label="1"> <a href="javascript:;" @click="openDeal">{{$t('place_11')}}</a> </Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="createOrder" v-if="current === 0">{{$t('place_12')}}</Button>
            <Button type="primary" @click="goPay" v-if="current === 1">{{$t('place_13')}}</Button>
        </FormItem>
      </Form>
      <Modal v-model="deal" width="460">
          <p slot="header" style="text-align:center">
              <span>{{$t('place_14')}}</span>
          </p>
          <div style="text-align:left">
              <p>{{$t('place_15')}}</p>
              <p>{{$t('place_16')}}</p>
              <p>{{$t('place_17')}}</p>
          </div>
          <div slot="footer" style="text-align: center;">
              <Button type="primary" size="large"  @click="del">{{$t('place_18')}}</Button>
          </div>
      </Modal>

      <Modal v-model="payInstructionsModal" width="400">
        <p slot="header" style="text-align:center">
            <span>{{$t('place_21')}}</span>
        </p>
        <div style="text-align:center">
          <quill-editor disabled v-model="payInstructions" :options="toolOptions"></quill-editor>
        </div>
        <div slot="footer">
            <Button type="primary" size="large" style="text-align: center;" @click="iSee">{{$t('place_22')}}</Button>
        </div>
    </Modal>
    <!-- </div> -->
  </div>
</template>

<script>
import { CreateOrder, PreviewOrder, StartPay, PreviewPay } from '@/api/order'
import { getToken } from '@/libs/util'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
import quillConfig from './quillEditor.config'
import AssetsLibs from '@/components/assets-libs/assets-libs.vue'
Quill.register('modules/imageResize', ImageResize)
export default {
  components: {
    quillEditor,
    AssetsLibs
  },
  data () {
    return {
      quillOption: quillConfig,
      payInstructions: '',
      payInstructionsModal: false,
      toolOptions: {
        modules: {
          toolbar: [
          ]
        }
      },
      current: 0, // 进度条
      product_id: 0,
      deal: false,
      versionsText: '',
      formItem: {
        apiname: '',
        versions: 0,
        expire_time_desc: '',
        num: 1,
        product_desc: ' ',
        note: '',
        price: '',
        checkbox: []
      },
      access_token: getToken(),
      order_amount_list: [], // 数量
      other_product_list: [], // 版本
      order_id: '', // 生成的订单号
      pay_list: [], // 支付方式列表
      pay_type: '', // 支付方式
      non_payment: '' // 从我的订单列表过来
    }
  },

  // 获取应用管理数据
  created () {
    this.product_id = this.$route.query.product_id
    this.non_payment = this.$route.query.type
    if (this.non_payment) {
      this.product_id = this.$route.query.product_id
      this.order_id = this.$route.query.order_id
      this.current = 1
      this.getPreviewPay(this.order_id)
    }
    this.APIPerviewOrder(Number(this.product_id))
    // let apiname = this.$route.params.title
    // let product_id = this.$route.params.product_id
    // console.log(this.formItem.apiname, 'this.formItem.apiname', this.product_id)
    // this.formItem.apiname = apiname
    // this.product_id = product_id
    // console.log(apiname, 'this.formItem.apiname', product_id)
  },
  methods: {
    // i18n
    // 获取套餐基本信息
    APIPerviewOrder (id, num) {
      let _this = this
      _this.formItem.versions = id
      const formdata = new FormData()
      formdata.append('access_token', _this.access_token)
      formdata.append('product_id', id)
      if (num) {
        formdata.append('num', num)
      }
      PreviewOrder(formdata).then(res => {
        _this.order_amount_list = res.data.order_amount_list
        _this.other_product_list = res.data.other_product_list
        _this.formItem.apiname = res.data.product.product_name
        _this.formItem.product_desc = res.data.product.product_desc
        _this.formItem.expire_time_desc = res.data.product.expire_time_desc
        _this.formItem.price = res.data.price
      })
    },
    // 选择数
    changeNum (val) {
      this.formItem.num = val
      this.APIPerviewOrder(this.product_id, val)
    },
    // 选择套餐
    changeVersions (val) {
      this.product_id = val
      this.APIPerviewOrder(val, this.formItem.num)
    },
    createOrder () {
      let _this = this
      if (_this.formItem.checkbox.length === 0) {
        _this.$Modal.info({
          title: this.$t('place_23'),
          content: `<p>${this.$t('setmealmanage_8')}</p>`
        })
        return false
      }
      this.APICreateOrder()
    },
    // 生成订单号
    APICreateOrder () {
      let _this = this
      const formdata = new FormData()
      formdata.append('access_token', _this.access_token)
      formdata.append('product_id', _this.product_id)
      formdata.append('num', _this.formItem.num)
      formdata.append('note', _this.formItem.note)
      // _this.current += 1 // 测试
      CreateOrder(formdata).then(res => {
        if (res.data.order_id) {
          _this.order_id = res.data.order_id
          _this.getPreviewPay(_this.order_id)
          _this.current += 1
        }
      })
    },
    // 获取付款方式
    getPreviewPay (id) {
      let _this = this
      const formdata = new FormData()
      formdata.append('access_token', this.access_token)
      formdata.append('order_id', id)
      PreviewPay(formdata).then(res => {
        _this.pay_type = res.data.order_info.pay_type
        if (res.data.pay_list.length > 0) {
          _this.pay_list = res.data.pay_list
          _this.pay_list.forEach(item => {
            item.src = require('../../assets/images/' + item.key + '.png')
          })
        }
      })
    },
    // 选择支付方式
    changePayType (val) {
      this.pay_type = val
    },
    // 开始支付
    goPay () {
      let _this = this
      const formdata = new FormData()
      formdata.append('access_token', _this.access_token)
      formdata.append('order_id', _this.order_id)
      formdata.append('pay_type', _this.pay_type)
      // window.location.href = 'https://www.baidu.com'
      StartPay(formdata).then(res => {
        if (res.ret === 200 && _this.pay_type !== 'cash') {
          window.location.href = res.data.pay_result.pay_detail // 跳到其他支付页
        } else {
          _this.payInstructions = res.data.pay_result.pay_detail
          _this.payInstructionsModal = true
        }
      })
    },
    iSee () {
      this.payInstructionsModal = false
      this.$router.push({ name: 'resultOrder', query: { id: this.order_id } }) // 跳到结果页
    },
    openDeal () {
      this.deal = true
    },
    del () {
      this.deal = false
    }
  }
}
</script>

<style lang="scss" scoped>
.list-head {
  display: flex;
  justify-content: space-between;
  padding-right: 20px;
  margin-bottom: 20px;

  p {
    font-size: 18px;
  }
}
.steps {
  margin: 50px auto;
  display: flex;
  justify-content: center;
}
.inputbox {
  width: 50%;
}
/*  .ql-toolbar.ql-snow + .ql-container.ql-snow{
  min-height: 200px!important;
} */
/deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow {
  min-height: 200px!important;
}
/deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow > .ql-editor {
   min-height: 200px!important;
}
.ivu-modal-body {
  width: 70%;
  margin: 0 auto;
}
/deep/ .ivu-radio-group .ivu-radio-group-default .ivu-radio-default {
  display: flex!important;
}
/deep/ .ivu-radio-wrapper .ivu-radio-group-item .ivu-radio-wrapper-checked .ivu-radio-default {
  display: flex!important;
  align-items: center!important;
}
/deep/ .ivu-radio-wrapper .ivu-radio-group-item .ivu-radio-default {
  display: flex!important;
  align-items: center!important;
}
/deep/ .ivu-modal .ql-toolbar .ql-snow {
  padding: 0!important;
  height: 0!important;
}
</style>
