<template>
  <div class="goods-after-sale">
    <el-form ref="goodsAfterSaleForm" :model="goodsAfterSaleForm" :rules="goodsAfterSaleRules" label-width="150px" size="small">

      <el-form-item label="服务标签：" prop="fwbq">
        <el-checkbox-group v-model="goodsAfterSaleForm.fwbq">
          <el-checkbox v-for="item in tagOptions" :label="item.id" true-label :key="item.id">{{item.tag}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="邮费模板：" prop="freightId">
        <el-select v-model="goodsAfterSaleForm.freightId" placeholder="请选择邮费模板" style="width:400px;">
          <el-option v-for="item in freightOptions" :key="item.Id" :label="item.Name" :value="item.Id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发货时效：" prop="Delayompensate">
        <el-select v-model="goodsAfterSaleForm.Delayompensate" style="width:400px;" placeholder="请选择发货时效">
          <el-option label="24小时" :value="24"></el-option>
          <el-option label="48小时" :value="48"></el-option>
          <el-option label="72小时" :value="72"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="售后时长：" prop="aftersaleTime">
        <el-select v-model="goodsAfterSaleForm.aftersaleTime" style="width:400px;" placeholder="请选择售后时长">
          <el-option label="7天" :value="7"></el-option>
          <el-option label="15天" :value="15"></el-option>
          <el-option label="30天" :value="30"></el-option>
        </el-select>
      </el-form-item>

<!--      <div style="width: 100%;height: 1000px;">我很高</div>-->

    </el-form>
  </div>
</template>

<script>
  import { GetFreight } from '@/api/module/goods'
  export default {
    name: "goodsaftersale",
    props: {
      goodsaftersale: {
        type: Object,
        required: true
      }
    },
    data() {
      let checkFwbq = (rule, value, callback) => {
        if (this.goodsAfterSaleForm.fwbq.length === 0) {
          callback(new Error("请选择服务类型"));
        } else {
          callback();
        }
      };
      return {
        goodsAfterSaleForm: {
          fwbq: [],
          freightId: 310,
          Delayompensate: 24,
          aftersaleTime: 7
        },
        goodsAfterSaleRules: {
          fwbq: [{required: true, validator: checkFwbq}],
          freightId: [{required: true, message: '请选择邮费模板', trigger: 'change'}],
          Delayompensate: [{required: true, message: '请选择发货时效', trigger: 'change'}],
          aftersaleTime: [{required: true, message: '请选择售后时长', trigger: 'change'}]
        },
        tagOptions: [
          {id: 2, tag: "假一赔十"},
          {id: 4, tag: "不可退还"},
          {id: 5, tag: "厂家直供"}
        ],
        freightOptions: []
      } // return end
    },
    mounted() {
      this.getFreightData();
    },
    methods: {
      // 运费模板
      getFreightData() {
        GetFreight().then(res => {
          if(res.data) {
            this.freightOptions = res.data
          }else {
            this.freightOptions = ''
          }
        });
      },
      // 商品信息 子组件 form表单校验, 在父组件中被调用
      validateGoodsAfterSaleForm () {
        let flag = null
        this.$refs['goodsAfterSaleForm'].validate(valid => {
          if (valid) {
            flag = true
          } else {
            flag = false
          }
        })
        return flag
      },

    } // methods end
  }
</script>

<style lang="scss" type="text/stylus" scoped>
.goods-after-sale {
  padding: 15px 0px;
  margin-top: 18px;
}
</style>
