<template>
  <div class="goods-after-sale">
    <el-card class="box-card" ref="paramsvalue">
      <div slot="header" class="clearfix">
        <span>商品参数</span>  <span style="font-size:13px;padding-left:20px;font-weight: 400;">参数名称/参数值</span>
      </div>
      <draggable  :list="goodsAfterSaleForm.params" group="article" class="dragArea">
        <div v-for="(element,index) in goodsAfterSaleForm.params" :key="index" class="list-complete-item">
          <el-row :gutter="24" style="padding-left:50px;">
            <el-col :span="8" style="height:50px;">
              <el-input
                  type="text"
                  placeholder="参数名称"
                  v-model="element.title"
                  maxlength="15"
                  show-word-limit
                  size="small"
                ></el-input>
            </el-col>
            <el-col :span="12" style="height:50px;">
              <el-input
              type="text"
              placeholder="参数值"
              v-model="element.value"
              maxlength="60"
              show-word-limit
              size="small"
            ></el-input>
            </el-col>
            <el-col :span="4" style="height:50px;">
              <span v-show="index!=0"  style="height:50px;line-height: 40px;" @click="deleteparameter(index)">
                <i style="color:#ff4949" class="el-icon-delete curspor" />
              </span>
              <span  style="height:50px;line-height: 40px;">
              <i style="color:#ff4949" class="el-icon-rank curspor" />
            </span>
            </el-col>
          </el-row>
        </div>
      </draggable>

      <el-button style="margin-left:50px;margin-bottom:30px;" type="primary" size="small" @click="addparameter">添加参数</el-button>
    </el-card>
    <el-form ref="goodsAfterSaleForm" :model="goodsAfterSaleForm" :rules="goodsAfterSaleRules" label-width="150px" size="small">
    <el-card class="box-card"  ref="salesvalue">
    <div slot="header" class="clearfix">
      <span>售后及服务</span>
    </div>


      <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>


  </el-card>

<!--  <el-card class="box-card" ref="outhervalue">-->
<!--    <div slot="header" class="clearfix" >-->
<!--      <span>其他设置</span>-->
<!--    </div>-->

<!--&lt;!&ndash;        <el-form-item label='商品关键词：' prop="goods_des">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model.trim="goodsAfterSaleForm.goods_des" placeholder="请输入商品关键词" style="width:420px;"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;          <span class="tip-span ml20">关键词之间用 <strong>英文逗号</strong> 分开，最多可以添加5个</span>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->

<!--        <el-form-item label="商品产地：" prop="producing_area">-->
<!--          <el-select v-model.trim="goodsAfterSaleForm.producing_area" placeholder="请选择商品产地" style="width: 420px;">-->
<!--            <el-option-->
<!--              v-for="item in areaOptions"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label="商品发货地：" prop="deliver_area">-->
<!--          <el-select v-model.trim="goodsAfterSaleForm.deliver_area" placeholder="请选择商品发货地" style="width: 420px;">-->
<!--            <el-option-->
<!--              v-for="item in areaOptions"-->
<!--              :key="item.id"-->
<!--              :label="item.name"-->
<!--              :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->

<!--        <el-form-item label='商品单位：' prop="unit">-->
<!--          <el-input v-model.trim="goodsAfterSaleForm.unit" placeholder="请输入商品单位" style="width:420px;"></el-input>-->
<!--  &lt;!&ndash;        <span class="tip-span ml20">关键词之间用逗号分开，最多可以添加5个</span>&ndash;&gt;-->
<!--        </el-form-item>-->

<!--&lt;!&ndash;        <el-form-item label='市场参考价链接：' prop="web_url">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-input v-model.trim="goodsAfterSaleForm.web_url" placeholder="请输入京东或者淘宝的商品链接" style="width:420px;"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-form-item>&ndash;&gt;-->
<!--        <el-form-item label='商品编码：' prop="out_goods_id">-->
<!--          <el-input v-model.trim="goodsAfterSaleForm.out_goods_id" placeholder="请输入商品编码（非必须）" style="width:420px;"></el-input>-->
<!--        </el-form-item>-->


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

<script>
  import { GetFreight } from '@/api/module/goods'
  import draggable from 'vuedraggable'
  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 {
        areaOptions: [], // 地址 省
        list:[
          {
            key:'1',
            value:''
          },{
            key:'2',
            value:''
          },
          {
            key:'3',
            value:''
          },
          {
            key:'4',
            value:''
          },
          {
            key:'5',
            value:''
          }
        ],
        goodsAfterSaleForm: {
          stags: [],
          freight_id: 310,
          delay_compensate: 24,
          aftersale_time: 7,
          // 参数
          params:[
            {
              'title':'',
              'value':''
            }
          ],
        },
        goodsAfterSaleRules: {
          stags: [{ type: 'array', required: true, message: '请选择至少一个服务标签', trigger: 'change' }],
          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
    },
    components: { draggable },
    mounted() {
      this.getFreightData();
      // debugger
      // console.log('售后数据：',this.goodsaftersale);
      if(this.goodsaftersale) {
        this.goodsAfterSaleForm = this.goodsaftersale;
      }
    },
    created() {
      // 获取 省
      // this.getArea();
    },
    methods: {
      // 添加参数
      addparameter(){
        let obj = {
          title:'',
          value:''
        }
        this.goodsAfterSaleForm.params.push(obj)
      },
      deleteparameter(index){
        this.goodsAfterSaleForm.params.splice(index, 1)
      },
      /** 售后服务数据 初始化 */
      initInfo() {
        this.$refs.goodsAfterSaleForm.resetFields();
      },
      // 运费模板
      getFreightData() {
        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
            // if(this.goodsAfterSaleForm.producing_area==''||this.goodsAfterSaleForm.deliver_area==''||this.goodsAfterSaleForm.unit==''){
            //   sessionStorage.setItem('clickbtm',1)
            // }else{
            //   sessionStorage.setItem('clickbtm',2)
            // }
          }
        })
        return flag
      },

    } // methods end
  }
</script>

<style lang="scss" type="text/stylus" scoped>
.goods-after-sale {
  padding: 20px;
  margin-bottom:20px;
  box-shadow:none;
}
.box-card{
  margin-bottom: 20px;
  //padding: 10px;
}
::v-deep .box-card .el-card__header{
  border-bottom: none;
  font-size: 18px;
  font-weight: 500;
  padding-left: 20px;
}
.curspor{
  font-size: 16px;
}
.curspor:hover{
  cursor: pointer;
}
</style>
