<template>
  <div>

    <div>
      <div ref="lxHeader">
        <lx-header icon="md-apps" :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
          <div slot="content">
            <div class="searchwrap" style="display: flex;align-items: center;">
              <div>
                <el-input v-model="select.name" placeholder="First Name"></el-input>
              </div>
              <div>
                <el-input v-model="select.last_name" placeholder="Last Name"></el-input>
              </div>
              <div>
                <el-input v-model="select.email" placeholder="Email"></el-input>
              </div>
              <div>
                <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd  HH:mm:ss" @change="changeDate"
                  v-model="dateRange" type="datetimerange" range-separator="To" start-placeholder="Start Date"
                  end-placeholder="End Date">
                </el-date-picker>
              </div>

              <div>
                <el-button type="primary" size="small" @click="select.page=1,getList()">search</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="resetSearch">reset</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="editCustomer('add')">add</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="exportExcel">export</el-button>
              </div>
              <div>
                <el-button type="primary" size="small" @click="importTable">import</el-button>
              </div>

            </div>
          </div>

        </lx-header>
      </div>
    </div>
    <xy-table :list="list" :total="total" @pageIndexChange="pageIndexChange" @pageSizeChange="pageSizeChange"
      :table-item="table_item">
      <template v-slot:btns>
        <el-table-column align='center' fixed="right" label="Operate" width="180" header-align="center">
          <template slot-scope="scope">
            <!-- <el-button type="primary" size="small" @click="showCustomer(scope.row.id)">orders</el-button> -->
            <el-button type="primary" size="small" @click="editCustomer('editor',scope.row.id)">edit</el-button>
            <!-- <el-button type="primary" size="small" @click="editCustomer('editor',scope.row.id)">edit</el-button> -->
            <el-popconfirm confirm-button-text="confirm" cancel-button-text="cancel" style="margin:0 10px"
              @confirm="deleteList(scope.row.id)" title="Are you sure to delete it?">
              <el-button type="danger" size="small" slot="reference">delete</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <show-customer ref="showCustomer" @refresh="getList"></show-customer>
    <addCustomer ref="addCustomer" @refresh="getList"></addCustomer>
    <imports ref="imports" @refresh="getList"></imports>
  </div>
</template>

<script>
  import showCustomer from './components/showCustomer.vue';
  import addCustomer from './components/addCustomer.vue';
    import imports from "./components/imports.vue"
  import {
    index,
    destroy
  } from "@/api/customer";
  import {
    download
  } from "@/utils/downloadRequest";
  export default {
    components: {
      showCustomer,
      addCustomer,
      imports
    },
    data() {
      return {
        select: {
          name: '',
          last_name: '',
          email: '',
          page: 1,
          page_size: 10,
        },
        dateRange: [],
        range: '',
        total: 0,
        list: [],
        table_item: [{
            type: 'index',
            width: 50,
            fixed: 'left',
            export:false,
          }, {
            prop: 'first_name',
            label: 'First Name',
            align: 'left',
            width: 240,
            export:true,
          }, {
            prop: 'last_name',
            label: 'Last Name',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'origination',
            label: 'Organization',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'email',
            label: 'Email',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'mobile',
            label: 'Phone',
            align: 'left',
            width: 240,
            export:true,
          },

          {
            prop: 'country',
            label: 'Country/Region',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'shipping_region',
            label: 'States/Province',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'shipping_address',
            label: 'Shipping Address',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'shipping_city',
            label: 'Shipping City',
            align: 'left',
            width: 240,
            export:true,
          },
          {
            prop: 'shipping_postal',
            label: 'Shipping Zip/Postal Code',
            align: 'left',
            width: 240,
            export:true,
          },
          // {
          //   prop: 'billing_address',
          //   label: 'Billing Address',
          //   align: 'left',
          //   width: 240
          // },
          // {
          //   prop: 'billing_region',
          //   label: 'Billing States/Province',
          //   align: 'left',
          //   width: 240
          // },
          // {
          //   prop: 'billing_city',
          //   label: 'Billing City',
          //   align: 'left',
          //   width: 240
          // },
          // {
          //   prop: 'billing_postal',
          //   label: 'Billing Zip/Postal Code',
          //   align: 'left',
          //   width: 240
          // },
          {
            prop: 'created_at',
            label: 'Created At',
            align: 'left',
            width: 240
          }
        ]

      }
    },
    created() {
      this.getList()
    },
    methods: {
      importTable(row) {
        this.$refs.imports.headers = this.table_item
        this.$refs.imports.show()
      },
      showCustomer(id) {
        this.$refs.showCustomer.id = id
        this.$refs.showCustomer.isShow = true
      },
      pageIndexChange(e) {
        this.select.page = e
        this.getList()
      },
      pageSizeChange(e) {
        this.select.page_size = e
        this.select.page = 1
        this.getList()
      },
      resetSearch() {
        this.select.page = 1
        this.select.name = ''
        this.select.last_name = ''
        this.select.email = ''
        this.range = ''
        this.dateRange = ''
        this.getList()
      },
      changeDate(e) {
        if (e) {
          console.log("e", e)
          this.range = e.join(",") + ''
        } else {
          this.range = ''
        }
      },
      async getList() {
        const res = await index({
          ...this.select,
          filter: [{
            key: 'first_name',
            op: 'eq',
            value: this.select.name
          }, {
            key: 'last_name',
            op: 'eq',
            value: this.select.last_name
          }, {
            key: 'email',
            op: 'like',
            value: this.select.email
          }, {
            key: 'created_at',
            op: 'range',
            value: this.range ? this.range : ''
          }]
        })
        this.list = res.data
        this.total = res.total
      },
      exportExcel() {
        if (this.total>5000 && !this.range) {
          this.$Message.warning('Select a time period to export')
          return
        }
        let _export = {}
        this.table_item.map(item => {
          if (item.type === 'index') {

          } else {
            _export[item.prop] = item.label
          }
        })
        download(
          '/api/admin/user/index',
          'get', {
            export_fields: _export,
            ...this.select,
            filter: [{
              key: 'first_name',
              op: 'eq',
              value: this.select.name
            }, {
              key: 'last_name',
              op: 'eq',
              value: this.select.last_name
            }, {
              key: 'email',
              op: 'like',
              value: this.select.email
            }, {
              key: 'created_at',
              op: 'range',
              value: this.range ? this.range : ''
            }],
            is_export: 1,
            page: 1,
            page_size: 999
          },
          `Customer List.xlsx`)
      },
      editCustomer(type, id) {
        if (type == 'editor') {
          this.$refs.addCustomer.id = id
        }
        this.$refs.addCustomer.categoryList = this.categoryList
        this.$refs.addCustomer.type = type
        this.$refs.addCustomer.isShow = true
      },
      deleteList(id) {
        var that = this;
        destroy({
          id: id
        }).then(response => {
          this.$Message.success('Success');
          this.getList()
        }).catch(error => {
          console.log(error)
          reject(error)
        })
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
