<template>
  <el-dialog
    title="新增订单"
    center 
    append-to-body
    :visible.sync="newdialogObj.show"
    width="900px">
       <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-row>
        <el-col :span="12">
         <el-form-item label="期数名称">
                <el-cascader
                :options="periodsList"
                :props="{value:'id',label:'name'}"
                @active-item-change="handleItemChange"
                @change="changePeriods"
                v-model="selectedGoods"
              >
              </el-cascader>
          </el-form-item>
           </el-col>
            <el-col :span="12">
           <el-form-item label="商品名称"  prop="goods_id">
            <el-select v-model="form.goods_id"  placeholder="请选择">
              <el-option
                v-for="(data,index) in goodsList"
                :key="index"
                :label="data | filterGoods"
                :value="data.id">
              </el-option>
            </el-select>
          </el-form-item>
           </el-col>
          </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="用户ID" prop="user_id" >
            <el-input v-model="form.user_id"></el-input>
          </el-form-item>
           </el-col>
          </el-row>
             <el-row>
        <el-col :span="12">
          <el-form-item label="实付金额(元)" prop="money" >
            <el-input v-model="form.money"></el-input>
          </el-form-item>
           </el-col>
            <el-col :span="12">
          <el-form-item label="购买方式"  prop="buy_type">
            <el-select v-model="form.buy_type"  placeholder="请选择">
              <el-option
                v-for="item in buyTypeOptions"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
           </el-col>
          </el-row>
            <el-row>
          <el-col :span="12">
          <el-form-item label="添加推广人" >
            <!-- <el-input v-model="form.invite_id"></el-input> -->
             <el-select
                v-model="form.invite_id"
                filterable
                clearable
                placeholder="请输入名称"
                :remote-method="remoteMethod"
               >
                <el-option
                  v-for="item in teacherList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
            </el-option>
          </el-select>
          </el-form-item>
           </el-col>
          </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="备注">
             <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          </el-col>
        </el-row>
           <vue-address :province="form.province_name" :city="form.city" :district="form.area" :detail="form.address" :mobile="form.receive_mobile" :name="form.receive_name" @change="handlerAddressChange">
           </vue-address>
           <el-form-item label="支付类型"  prop="order_type">
            <el-select v-model="form.order_type"  placeholder="请选择">
              <el-option
                v-for="item in buyWayOptioms"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付时间" prop="pay_at" >
            <el-date-picker
              v-model="form.pay_at"
              type="datetime"
              :picker-options="pickerOptions1"
              default-time="12:00:00"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="newdialogObj.show = false">取 消</el-button>
      <el-button type="primary" @click="saveAddOrder(form)">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getGoodsListApi,setOrderApi,getPeriodsApi,getTeacherListApi} from "../../service/api"
  import vueAddress from '../framework/address-picker/Address'
  import AddressArray from '../framework/address-picker/addr'
  import {ORDERSTATUS,BUYTYPEOPTION,BUYWay,GOODSTYPE} from "../../util/wordbook"
  import CommonJs from '../../util/common';
  export default {
    name: "newdialogObj",
    props:[
      'newdialogObj'
    ],
    data(){
      return{
        rules:{
          periods_id: [
            { required: true, message: '请输入期数名称', trigger: 'change' }
          ],
          goods_id: [
            { required: true, message: '请输入商品名称', trigger: 'change' }
          ],
          money: [
            { required: true, message: '请输入金额', trigger: 'blur' }
          ],
           user_id: [
            { required: true, message: '请输入用户ID', trigger: 'blur' }
          ],
          pay_at: [
            { required: true, message: '请选择日期', trigger: 'change' }
          ],
          buy_type:[
             { required: true, message: '请选择购买方式', trigger: 'change' }
          ],
          order_type:[
             { required: true, message: '请选择支付类型', trigger: 'change' }
          ]
        },
        form:{
          periods_id:"",
          goods_id:"",
          user_id:"",
          money:"",
          buy_type:"",
          invite_id:"",
          desc:"",

          province_name:"",
          city:"",
          area:"",
          city_name:"",
          district_name:"",
          district:"",
          province:"",
          address:"",
          receive_mobile:"",
          receive_name:"",
          order_type:"",
          pay_at:"",
        
        },
        goodsList:[],
        periodsList:[],
        selectedGoods:[],
        buyTypeOptions:BUYTYPEOPTION,
        pickerOptions1:'',
        buyWayOptioms:BUYWay,
          teacherList: [],

      }
    },
     components:{
      vueAddress
    },
      filters:{
       filterGoods(val){
          return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      }
    },
    methods:{
      saveAddOrder(data){
           this.$refs['form'].validate((valid) => {
          if (valid) {
             let json={
          periods_id:data.periods_id,
          goods_id:data.goods_id,
          user_id:data.user_id,
          money:data.money,
          buy_type:data.buy_type,
          province_name:data.province_name,
          city_id:data.city,
          city:data.city_name,
          area:data.district_name,
          area_id:data.district,
          province_id:data.province,
          address:data.address,
          receive_mobile:data.receive_mobile,
          receive_name:data.receive_name,
          order_type:data.order_type,
        }
        // 元转分
        json.money=json.money*100.0;
         if(data.pay_at){
          json.pay_at = CommonJs.dateFmt( data.pay_at,"yyyy-MM-dd hh:mm:ss");
        }
        if(this.form.invite_id){
          json.invite_id = this.form.invite_id
         }
          if(this.form.desc){
          json.desc = this.form.desc
         }
         json.invite_type="TEACHER";
         json.status=2;
         json.invite_earnings=0;
         json.is_captain="";
         json.out_trade_no="1"
          console.log(json)
        if(json.province_name && json.address && json.receive_mobile && json.receive_name){
        setOrderApi(json).then(res=>{
            this.newdialogObj.show=false

          this.$message({
          message: '添加成功',
          type: 'success'
        });
          })
        }else{
           this.$message({
        message: "缺少必填项",
        type: "warning"
      });
        }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handlerAddressChange(val){
         if(!val.province || !val.city || !val.district){
          return
        }
        this.form.address = val.detail;
        this.form.province = val.province;
        this.form.city = val.city;
        this.form.receive_mobile = val.mobile;
        this.form.receive_name = val.name;
        let provinceObj = AddressArray.filter((item) => {
          return item.value === val.province
        })
        let cityObj = provinceObj[0].children.filter((city) => {
          return city.value === val.city
        })
        let districtObj = cityObj[0].children.filter((district) => {
          return district.value === val.district
        })
        this.form.province_name = provinceObj[0].label;
        this.form.city_name = cityObj[0].label;
        this.form.district_name = districtObj.length > 0 ? districtObj[0].label : cityObj[0].children[0].label;
        this.form.district = districtObj.length > 0 ? districtObj[0].value : cityObj[0].children[0].value;
      },
       getGoodsOption(){
        let json = {
          page: 1,
          limit: 200
        };
        getGoodsListApi(json).then(res=>{
          this.goodsList = res.list;
        })
      },
       getPeriodsList(){
        let json = {
          page: 1,
          limit: 100,
          goods_type:'1,2'
        };
        getGoodsListApi(json).then(res=>{
          res.list.forEach(i=>{
             i.name = '[' + GOODSTYPE[i.goods_type] + ']' + '[' +i.current_price / 100 + '元]' + i.name
            i.children = [];
          });
          this.periodsList = res.list;
        });
      },
     handleItemChange(val){
        getPeriodsApi({goods_id:val[0]}).then(res=>{
          res.list.forEach(i=>{i.name = i.title});
          this.periodsList.find(i=>{return i.id === val[0]}).children = res.list
        })
      },
        changePeriods(data){
        if(data.length>1){
          this.form.periods_id=data[1];
        }
      },
        getTeacherList(name){
        let json = {
          limit: 100,
          page: 1
        };
        if(name) {
            json.name = name
        }
        getTeacherListApi(json).then(res=>{
          this.teacherList = res.list
        });
      },
       remoteMethod(query) {
        if (query !== '') {
          this.getTeacherList(query);
        } else {
          this.getTeacherList();
        }
      },
    },
    mounted(){
      this.getGoodsOption();
      this.getPeriodsList();
      this.getTeacherList();
    },
  }
</script>

<style scoped lang="less">
  .dialog-footer{
    display: block;
    text-align: center;
  }
</style>
