<template>
  <div class="containerSty">
    <div class="searchSty" style="background: #ffffff;">
      <el-form :inline="true" style="display: flex;" :model="queryForm"
               class="demo-form-inline">
        <el-form-item label="会员电话:">
          <el-input v-model="queryForm.memberPhone" clearable placeholder="请输入会员电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #5875eb; border: 1px solid #5875eb; border-radius: 5px;"
                     icon="el-icon-search" @click="handleSearch"> 查询
          </el-button>
          <el-button type="primary" icon="el-icon-refresh"
                     style="border: 1px solid #5875eb; background: #ffffff; color: #5875eb; border-radius: 5px;"
                     @click="handleReset" plain>重置
          </el-button>
        </el-form-item>
        <el-form-item>
          <div style="color: #ea5504;">注意：须先查询过会员过信息后，才能新增加/修改会员信息！</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="contentSty">
      <el-row  style="height: 100%">
          <el-col :span="16" style="padding-right: 10px;height: 100%">
            <el-col :span="24" style="height: calc(100% - 48px);background-color: #ffffff; overflow-y: auto">
              <el-col :span="24" style="margin-top: 10px" class="searchSty">
                <div class="titleSty">会员资料</div>
                <el-form  :model="memberForm" label-width="85px"  ref="memberForm" :rules="memberFormRules" :inline="true"
                          class="demo-form-inline">
                  <el-form-item label="会员姓名:" prop="fHync">
                    <el-input v-model="memberForm.fHync" style="width: calc(100vw  / 4.5);" clearable placeholder="请输入会员姓名"></el-input>
                  </el-form-item>
                  <el-form-item label="身份证号:" prop="fSfzh">
                    <el-input v-model="memberForm.fSfzh" style="width: calc(100vw  / 4.5);" clearable placeholder="请输入身份证号"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话:" prop="fSjh">
                    <el-input v-model="memberForm.fSjh" style="width: calc(100vw  / 4.5);" clearable placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                  <el-form-item label="省市区:" prop="provinces">
                    <el-input v-model="memberForm.provinces" @focus="openMap" style="width: calc(100vw  / 4.5);" clearable placeholder="请选择省市区"></el-input>
                  </el-form-item>
                  <el-form-item label="详细地址:" prop="fLxrxxdz">
                    <el-input v-model="memberForm.fLxrxxdz" style="width: calc(100vw  / 4.5);" clearable placeholder="请输入详细地址"></el-input>
                  </el-form-item>
                  <el-form-item label="会员类型:" prop="fHylx">
                    <el-select v-model="memberForm.fHylx" style="width: calc(100vw  / 4.5);" placeholder="请选择报修类型">
                      <el-option
                        v-for="item in hylxOptions"
                        :key="item.KEY_"
                        :label="item.KEY_"
                        :value="item.KEY_">
                      </el-option>
                    </el-select>
                  </el-form-item>
<!--                  <el-form-item label="备注:">-->
<!--                    <el-input v-model="memberForm.bz" type="textarea" :rows="2" style="width: calc(100vw  / 4.4);" clearable placeholder="请输入备注"></el-input>-->
<!--                  </el-form-item>-->
                </el-form>
              </el-col>
              <el-col :span="24" style="height: 15px; background-color: #f5f5f5;"></el-col>
              <el-col :span="24" class="searchSty" style="margin-top: 15px; height: calc(100% -284px)">
                <el-tabs v-model='tabs.activeName' @tab-click="handleClick">
                  <template v-for='(item , index) in tabs.componentList'>
                    <el-tab-pane :label='item.name' :name='item.component'>
                      <component :is='item.component' :ref='item.component' @dqdFormSubmit='handleDqdForm'  :formInfo='queryForm'></component>
                    </el-tab-pane>
                  </template>
                </el-tabs>
              </el-col>
            </el-col>
            <el-col :span="24">
              <div class="bottomSty">
                <div class="moneySty" v-if="tabs.activeName =='dqd'">
                  总价：
                  <span style="color: #ea5504;">{{orderGasForm.zj}}</span>
                </div>
                <el-button type="primary" style="background: #ea5605; width: 92px; margin-left: 40px; border: 1px solid #ea5605; height: 48px;"
                            @click="handleSubmit('memberForm')"> 提交
                </el-button>
              </div>
            </el-col>
          </el-col>
          <el-col :span="8" class="searchSty" style="height: 100vh;overflow-y: auto; background: #ffffff;">
            <div class="titleSty">
              <span v-if="tabs.activeName =='dqd'">会员下单历史</span>
              <span v-else>会员报修历史</span>
            </div>
           <el-col :span="24" style="height: calc(100% - 300px); overflow-y: auto">
             <el-table :data="memberOrderListData" style="margin-top: 10px;">
               <template v-if="tabs.activeName=='dqd'">
                 <el-table-column property="spmc" label="商品" >
                 </el-table-column>
                 <el-table-column property="fDdzt" label="状态" >
                 </el-table-column>
                 <el-table-column property="fDdje" label="金额" ></el-table-column>
                 <el-table-column property="fCjsj" label="时间" ></el-table-column>
               </template>
               <template v-else>
                 <el-table-column property="fBxlx" label="问题类型" >
                 </el-table-column>
                 <el-table-column property="fZt" label="状态" >
                 </el-table-column>
                 <el-table-column property="fXdsj" label="上报时间" ></el-table-column>
               </template>
               <!--              <el-table-column label="操作"  align="center">-->
               <!--                <template slot-scope="scope">-->
               <!--                  <el-button type="text" size="mini"  @click="handleView(scope.row,scope.$index)">查看</el-button>-->
               <!--                </template>-->
               <!--              </el-table-column>-->
             </el-table>
           </el-col>
<!--            <el-col :span="24">-->
<!--              <el-pagination-->
<!--                @size-change="handleSizeChange"-->
<!--                @current-change="handleCurrentChange"-->
<!--                :current-page="pageForm.currentPage"-->
<!--                :page-sizes="[10, 20, 30, 40]"-->
<!--                :page-size="pageForm.size"-->
<!--                layout="total, sizes, prev, pager, next"-->
<!--                :total="pageForm.total">-->
<!--              </el-pagination>-->
<!--            </el-col>-->
          </el-col>
      </el-row>
    </div>
    <map-dialog v-if="showMapDialog" ref="mapDialog" @onSubmit="mapDialogSubmit"></map-dialog>
  </div>
</template>

<script>
import {memberInfo,submitOrderPort,submitExpairPort,repairDataHistoryListPort,repairDataHistoryDetailPort,orderDataHistoryListPort} from '@/api/orderManage'
import { getDict } from '@/api/common.js'
import bxd from './components/bxd'
import dqd from './components/dqd'
import MapDialog from "./components/mapDialog";
export default {
  name: "index",
  components:{
    MapDialog,
    bxd,
    dqd
  },
  data(){
    return {
      showMapDialog:false,
      hylxOptions:[],
      memberOrderListData:[],
      pageForm:{
        total:0,
        size:10,
        currentPage:1
      },
      memberFormRules:{
        fHync: [
          { required: true, message: '请输入会员姓名', trigger: 'blur' },
        ],
        fSfzh: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号'}
        ],
        fSjh: [
          {  required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
        ],
        provinces: [
          { required: true, message: '请选择省市区', trigger: 'blur' }
        ],
        fLxrxxdz: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        fHylx: [
          { required: true, message: '请选择会员类型', trigger: 'change' }
        ],
      },
      tabs: {
        activeName: 'dqd',
        componentList: [
          {name: '订气单', component: 'dqd'},
          {name: '报修单', component: 'bxd'},
        ]
      },
      queryForm:{
        memberPhone:''
      },
      orderGasForm:{
        zj:'0'
      },
      memberForm:{
        fUserid:'',
        hyID:'',
        id:'',
        fHync:'',
        fSfzh:'',
        fSjh:'',
        provinces:'',
        fLxrxxdz:'',
        fHylx:'',
        bz:'',
        jd:'',
        wd:'',
        khlxdzs:'',
        khlxdzq:'',
        khlxdzjd:'',
        khlxdzsf:'',
        ddbz:''
      },
      dqdForm:{}

    }
  },
  created() {
    this.initData();
  },
  methods:{

    async initData(){
      let query = [{
        key: 'NAME_',
        value: '会员类型'
      }]
      console.log(query);
      await getDict(query).then((res)=>{
        console.log('addddres',res);
        const { rows } = res;
        this.hylxOptions = rows;
      })
    },
    handleDqdForm(val){
      this.orderGasForm.zj = val.zj;
      this.dqdForm = val;
      console.log('打印val====', val);

    },
    mapDialogSubmit(val){
      this.memberForm.provinces = val.province+ ' '+ val.city+ ' '+ val.district;
      this.memberForm.khlxdzjd = val.khlxdzjd;
      this.memberForm.khlxdzsf = val.province;
      this.memberForm.khlxdzs = val.city;
      this.memberForm.khlxdzq = val.district;
      this.memberForm.jd= val.lng;
      this.memberForm.wd= val.lat;
      this.memberForm.ddbz = val.bz;
      console.log('打印val', val);
    },
    //省市区打开定位地图
    openMap(){
      this.showMapDialog = true;
      this.$nextTick(()=>{
        this.$refs.mapDialog.openShow();
      })
    },
    handleReset(){
      this.queryForm.memberPhone='';
      this.memberForm ={
        fUserid:'',
        hyID:'',
        id:'',
        fHync:'',
        fSfzh:'',
        fSjh:'',
        provinces:'',
        fLxrxxdz:'',
        fHylx:'',
        bz:'',
        jd:'',
        wd:'',
        khlxdzs:'',
        khlxdzq:'',
        khlxdzjd:'',
        khlxdzsf:'',
        ddbz:''
      };
      this.$refs[this.tabs.activeName][0].resetForm();
      this.orderGasForm.zj = '';
      this.memberOrderListData = [];

    },
    async getMemberInfo(phone){
      let params = {
        search:phone
      }
      await memberInfo(params).then((res)=>{
        console.log('’打印res',res);
        const { value } = res;
        const { userInfo,hydzs } = value;
        if(userInfo){
          this.memberForm = {
            ...this.memberForm,
            ...userInfo
          }
          console.log('打印this.memberForm',this.memberForm);
        }
        if(hydzs){
          this.memberForm = {
            ...this.memberForm,
            fLxrxxdz:hydzs[0].fLxrxxdz,
          }
        }
        switch (this.tabs.activeName){
          case "dqd":
            if(this.memberForm.fUserid){
              this.getOrderHistoryList();
            }
            break;
          case 'bxd':
            if(this.memberForm.fUserid){
              this.getRepairHistoryList();
            }
            break;
        }
      })

    },
    handleSearch(){
      if(this.queryForm.memberPhone){
        this.getMemberInfo(this.queryForm.memberPhone);
      }
      switch (this.tabs.activeName){
        case "dqd":
          if(this.memberForm.fUserid){
            this.getOrderHistoryList();
          }
          break;
        case 'bxd':
          if(this.memberForm.fUserid){
            this.getRepairHistoryList();
          }
          break;
      }
    },
    handleSizeChange(val){
      this.pageForm.size = val;
      switch (this.tabs.activeName){
        case "dqd":
          if(this.memberForm.fUserid){
            this.getOrderHistoryList();
          }
          break;
        case 'bxd':
          if(this.memberForm.fUserid){
            this.getRepairHistoryList();
          }
          break;
      }
    },
    handleCurrentChange(val){
      this.pageForm.currentPage = val;
      switch (this.tabs.activeName){
        case "dqd":
          if(this.memberForm.fUserid){
            this.getOrderHistoryList();
          }
          break;
        case 'bxd':
          if(this.memberForm.fUserid){
            this.getRepairHistoryList();
          }
          break;
      }
    },
    handleClick(){
      console.log('打印this.$refs[this.tabs.activeName]',this.$refs[this.tabs.activeName][0].onSubmit())
      this.$refs[this.tabs.activeName][0].onSubmit(this.queryForm);
      switch (this.tabs.activeName){
        case "dqd":
          if(this.memberForm.fUserid){
            this.getOrderHistoryList();
          }
          break;
        case 'bxd':
          if(this.memberForm.fUserid){
            this.getRepairHistoryList();
          }
          break;
      }
    },
    async getRepairHistoryList(){
      let params = {
        // page:this.pageForm.currentPage,
        // size:this.pageForm.size,
        page:-1,
        size:-1,
        fHyyhid:this.memberForm.fUserid
      }
      await repairDataHistoryListPort(params).then((res)=>{
        console.log('打印resrepairDataHistoryListPort====>',res);
        const { value } = res;
        const { records,total } = value;
        this.memberOrderListData = records;
        this.pageForm.total = total;
      })

    },
    async getOrderHistoryList(){
      let params = {
        // page:this.pageForm.currentPage,
        // size:this.pageForm.size,
        page:-1,
        size:-1,
        fHyyhid:this.memberForm.fUserid
      }
      await orderDataHistoryListPort(params).then((res)=>{
        console.log('打印orderDataHistoryListPort==>res',res);
        const { value } = res;
        if(value){
          const { records,total } = value;
          this.memberOrderListData = records;
          this.pageForm.total = total;
        }
      })
    },
    handleView(){

    },
    handleSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let orderform = this.$refs[this.tabs.activeName][0].form
          switch (this.tabs.activeName){
            case "dqd":
              let params ={
                psfs:orderform.psfs,
                khxx:{
                  hyID:this.memberForm.fUserid,
                  jd:this.memberForm.jd,
                  wd:this.memberForm.wd,
                  khlx:this.memberForm.fHylx,
                  khlxdh:this.memberForm.fSjh,
                  khlxdzjd:this.memberForm.khlxdzjd,
                  khlxdzq:this.memberForm.khlxdzq,
                  khlxdzs:this.memberForm.khlxdzs,
                  khlxdzsf:this.memberForm.khlxdzsf,
                  khlxdzxxdz:this.memberForm.fLxrxxdz,
                  khlxxm:this.memberForm.fHync,
                  khmc:this.memberForm.fHync,
                  khsfzh:this.memberForm.fSfzh,
                },
                spxx:{
                  num:this.dqdForm.num,
                  ddbz:orderform.bz,
                  qplxID:this.dqdForm.qplxID
                }
              }
              this.submitDqdForm(params);
              break;
            case 'bxd':
            let repairform =  this.$refs[this.tabs.activeName][0].repairForm;
              let wttp = [];
              if(repairform.fileList.length>0){
                let photoList = repairform.fileList.map(item => JSON.parse(item.fileObj));
                 wttp = JSON.stringify(photoList);
              }
              console.log('打印repairform',repairform,this.memberForm);
              let bxdParams ={
                hyyhid:this.memberForm.fUserid,
                bxlx: repairform.bxlx,
                bxlxmx: repairform.wtxl,
                jd: this.memberForm.jd,
                lxdzjd: this.memberForm.khlxdzjd,
                lxdzq: this.memberForm.khlxdzq,
                lxdzs: this.memberForm.khlxdzs,
                lxdzsf: this.memberForm.khlxdzsf,
                lxdzxxdz: this.memberForm.fLxrxxdz,
                lxfs: this.memberForm.fSjh,
                sfzh:this.memberForm.fSfzh,
                wd:this.memberForm.wd,
                hylx:this.memberForm.fHylx,
                wtms:repairform.wtlx,
                wttp:wttp,
                hyxm:this.memberForm.fHync,
              }
              this.submitBxdForm(bxdParams);
              break;
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    async submitDqdForm(val){
      await submitOrderPort(val).then((res)=>{
        console.log('打印res',res);
        if(res.state == true){
          this.$message.success('提交成功!');
          this.$refs[this.tabs.activeName][0].resetForm();
          this.orderGasForm.zj = '';
          this.getOrderHistoryList();
        }
      })
      console.log('打印val', val);
    },
    async submitBxdForm(val){
      await submitExpairPort(val).then((res)=>{
        console.log('打印res报修单',res);
        if(res.state == true){
          this.$message.success('提交成功!');
          this.$refs[this.tabs.activeName][0].resetForm();
          this.getRepairHistoryList();
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.containerSty{
  height:100%;
  overflow:hidden;
  ::v-deep.el-tabs__content{
    padding-top: 10px!important;
  }
  .searchSty {

    padding: 0 20px;
    padding-top: 20px;
  }
  .contentSty{
    margin-top: 15px;
    height: calc(100% - 90px);
    overflow-y: hidden;
    .bottomSty{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      background-color: #fdeee6;
      height: 48px;
    }
  }
}
</style>