<style scoped>
  .txt-font-a {
    font-size: 14px;
  }
  .txt-font-b {
    font-size: 16px;
  }
  .margin-right {
    margin-right: 10px;
  }
</style>
<template>
  <div>
    <Row :gutter="32">
      <i-col span="32">
        <row>
          <row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px">
            <span class="left-15">选择日期</span>
            <DatePicker v-model="dateRange" class="left-15" type="daterange" placement="bottom-start" split-panels placeholder="请选择日期区间" style="width: 200px" ></DatePicker>
 <!--           <span style="margin-left: 48px" class="txt-font-a" >开始时间</span>
            <DatePicker v-model="startDate" class="left-15 txt-font-a" type="date" :options="options1" placeholder="选择开始时间" style="width: 200px"></DatePicker>
            <span class="left-15 txt-font-a">结束时间</span>
            <DatePicker  v-model="endDate"  class="left-15 txt-font-a" :options="options2" type="date" placeholder="选择结束时间" style="width: 200px"></DatePicker>-->
            <span  class="left-15 txt-font-a">零售公司</span>
            <Select v-model="companyId" filterable class="left-15 txt-font-a" style="width:190px" @on-change="companySelect" >
              <Option v-for="item in companyList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <span class="left-15 txt-font-a">店铺</span>
            <Select filterable placeholder="全部" v-model="shopId" class="left-15 txt-font-a" style="width:190px"  @on-change="downShopChange">
              <Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <span class="left-15 txt-font-a">导购</span>
            <Select filterable placeholder="全部" v-model="sellerId" class="left-15 txt-font-a" style="width:190px" >
              <Option v-for="item in sellerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>

            <Button type="primary" style="width: 90px;margin-left: 20px" @click="searchCustomerDataBtnClick" class="txt-font-a">查询</Button>
            <Button type="primary" style="width: 90px;margin-left: 20px" @click="exportData" class="txt-font-a">导出数据</Button>

          </row>
          <row>
            <Table ref="table" :columns="columns1" :data="data1" style="margin-top: 20px;" size="small" no-data-text="--"></Table>
          </row>
          <Modal v-model="modal12" draggable scrollable title="好友信息" :width="vipModalWidth+'px'" height="651px" >
            <row style="padding: 10px 0">
                <i-col span="24" v-if="ifVip" >
                  <row>
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: right">好友名称</span>
                    <i-input  v-model="customerName" :placeholder="customerData.name" style="width: 300px;font-weight: 600" />
                  </row>
                </i-col>
                <i-col span="12" v-if="!ifVip" >
                  <row>
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: right">好友名称</span>
                    <i-input  v-model="customerName" :placeholder="customerData.name" style="width: 300px;font-weight: 600" />
                  </row>
<!--                  <row style="margin-top: 16px">-->
<!--                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: right">好友ID</span>&nbsp;-->
<!--                    <span class="txt-font-b" style="font-weight: 600">{{customerId}}</span>-->
<!--                  </row>-->
                </i-col >
                <i-col  span="12"  style="border-left: 1px solid #E8ECF2;" v-if="!ifVip" >
                  <row style="margin-left: 50px">
                    <span class="txt-font-b" style="width: 80px;display:inline-block;text-align: right;">关联会员</span>
                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">会员名称</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.vipName}}</span>
                    <Button  type="primary" size="small" style="margin-left: 10px;height: 19px;margin-bottom: 3px;" ></Button>
                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left;">手机号</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.vipPhone}}</span>
                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left;">会员生日</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.birthday}}</span>
                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">消费次数</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.salesNum}}</span>

                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">消费金额</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.salesAmt}}</span>
                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">最近消费</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.lastSalesDay}}</span>

                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">专属导购</span>
                    <span class="txt-font-b" style="font-weight: 600">{{customerData.sellerName}}</span>
                  </row>
                  <row style="margin-top: 16px;margin-left: 98px">
                    <span class="txt-font-b margin-right" style="width: 80px;display:inline-block;text-align: left">所属门店</span>
                    <span class="txt-font-b" style="font-size: 16px;font-weight: 600">{{customerData.shopName}}</span>
                  </row>
                </i-col>
            </row>
            <div slot="footer">
              <Button type="primary" size="large" @click="asyncOK" style="float: left;margin-left: 110px">保存</Button>

              <Button type="text" size="large"  @click="asyncCancel" style="margin-left: 42px;float: left;border:none">取消</Button>
              <i-input style="background-color: Transparent;visibility:hidden;height: 50px" />
            </div>

          </Modal>
          <Page :total="totalSize" :current="pageNum" :page-size="pageSize" show-elevator show-total
                placement="top" @on-change="handlePage" style="margin: 20px 50px 0 0;right:0px;position: absolute;"></Page>
        </row>
      </i-col>
    </Row>
  </div>
</template>
<script>
  import customerDetail from "../services/datacenter/DataCenter";
  import zeroExtend from "../services/customer/zeroExtend";
  import staff from "../services/staff/staff";
    export default {
        inject:['checkParamBlank'],
        data() {
            return {
              userId:  JSON.parse(sessionStorage.getItem("loginInfo")).userId,
              //开始时间，结束时间
              totalSize: null,
              pageNum: 1,
              pageSize: 10,
              modal12: false,
              startDate: null,
              endDate: null,
              customerName: null,
              dateRange: [],
              customerList: [],
              companyList: [],
              companyId: 0,
              organizationalList: [],
              shopId: null,
              shopList: [],
              sellerId: null,
              sellerList: [],
              customerData: {},
              vipModalWidth: 997,
              columns1: [
                {
                  title: '序号',
                  key: 'number'
                },
                {
                  title: '好友名称',
                  key: 'name'
                },
                {
                  title: '所属门店',
                  key: 'shopName'
                },
                {
                  title: '店铺编号',
                  key: 'shopCode'
                },
                {
                  title: '所属导购',
                  key: 'sellerName'
                },
                {
                  title: '工号',
                  key: 'sellerCode'
                },
                {
                  title: '创建时间',
                  key: 'createTime'
                },
                {
                  title: '好友手机号',
                  key: 'phone'
                },
                {
                  title: '关联会员',
                  key: 'vipName'
                },
                {
                  title: '会员等级',
                  key: 'vipLevel'
                },

                {
                  title: '会员生日',
                  key: 'birthday'
                }

          /*,
          {
            title: '消费次数',
            key: 'salesNum'
          },
          {
            title: '消费金额',
            key: 'salesAmt'
          },
          {
            title: '操作',
            key: 'operation',
            render: (h, params) => {
              let that = this;
              return h('a', {
                        on: {
                          'click': () => {
                            that.customerData = that.data1[params.index];
                            that.ifVip();
                            that.customerName = null;
                            that.modal12 = true
                          }
                        }
                      },[
                        h('span', {
                          domProps: {
                            innerHTML: '查看详情'
                          }
                        })
                        ]

              );
            }
          }*/
              ],
              data1: [
                {
                  id: 1,
                  customerName: '会员名称',
                  customerPhone: '会员手机',
                  seller: '会员导购',
                  vipName: 'vip名称',
                  salesNum: '消费次数',
                  salesAmt: '消费金额',
                  vipLevel: '会员等级',
                  vipBirth: '会员生日'
                },
              ]
            }
        },
        mounted: function () {
          this.getCustomerData();
          this.getSelectList();
          this.downSellerData();
          this.downShopData();
          this.downRegionData();

        },
        methods: {
          /**基础数据：区域list、零售公司list、好友list*/
          getSelectList:function(){
            let that = this;
            let request = {
              userId: this.userId,
            };
            zeroExtend.getSelectListRequest(request,function (data) {
              if(data.data.code !== "0000"){
                that.$Message.error("系统异常");
              }
              data = data.data.results;
              if(data){
                that.organizationalList = data;
                that.companyList = that.organizationalList.filter(item => item.level === 2);
              }
              //插入全部选项
              that.insertAllOption();
            });
          },
          //对象属性空检查
          checkParamBlank: function(obj){
            for(let param in obj){
              obj[param] = this.checkBlank(obj[param]);
            }
          },
          //数据空检查
          checkBlank: function(data){
            if(!data || data === ''){
              return "--";
            }else{
              return data;
            }
          },
          searchCustomerDataBtnClick: function () {
            this.totalSize= null;

            this.getCustomerData();

          },
          exportData(){
              let that = this;
              let stdate = null;
              let eddate = null;
              if(that.dateRange[0]){
                  stdate = this.$moment(that.dateRange[0]).format("YYYY-MM-DD");
                  eddate = this.$moment(that.dateRange[1]).format("YYYY-MM-DD");
              }


              let csvdata = [];
              let request =
                  { userId: that.userId,
                      startDate: stdate,
                      endDate: eddate,
                      companyId: that.changeData(that.companyId),
                      shopId: that.changeData(that.shopId),
                      sellerId: that.changeData(that.sellerId),
                      pageNum : 1,
                      pageSize : that.totalSize};
              customerDetail.dataDetail(request, function (data) {
                  data = data.data.results;
                  if(data){
                      for(let i=0;i<data.length;i++){
                          let entity = data[i];
                          if(entity){
                              if(i === 0) that.totalSize = entity.totalSize;
                              let birthday = entity.birthday;
                              let createTime = entity.createTime;
                              if(birthday){
                                  entity.birthday = that.$moment(birthday).format("MM-DD")
                              }
                              if(createTime){
                                  entity.createTime = that.$moment(createTime).format("YYYY-MM-DD")
                              }
                              that.checkParamBlank(entity);
                              csvdata.push(entity);

                          }

                      }
                      if(stdate == null){stdate = "--";}
                      if(eddate == null){eddate = "--";}

                      let title = "客户明细";
                    require.ensure([], () => {
                      const { export_json_to_excel } = require('../excel/Export2Excel');
                      const tHeader = ['序号', '好友名称', '所属门店', '店铺编号', '所属导购', '工号', '创建时间','好友手机号','关联会员','会员等级','会员生日'];
                      // 属性名
                      const filterVal = ['number', 'name', 'shopName', 'shopCode', 'sellerName', 'sellerCode', 'createTime','phone','vipName','vipLevel','birthday'];
                      // 数据
                      const list = csvdata;  //把data里的tableData存到list
                      const data = that.formatJson(filterVal, list);
                      export_json_to_excel(tHeader, data, title);
                    });
                  }
              })

          },
          formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]))
          },
          getCustomerData: function () {
            let that = this;
            that.data1 = [];
            let stdate = null;
            let eddate = null;
            if(that.dateRange[0]){
              stdate = this.$moment(that.dateRange[0]).format("YYYY-MM-DD");
              eddate = this.$moment(that.dateRange[1]).format("YYYY-MM-DD");
            }

            let request =
                    { userId: that.userId,
                      startDate: stdate,
                      endDate: eddate,
                      companyId: that.changeData(that.companyId),
                      shopId: that.changeData(that.shopId),
                      sellerId: that.changeData(that.sellerId),
                      pageNum : that.pageNum,
                      pageSize : that.pageSize,};
            customerDetail.dataDetail(request, function (data) {
              data = data.data.results;
              if(data){
                for(let i=0;i<data.length;i++){
                  let entity = data[i];
                  if(entity){
                    if(i === 0) that.totalSize = entity.totalSize;
                    let birthday = entity.birthday;
                    let createTime = entity.createTime;
                    if(birthday){
                      entity.birthday = that.$moment(birthday).format("MM-DD")
                    }
                    if(createTime){
                      entity.createTime = that.$moment(createTime).format("YYYY-MM-DD")
                    }
                    that.data1.push(entity);
                    that.checkParamBlank(entity);
                  }

                }
              }
            })
          },
          downSellerData: function () {
            let that = this;
            that.sellerList = [{"id":0,"name":"全部"}];
            let request = {userId: that.userId, companyId: that.changeData(that.companyId), shopId:that.changeData( that.shopId)};
            customerDetail.downSellerData(request, function (data) {
              data = data.data.results;
              if(data){
                  for(let i=0;i<data.length;i++){
                    let entity = data[i];
                    if(entity){
                      that.sellerList.push(entity);
                    }
                  }
              }
            })
          },
          //插入全部选项
          insertAllOption: function(){
            if(this.companyList.length === 0 || this.companyList[0].id !== 0){
              this.companyList.splice(0, 0, {"id":0, "name":"全部"});
            }
            if(this.shopList.length === 0 || this.shopList[0].id !== 0){
              this.shopList.splice(0, 0, {"id":0, "name":"全部"});
            }
          },
          downShopData: function (selected) {
            let that = this;
            let companyId = selected;
            if (!selected){
              companyId = that.companyId;
            }
            let customerIds = null;
            this.customerList = [];
            if(companyId === 0){
              //
            }else{
              this.customerList = this.organizationalList.filter(item => item.parentId === companyId && item.level === 3);
              this.insertAllOption();
              customerIds = "-1";
              this.customerList.forEach(function (data) {
                customerIds = customerIds + ","+data.id;
              })
            }

            let request =
                    {userId: that.userId,customerId: customerIds};
            staff.downShopData(request, function (data) {
              data = data.data.results;
              if(data){
                that.shopList = [{"id":0,"name":"全部"}];
                for(let i=0;i<data.length;i++){
                  let entity = data[i];
                  if(entity){
                    that.shopList.push(entity);
                  }
                }
              }
            })
          },
          //零售公司选择
          companySelect: function(){

            //加载店铺
            this.downShopData(this.companyId);

            this.selectedStore = 0;

            let that = this;
            that.downSellerData();
          },

          downShopChange: function () {

            let that = this;
             that.downSellerData();
          },
          changeData: function (value) {
            if(value == 0){return null;}
            return value;
          },
          asyncOK: function(){
            let that = this;
            if(that.customerName){
              let request =
                      {customerId: that.customerData.id,name: that.customerName};
              customerDetail.editCustomerData(request,null);
              that.getCustomerData();
            }
            that.asyncCancel();
          },
          asyncCancel: function(){
            let that = this;
            that.modal12 = false;

          },
          ifVip: function(){
            let that = this;
            let vp = that.customerData.vipName !== '--';
            if(!vp)that.vipModalWidth = 500;
            return vp;
          },
          //切页处理
          handlePage:function (value) {
            this.pageNum = value;
            this.getCustomerData();
          },

          // /**商品mainList*/
          // getMainList: function(){
          //
          // },
          // //切页处理
          // handlePage:function (value) {
          //
          // },

        },
        computed:{
          options1() {
            let that = this;
            return{
              disabledDate (date) {
                if(that.endDate == null || that.endDate == ""){
                  return false;
                }else{
                  return date && date.valueOf() > that.endDate;
                }
              }
            }

          },
          options2() {
            let that = this;
            return{
              disabledDate (date) {
                if(that.startDate == null || that.startDate == ""){
                  return false;
                }else{
                  return date && date.valueOf() < that.startDate;
                }
              }
            }
          },
        }
    }
</script>
<style scoped>

  .left-15{
    margin-left: 15px;
  }

</style>
