<template>
  <info-con title="销售信息：" class="sale-info-con">
    <div class="item">
      <label class="label">销售模式：</label>
      <RadioGroup v-model="data.salesType">
        <Radio :label="1" style="width:200px" :disabled="isDetail || isEdit">普通</Radio>
        <Radio :label="2" style="width:200px" :disabled="isDetail || isEdit || packType">预售</Radio>
        <!-- <Radio :label="3" style="width:200px" :disabled="isDetail || isEdit || packType">拍卖</Radio> -->
        <Radio :label="5" style="width: 200px" :disabled="isDetail || isEdit ">免费领取</Radio>
    </RadioGroup>
    </div>
    <div class="item" v-if="shopStatus != 4">
      <label class="label">限购数量：</label>
      <InputNumber :min="0" style="width: 400px" :disabled="isDetail" placeholder="请输入限购数量"  v-model.number="data.purchaseLimit"></InputNumber>
    </div>
    <div class="item" v-if="data.salesType==2">
      <label class="label">预售价格：</label>
      <Input v-model="data.originalPrice" :readonly='isDetail' type="number" style="width: 400px;">
      </Input>
    </div>
    <div class="item" v-if="data.salesType==2">
        <label class="label">预售时间：</label>
          <Row class="time">
            <Col>
                <DatePicker type="date" :options="startOption" :readonly="isDetail" v-model="data.saleStartTime" placeholder="请选择开始时间" style="width: 200px"></DatePicker>
            </Col>
            <span>至</span>
            <Col>
                <DatePicker type="date" :options="endOption" :readonly="isDetail" v-model="data.saleEndTime" placeholder="请选择结束时间" style="width: 200px"></DatePicker>
            </Col>
          </Row>
      </div>
      <div class="item" v-if="data.salesType==2">
        <label class="label">预计提货时间：</label>
          <Row class="time">
            <Col>
                <DatePicker type="date" :options="drawStartOption" :readonly="isDetail" v-model="data.drawStartTime" placeholder="请选择开始时间" style="width: 200px"></DatePicker>
            </Col>
            <span>至</span>
            <Col>
                <DatePicker type="date" :options="drawEndOption" :readonly="isDetail" v-model="data.drawEndTime"  placeholder="请选择结束时间" style="width: 200px"></DatePicker>
            </Col>
          </Row>
      </div>
      <div class="item" v-if="data.salesType==2">
        <label class="label">预售定金：</label>
        <RadioGroup v-model="data.depositType">
          <Radio label="1" :disabled="isDetail" class="ivu-radio" style="width: 260px;">
          <span>固定比例</span>
          <Input v-model="data.fixedProportion" :disabled="isDetail" style="width: 100px"/>
              <span>%</span>
          </Radio>
          <Radio label="2" :disabled="isDetail" class="ivu-radio" style="width: 260px">
          <span>固定金额</span>
            <Input v-model="data.fixedAmount" :disabled="isDetail" style="width: 100px"/>
              <span>元</span>
          </Radio>
        </RadioGroup>
      </div>
      <div class="item" v-if="data.salesType==3">
        <label class="label">起拍价：</label>
        <Input v-model="data.startPrice" :readonly='isDetail' type="number" style="width: 400px;">
        </Input>
      </div>
      <div class="item" v-if="data.salesType==3">
        <label class="label">拍卖保证金：</label>
        <Input v-model="data.buyerDeposit" :readonly='isDetail' type="number" style="width: 400px;">
        </Input>
      </div>
      <div class="item" v-if="data.salesType==3">
        <label class="label">出价最小增幅：</label>
        <Input v-model="data.priceIncrease" :readonly='isDetail' type="number" style="width: 400px;">
        </Input>
      </div>
      <div class="item" v-if="data.salesType==3">
        <label class="label">竞拍结束时间：</label>
        <DatePicker type="date" :options="buyEndOption" :readonly="isDetail" v-model="data.endTime" placeholder="请选择结束时间" style="width: 400px"></DatePicker>
      </div>
      <div class="item" v-if="data.salesType==3">
        <label class="label">付款结束时间：</label>
        可以延后
        <Input v-model="data.delayPayTime" :readonly='isDetail' type="number" style="width: 150px;">
        </Input>
        天付款
      </div>
      <div class="item" v-if="data.salesType==1 ||data.salesType==5 ">
      <label class="label">销售价格：</label>
      <Input v-model="data.originalPrice" :readonly='isDetail' type="number" style="width: 400px;">
      </Input>
    </div>
    <div class="item" v-if="shopStatus == 1">
      <label class="label">商品重量：</label>
      <Input v-model="data.weight" :readonly='isDetail' type="number" style="width: 400px;">
      </Input>
    </div>
    <div class="item">
      <label class="label">NFT销售方式：</label>
      <RadioGroup v-model="data.nftSalesType">
        <Radio :label="1" style="width:200px" :disabled="isDetail || isEdit || isAgain">原商品销售</Radio>
        <Radio :label="2" style="width:200px" :disabled="isDetail || isEdit || isAgain|| availableNumber != 1">使用权销售</Radio>
      </RadioGroup>
    </div>
    <div class="item" v-if="data.nftSalesType==2">
      <label class="label">拷贝数量：</label>
        <Input v-model="data.stock" :readonly='isDetail || isAgain' :maxlength="6" style="width: 400px;">
      </Input>
    </div>
    <div class="item">
        <label class="label">溯源哈希：</label>
        <Input v-model="data.hash" :readonly='isDetail' style="width: 400px;" />
    </div>
  </info-con>
</template>

<script>
import InfoCon from './info-con'
import FileUpload from '_c/file-upload'
import config from '@/config'
import { deepCopy } from '@/utils/common'
import axios from 'axios'
const baseUrl =
  process.env.NODE_ENV === 'development'
    ? config.baseUrl.dev
    : config.baseUrl.pro
export default {
  props: {
    data: {
      type: Object,
      default: { sku: [] },
      commodityPass: '',
      saleStartTime: '',
      saleEndTime: '',
      drawStartTime: '',
      drawEndTime: '',
      fixedProportion: '',
      fixedAmount: '',
      depositType: '',
      price: '',
      startPrice: '',
      buyerDeposit: '',
      priceIncrease: '',
      delayPayTime: '',
      endTime: '',
      stock: '',
      salesType: 1,
      originalPrice: '',
      weight: '',
      nftSalesType: '',
      purchaseLimit:0
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    isEdit: {
      type: Boolean,
      default: false
    },
    // isSelf: {
    //   type: Boolean,
    //   default: false
    // },
    isAgain: {
      type: Boolean,
      default: false
    },
    isDraft: {
      type: Boolean,
      default: false
    },
    shopStatus: '',
    availableNumber: ''

  },
  watch: {
    // salesType (val) {
    //   // console.log('111', val)
    //   if (val == 2) {
    //     this.propList = [{ outToken: '', valList: [{ val: '' }] }]
    //   }
    // },
    // shopStatus (val) {
    //   // console.log('111', val)
    //   if (val == 3 || val == 2) {
    //     this.data.salesType = 1
    //   }
    // }
  },
  components: {
    InfoCon,
    FileUpload
  },
  data () {
    return {
      showTable: false,
      drawStartOption: {
        // 指定开始限制时间
        disabledDate: (date) => {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      drawEndOption: {
        // 指定终止日期
        disabledDate: (date) => {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      startOption: {
        // 指定开始限制时间
        disabledDate: (date) => {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      endOption: {
        // 指定终止日期
        disabledDate: (date) => {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      buyEndOption: {
        // 指定终止日期
        disabledDate: (date) => {
          return date && date.valueOf() < Date.now() - 86400000
        }
      }
      // rateList: [3, 4, 5, 6, 9, 10, 11, 13]
    }
  },
  computed: {
    platform () {
      return this.$store.state.admin.type == 1 || this.$store.state.admin.type == 4
    },
    packType () {
      return this.shopStatus == 3
    }
  },
  mounted () {
    this.showTable = true
    setTimeout(() => {
    })
  },
  methods: {
    // changeSalesType(val){
    //   this.$set(this.data,'salesType',val)
    //   this.data.salesType=val
    //   console.log(this.data)
    // }
  }
}
</script>

<style lang="less">
.sale-info-con {
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  .item .label {
    width: 140px;
    margin-right: 10px;
    text-align: right;
  }
  .item .property-con {
    flex: 1;
    padding: 20px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .item .property-con .add-btn {
    width: 100%;
  }
  .del-con {
    margin-left: 5px;
    cursor: pointer;
  }
  .item .property-item {
    width: 240px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 30px;
    .prop-val {
      flex: 1;
    }
  }
  .item .pack-con {
    width: 800px;
    // flex: 1;
    padding: 20px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .item .pack-con .add-btn {
    width: 100%;
  }
  .item .pack-item {
    // width: 240px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 30px;
    .prop-val {
      flex: 1;
    }
  }

  .item .empty {
    width: 150px;
  }
  .item .opt-btn {
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  .tip {
    color: #ed4014;
    font-size: 12px;
    margin: 20px 0 5px 0;
  }
  .token-label {
    font-size: 14px;
  }

  .item .time{
    display: flex;
    justify-content: space-around;
  }

}
</style>
