<template>
  <div class="order">
    <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="用户ID">
            <el-input v-model="searchFrom.user_id"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用户昵称">
            <el-input v-model="searchFrom.nickname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收件人手机号">
            <el-input v-model="searchFrom.receive_mobile"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商品名称">
            <el-select v-model="searchFrom.goods_id" placeholder="请选择" @change="getOrderList" clearable>
              <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="来源" class="test">
            <el-select v-model="searchFrom.invite_type" placeholder="来源类型" @change="onInviteTypeChange" @clear="searchFrom.invite_id=''" clearable>
              <el-option
                v-for="item in inviteTypeOption"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
            </el-select>
            <el-input v-if="parseInt(searchFrom.invite_type) >= 0" v-model="searchFrom.invite_id" :placeholder="inviteSearchPlaceholder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购买方式">
            <el-select v-model="searchFrom.buy_type" placeholder="请选择" @change="getOrderList" clearable>
              <el-option
                v-for="item in buyTypeOption"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单状态">
            <el-select multiple v-model="searchFrom.status" placeholder="请选择" @change="getOrderList" clearable>
              <el-option
                v-for="item in orderStatusOption"
                :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="6">
          <el-form-item label="交易订单号">
            <el-input v-model="searchFrom.out_trade_no"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买时间">
            <el-date-picker
              v-model="searchFrom.payTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00','23:59:59']"
              @change="getOrderList">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item style="float: right">
            <el-button type="primary" plain @click="getOrderList">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      @expand-change="changeRow"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table
            :border="false"
            :data="scope.row.refundList">
            <el-table-column
              prop="refund_no"
              label="退款编号"
            >
            </el-table-column>
            <el-table-column
              label="退款金额"
            >
              <template slot-scope="item">
                {{item.row.refund_money | moneytFilter}}
              </template>
            </el-table-column>
            <el-table-column
              prop="desc"
              label="备注"
            >
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="out_trade_no"
        label="订单号"
      >
      </el-table-column>
      <el-table-column
        label="购买人"
        className="f-c"
        width="200"
      >
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.user_avatar"/> {{scope.row.user_nickname}}(ID:{{scope.row.user_id}})
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        label="付款状态"
        width="100">
        <template slot-scope="scope">
          {{scope.row.status|status}}
        </template>
      </el-table-column>
      <el-table-column
        label="实付金额"
        width="100">
        <template slot-scope="scope">
          {{scope.row.money|moneytFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="收货地址">
        <template slot-scope="scope">
          <div v-if="scope.row.user_address_id && scope.row.address_info">
            {{scope.row.address_info.receive_name}}<br>
            {{scope.row.address_info.receive_mobile}}<br>
            {{scope.row.address_info.province_name}}{{scope.row.address_info.city}}{{scope.row.address_info.area}}{{scope.row.address_info.address}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="pay_at"
        label="购买时间">
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="备注">
      </el-table-column>
      <el-table-column
        label="操作"
        min-width="150"
        v-if="!$store.state.readonly"
      >
        <template slot-scope="scope">
          <el-button
            v-if="(scope.row.status == 1 || scope.row.status == 4|| scope.row.status == 5) && $store.state.orderRefund"
            @click="onRefund(scope.row.id, scope.row.money)"
            type="text"
            plain
            size="mini">
            退款
          </el-button>
          <el-button
            @click="editComment(scope.row.id, scope.row.desc)"
            type="text"
            plain
            size="mini">
            编辑备注
          </el-button>
          <el-button
            v-if="scope.row.user_address_id"
            @click="editAddress(scope.row)"
            plain
            type="text"
            size="mini">
            编辑收货地址
          </el-button>
          <el-button
            @click="detail(scope.row)"
            type="text"
            plain
            size="mini">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <address-dialog v-if="dialogObj.show" :dialogObj="dialogObj" @reflash="onUpdateAddress"></address-dialog>
    <refund-dialog :dialogObj="refundDialogObj" @reflash="onAfterRefund" @changeShow="changeShow"></refund-dialog>
    <detail-dialog :dialogObj="dialogDetailObj" @changeShow="changeDetailShow"/>
    <page :nowPage="nowPage" :total="total" :limit="limit" @pageChange="onPageChange" @sizeChange="onSizeChange"/>
    <el-dialog
      title="编辑备注"
      center
      append-to-body
      :visible.sync="showCommentDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="600px">
      <div>
        <el-form ref="commentFrom" :model="commentForm" :rules="rules">
          <el-form-item prop="value">
            <el-input type="textarea" v-model="commentForm.value"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="showCommentDialog = false;commentForm={}">取 消</el-button>
            <el-button type="primary" @click="saveComment">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
  import {getOrderListApi,editOrderDescApi,getGoodsListApi,getRefundListApi} from "../../service/api";
  import page from '../framework/page'
  import addressDialog from './dialog'
  import refundDialog from './refundDialog'
  import detailDialog from './detail'
  import AddressArray from '../framework/address-picker/addr'
  import {INVITETYPE,ORDERSTATUS,BUYTYPE,BUYTYPEOPTION,ORDERSTATUSOPTION,INVITETYPEOPTION} from "../../util/wordbook";
  import CommonJs from '../../util/common';

  export default {
    name: 'index',
    data(){
        return {
          nowPage: 1,
          total: 0,
          limit: 10,
          searchFrom: {
            nickname: '',
            user_id: '',
            invite_type: '',
            invite_id: '',
            buy_type: '',
            status: [1,4],
            goods_id: '',
            out_trade_no: '',
            payTime: []
          },
          tableData: [],
          dialogObj: {
            show: false
          },
          refundDialogObj: {
            show: false,
            id: '',
            money: 0
          },
          dialogDetailObj: {
              show: false,
              detail: {}
          },
          goodList: [],
          inviteTypeOption: INVITETYPEOPTION,
          orderStatusOption: ORDERSTATUSOPTION,
          buyTypeOption: BUYTYPEOPTION,
          inviteSearchPlaceholder: '',
          showCommentDialog: false,
          commentForm: {},
          rules:{
            value:[
              { required: true, message: '请输入备注', trigger: 'change' }
            ]
          }
        }
    },
    methods: {
      changeRow(data,b){
        if(b.indexOf(data)>-1){
          getRefundListApi({out_trade_no:data.out_trade_no}).then(res=>{
            data.refundList = res.list
          })
        }
      },
      getGoodsOption(){
        let json = {
          page: 1,
          limit: 100
        };
        getGoodsListApi(json).then(res=>{
          this.goodList = res.list;
        })
      },
      onInviteTypeChange(val){
        if (val === 0) {
          this.inviteSearchPlaceholder = '用户ID'
        } else if (val === 1) {
          this.inviteSearchPlaceholder = '老师ID'
        } else if (val === 2) {
          this.inviteSearchPlaceholder = '推广人ID'
        }
        this.getOrderList();
      },
      detail(row){
        let _detail = row;
        this.dialogDetailObj = {
          show: true,
          detail: _detail
        }
      },
      saveComment(){
        let id = this.commentForm.id;
        let value = this.commentForm.value ? this.commentForm.value : '';
        if(!value) return;
        editOrderDescApi(id,'order',{desc: value}).then(res=>{
          this.$message({
            type: 'success',
            message: '编辑备注成功'
          });
          this.showCommentDialog = false
          this.getOrderList();
        });
      },
      editComment(id, desc) {
          this.showCommentDialog = true;
          this.commentForm = {
              id: id,
            value: desc
          };
      },
      onPageChange(val){
        this.nowPage = val
        this.getOrderList()
      },
      onSizeChange(val){
        this.limit = val;
        this.nowPage = 1;
        this.getOrderList()
      },
      getOrderList(){
        let json = {
          limit: this.limit,
          page: this.nowPage
        };
        if (this.searchFrom.nickname) {
            json.nickname = this.searchFrom.nickname
        }
        if (this.searchFrom.user_id) {
          json.user_id = this.searchFrom.user_id
        }
        if (this.searchFrom.invite_type) {
          json.invite_type = this.searchFrom.invite_type
        }
        if (this.searchFrom.invite_id) {
          json.invite_id = this.searchFrom.invite_id
        }
        if (this.searchFrom.buy_type) {
          json.buy_type = this.searchFrom.buy_type
        }
        if (this.searchFrom.status) {
          json.status = this.searchFrom.status.toString()
        }
        if (this.searchFrom.goods_id) {
          json.goods_id = this.searchFrom.goods_id
        }
        if (this.searchFrom.out_trade_no) {
          json.out_trade_no = this.searchFrom.out_trade_no
        }
        if (this.searchFrom.receive_mobile) {
          json.receive_mobile = this.searchFrom.receive_mobile
        }
        if(this.searchFrom.payTime && this.searchFrom.payTime.length > 0){
          json.pay_start_at = CommonJs.dateFmt(this.searchFrom.payTime[0],"yyyy-MM-dd hh:mm:ss");
          json.pay_end_at = CommonJs.dateFmt(this.searchFrom.payTime[1],"yyyy-MM-dd hh:mm:ss")
        }
        getOrderListApi(json).then((res)=>{
          res.list.forEach(i=>{
            i.refundList=[]
          });
          this.tableData = res.list;
          this.total = res.total
        })
      },
      changeDetailShow(data){
        this.dialogDetailObj.show=data
      },
      changeShow(data){
        this.refundDialogObj.show=data
      },
      onRefund(id, money){
        this.refundDialogObj.id= id;
        this.refundDialogObj.money= money;
        this.refundDialogObj.show = true;
      },
      onAfterRefund(){
        this.refundDialogObj.show = false;
        this.getOrderList()
      },
      onUpdateAddress(){
        this.dialogObj.show = false;
        this.getOrderList();
      },
      editAddress(row){
        if( !row.address_info || !row.address_info.province_name ){
          this.dialogObj.province = ''
          this.dialogObj.city = ''
          this.dialogObj.district = ''
        } else {
          let provinceObj = AddressArray.filter((item) => {
            return item.label === row.address_info.province_name
          })
          if(provinceObj && provinceObj.length > 0){
            this.dialogObj.province = row.address_info.province_id ? row.address_info.province_id : provinceObj[0].value
            if(!row.address_info.city){
              this.dialogObj.city = ''
            } else {
              let cityObj = provinceObj[0].children.filter((city) => {
                return city.label === row.address_info.city
              })
              this.dialogObj.city = row.address_info.city_id ? row.address_info.city_id : cityObj[0].value
              if(!row.address_info.area){
                this.dialogObj.district = ''
              }else {
                let districtObj = cityObj[0].children.filter((district) => {
                  return district.label === row.address_info.area
                });
                this.dialogObj.district = row.address_info.area_id ? row.address_info.area_id : districtObj[0].value
              }
            }
          } else {
            this.dialogObj.province = '';
            this.dialogObj.district = '';
            this.dialogObj.city = ''
          }

        }
        this.dialogObj.detail = row.address_info ? row.address_info.address : '';
        this.dialogObj.receive_mobile = row.address_info ? row.address_info.receive_mobile : '';
        this.dialogObj.receive_name = row.address_info ? row.address_info.receive_name : '';
        this.dialogObj.province_name = row.address_info ? row.address_info.province_name : '';
        this.dialogObj.city_name = row.address_info ? row.address_info.city : '';
        this.dialogObj.district_name = row.address_info ? row.address_info.area : '';
        this.dialogObj.id = row.id;
        this.dialogObj.show=true;
      }
    },
    components: {
      addressDialog,
      refundDialog,
      detailDialog,
      page
    },
    mounted(){
      this.getOrderList();
      this.getGoodsOption();
    },
    filters:{
      payMentFilter(val){
        return val=='1'?'已付款':'未付款'
      },
      courseTypeFilter(val){
        return val.type=='1'?`正式课(${val.duration}个月)`:`试听课(${val.duration}天)`
      },
      inviteType(value){
        return INVITETYPE[value]
      },
      status(value){
        return ORDERSTATUS[value]
      },
      buyType(value){
        return BUYTYPE[value]
      },
      moneytFilter(val){
        return val = val / 100 + '元'
      },
      filterGoods(val){
        return val.name + '[' +val.current_price / 100 + '元]'
      }
    }
  }
</script>

<style scoped>
.avatar{
  width: 50px;
  margin-right: 5px;
  border-radius: 50%;
}
.order {
  padding: 20px 0;
}
</style>
<style>
  .f-c > .cell {
    display: flex !important;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
  }
  .test>div> .el-input {
    width: 30%;
  }
</style>