<template>
  <div class="container">
    <div class="list">
      <div class="good">
        <div class="left">
          <img src="../../../public/img/goods.png" />
        </div>
        <div class="center">
          <div class="name">商品名称商品名称商品名称商品名称商品</div>
          <h3>￥888</h3>
        </div>
      </div>
    </div>
    <van-cell-group class="option">
      <van-cell class="nop">
        <div class="type">
          <div class="t-l">佣金类型</div>
          <div class="t-r">
            <van-radio-group v-model="type" @change="handleChooseChange">
              <van-radio name="1" style="float:left;">固定金额</van-radio>
              <van-radio name="2" style="float:right;">成交价比例</van-radio>
            </van-radio-group>
            <div class="fr" v-if="type == 1">
              <span class="fr" style="margin-top:18px;">元</span>
              <van-field
                class="price"
                readonly
                clickable
                :value="price"
                placeholder="请输入金额"
                @touchstart.native.stop="show2 = true"
              />
              <van-number-keyboard
                v-model="price"
                :show="show2"
                @blur="show2 = false"
              />
            </div>
            <div class="fr" v-if="type == 2">
              <span class="fr" style="margin-top:18px;">%</span>
              <van-field
                class="price"
                readonly
                clickable
                :value="percent"
                placeholder="请输入百分比"
                @touchstart.native.stop="show3 = true"
              />
              <van-number-keyboard
                v-model="percent"
                :show="show3"
                @blur="show3 = false"
              />
            </div>
          </div>
        </div>
      </van-cell>
      <van-cell title="活动开始时间" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              v-model="startTime1"
              placeholder="选择活动开始时间"
              readonly="readonly"
              @click="startShow = true"
              class="nop"
            />
            <van-popup v-model="startShow" position="bottom" :overlay="true">
              <van-datetime-picker
                v-model="startTime"
                type="datetime"
                @cancel="startShow = false"
                @confirm="handleStartTime"
                @change="startTimeChange"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="活动结束时间" style="font-size:14px;">
        <template slot="default">
          <div class="jpsl">
            <van-field
              v-model="endTime1"
              placeholder="选择活动结束时间"
              readonly="readonly"
              @click="endShow = true"
              class="nop"
            />
            <van-popup v-model="endShow" position="bottom" :overlay="true">
              <van-datetime-picker
                v-model="endTime"
                type="datetime"
                @cancel="endShow = false"
                @confirm="handleEndTime"
                @change="endTimeChange"
              />
            </van-popup>
          </div>
        </template>
      </van-cell>
      <van-cell title="上架数量" style="font-size:14px;" class="nob">
        <template slot="default">
          <van-field
            class="nop"
            readonly
            clickable
            :value="number"
            placeholder="请输入数量"
            @touchstart.native.stop="show = true"
          />
          <van-number-keyboard
            v-model="number"
            :show="show"
            @blur="show = false"
          />
        </template>
      </van-cell>
    </van-cell-group>
    <div class="creat">立即上架</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startTime: new Date(),
      startTime1: "",
      endTime: new Date(),
      endTime1: "",
      startShow: false,
      endShow: false,
      number: "",
      type: "1",
      show: false,
      show2: false,
      show3: false,
      price: "",
      percent: ""
    };
  },
  methods: {
    timeFormat(time) {
      let year = 1900 + time.getYear();
      let month = "0" + (time.getMonth() + 1);
      let date = "0" + time.getDate();
      return (
        year +
        "-" +
        month.substring(month.length - 2, month.length) +
        "-" +
        date.substring(date.length - 2, date.length) +
        " "
      );
    },
    startTimeChange(e) {
      let startTimeArr = e.getValues();
      this.startTime1 = `${startTimeArr[0]}-${startTimeArr[1]}-${startTimeArr[2]}`;
    },
    endTimeChange(e) {
      let endTimeArr = e.getValues();
      this.endTime1 = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`;
    },
    handleStartTime(value) {
      this.startTime1 = this.timeFormat(value);
      this.startShow = false;
    },
    handleEndTime(value) {
      this.endTime1 = this.timeFormat(value);
      this.endShow = false;
    },
    handleChooseChange(e) {
      this.price = ''
      this.percent = ''
    }
  }
};
</script>

<style scoped>
.jpsl >>> .van-cell:not(:last-child)::after {
  display: none;
}
.price {
  width: 88px;
  height: 36px;
  line-height: 36px;
  /* text-align: center; */
  background: #f8f8f8;
  float: right;
  margin-top: 12px;
  border-radius: 10px;
  color: rgba(45, 71, 106, 0.6);
  padding: 0;
}
.nop {
  padding: 0;
}
.t-l {
  width: 120px;
}
.t-r {
  width: 70%;
}
.type {
  padding: 14px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
h3 {
  font-size: 14px;
  color: rgba(208, 2, 27, 1);
  margin-top: 18px;
}
.container {
  height: 100%;
  background-color: #f8f8f8;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.name {
  font-size: 14px;
  font-weight: bold;
  color: rgba(45, 71, 106, 1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.good {
  height: 108px;
  border-bottom: 1px solid rgba(238, 238, 238, 1);
  width: 100%;
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
}
.list {
  padding: 0 16px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 1px 3px 0px rgba(221, 221, 221, 1);
}
.left,
.right,
.center {
  height: 80px;
}
.left {
  width: 80px;
  border-radius: 4px;
}
.left img {
  width: 100%;
}
.center {
  width: 70%;
}

.phone {
  float: left;
}
.option {
  margin-top: 10px;
}
.option >>> .van-field__control {
  text-align: right;
}
.nob >>> .van-cell:not(:last-child)::after {
  border: none;
}
.price >>> .van-field__control {
  text-align: center;
}
.creat {
  width: 96%;
  height: 40px;
  background: rgba(117, 178, 253, 1);
  border-radius: 10px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin-left: 2%;
  position: absolute;
  bottom: 16px;
}
</style>