<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;">参数名称/参数值</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
                ></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
            ></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" @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> 
     
        <el-form-item label='商品关键词：' prop="goods_des">
          <el-input v-model.trim="goodsAfterSaleForm.goods_des" placeholder="请输入商品关键词" style="width:420px;"></el-input>
          <span class="tip-span ml20">关键词之间用 <strong>英文逗号</strong> 分开，最多可以添加5个</span>
        </el-form-item>
  
        <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>
  <!--        <span class="tip-span ml20">关键词之间用逗号分开，最多可以添加5个</span>-->
        </el-form-item>
  
        <el-form-item label='市场参考价链接：' prop="web_url">
          <el-input v-model.trim="goodsAfterSaleForm.web_url" placeholder="请输入京东或者淘宝的商品链接" style="width:420px;"></el-input>
        </el-form-item>
        <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 { getAreaList } from '@/api/module/retreat/address'
  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':''
            }
          ],//参数
          goods_des:'',//关键词
          producing_area:'',//产地
          deliver_area:'',//发货地
          unit:'',//单位
          web_url:'',//外部市场链接
          out_goods_id:''//商品编码
        },
        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'}],
          producing_area:[{required: true, message: '请选择商品产地', trigger: 'change'}],
          deliver_area: [{required: true, message: '请选择商品发货地', trigger: 'change'}],
          unit: [{required: true, message: '商品单位不能为空', trigger: 'blur'}],
          goods_brand: [{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: {
       // 获取 省
       getArea() {
        let limboNode = {
          pid: 0
        };
        getAreaList(limboNode).then( res => {
          if( res.data && res.data.length > 0) {
            this.areaOptions = res.data;
          }else {
            this.areaOptions = [];
          }
        });
      },
      // 添加参数
      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;
}
.box-card /deep/ .el-card__header{
  background: #F1F1F6;
}
.curspor{
  font-size: 16px;
}
.curspor:hover{
  cursor: pointer;
}
</style>