<template>
  <el-dialog
    :append-to-body="true"
    :title="!dataForm.id ? this.$i18n.t('crud.addTitle') : this.$i18n.t('temp.modify')"
    :close-on-click-modal="false"
    top="1vh"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="订单编号" prop="orderNumber">
        <span>{{dataForm.orderNumber}}</span>
      </el-form-item>
      <el-form-item label="产品名称" prop="prodName">
        <span>{{dataForm.prodName}}</span>
      </el-form-item>
      <el-form-item label="博主名称" prop="upName" style="width: 350px;">
        <el-input v-model="dataForm.upName"></el-input>
      </el-form-item>
      <el-form-item label="推广费用" prop="upName" style="width: 350px;">
        <el-input v-model="dataForm.linkName"></el-input>
      </el-form-item>
      <el-form-item label="粉丝数量" prop="fansNums" style="width: 350px;">
        <el-input type="number" v-model="dataForm.fansNums"></el-input>
      </el-form-item>
      <el-form-item label="点赞数量" prop="likeNums" style="width: 350px;">
        <el-input type="number" v-model="dataForm.likeNums"></el-input>
      </el-form-item>
      <el-form-item label="收藏数量" prop="collectionNums" style="width: 350px;">
        <el-input type="number" v-model="dataForm.collectionNums"></el-input>
      </el-form-item>
      <el-form-item label="评论数量" prop="commitNums" style="width: 350px;">
        <el-input type="number" v-model="dataForm.commitNums"></el-input>
      </el-form-item>
      <el-form-item label="推广平台" prop="platform" style="width: 350px;">
        <el-input v-model="dataForm.platform" placeholder="如 抖音 小红书 快手 等等"></el-input>
      </el-form-item>
      <el-form-item label="推广风格" prop="type" style="width: 350px;">
        <el-input v-model="dataForm.type" placeholder="如 二次元 韩娱 内娱 等等"></el-input>
      </el-form-item>
      <el-form-item label="推广链接" prop="promotionLink">
        <el-input v-model="dataForm.promotionLink" placeholder="请携带请求协议，比如https://或者http://"></el-input>
      </el-form-item>
      <el-form-item label="发布时间" prop="type">
        <el-date-picker
          size="small"
          v-model="dataForm.publishTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button class="default-btn" @click="visible = false">{{$t("crud.filter.cancelBtn")}}</el-button>
      <el-button class="default-btn primary-btn" type="primary" @click="dataFormSubmit()">{{$t("crud.filter.submitBtn")}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      dataForm: {
        id: null,
        promotionLink: null,
        orderNumber: null,
        prodName:null,
        upName: null,
        linkName:null,
        likeNums:null,
        collectionNums:null,
        commitNums:null,
        platform:null,
        type:null,
        publishTime:null

      },
      dataRule: {
      }
    }
  },
  methods: {
    init (id, orderNumber,prodName) {
      this.dataForm.id = id;
      this.dataForm.orderNumber = orderNumber;
      this.dataForm.prodName = prodName;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl('/order/orderPromotion/info/' + this.dataForm.id),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            this.dataForm = data
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/order/orderPromotion'),
            method: this.dataForm.id ? 'put' : 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.$message({
              message: this.$i18n.t('publics.operation'),
              type: 'success',
              duration: 500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          })
        }
      })
    }
  }
}
</script>
