<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.colour==0?'act':''" @click="onChange('colour',0)">黑白</div>
            <div class="flex-center" :class="pageData.colour==1?'act':''" @click="onChange('colour',1)">彩色</div>
          </div>
        </div>
        <div class="flex-between">
          <div>单双面</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.singledihedral==0?'act':''" @click="onChange('singledihedral',0)">单面</div>
            <div class="flex-center" :class="pageData.singledihedral==1?'act':''" @click="onChange('singledihedral',1)">双面</div>
          </div>
        </div>
        <div class="flex-between">
          <div>方向</div>
          <div class="only flex-center">
            <div class="flex-center" :class="pageData.direction==0?'act':''" @click="onChange('direction',0)">横向</div>
            <div class="flex-center" :class="pageData.direction==1?'act':''" @click="onChange('direction',1)">纵向</div>
          </div>
        </div>
        <div class="flex-between">
          <div>份数</div>
          <div class="import flex-center">
            <img src="../assets/demo14.png" alt="">
            <input :value="pageData.copies" type="number" min="1">
            <img src="../assets/demo15.png" alt="">
          </div>
        </div>
        <div class="flex-between">
          <div>打印范围（共13页）</div>
          <div class="flex-center print">
            <input :value="pageData.minPrint" type="number" min="1">
            <div>至</div>
            <input :value="pageData.maxPrint" type="number" min="1">
          </div>
        </div>
        <div class="flex-between">
          <div>缩印（多合一）</div>
          <div class="optionBox">
            <select>
              <option value="1">1页/张</option>
              <option value="2">2页/张</option>
              <option value="3">3页/张</option>
            </select>
          </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.$route.params.name,
      pageData: {
        name: '文件名称……文件名称.doc',//文件名称
        specification: 'A4',//纸张规格
        colour: 0,//颜色
        singledihedral: 0,//单双面
        direction: 0,//方向
        copies: 1,//份数
        maxPrint: 13,//打印范围最大
        minPrint: 1,//打印范围最小
        minimo: 0,//缩印
      }
    }
  },
  methods: {
    skip(href,name) {
      this.$router.push({
        name: href,
        params: {
          name: name
        }
      })
    },
    onChange(name,val) {
      this.pageData[name] = val
    },
  },
}
</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 {
    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;
      }
    }
    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 .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>