import { Component, Vue, Prop } from 'vue-property-decorator'
import moment from 'moment';

@Component
export default class ColumnContent extends Vue {
  @Prop() scope: any;
  @Prop() config: any;

  /**
   * 数据更新
   */
  onDataUpdate(options: any) {
    this.scope.row[this.config.key] = options.value;
  }

  protected render() {
    const { row, $index, column } = this.scope;
    const { key, type } = (this.config || {}) as any;
    // 处理样式格式
    const style: any = {};
    let currentValue = row[key];
    if (this.config.formatter) {
      const currentDetail = this.config.formatter(row, column, $index);
      if (currentDetail && currentDetail.color) {
        style.borderColor = currentDetail.color;
        style.color = currentDetail.color;
        style.background = currentDetail.background;
      }
      if (currentDetail && currentDetail.value) currentValue = currentDetail.value
    }
    if (currentValue instanceof Array) {
      currentValue = currentValue.join(' ' + this.config.split + ' ' || ', ');
    }
    // 如果是输入框，编辑中情况
    if (this.config && (this.config.isInput || this.config.inputType) && row.isEdit) {
      const inputConfig = {
        ...this.config,
        type: this.config.inputType || 'text',
        key: 'data.' + $index + '.' + key,
        label: ""
      };
      return (
        <mu-Field config={inputConfig} value={row[key]} currentValue={row} on-on-change={this.onDataUpdate}></mu-Field>)
    }

    switch (type) {
      case 'link': {
        const { url, query } = this.config.linkUrl(row);
        const addQuery = (query) => {
          if (query && Object.keys(query).length >= 1) {
            const str = '&';
            let str2 = '';
            for (const k in query) {
              let querystring = `${k}=${query[k]}`;
              querystring = querystring + str;
              str2 += querystring;
            }
            return str2.slice(0, -1);
          }
        };
        return (<a class='mu-link' target={this.config.blank} href={url + '?' + addQuery(query)}>{currentValue}</a>)
      }
      case 'route': {
        const formatter = this.config.formatter ? this.config.formatter(row) : "路由跳转";
        const { url, query } = this.config.routerUrl(row);
        // @todo 有待优化，对url和params进行拼接
        const toRoute = { path: url, query: query };
        return (<router-link class='mu-link' to={toRoute}>{formatter.value}</router-link>)
      }
      case 'text': {
        return (<span style={style}>{currentValue}</span>);
      }
      case 'date': {
        const currentFormat = this.config.format
          ? this.config.format.replace(/y/g, 'Y').replace(/d/g, 'D') : 'YYYY-MM-DD HH:mm:ss';
        return (<span>{currentValue ? moment(currentValue).format(currentFormat) : '-'}</span>);
      }
      case 'img': {
        return (<img src={currentValue} width={this.config.imgWidth} height={this.config.imgHeight || 48}/>);
      }
      case 'tag': {
        const config = {
          text: currentValue,
          size: this.config.fontSize,
          radiusable: this.config.radiusable || undefined,
          type: this.config.tagType
        };
        return (
          <mu-tag config={config} style={style}></mu-tag>);
      }
      case 'icon': {
        const style = this.config.size ? { fontSize: this.config.size } : {};
        return (<i class={currentValue + ' ' + 'td-icon'} style={style}></i>);
      }
      case 'input': {
        const config = { ...this.config, type: this.config.inputType, key: 'data.' + $index + '.' + key, label: "" };
        return (!row.isEdit || !this.config) ? (<span>{currentValue}</span>)
          : (<mu-Field config={config} value={row[key]} on-on-change={this.onDataUpdate}></mu-Field>);
      }
      case 'operation': {
        return (<mu-btn-bar config={this.config}></mu-btn-bar>);
      }
      default:
        return (<span style={style}>{currentValue}</span>);
    }
  }
}