<template>
  <el-dialog
    title="新增订单"
    center
    append-to-body
    :visible.sync="newdialogObj.show"
    width="70%">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">

      <el-form-item label="商品名称" prop="goods_id">
        <el-select v-model="form.goods_id" placeholder="请选择" @change="onOptionChange">
          <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 :span="10">
      <el-form-item label="期数名称" prop="periods_id">
         <el-select v-model="form.periods_id"  placeholder="请选择">
           <el-option
             v-for="(data,index) in periodsList"
             :key="index"
             :label="data.title"
             :value="data.id">
           </el-option>
         </el-select>
       </el-form-item>
      </el-col> -->

      <el-form-item label="用户ID" prop="user_id">
        <el-input width='100' v-model="form.user_id"></el-input>
        <el-button type="success" @click="onAddUser">+添加用户</el-button>
      </el-form-item>

      <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.user_id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="支付类型" prop="order_type">
        <el-select v-model="form.order_type" placeholder="请选择">
          <el-option
            v-for="item in buyWayOptioms"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="实付金额(元)" prop="money">
        <el-input-number v-model="form.money"></el-input-number>
      </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-item label="备注">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input v-model="form.out_trade_no"></el-input>
      </el-form-item>
      <vue-address :province="form.province" :city="form.city" :district="form.district" :detail="form.address" :mobile="form.receive_mobile" :name="form.receive_name" @change="handlerAddressChange">
      </vue-address>
    </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 :modal="false" :visible.sync="addShow">
      <el-form label-width="90px">
        <!--<el-form-item label="用户id">-->
        <!--<el-input v-model="addId"></el-input>-->
        <!--</el-form-item>-->
        <el-row>
          <el-col :span="8">
            <el-form-item label="ID">
              <el-input v-model="searchFrom.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="昵称">
              <el-input v-model="searchFrom.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model="searchFrom.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" :offset="16">
            <el-form-item>
              <el-button style="float: right" type="primary" plain @click="getUser">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="userList"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          className="f-c"
          label="用户">
          <template slot-scope="scope">
            <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
          </template>
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号">
        </el-table-column>
      </el-table>
      <page :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addShow = false">取 消</el-button>
        <el-button type="primary" @click="onAdd">确 定</el-button>
      </span>
    </el-dialog>

  </el-dialog>
</template>

<script>
import {getGoodsListApi,setOrderApi,getPeriodsApi,getTeacherListApi,getUserListApi,getOrderTypeApi} from "../../service/api"
  import vueAddress from '../framework/address-picker/Address'
  import AddressArray from '../framework/address-picker/addr'
  import {ORDERSTATUS,BUYWay,GOODSTYPE} from "../../util/wordbook"
  import CommonJs from '../../util/common';
  import page from '../framework/page'
  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' }
          ],
          order_type:[
             { required: true, message: '请选择支付类型', trigger: 'change' }
          ],
          out_trade_no:[
             { required: true, message: '请填写订单号', trigger: 'change' }
          ],
        },
         nowPage: 1,
          limit: 200,
          total:0,
        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:[],
        pickerOptions1:'',
        buyWayOptioms:[],
        teacherList: [],
        addShow:false,
        searchFrom:{
        },
        userList: [],
         multipleSelection: [],

      }
    },
     components:{
      vueAddress,
      page,
    },
      filters:{
       filterGoods(val){
          return '[' + GOODSTYPE[val.goods_type] + ']' + '[' +val.current_price / 100 + '元]' + val.name
      }
    },
    methods:{
       onPageChange(val){
        this.nowPage = val
        this.getUser()
      },
      onSizeChange(val){
        this.limit = val
        this.nowPage = 1;
        this.getUser()
      },
        handleSelectionChange(val) {
        this.multipleSelection = val;
      },
        getUser(){
        let json = {
          page: this.nowPage,
          limit: 5
        };
        if (this.searchFrom.userId) {
          json.user_id = this.searchFrom.userId
        }
        if (this.searchFrom.nickName) {
          json.nickname = this.searchFrom.nickName
        }
        if (this.searchFrom.mobile) {
          json.mobile = this.searchFrom.mobile
        }
        getUserListApi(json).then(res=>{
          this.userList = res.list;
          this.total = res.total;
        })
      },
      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,
          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;
         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
         }
         if(this.form.out_trade_no){
          json.out_trade_no = this.form.out_trade_no
         }
         json.invite_type="TEACHER";
        if(json.province_name && json.address && json.receive_mobile && json.receive_name){
        setOrderApi(json).then(res=>{
            this.newdialogObj.show=false
             this.$emit("reflash");
              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
        }
        console.log(val)
        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,
          course_type:0,
        };
        getGoodsListApi(json).then(res=>{
          this.goodsList = res.list;
        })
      },
     onOptionChange(id){
       this.form.periods_id="";
        getPeriodsApi({goods_id:id}).then((res) => {
           this.periodsList=res.list
        })
      },
        getTeacherList(name){
        let json = {
          limit: 100,
          page: 1
        };
        if(name) {
            json.name = name
        }
        getTeacherListApi(json).then(res=>{
          this.teacherList = res.list
        });
        getOrderTypeApi().then(res =>{
          this.buyWayOptioms = res 
        })
      },
       remoteMethod(query) {
        if (query !== '') {
          this.getTeacherList(query);
        } else {
          this.getTeacherList();
        }
      },
        onAddUser(){
        this.addShow = true;
        this.getUser();
      },
       onAdd(){
        if(this.multipleSelection.length === 0) {
          this.$message({
            type: 'error',
            message: '请选择用户!'
          });
          return
        } else if (this.multipleSelection.length !== 1){
          this.$message({
            type: 'error',
            message: '只能选择一个用户!'
          });
          return
        }
        this.form.user_id=this.multipleSelection[0].user_id;
         this.addShow = false;
      },
    },
    watch:{
      'newdialogObj.show'(val){
        if(val){
          this.getGoodsOption();
          this.getTeacherList();
        //   this.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:"",
        // };
        }
      }
    },
    mounted(){
    },
  }
</script>

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