<template>
  <LayoutContent :breads="[{title: '比价列表'}]">
    <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
      :page="page"
      :total="total"
      :columns="columns"
      :data="data"
      :row-class-name="onRowClassName"
      @on-page-change="onPageChange">
      <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, Button} from 'iview'; //eslint-disable-line
import Api from '@/api/api';
import dayjs from 'dayjs';
import BlobUtil from 'libs/blob';
import {BigNumber} from 'bignumber.js';
import qs from 'qs';

const api = new Api();

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

  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: '',
      },
      page: 1,
      total: 0,
      data: [],
      columns: [{
        title: '商品编码',
        key: 'productId',
        width: 100,
      }, {
        title: '商品图片',
        width: 120,
        render(h, {row}) {
          return (
            <img src={row.imageUrl} width="100" />
          );
        }
      }, {
        title: 'SKU',
        key: 'sku',
        width: 100,
      }, {
        title: '商品名称',
        key: 'productName',
        width: 150,
        render(h, {row}) {
          return (
            <a href={ '/ufoPlatform/html/product/productEdit.html?id=' + row.id}>{row.productName}</a>
          );
        }
      }, {
        title: '尺码',
        key: 'sizeName',
        width: 100,
      }, {
        renderHeader: () => {
          return (
            <span>毒当前价<br/>(A)</span>
          );
        },
        key: 'channelPrice',
        width: 100,
        render(h, {row}) {
          if (row.channelUrl) {
            return (
              <a href={row.channelUrl}>{row.channelPrice}</a>
            )
          } else {
            return (
              <span>{row.channelPrice}</span>
            );
          }
        }
      }, {
        title: '毒平均价',
        key: 'channelAveragePrice',
        width: 100,
      }, {
        renderHeader: () => {
          return (
            <span>价格低于<br/>(a%)</span>
          );
        },
        width: 150,
        render: (h, {row}) => {
          if (row._editing) {
            return (
              <div>
                {rateComponent(h, row, 'lowRate')}
                &nbsp;
                <i-tooltip placement="top" 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 placement="top" 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 placement="top" 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 placement="top" 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',
        width: 150,
      }, {
        title: 'UFO当前价',
        key: 'ufoCurrentPrice',
        width: 100,
      }, {
        renderHeader: () => {
          return (
            <span>
              UFO价格红线
            </span>
          );
        },
        key: 'ufoMinPrice',
        width: 120,
      }, {
        title: '状态',
        renderHeader: () => {
          return (
            <span>
              状态
              <i-tooltip transfer placement="top" content="毒当前价低于UFO价格红线则标记为异常">
                <i-icon class="icon-edit" type="ios-information-circle-outline" />
              </i-tooltip>
            </span>
          );
        },
        render(h, {row}) {
          return (
            <span>
              {row.status ? '异常' : '正常'}
            </span>
          );
        },
        width: 100,
      }, {
        title: '操作',
        render: (h, {row}) => {
          return (
            <div>
              {row.status ?
                (<i-button type="primary" size="small" onClick={() => this.onEditPrice(row)}>确认变更</i-button>) :
                (<span>-</span>)}
            </div>
          );
        },
        width: 100,
      }]
    };
  },
  created() {
    this.$nextTick(() => {
      const {page, productId, sku, status, productName, sizeName} = qs.parse(location.search ? location.search.slice(1) : '');

      this.filter.productId = productId || this.filter.productId;
      this.filter.sku = sku || this.filter.sku;
      this.filter.status = status ? parseInt(status) : this.filter.status;
      this.filter.productName = productName ? decodeURIComponent(productName) : this.filter.productName;
      this.filter.sizeName = sizeName || this.filter.sizeName;
      this.page = page ? parseInt(page) : 1;

      this.fetchData(this.filter, this.page);
    });
  },
  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;
    },
    onRowClassName(row) {
      return row.status ? 'row-unnormarl' : 'row-normarl';
    },
    async onSaveRate(row) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否确认更新',
        onOk: async () => {
          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();
            this.fetchData(this.filter, this.page);
            row._editing = false;
          } else {
            result.message && this.$Message.warning(result.message);
            this.$Loading.error();
          }
        }
      });
      
    },
    onEditPrice({id}) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否确认变更',
        onOk: async () => {
          this.$Loading.start();
          const result = await api._get('/ufoPlatform/channelSkuCompare/updateSuggestPrice', {
            id,
            status: 0,
          });
          if (result.code === 200) {
            this.$Message.success('变更成功');
            this.$Loading.finish();
            this.fetchData(this.filter, this.page);
          } else {
            result.message && this.$Message.warning(result.message);
            this.$Loading.error();
          }
        }
      });
    },
    async fetchData(params, page = 1) {
      this.page = page;
      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._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.do', {
        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;
  color: #515a6e;
}

/deep/ .row-unnormarl {
  color: #ed4014;
}
</style>