<template>
  <el-dialog
    :title="dialogObj.title"
    center
    :visible.sync="dialogObj.show"
    width="900px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" label-width="100px" :disabled="dialogObj.type === 2">
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称" required>
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品描述" required>
              <el-input v-model="form.goods_desc.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品类型" required>
              <el-select v-model="form.goods_type" placeholder="请选择">
                <el-option
                  :label="'普通商品'"
                  :value="1">
                </el-option>
                <el-option
                  :label="'团购商品'"
                  :value="2">
                </el-option>
                <el-option
                  :label="'续课商品'"
                  :value="3">
                </el-option>
                <el-option
                  :label="'优惠券商品'"
                  :value="4">
                </el-option>
                 <el-option
                  :label="'实物商品'"
                  :value="5">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.goods_type === 4">
            <el-form-item label="可用商品" required>
              <el-select multiple v-model="goodsYou" placeholder="全部">
                <el-option v-for="data in goodsList"
                           :key="data.id"
                           :label="data | filterGoods"
                           :value="data.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.goods_type === 3">
          <el-col :span="12">
            <el-form-item label="续课已购商品" required>
              <el-select v-model="goOn_goods_Id.before_goods_id" placeholder="请选择">
                <el-option v-for="data in goodsList"
                           :key="data.id"
                           :label="data | filterGoods"
                           :value="data.id">

                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="续购商品" required>
              <el-select v-model="goOn_goods_Id.after_goods_id" placeholder="请选择">
                <el-option v-for="data in goodsList"
                           :key="data.id"
                           :label="data | filterGoods"
                           :value="data.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.goods_type !== 3 && form.goods_type !== 4 && form.goods_type !== 5">
          <el-col :span="12">
            <el-form-item label="课程类型" required>
              <el-select v-model="form.course_type" placeholder="请选择" @change="changeLessonType()">
                <el-option
                  :label="'日课'"
                  :value="1">
                </el-option>
                <el-option
                  :label="'月课'"
                  :value="0">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程" required>
              <el-select v-model="form.course_id" placeholder="请选择">
                <el-option
                  v-for="data in lessonList"
                  :key="data.id"
                  :label="data.title"
                  :value="data.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.goods_type !== 3 && form.goods_type !== 4  && form.goods_type !== 5">
          <el-col :span="12">
            <el-form-item label="观看时长(节)" required>
              <el-input-number v-model="form.watch_num" label="课时数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="续看时长(天)" required>
              <el-input-number v-model="form.duration_num" label="看课天数"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="课程封面(670*472)" v-if="form.goods_type !== 3 && form.goods_type !== 4  && form.goods_type !== 5" required>
          <el-upload
            list-type="picture-card"
            class="upload-demo"
            action="/api/public/upload"
            :http-request="uploadFileLesson"
            :on-remove="removeFileLesson"
            :limit="1"
            :file-list="form.goods_desc.imgLesson"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="主图(750*600)" required>
          <el-upload
            list-type="picture-card"
            class="upload-demo"
            action="/api/public/upload"
            :http-request="uploadFileMain"
            :on-remove="removeFileMain"
            :file-list="form.goods_desc.img"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="客服(200*200)">
          <el-upload
            list-type="picture-card"
            class="upload-demo"
            :class="form.desc.customer_service && form.desc.customer_service.length > 0 ? 'uploadService' : ''"
            action="/api/public/upload"
            :limit="1"
            :http-request="uploadFileMainService"
            :on-remove="removeFileService"
            :file-list="form.desc.customer_service">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="推荐奖金(元)" v-if="form.goods_type === 1">
          <el-input-number v-model="form.invite_earnings" label="推荐奖金"></el-input-number>
        </el-form-item>
        <el-form-item label="是否配置实物" v-if="form.goods_type === 1 || form.goods_type === 2">
          <el-switch
            v-model="form.is_real"
            :active-value="1"
            :inactive-value="0">
          </el-switch> <span style="font-size: 12px;">打开后提示用户填写具体住址</span>
        </el-form-item>
        <el-row v-if="form.goods_type === 1 ">
          <el-col :span="12">
            <el-form-item label="是否允许用户推广" label-width="200">
              <el-switch
                v-model="form.is_auth_user"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否允许老师推广" label-width="200">
              <el-switch
                v-model="form.is_auth_teacher"
                :active-value="1"
                :inactive-value="0">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item :label="form.goods_type === 1 || form.goods_type === 3 || form.goods_type === 5 ? '原价(元)' :form.goods_type === 4 ? '抵扣价格(元)' : '单买价格(元)'" required>
              <el-input-number v-model="form.original_price" label="原价"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="form.goods_type === 1  || form.goods_type === 3 || form.goods_type === 5 ? '现价(元)' :form.goods_type === 4 ? '购买价格(元)' : '拼团价格(元)'" required>
              <el-input-number v-model="form.current_price" label="现价"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="form.goods_type === 2">
          <el-col :span="12">
            <el-form-item label="成团人数(人)" >
              <el-input-number v-model="form.desc.group_number" label="成团人数"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="团购失效时间(小时)" label-width="136">
              <el-input-number v-model="form.desc.group_continue" label="团购失效时间"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row  v-if="form.goods_type !== 3 || form.goods_type !== 5" required>
          <el-col :span="12">
            <el-form-item label="分享标题" required>
              <el-input v-model="form.share_desc.title"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分享内容" required>
              <el-input v-model="form.share_desc.content"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="分享主图(300*300)" v-if="form.goods_type !== 3 || form.goods_type !== 5" required>
          <el-upload
            list-type="picture-card"
            action="/api/public/upload"
            :limit="1"
            :file-list="form.share_desc.img"
            :http-request="uploadFileMainShare">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分享海报" v-if="form.goods_type !== 3 || form.goods_type !== 5" required>
          <el-upload
            list-type="picture-card"
            action="/api/public/upload"
            :limit="1"
            :file-list="form.share_desc.refImg"
            :http-request="uploadFileMainShareRef">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品详情" required>
              <!-- <el-input type="textarea" :rows="25" v-model="form.desc.detail"></el-input> -->
              <editor-detail  :lookData="form.desc" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="购买须知" required>
              <!-- <el-input type="textarea" :rows="25" v-model="form.desc.qa"></el-input> -->
              <editor-know  :lookData1="form.desc"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="dialogObj.type !== 2">
        <el-button @click="dialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </div>
  </el-dialog>

</template>

<script>
  import {getLessonApi,addGoodsApi,editGoodsApi,getGoodsDetailApi,uploadFileApi,getGoodsListApi} from "../../service/api";
  import {TEACHERTYPE,GOODSTYPE} from "../../util/wordbook";
 import editorDetail from "./editorDetail"
 import editorKnow from "./editorKnow"
  export default {
    name: "dialogObj",
    props:[
      'dialogObj',
    ],
  components: { // 引入组件
      editorDetail,
      editorKnow
    },
    filters: {
      filterGoods(val){
        return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      }
    },
    data(){
      return{
        tiny:{
          height:300
        },
        sendObj:{
          content:'nihao'
        },
        loading:true,
        goodsYou:[],
        goodsList:[],
        form:{
          name:'',
          goods_type:1,
          goods_desc:{
            desc:"",
            imgLesson:[],
            img:[]
          },
          course_id	:'',
          course_type:0,
          watch_num:'',
          invite_earnings:0,
          original_price:'',
          current_price:'',
          is_real:0,
          is_auth_user:0,
          is_auth_teacher:0,
          share_desc:{
            title:'',
            content:'',
            img:[],
            refImg:[]
          },
          desc:{
            detail:"",
            qa:"",
            customer_service:[],
            after_goods_id:'',
            before_goods_id:''
          }
        },
        lessonList:[],
        goOn_goods_Id:{
          after_goods_id:'',
          before_goods_id:''
        }
      }
    },
    methods:{
      sub(){
        let _json = JSON.parse(JSON.stringify(this.form)+'');
        if(_json.goods_type === 3 || _json.goods_type === 4 || _json.goods_type === 5){
          _json.course_id=0;
          _json.watch_num = 0;
        }
        if(_json.goods_type === 5){
          _json.is_real=1;
        }
        _json.desc.before_goods_id = this.goOn_goods_Id.before_goods_id;
        if(this.goodsYou.length < 1){
          _json.desc.use_goods_ids = ''
        }else{
          _json.desc.use_goods_ids = this.goodsYou.toString()
        }
        _json.desc.after_goods_id = this.goOn_goods_Id.after_goods_id;
        _json.original_price = (_json.original_price*100).toFixed(0);
        _json.current_price = (_json.current_price*100).toFixed(0);
        _json.invite_earnings = (_json.invite_earnings*100).toFixed(0);
        _json.goods_desc = JSON.stringify(_json.goods_desc);
        _json.desc = JSON.stringify(_json.desc);
        _json.share_desc = JSON.stringify(_json.share_desc);
        switch(this.dialogObj.type){
          case 1:
            editGoodsApi(this.dialogObj.id,_json).then(res=>{
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.$emit("reflash");
              this.dialogObj.show = false;
            });
            break;
          case 0:
            // this.$refs['form'].validate((valid) => {
            //   if(valid){
            addGoodsApi(_json).then(res=>{
              this.$message({
                type: 'success',
                message: '新增成功!'
              });
              this.$emit("reflash");
              this.dialogObj.show = false;
            })
            //   }
            // });
            break
        }
      },
      removeFileMain(a){
        let x = this.form.goods_desc.img.findIndex(i=>{return i.name === a.name});
        this.form.goods_desc.img.splice(x,1);
      },
      uploadFileLesson(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.form.goods_desc.imgLesson=[{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}];
          this.$message({
            message: '上传成功',
            type: 'success'
          });
        })
      },

      removeFileLesson(){
        this.form.goods_desc.imgLesson=[]
      },

      uploadFileMain(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.form.goods_desc.img.push({name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''});
          this.$message({
            message: '上传成功',
            type: 'success'
          });
        })
      },
      removeFileShareRef(){
        this.form.share_desc.refImg=[]
      },
      uploadFileMainShareRef(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.$message({
            message: '上传成功',
            type: 'success'
          });
          if(this.form.share_desc.refImg){
            this.form.share_desc.refImg[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }else{
            this.form.share_desc.refImg=[];
            this.form.share_desc.refImg[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }
        })
      },
      uploadFileMainShare(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.$message({
            message: '上传成功',
            type: 'success'
          });
          if(this.form.share_desc.img){
            this.form.share_desc.img[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }else{
            this.form.share_desc.img=[];
            this.form.share_desc.img[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }
        })
      },
      removeFileService(){
        this.form.desc.customer_service=[];
      },
      uploadFileMainService(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.$message({
            message: '上传成功',
            type: 'success'
          });
          if(this.form.desc.customer_service){
            this.form.desc.customer_service[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }else{
            this.form.desc.customer_service=[];
            this.form.desc.customer_service[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }
        })
      },
      uploadFileShare(a){
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.$message({
            message: '上传成功',
            type: 'success'
          });
          if(this.form.share_desc.img){
            this.form.share_desc.img[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }else{
            this.form.share_desc.img=[];
            this.form.share_desc.img[0] = {name:res.url,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''}
          }
        })
      },
      initDialog(){
        getGoodsListApi({limit:9999}).then(res=>{
          this.goodsList = res.list
        });
        switch(this.dialogObj.type){
          case 0:
            this.loading = false;
            this.goOn_goods_Id.after_goods_id = '';
            this.goodsYou = [];
            this.goOn_goods_Id.before_goods_id = '';
            this.form={
              name:'',
              goods_type:1,
              goods_desc:{
                desc:"",
                img:[]
              },
              course_id	:'',
              course_type:0,
              watch_num:'',
              duration_num:0,
              original_price:'',
              current_price:'',
              is_real:0,
              is_auth_user:0,
              is_auth_teacher:0,
              share_desc:{
                title:'',
                content:'',
                refImg:[],
                img:[]
              },
              desc:{
                detail:"",
                qa:"",
                customer_service:[],
                before_goods_id:0,
                after_goods_id:0
              }
            },
              this.getLessonList();
            break;
          case 1: case 2:
          this.goOn_goods_Id.after_goods_id = '';
          this.goOn_goods_Id.before_goods_id = '';
          this.goodsYou = [];
          this.form={
            name:'',
            goods_type:1,
            goods_desc:{
              desc:"",
              img:[]
            },
            course_id	:'',
            course_type:0,
            watch_num:'',
            duration_num:0,
            original_price:'',
            current_price:'',
            is_real:0,
            is_auth_user:0,
            is_auth_teacher:0,
            share_desc:{
              title:'',
              content:'',
              refImg:[],
              img:[]
            },
            desc:{
              detail:"",
              qa:"",
              customer_service:[],
              before_goods_id:0,
              after_goods_id:0
            }
          };
          getGoodsDetailApi(this.dialogObj.id).then(res=>{
            this.loading = false;
            let share_desc = JSON.parse(res.share_desc);
            if(!share_desc.refImg){
              share_desc.refImg = []
            }
            this.form={
              name:res.name,
              goods_type:res.goods_type,
              goods_desc:JSON.parse(res.goods_desc),
              course_id	:res.course_id,
              course_type:res.course_type,
              watch_num:res.watch_num,
              duration_num:res.duration_num,
              original_price:res.original_price/100,
              current_price:res.current_price/100,
              is_real:res.is_real,
              is_auth_user:res.is_auth_user,
              share_desc:JSON.parse(res.share_desc),
              desc:JSON.parse(res.desc),
              invite_earnings: res.invite_earnings/100,
              is_auth_teacher: res.is_auth_teacher
            };
            if(this.form.desc.before_goods_id){
              this.goOn_goods_Id.before_goods_id = this.form.desc.before_goods_id;
            }
            if(this.form.desc.after_goods_id){
              this.goOn_goods_Id.after_goods_id = this.form.desc.after_goods_id;
            }
            if(this.form.desc.use_goods_ids){
              this.goodsYou = this.form.desc.use_goods_ids.split(',');
              this.goodsYou=this.goodsYou.map(function(item) {
                return +item;
              });
            }
            this.getLessonList()
          });
          break;
          case 3:
            this.title = '编辑';
            this.show = this.dialogObj.show;
            this.id = this.dialogObj.id;
            this.type = 2;
//            getTeacherDetailApi(this.id).then(res=>{
//              this.form.name = res.name;
//              this.form.alias = res.alias;
//              this.form.qr = res.qr;
//              this.form.type = res.type;
//              this.form.status = res.status;
//              this.loading = false
//            });
            break
        }
      },
      changeLessonType(){
        this.getLessonList()
      },
      getLessonList(){
        getLessonApi({type:this.form.course_type}).then(res=>{
          this.lessonList = res.list
        })
      }
    },
    watch:{
      dialogObj:{
        handler: function () {
          this.loading = true;
          this.initDialog()
        },
        deep: true
      },
      "dialogObj.show":function(a){
      },
      show(value){
        this.$emit("changeShow",value);
      }
    }
  }
</script>

<style scoped lang="less">
  .el-col{
    min-height: 50px;
    text-align: center;
    margin-bottom: 10px;
    line-height: 40px;
    .el-select,.el-select{
      width: 100%;
    }
    img{
      width: 50px;
      border-radius: 100px;
    }
    label{
      color: #5982e6;
    }
  }
  .dialog-footer{
    display: block;
    text-align: center;
  }
  .size {
    color: #666;
    font-size: 14px;
  }
</style>
