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

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

      <el-form-item label="邮费模板：" prop="freight_id">
        <el-select v-model="goodsAfterSaleForm.freight_id" 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="delay_compensate">
        <el-select v-model="goodsAfterSaleForm.delay_compensate" 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="aftersale_time">
        <el-select v-model="goodsAfterSaleForm.aftersale_time" 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 checkStags = (rule, value, callback) => {
        if (this.goodsAfterSaleForm.stags.length === 0) {
          callback(new Error("请选择服务类型"));
        } else {
          callback();
        }
      };
      return {
        goodsAfterSaleForm: {
          stags: [],
          freight_id: 310,
          delay_compensate: 24,
          aftersale_time: 7
        },
        goodsAfterSaleRules: {
          stags: [{required: true, validator: checkStags}],
          freight_id: [{required: true, message: '请选择邮费模板', trigger: 'change'}],
          delay_compensate: [{required: true, message: '请选择发货时效', trigger: 'change'}],
          aftersale_time: [{required: true, message: '请选择售后时长', trigger: 'change'}]
        },
        tagOptions: [
          {id: 2, tag: "假一赔十"},
          {id: 3, tag: "7天退换"},
          {id: 4, tag: "不可退换"},
          {id: 5, tag: "厂家直供"},
          {id: 6, tag: "售后无忧"}
        ],
        freightOptions: []
      } // return end
    },
    mounted() {
      this.getFreightData();
      //debugger
      console.log('售后数据：',this.goodsaftersale);
      if(this.goodsaftersale && this.goodsaftersale.stags.length > 0) {
        this.goodsAfterSaleForm = this.goodsaftersale;
      }
    },
    methods: {
      // 运费模板
      getFreightData() {
        // let query = { page: 1, limit: 50 };
        GetFreight().then(res => {
          if(res.data) {
            this.freightOptions = res.data;
          }else {
            this.freightOptions = ''
          }
        });
      },
      // 服务标签，7天退换、不可退换互斥
      serviceTagsChange(id) {
        let index4 = this.goodsAfterSaleForm.stags.indexOf(4);
        let index3 = this.goodsAfterSaleForm.stags.indexOf(3);
        if(id == 3) {
          if( index4 > -1) {
            this.goodsAfterSaleForm.stags.splice(index4,1)
          }
        }
        if(id == 4) {
          if( index3 > -1) {
            this.goodsAfterSaleForm.stags.splice(index3,1)
          }
        }
      },
      // 商品信息 子组件 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>