<template>
  <!--  参数设定-->
  <div class="transcoding">
    <navbar :name="name" />
    <div class="box flex-center">
      <div class="left">
        <div class="title">温馨提示</div>
        <div class="content">请根据您具体的需要选择打印需要的颜色、单双面、份数等。</div>
        <div class="content">打印参数确认好之后，即可点击/轻按“下一步”按钮完成打印任务的提交</div>
      </div>
      <div class="right">
        <!-- <div class="flex-between name">{{ pageData.name }}</div> -->
        <div class="flex-between">
          <div>纸张规格</div>
          <div>{{ pageData.specification }}</div>
        </div>
        <div class="flex-between">
          <div>颜色</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingColor == 'BW' ? 'act' : ''" @click="onChange('printingColor', 'BW')">黑白</div>
            <div class="flex-center" :class="pageData.printingColor == 'COLOR' ? 'act' : ''" @click="onChange('printingColor', 'COLOR')">彩色</div>
          </div>
        </div>
        <div class="flex-between">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.printingFaces == 'SINGLE' ? 'act' : ''" @click="onChange('printingFaces', 'SINGLE')">单面</div>
            <div class="flex-center" :class="pageData.printingFaces == 'DOUBLE' ? 'act' : ''" @click="onChange('printingFaces', 'DOUBLE')">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="" @click="variable(pageData.copies < 2 ? 1 : pageData.copies - 1)" />
            <input :value="pageData.copies" type="number" min="1" disabled/>
            <img src="../assets/demo15.png" alt="" @click="variable(pageData.copies + 1)" />
          </div>
        </div>
        <div class="btn flex-center" @click="skip('pay', name)">下一步</div>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from '@/components/nav'

export default {
  name: 'argument',
  components: {
    navbar
  },
  provide() {
    return {
      title: '',
      type: this.name
    }
  },
  data() {
    return {
      name: this.cite.modeName,
      pageData: {
        name: '文件名称……文件名称.doc', //文件名称
        specification: 'A4', //纸张规格
        printingColor: 'BW', //颜色
        printingFaces: 'SINGLE', //单双面
        copies: 1, //份数
      }
    }
  },
  methods: {
    skip(href, name) {
      let {pageData} = this
      this.cite.parameter = pageData

      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name, val) {
      this.pageData[name] = val
    },
    variable(num) {
      this.pageData.copies = num
    }
  },
  mounted() {
    // console.log('打印文件',this.cite.selectedFile)
  }
}
</script>

<style scoped lang="less">
.box {
  height: 42.13rem;

  .css1 {
    height: 100%;
    background: #ffffff;
    box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14);
    border-radius: 1.63rem;
  }

  .left {
    width: 46.44rem;
    margin-right: 1.88rem;
    .css1();

    .title {
      font-size: 2.88rem;
      font-weight: bold;
      color: #d41212;
      line-height: 4.06rem;
      padding: 4.13rem 0 2.44rem;
    }

    .content {
      width: 37rem;
      font-size: 2.25rem;
      font-weight: bold;
      color: #323232;
      line-height: 3rem;
      margin: 0 auto;
      text-align: left;
      text-indent: 2em;
    }
  }

  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 53.19rem;
    .css1();
    padding: 0 4.81rem;
    font-size: 1.88rem;
    font-weight: 400;
    color: #323232;
    line-height: 3.75rem;

    .name {
      margin-top: 3.19rem;
    }

    .only {
      width: 17.25rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      overflow: hidden;

      div {
        width: 50%;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        line-height: 2.63rem;
        height: 100%;
        cursor: pointer;
      }

      .act {
        background: #61aa8f;
        color: #ffffff;
      }
    }

    .import {
      img {
        width: 2.75rem;
        height: 2.75rem;
        cursor: pointer;
      }
    }

    input {
      width: 6.38rem;
      height: 3.19rem;
      background: #ffffff;
      border-radius: 0.63rem;
      border: 0.06rem solid #707070;
      font-size: 1.88rem;
      font-weight: 400;
      color: #323232;
      text-align: center;
      margin: 0 0.94rem;
    }

    .optionBox {
      select {
        width: 13.69rem;
        height: 3.19rem;
        padding-right: 3.56rem;
        border-radius: 0.63rem;
        border: 0.06rem solid #707070;
        font-size: 1.88rem;
        font-weight: 400;
        color: #323232;
        text-align: center;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: url('../assets/demo16.png') no-repeat scroll right center transparent;
        background-position-x: 11rem;
      }

      select::-ms-expand {
        display: none;
      }
    }

    .btn {
      width: 100%;
      height: 5.5rem;
      background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
      border-radius: 1.25rem;
      font-size: 1.88rem;
      font-weight: 400;
      color: #ffffff;
      line-height: 2.63rem;
      margin-top: 2.25rem;
      cursor: pointer;
    }
  }
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>