<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="订单管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex">
            <Input v-model="select.keyword" class="select" style="width: 200px; margin-right: 10px"
              placeholder="关键字搜索" />
            <Button class="select" type="primary" style="margin-right: 10px;" @click="searchOrder">查询</Button>
            <xy-selectors @search="searchOrder">
              <template>
                <el-row>
                  <el-col :span="12">
                    <div class="select-content-item">
                      <div class="select-content-item-label">所属商户</div>
                      <div>
                        <el-select size="small" :value="select.merchant ? select.merchant.name : ''" placeholder="所属商户"
                          @change="e => select.merchant = e">
                          <el-option v-for="item in merchants" :key="item.id" :value="item" :label="item.name">
                          </el-option>
                        </el-select>
                        <el-checkbox style="margin-left: 10px;" v-model="select.is_merchant">包含历史服务商家</el-checkbox>
                      </div>
                    </div>
                  </el-col>

                  <el-col :span="12">
                    <div class="select-content-item">
                      <div class="select-content-item-label">产品类别</div>
                      <div>
                        <el-cascader ref="cascader" :value="select.productTypeName" clearable :show-all-levels="false"
                          size="small" :options="productTypes" :props="{checkStrictly:true,label:'name',value:'id'}"
                          @change="productTypeChange"></el-cascader>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="select-content-item">
                      <div class="select-content-item-label">订单状态</div>
                      <div>
                        <template v-for="(value,key) of orderStates">
                          <el-tag size="small" :effect="select.orderStates.key === key ? 'dark' : 'plain'"
                            @click="select.orderStates = {key,value}" style="margin-right: 6px;">{{value}}</el-tag>
                        </template>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="select-content-item">
                      <div class="select-content-item-label">下单日期</div>
                      <div>
                        <el-date-picker @change="changeCreatedDate" v-model="select.createdDate" type="daterange"
                          :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12"></el-col>
                  <el-col :span="12">
                    <div class="select-content-item">
                      <div class="select-content-item-label">支付日期</div>
                      <div>
                        <el-date-picker @change="changePayDate" v-model="select.payDate" type="daterange"
                          :picker-options="pickerOptions" value-format="yyyy-MM-dd" range-separator="至"
                          start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                        </el-date-picker>
                      </div>
                    </div>
                  </el-col>
                </el-row>


              </template>
              <template v-slot:selected>
                <div style="display: flex;padding: 0 0 10px 20px;">
                  <span style="padding-right: 6px">当前搜索条件：</span>
                  <div v-if="select.keyword">
                    <el-tag effect="light" size="small" closable @close="select.keyword = ''">
                      {{select.keyword}}
                    </el-tag>,
                  </div>
                  <div v-if="select.productType">
                    <el-tag effect="light" size="small" closable @close="select.productType = ''">
                      {{select.productTypeName}}
                    </el-tag>,
                  </div>
                  <div v-if="select.merchant">
                    <el-tag effect="light" size="small" closable @close="select.merchant = ''">
                      {{select.merchant.name}}
                    </el-tag>,
                  </div>
                  <div v-if="select.orderStates">
                    <el-tag effect="light" size="small" closable @close="select.orderStates = ''">
                      {{select.orderStates.value}}
                    </el-tag>
                  </div>
                </div>
              </template>
            </xy-selectors>
            <Button class="select" type="primary" style="margin-right: 10px;" @click="downloadExel">导出</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :table-item="table" :total="total" @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="400" header-align="center">
          <template slot-scope="scope">
            <actions :row="scope.row" @log="showLog(scope.row)" @refresh="getOrders"></actions>
            <!--            <Button icon="ios-chatbubbles-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>跟进</Button>-->
            <!--            <Button v-show="scope.row.state_name == '待处理'" icon="ios-paper-plane-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>分发</Button>-->
            <!--            <Button v-show="scope.row.state_name == '待处理'" icon="ios-close" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>取消</Button>-->
            <!--            <Button v-show="scope.row.state_name == '已发布'" icon="ios-redo" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost>收回</Button>-->
            <!--            <Button icon="ios-clipboard-outline" type="primary" style="margin-left: 10px;margin-bottom: 6px;" size="small" ghost @click="selectId = scope.row.id,isShowLog = true">日志</Button>-->
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <orderLog :id="selectId" :is-show.sync="isShowLog" @refresh="getOrders"></orderLog>
  </div>
</template>

<script>
  import {
    getList,
    index as getTypes
  } from "@/api/order"
  import {
    parseTime
  } from "@/utils"
  import {
    download
  } from '@/utils/downloadRequest'

  import orderLog from '@/views/order/component/orderLog'
  import actions from '@/views/order/component/actions'
  export default {
    components: {
      orderLog,
      actions
    },
    data() {
      return {
        selectId: null,
        isShowLog: false,

        merchants: [],
        orderItemStates: [],
        orderStates: [],
        productTypes: [],
        select: {
          page: 1,
          pageSize: 10,
          merchant: '',
          keyword: '',
          productType: '',
          orderStates: '',
          productTypeName: "",
          is_merchant: false,
          createdDate: [],
          paidDate: [],
          start_created: "",
          end_created: "",
          start_paid: "",
          end_paid: "",
        },
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

        total: 0,
        list: [],
        table: [{
            prop: "order.serial",
            label: "订单编号",
            width: 150,
            align: 'center',
            fixed: 'left'
          },
          {
            prop: "order_name",
            label: "订单名称",
            width: 220,
            align: 'left'
          },
          {
            prop: 'bookable_name',
            label: "订购类型",
            width: 80
          },
          {
            prop: "order_total",
            label: "金额",
            width: 80,
            align: 'right'
          },
          {
            prop: "created_at",
            label: "下单时间",
            width: 180,
            formatter: (cell, data, value, index) => {
              return parseTime(new Date(value))
            }
          },
          {
            prop: "paid_at",
            label: "支付时间",
            width: 180,
            formatter: (cell, data, value, index) => {
              if (value)
                return parseTime(new Date(value))
            }
          },
          {
            prop: "updated_at",
            label: "更新时间",
            width: 180,
            formatter: (cell, data, value, index) => {
              return parseTime(new Date(value))
            }
          },
          {
            prop: "memberPromotion.name",
            label: "推广渠道",
            width: 110
          },
          {
            label: "客户服务地址",
            width: 220,
            align:"left",
            customFn: (row) => {
                  return ( <div style = {
                    {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      cursor:'pointer',
                      color:"blue"
                    }
                  } > {row.order.member_address?row.order.member_address:"修改服务地址"}</div > )
                }
          },
          {
            label: "用户信息",
            Fprop: 'member',
            multiHd: [{
                prop: "name",
                label: "姓名",
                width: 110
              },
              {
                prop: "wechat_nickname",
                label: "微信昵称",
                width: 110
              },
              {
                label: "头像",
                width: 80,
                customFn: (row) => {
                  return ( < div style = {
                    {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }
                  } > <el-avatar src = {
                    row.member?.avatar
                  } > </el-avatar></div > )
                }
              },

              {
                prop: "phone",
                label: "联系电话",
                width: 120
              },
              {
                prop: "area",
                label: "区域",
                width: 110
              },
              {
                prop: "due_date",
                label: "预产期",
                width: 120
              }
            ],
          },
          {
            label: '订单明细',
            multiHd: [{
                prop: "product_type.name",
                label: "产品类型",
                width: 100
              },
              {
                prop: "merchant.name",
                label: "服务商家",
                align: "left",
                width: 220
              },
              {
                label: "历史商家",
                width: 220,
                align: "left",
                customFn: (row) => {
                  return row.assign_merchant.map(item => {
                      return ( < div > {
                          item.name
                        } < /div>)
                      })
                  }
                },

                {
                  prop: "state_name",
                  label: "状态",
                  width: 80
                }
              ]
            },

            {
              prop: "order.remark",
              label: "备注"
            }
          ],
        }
      },
      methods: {
          changePayDate(e) {
            this.select.start_paid = e[0];
            this.select.end_paid = e[1];
          },
          changeCreatedDate(e) {
            this.select.start_created = e[0];
            this.select.end_created = e[1];
          },
          productTypeChange(e) {
            this.select.productType = this.$refs['cascader'].getCheckedNodes()[0].data.id;
            this.select.productTypeName = this.$refs['cascader'].getCheckedNodes()[0].data.name;
          },
          searchOrder(){
            
              this.select.page = 1
              this.getOrders()
          },
          pageChange(e) {
            this.select.page = e
            this.getOrders()
          },

          async getTypes() {
            const res = await getTypes()
            this.merchants = res.merchants
            this.orderItemStates = res.order_item_states
            this.orderStates = res.order_states
            this.productTypes = res.product_types
          },

          async getOrders() {
            let is_merchant = this.select.is_merchant

            this.select.is_merchant= is_merchant ? 1 : 0;
            const res = await getList({
              page_size: this.select.pageSize,
              product_type_id: this.select.productType,
              merchant_id: this.select.merchant.id,
              order_state: this.select.orderStates.key,
              ...this.select
            })
            this.select.is_merchant=is_merchant;
            this.total = res.total
            this.list = res.rows
          },

          showLog(row) {
            this.selectId = row.id
            this.isShowLog = true
          },

          downloadExel() {
            download(
              '/api/admin/order/get-list',
              'get', {
                order_state: this.select.orderStates.key,
                keyword: this.select.keyword,
                product_type_id: this.select.productType,
                merchant_id: this.select.merchant.id,
                is_export: 1
              },
              '订单列表.xlsx')
          }
        },
        mounted() {
          this.getTypes()
          this.getOrders()
        }

    }
</script>

<style scoped lang="scss">
  .select-content-item {
    display: flex;
    align-items: center;

    margin-bottom: 10px;

    &-label {


      padding: 0 20px;
    }
  }

  $primaryColor: #bf617c;

  ::v-deep .ivu-alert-success {
    color: #fff;
    border-color: $primaryColor !important;
    background: rgba(213, 120, 145, 0.8) !important;

    margin: auto 0;
    margin-right: 10px;
  }

  ::v-deep .ivu-icon-ios-close:before {
    //color: #fff;
  }
</style>
