<template>
  <LayoutContent>
    <LayoutFilter @on-filter="onFilter" @on-clear="onClear">
      <i-form ref="filterForm" inline :model="filter">
        <i-form-item prop="sku">
          <i-input placeholder="SKU" v-model="filter.sku"></i-input>
        </i-form-item>
        <i-form-item prop="productId">
          <i-input placeholder="商品编码" v-model="filter.productId"></i-input>
        </i-form-item>
        <i-form-item prop="status">
          <i-select placeholder="选择状态" v-model="filter.status" style="width: 100px;">
            <i-option :value="0">正常</i-option>
            <i-option :value="1">异常</i-option>
          </i-select>
        </i-form-item>
        <i-form-item prop="productName">
          <i-input placeholder="商品名称" v-model="filter.productName"></i-input>
        </i-form-item>
        <i-form-item prop="sizeName">
          <i-input placeholder="尺码" v-model="filter.sizeName"></i-input>
        </i-form-item>
      </i-form>
    </LayoutFilter>
    <LayoutTable :total="total" @on-page-change="onPageChange">
      <i-table :columns="columns" :data="data"></i-table>
      <template slot="footer" class="btns">
        <i-button type="primary" icon="ios-cloud-download" @click="onExport">导出</i-button>
      </template>
    </LayoutTable>
  </LayoutContent>
</template>

<script>
import {Icon, Tooltip, InputNumber} from 'iview'; //eslint-disable-line
import Api from '@/api/api';
import dayjs from 'dayjs';
import BlobUtil from 'libs/blob';
import {BigNumber} from 'bignumber.js';

const api = new Api();

const rateComponent = (h, row, key) => {
  const value = BigNumber(row[key]).times(100).toNumber();

  return (
    <i-input-number
      value={value}
      style="width: 70px"
      max={100}
      min={0}
      formatter={value => `${value}%`}
      onInput={val => (row[key] = BigNumber(val).div(100).toNumber())}>
    </i-input-number>
  );
};

export default {
  name: 'SendRecordPage',
  data() {
    return {
      filter: {
        productId: '',
        sku: '',
        status: '',
        productName: '',
        sizeName: '',
      },
      total: 0,
      data: [],
      columns: [{
        title: '商品编码',
        key: 'productId'
      }, {
        title: 'SKU',
        key: 'sku'
      }, {
        title: '商品名称',
        key: 'productName'
      }, {
        title: '尺码',
        key: 'sizeName'
      }, {
        renderHeader: () => {
          return (
            <span>毒当前价<br/>(A)</span>
          );
        },
        key: 'channelPrice'
      }, {
        renderHeader: () => {
          return (
            <span>价格低于<br/>(a%)</span>
          );
        },
        width: 150,
        render: (h, {row}) => {
          if (row._editing) {
            return (
              <div>
                {rateComponent(h, row, 'lowRate')}
                &nbsp;
                <i-tooltip content="保存">
                  <i-icon class="icon-edit" type="md-checkmark-circle" onClick={() => (this.onSaveRate(row))} />
                </i-tooltip>
              </div>
            );
          }
          return (
            <span>
              {BigNumber(row.lowRate).times(100).toNumber()}%
                &nbsp;
              <i-tooltip content="修改比例">
                <i-icon class="icon-edit" type="md-create" onClick={() => (this.onEditRate(row))} />
              </i-tooltip>
            </span>
          );
        }
      }, {
        renderHeader: () => {
          return (
            <span>价格高于<br/>(b%)</span>
          );
        },
        width: 150,
        render: (h, {row}) => {
          if (row._editing) {
            return (
              <div>
                {rateComponent(h, row, 'highRate')}
                &nbsp;
                <i-tooltip content="保存">
                  <i-icon class="icon-edit" type="md-checkmark-circle" onClick={() => (this.onSaveRate(row))} />
                </i-tooltip>
              </div>
            );
          }
          return (
            <span>
            {BigNumber(row.highRate).times(100).toNumber()}%
            &nbsp;
            <i-tooltip content="修改比例">
              <i-icon class="icon-edit" type="md-create" onClick={() => (this.onEditRate(row))} />
            </i-tooltip>
          </span>
          );
        }
      }, {
        renderHeader: () => {
          return (
            <span>对标毒的价格区间<br/>A(1-a%)~A(1+b%)</span>
          );
        },
        width: 150,
        key: 'channelPriceRange'
      }, {
        title: '平台建议售价',
        key: 'suggestPriceRange'
      }, {
        title: 'UFO当前价',
        key: 'ufoCurrentPrice'
      }, {
        title: 'UFO价格红线',
        key: 'ufoMinPrice'
      }, {
        title: '状态',
        render(h, {row}) {
          return (
            <span>{row.status ? '异常' : '正常'}</span>
          );
        }
      }, {
        title: '操作',
        render(h, {row}) {
          return (
            <div>
              {row.status ?
                (<i-button type="primary" size="small" onClick={() => this.onEditPrice(row)}>确认变更</i-button>) :
                (<span>-</span>)}
            </div>
          );
        }
      }]
    };
  },
  created() {
    this.fetchData(this.filter);
  },
  methods: {
    onFilter() {
      this.fetchData(this.filter);
    },
    onClear() {
      this.$refs.filterForm.resetFields();
      this.fetchData(this.filter);
    },
    onPageChange(page) {
      this.fetchData(this.filter, page);
    },
    onEditRate(row) {
      row._editing = true;
    },
    async onSaveRate(row) {
      const {lowRate, highRate, id} = row;

      this.$Loading.start();
      const result = await api._get('/ufoPlatform/channelSkuCompare/updateSuggestRate', {
        id,
        suggestLowRate: lowRate,
        suggestHighRate: highRate
      });
      if (result.code === 200) {
        this.$Message.success('保存成功');
        this.$Loading.finish();
        row._editing = false;
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    async fetchData(params, page = 1) {
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/channelSkuCompare/queryList', Object.assign({
        page,
      }, this.getParams(params)));

      if (result.code === 200) {
        let total = 0;
        let data = [];
        if (result.data && result.data.length !== 0) {
          total = result.data.total;
          data = result.data.list;
        }
        this.total = total;
        this.data = data.map(sku => {
          sku.lowRate = 0.051;
          sku.highRate = 0.051;
          sku._editing = false;
          sku._lowRate = sku.lowRate;
          sku._highRate = sku.highRate;
          return sku;
        });
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    async onExport() {
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/batch/export', {
        type: 'channelSkuCompareServiceImpl',
        queryConf: this.getParams(this.filter)
      }, {
        responseType: 'blob'
      });
      if (result instanceof Blob) {
        BlobUtil.downloadBlob(result, `比价跟价导出_${dayjs().format('YYYY-MM-DD')}.xlsx`);
        this.$Loading.finish();
      } else if (result) {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    getParams(params) {
      return {
        productId: params.productId,
        sku: params.sku,
        status: parseInt(params.status) >= 0 ? params.status : void 0,
        productName: params.productName,
        sizeName: params.sizeName,
      };
    }
  },
};
</script>

<style lang="scss" scoped>
/deep/ .icon-edit {
  font-size: 16px;
  cursor: pointer;
  vertical-align: bottom;
}
</style>