<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="期数名称"  prop="periods_id">
            <el-select v-model="form.periods_id" placeholder="请选择" >
              <el-option
                v-for="item in goodList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </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 goodList"
                :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="推广人ID" >
            <el-input v-model="form.invite_id"></el-input>
          </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} 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:"",
        
        },
        goodList:[],
        buyTypeOptions:BUYTYPEOPTION,
        pickerOptions1:'',
        buyWayOptioms:BUYWay,

      }
    },
     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:data.city,
          area:data.area,
          city_name:data.city_name,
          district_name:data.district_name,
          district:data.district,
          province: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
         }
          console.log(json)
        // this.newdialogObj.show=false
        if(json.province_name && json.address && json.receive_mobile && json.receive_name){
          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=>{
          console.log(res)
          this.goodList = res.list;
        })
      },
    },
    mounted(){
    },
    watch:{
      'newdialogObj'(value){
        this.getGoodsOption()
      }
    }
  }
</script>

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