<template>
  <div class="shopPromotionRanking">
    <div class="quickOperation">
      <div class="quickText">
        快捷操作
      </div>
      <button
        type="button"
        class="ark-btn ark-btn-fcdefault"
        @click="addBtn"
      >
        新增
      </button>
      <button
        type="button"
        class="ark-btn ark-btn-fcdefault"
        style="margin:0 8px;"
        @click="exportBtn"
      >
        导出
      </button>
    </div>
    <div class="conditionContent">
      <div class="itemContent">
        <div class="itemLabel">
          目标财年
        </div>
        <Select v-model="formData.select">
          <Option
            v-for="optionsItem in yearList"
            :key="optionsItem.value"
            :value="optionsItem.value"
          >
            {{ optionsItem.label }}
          </Option>
        </Select>
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          店铺名称
        </div>
        <DropDownSelectFilter
          placeholder="请选择店铺"
          :single="true"
          :data="shopDataAll"
          :total-row-count="shopTotalRowCount"
          :page-size="shopPageSize"
          :default-selected="shopDefaultSelected"
          :columns="shopColumns"
          :hidecolumns="shopHidecolumns"
          :auto-data="shopAutoData"
          @on-page-change="changePageShop"
          @on-popper-show="getDataShop"
          @on-input-value-change="InputValueChangeShop"
          @on-fkrp-selected="selectedTopShopData"
          @on-clear="clearShopId"
          @on-keydown="InputValueChange"
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          导购名称
        </div>
        <DropDownSelectFilter
          placeholder="请选择导购"
          :single="true"
          :data="guideDataAll"
          :total-row-count="guideTotalRowCount"
          :page-size="guidePageSize"
          :default-selected="guideDefaultSelected"
          :columns="guideColumns"
          :hidecolumns="guideHidecolumns"
          :auto-data="guideAutoData"
          @on-page-change="changePageGuide"
          @on-popper-show="getDataGuide"
          @on-input-value-change="InputValueChangeGuide"
          @on-fkrp-selected="selectedTopGuideData"
          @on-keydown="InputValueChange1"
          @on-clear="clearGuideId"
        />
      </div>
      <div class="itemContent">
        <div class="itemLabel">
          导购手机号
        </div>
        <Input
          v-model="formData.phone"
          @on-enter="inputEnter"
        />
      </div>
    </div>
    <ShrinkOrExtend
      :form-data="formData"
      :height="shrinkHeight"
      :current-value="currentValue"
      @click="upOrDown(shrinkHeight)"
      @on-reset="reset"
      @on-query="queryBtn"
    />
    <!-- <div class="btnContent">
          <div class="upOrDown" @click="upOrDown">
            <div class="upDown">{{currentValue ? '展开':'收起'}}</div>
            <i :class="currentValue ? 'iconfont iconios-arrow-down' : 'iconfont iconios-arrow-up'"></i>
          </div>
          <Button
            type="fcdefault"
            class="resetBtn"
            @click="reset"
          >
            重置
          </Button>
          <Button
            type="primary"
            @click="queryBtn"
          >
            查询
          </Button>
        </div> -->
    <div class="divider" />
    <div class="tableContent">
      <Table
        ref="table"
        class="table"
        :columns="tableList"
        :data="tableData"
        :total-data="tableTotal"
        :height="true"
        size="small"
        @on-sort-change="tableSortChange"
      />
    </div>
    <div class="pageContent">
      <Page
        size="small"
        :current="currentPage"
        show-elevator
        :total="total"
        show-total
        show-sizer
        @on-change="changePage"
        @on-page-size-change="changeSize"
      />
    </div>
    <Spin
      v-show="spinShow"
      fix
    >
      <Icon
        type="ios-loading"
        size="48"
        class="demo-spin-icon-load"
      />
      <div>Loading</div>
    </Spin>
  </div>
</template>
<script>
  import ShrinkOrExtend from '../customizedContent/shrinkOrExtend';
  // import R3 from '../../../static/r3/r3.publish/r3.min';
  const R3 = window.R3;

  const { network, urlSearchParams } = R3;
  export default {
    components: {
      ShrinkOrExtend
    },
    data() {
      return {
        shrinkHeight: '58px',
        currentValue: false,

        yearList: [],
        formData: {
          phone: '', // 手机号
          select: '', // 选择财年
          shop_id: '', // 选中的店铺id
          shop_value: '', // 店铺的输入值
          guide_id: '', // 选中的导购id
          guide_value: '', // 导购的输入值
        },
        spinShow: false, // 是否显示loading


        shopDataAll: {}, // 店铺名称
        shopAutoData: [], // 店铺模糊搜索的数据
        shopDefaultSelected: [], // 店铺默认值
        shopColumns: ['name', 'value'], // 店铺展现的组
        shopHidecolumns: ['id', 'value'], // 店铺定义下拉列表不展示的key
        shopTotalRowCount: 0, // 店铺总条数
        shopPageSize: 10, // 店铺每页条数
        shopPageNum: 0, // 店铺每页开头页码
        shopPage_num: 1, // 店铺当前页码

        guidePage_num: 1, // 导购当前页码
        guideDataAll: {}, // 导购名称
        guideAutoData: [], // 导购模糊搜索的数据
        guideDefaultSelected: [], // 导购默认值
        guideColumns: ['name', 'value'], // 导购展现的组
        guideHidecolumns: ['id', 'value'], // 导购定义下拉列表不展示的key
        guideTotalRowCount: 111, // 导购总条数
        guidePageSize: 10, // 导购每页条数
        guidePageNum: 0, // 导购每页开头页码

        // 表头数据
        tableList: [
          {
            title: '序号',
            key: 'id',
          },
          {
            title: '导购姓名',
            key: 'seller_name',
          },
          {
            title: '导购手机号',
            key: 'mobile',
          },
          {
            title: '店铺名称',
            key: 'share_org_name',
          },
          {
            title: '年业绩目标',
            key: 'target_achievement',
            sortable: 'custom',
            sortType: 'asc'
          },
          {
            title: '完成额',
            key: 'amount_completed',
            // sortable: 'custom'
          },
          {
            title: '完成率',
            key: 'completion_rate',
            // sortable: 'custom'
          },
        ],
        tableData: [], // 表格数据
        tableTotal: [
          {
            id: '合计',
            target_achievement: 150,
            amount_completed: 150,
            completion_rate: '100%'
          }
        ],
        sortType: 'asc', // 排序类型
        sortField: 'target_achievement', // 排序字段

        // page
        total: 0, // 总条数
        currentPage: 1, // 页码
        pageSize: 10, // 每页的条数
      };
    },
    // created() {
    //     this.getYears()
    //     this.getConfigData()
    // },
    mounted() {
      // this.getYears();
      // this.getConfigData();
    },
    methods: {
      // 初始化，获取年份列表
      getYears() {
        let date = new Date();
        let nowYear = date.getFullYear();
        for (let i = 0; i < 5; i++) {
          this.yearList[i] = {
            value: `${nowYear + i}财年`,
            label: `${nowYear + i}财年`
          };
        }
        this.formData.select = this.yearList[0].value; // 初始化选择的财年
      },
      // 获取配置选项
      getConfigData() {
        //  console.log("获取配置",this.formData)
        const params = {
          fiscal_year: parseInt(this.formData.select),
          page: this.currentPage,
          page_size: this.pageSize,
          store_name: this.formData.shop_value,
          seller_name: this.formData.guide_value,
          mobile: this.formData.phone,
          target_type: 2,
          sort_field: this.sortField,
          sort: this.sortType
        };
        // this.spinShow = true;
        network.post('/p/cs/performance/targets/querylist', params, { serviceId: 'ishopbill' }).then((res) => {
          this.spinShow = false;
          // console.log("结果",res.data)
          if (res.data.code == 0) {
            let data = res.data.data;
            // 表格数据
            this.tableData = data.list;
            this.tableData.forEach(item=>{
              // 判断完成额
              if (item.amount_completed == 0) {
                item.amount_completed = '- -';
              }
              // 判断年业绩目标
              if (item.target_achievement == 0) {
                item.target_achievement = '- -';
              }
              // 判断完成率
              if (item.completion_rate != 0) {
                item.completion_rate += '%';
              } else {
                item.completion_rate = '- -';
              }
            });
            this.total = data.total;
            // 合计
            this.tableTotal[0].completion_rate = (data.total_completion_rate === null || data.total_completion_rate == 0) ? '- -' : `${data.total_completion_rate}%`;

            this.tableTotal[0].amount_completed = (data.total_amount_completed === null || data.total_amount_completed == 0) ? '- -' : data.total_amount_completed;

            this.tableTotal[0].target_achievement = (data.total_target_achievement === null || data.total_target_achievement == 0) ? '- -' : data.total_target_achievement;
            // console.log("合计总计",this.tableTotal)
          }
        });
      },
      // 页码改变时触发
      changePage(val) {
        this.currentPage = val;
        this.getConfigData();
      },
      // 页数改变时触发
      changeSize(val) {
        this.pageSize = val;
        this.currentPage = 1;
        this.getConfigData();
      },
      // 表格排序触发
      tableSortChange(obj) {
        // eslint-disable-next-line no-nested-ternary
        this.sortType = obj.order;
        this.sortField = obj.key;
        this.getConfigData();
      },
      // 重置
      reset() {
        this.shopDefaultSelected = [];
        this.guideDefaultSelected = [];
        this.formData = {
          phone: '', // 手机号
          select: this.yearList[0].value, // 选择财年
          shop_id: '', // 选中的店铺id
          shop_value: '', // 店铺的输入值
          guide_id: '', // 选中的导购id
          guide_value: '', // 导购的输入值
        };
        this.currentPage = 1;
        this.getConfigData();
        console.log('重置了111');
      },
      // 查询按钮点击
      queryBtn() {
        // console.log("查询数据",this.formData)
        this.currentPage = 1;
        this.getConfigData();
      },
      upOrDown(height) {
        console.log('高度传参', height);
        this.currentValue = !this.currentValue;
        document.getElementsByClassName('conditionContent')[0].style.maxHeight = this.currentValue ? height : '';
        document.getElementsByClassName('ark-table-body')[0].style.height = this.currentValue ? '233px' : '163px';
        console.log(111, document.getElementsByClassName('conditionContent')[0].style.maxHeight);
      },
      inputEnter() {
        this.currentPage = 1;
      }, // 输入框回车触发
      // 新增
      addBtn() {
        // console.log(this.$route.params)
        // 关闭自定义界面，
        const { path } = this.$route;
        const { keepAliveModuleName, tableName } = this.$store.state.global.activeTab;
        // console.log(keepAliveModuleName,tableName)
        this.$store.commit('global/tabCloseAppoint', {
          tableName,
          routeFullPath: path,
          keepAliveModuleName,
          stopRouterPush: true,
        });

        let label = '添加导购目标';
        let customizedModuleName = 'addGuideTarget';
        let customizedModuleId = this.$route.params.customizedModuleId;
        setTimeout(()=>{
          R3.store.commit('global/tabOpen', {
            type: 'tableDetailAction' || 'C',
            label,
            customizedModuleName,
            customizedModuleId
          });
        }, 0);
      },
      // 导出
      exportBtn() {
        let data = {
          fiscal_year: parseInt(this.formData.select),
          store_name: this.formData.shop_value,
          mobile: this.formData.phone,
          seller_name: this.formData.guide_value,
          target_type: 2
        };
        network.post('/p/cs/performance/exportperformancedata', data, { serviceId: 'ishopbill' }).then((res) => {
          // console.log(res.data.data)
          if (res.data.code == 0) {
            // 导出表格
            window.location.href = res.data.data;
          }
        });
      },
      // 下拉选择分页
      changePageShop(value) { // 分页改变是传过来的值
        // console.log("分页数",value)
        this.shopPageNum = 10 * (value - 1);
        // console.log("每页开头",this.shopPageNum)
        network.post('/p/cs/QueryList', urlSearchParams({
          searchdata: {
            isdroplistsearch: true, refcolid: 167910, startindex: this.shopPageNum, range: this.shopPageSize
          } 
        }), { serviceId: 'ishopbase' }).then((res) => {
          // console.log("下拉数据",res.data.data)
          this.shopDataAll = res.data.data;
        });
      },
      // 下拉选择器数据
      getDataShop() {
        network.post('/p/cs/QueryList', urlSearchParams({
          searchdata: {
            isdroplistsearch: true, refcolid: 167910, startindex: this.shopPageNum, range: this.shopPageSize
          } 
        }), { serviceId: 'ishopbase' }).then((res) => {
          // console.log("下拉数据",res.data.data)
          this.shopDataAll = res.data.data;
          this.shopTotalRowCount = res.data.data.totalRowCount;
        });
      },
      InputValueChangeShop(value) { // 模糊搜索是传过来的值
        this.formData.shop_value = value;
        // console.log("输入的值",this.formData.shop_value)
        let _self = this;
        network.post('/p/cs/fuzzyquerybyak', urlSearchParams({ ak: value, colid: 167910, fixedcolumns: {} }), { serviceId: 'ishopbase' }).then((res) => {
          // console.log(444444,res.data.data)
          _self.shopAutoData = res.data.data;
        });
      },
      // 选中店铺的一项
      selectedTopShopData(e) {
        // console.log(e,11111)
        this.formData.shop_id = e[0].ID;
        this.formData.shop_value = e[0].Label;
        this.shopPage_num = 1;
      },
      // 输入框清空时触发
      clearShopId() {
        this.formData.shop_id = '';
        this.formData.shop_value = '';// 所属店铺输入值
        this.shopDefaultSelected = [];
        this.shopPage_num = 1;
      },
      // 选中所属店铺分类的一项
      selectedTopGuideData(e) {
        // console.log(e,22222)
        this.formData.guide_id = e[0].ID;
        this.formData.guide_value = e[0].Label;
        this.guidePage_num = 1;
      },
      // 输入框清空时触发
      clearGuideId() {
        this.formData.guide_id = '';
        this.formData.guide_value = '';// 所属店铺输入值
        this.guideDefaultSelected = [];
        this.guidePage_num = 1;
      },
      // 键盘触发选择店铺
      InputValueChange(e) {
        // console.log("所属店铺输入值",this.formData.shop_value)
        if (e.key == 'Enter') {
          if (this.formData.shop_value == '') {
            // console.log("所属店铺就是空的啊啊啊啊")
            this.formData.shop_id = '';
            this.shopPage_num = 1;
          } else {
            // console.log("模糊搜索",this.shopDefaultSelected)
            let arrData1 = {
              ID: this.shopAutoData[0].id,
              Label: this.shopAutoData[0].value
            };
            this.shopDefaultSelected = [arrData1];
            // console.log("所属店铺默认值",this.shopDefaultSelected);
            this.formData.shop_id = this.shopAutoData[0].id;
            this.formData.shop_value = this.shopAutoData[0].value;
            this.shopPage_num = 1;
          }
        }
      },
      // 键盘触发选择导购
      InputValueChange1(e) {
        // console.log("回车事件",e)
        // console.log("导购姓名输入值",this.formData.guide_value)
        if (e.key == 'Enter') {
          if (this.formData.guide_value == '') {
            // console.log("导购姓名就是空的啊啊啊啊")
            this.formData.guide_id = '';
            this.guidePage_num = 1;
          } else {
            // console.log("模糊搜索",this.guideDefaultSelected)
            let arrData1 = {
              ID: this.guideAutoData[0].id,
              Label: this.guideAutoData[0].value
            };
            this.guideDefaultSelected = [arrData1];
            // console.log("导购默认值",this.guideDefaultSelected);
            this.formData.guide_id = this.guideAutoData[0].id;
            this.formData.guide_value = this.guideAutoData[0].value;
            this.guidePage_num = 1;
          }
        }
      },
      InputValueChangeGuide(value) { // 模糊搜索是传过来的值
        this.formData.guide_value = value;
        // console.log("输入的值",this.formData.guide_value)
        let _self = this;
        network.post('/p/cs/fuzzyquerybyak', urlSearchParams({ ak: value, colid: 168559, fixedcolumns: {} }), { serviceId: 'ishopbase' }).then((res) => {
          // console.log(444444,res.data.data)
          _self.guideAutoData = res.data.data;
        });
      },
      // 下拉选择分页
      changePageGuide(value) { // 分页改变是传过来的值
        // console.log("分页数",value)
        this.guidePageNum = 10 * (value - 1);
        // console.log("每页开头",this.guidePageNum)
        network.post('/p/cs/QueryList', urlSearchParams({
          searchdata: {
            isdroplistsearch: true, refcolid: 168559, startindex: this.guidePageNum, range: this.pageSize
          } 
        }), { serviceId: 'ishopbase' }).then((res) => {
          // console.log("下拉数据",res.data.data)
          this.guideDataAll = res.data.data;
        });
      },
      // 下拉选择器数据
      getDataGuide() {
        network.post('/p/cs/QueryList', urlSearchParams({
          searchdata: {
            isdroplistsearch: true, refcolid: 168559, startindex: this.guidePageNum, range: this.pageSize
          } 
        }), { serviceId: 'ishopbase' }).then((res) => {
          // console.log("下拉数据",res.data.data)
          this.guideDataAll = res.data.data;
          this.guideTotalRowCount = res.data.data.totalRowCount;
        });
      },
    },
  };
</script>
<style lang="less">
    .ark-spin-fix{
      z-index: 999;
      .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
      }
      @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
      }
    }
</style>
<style lang="less" scoped>
    .shopPromotionRanking {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      padding: 0 16px 16px 16px;
      .topContent {
        height: 56px;
        min-height: 56px;
        width: 100%;
        display: flex;
        align-items: center;
        .top {
          height: 28px;
          width: 100%;
          display: flex;
          align-items: center;
          // background:rgba(247,248,250,1);
          .icon {
            width:2px;
            height:18px;
            background:rgba(254,106,70,1);
            border-radius:1px;
            margin: 0 6px 0 7px;
          }
          .text{
            font-size: 14px;
            font-weight: 600;
            color: #4C4C4C;
            line-height: 20px;
          }
        }
        .export{
              width: 82px;
              height: 30px;
              background: #FE6A46;
              border-radius: 2px;
              border: 1px solid #FE6A46;
              display: flex;
              cursor: pointer;
            .exImg{
              width: 13px;
              height: 13px;
              position: relative;
              top: 8px;
              margin-left: 21px;
            }
            .exText{
              font-size: 12px;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 30px;
              margin-left: 2px;
            }
          }
      }
      .conditionContent {
        width: 100%;
        display: flex;
        max-height: 3000px;
        overflow: hidden;
        flex-wrap: wrap;
        /* border: 1px solid #DEDEDE; */
        padding-top: 16px;
        padding-right: 51px;
        .itemContent {
          width: calc((100% - 120px) / 3);
          display: flex;
          align-items: center;
          margin-bottom: 24px;
          margin-right: 40px;
          .itemLabel {
            min-width: 76px;
            font-size: 12px;
            font-weight: 500;
            color: #4C4C4C;
            line-height: 17px;
            margin-right: 8px;
            text-align: right;
          }
          .posterType {
            width: calc(100% - 84px);
          }
        }
      }
        /* .conditionContent.up{
          max-height: 58px;
        } */
        .btnContent {
            width: 100%;
            margin-bottom: 16px;
            display: flex;
            justify-content: flex-end;
            .resetBtn {
              margin-right: 8px;
            }
          }
          .upOrDown{
            display: flex;
            align-items: center;
            margin-right: 8px;
          }
      .divider {
        width: calc(100% + 32px);
          position: relative;
          left: -16px;
          background: #F3F5FA;
          height: 12px;
      }
      .tableContent {
        flex: 1;
        overflow-y: hidden;
        margin-top: 16px;
      }
      .pageContent {
        padding: 3px 0;
        display: flex;
        justify-content: flex-end;
      }
    }
    .quickOperation{
        height: 60px;
        display: flex;
        align-items: center;
        border-bottom:1px solid #E4E4E4;
      }
    .quickText{
        margin-right: 8px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        /* // line-height: 17px; */
    }
    .upDown{
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 17px;
    }
</style>
