<template>
  <section class="dm-wrap" v-loading="loading">
    <dm-sub-title title-align="space-between" class="mb10">
      计划列表
      <span class="intro_wrap" @click="drawer = true"><i class="iconfont icon-zhibiaoshuoming introlIcon" alt="" /><span class="intro">指标说明</span></span>
    </dm-sub-title>
    <div class="pb22 clearfix">
      <el-input v-model="listParams.searchName" class="w250" placeholder="输入计划名称" clearable @change="search"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-select class="dm-select" clearable="" v-model="listParams.effectType" placeholder="所有时效" @change="search">
        <el-option v-for="(v, i) in effectTypeOption" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="dm-select" clearable v-model="listParams.marketingType" placeholder="所有营销方式" @change="search">
        <el-option v-for="(v, i) in showMarketingTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <!-- <dm-activity-select class="vertical-middle" onlySelect width="130" :actId.sync="listParams.marketingActivityId" @actUpdate="search"></dm-activity-select> -->
      <el-select class="dm-select" clearable v-model="listParams.onlineStatus" placeholder="所有状态" @change="search">
        <el-option v-for="(v, i) in onlineOptions" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-button type="text" @click="showSearch = !showSearch" class="senior-search">高级搜索<i :class="showSearch ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i></el-button>
      <el-button type="primary" @click="resetFilter" :disabled="resetDisable">重置</el-button>
      <!-- <el-checkbox class="vertical-middle" v-if="$store.state.marketing.isShowSelf" v-model="listParams.showSelfFlag" :true-label="1" :false-label="0" label="仅看本人" border @change="search" /> -->
      <!-- <el-date-picker v-model="dateTime" style="width:250px" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker> -->
      <el-button class="fr" type="primary" v-if="$getButtonLimit($buttonCode.marketingAddEcm)" :limit-code="$buttonCode.marketingAddEcm" @click="$router.push('/ecm/add')">新建计划</el-button>
      <el-tooltip class="fr" content="只记录删除计划或编辑“进行中”计划的操作日志" placement="top" open-delay="200">
        <el-button style="margin-right:10px" @click="$router.push('/ecm/log')">操作日志</el-button>
      </el-tooltip>
    </div>
    <div v-show="showSearch" class="senior-search-content">
      <el-form label-width="100px">
        <!-- <el-form-item label="创建时间" class="inline-item"> -->
        <span style="margin-right:10px">创建时间</span>
        <el-date-picker style="width:350px" v-model="dateTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="search"></el-date-picker>
        <!-- </el-form-item> -->
        <!-- <el-form-item label="选择时效" class="inline-item">
          <el-select style="width:350px" clearable="" v-model="listParams.effectType" placeholder="选择时效" @change="search">
            <el-option v-for="(v, i) in effectTypeOption" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择营销方式" class="inline-item">
          <el-select style="width:350px" clearable v-model="listParams.marketingType" placeholder="选择营销方式" @change="search">
            <el-option v-for="(v, i) in showMarketingTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择状态" class="inline-item">
          <el-select style="width:350px" clearable v-model="listParams.onlineStatus" placeholder="选择状态" @change="search">
            <el-option v-for="(v, i) in onlineOptions" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="选择数据对话" class="inline-item"> -->
        <span style="margin:0 10px 0 20px">选择数据对话</span>
        <dm-activity-select ref="activity" class="vertical-middle" onlySelect width="350" :actId.sync="listParams.marketingActivityId" @actUpdate="search"></dm-activity-select>
        <!-- </el-form-item> -->
        <el-checkbox v-if="$store.state.marketing.isShowSelf" class="vertical-middle" style="margin-left:20px" v-model="listParams.showSelfFlag" :true-label="1" :false-label="0" label="仅看本人" border @change="search" />
      </el-form>
    </div>
    <el-table tooltipEffect="dark" :data="tableList" style="width: 100%" element-loading-text="拼命加载中">
      <el-table-column align="left" fixed="left" :min-width="200" show-overflow-tooltip label="计划名称">
        <template slot-scope="scope">
          <el-button v-if="xsxsFlag && isOpenFlag(scope.row.analyseJson)" style="vertical-align: middle;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 100%;text-align:left" type="text" @click="toTouch(scope.row)">
            <img style="vertical-align: middle;width:14px;height:14px" src="../../assets/img/data.svg" />
            <span style="vertical-align: middle;">{{ scope.row.ecmPlanName }}</span>
          </el-button>
          <span v-else>{{ scope.row.ecmPlanName }}</span>
        </template>
      </el-table-column>
      <el-table-column v-for="(v, i) in tableHeader" :fixed="v.fixed" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter">
        <template slot="header">
          <span>
            <span>{{ v.label }}</span>
            <el-tooltip v-if="v.prop == 'timesForPeople'" content="刷新获取最新营销人次统计" placement="top" :open-delay="200">
              <i class="el-icon-refresh" @click="loadEcmList"></i>
            </el-tooltip>
          </span>
        </template>
        <template slot-scope="scope">
          <template v-if="v.prop == 'onlineStatus'">
            <el-tooltip v-if="scope.row.remarkForMemberLabel" :content="scope.row.remarkForMemberLabel" placement="top">
              <span>
                <span class="dm-status--info has-remark"></span>
                <span v-if="scope.row.onlineStatus == 0">未开始</span>
                <span v-if="scope.row.onlineStatus == 1">进行中</span>
                <span v-if="scope.row.onlineStatus == 2">已结束</span>
              </span>
            </el-tooltip>
            <template v-else>
              <span v-if="scope.row.onlineStatus == 0">
                <span class="dm-status--primary"></span>
                <span>未开始</span>
              </span>
              <span v-else-if="scope.row.onlineStatus == 1">
                <span class="dm-status--primary--flash"></span>
                <span>进行中</span>
              </span>
              <span v-else-if="scope.row.onlineStatus == 2">
                <span class="dm-status--info"></span>
                <span>已结束</span>
              </span>
              <span v-else>--</span>
            </template>
          </template>
          <span class="vertical-middle" v-else-if="v.formatter" v-html="v.formatter(scope.row)"></span>
          <span v-else>{{ scope.row[v.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="100" align="left" prop="creatorName" label="创建人" v-if="$store.state.marketing.openFlag"></el-table-column>
      <el-table-column min-width="120" align="left" label="创建日期">
        <template slot-scope="{ row }">
          <p class="cell-time">
            {{ formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true).y }}<br />
            <span>{{ formatDateTimeByType(row.createTime, 'yyyy-MM-dd-HH-mm-ss', true).h }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left" width="200" fixed="right">
        <template slot-scope="scope">
          <!-- <template v-if="scope.row.canEdit !== false"> -->
          <el-button type="text" v-if="$getButtonLimit($buttonCode.marketingEditEcm) && scope.row.canEdit && scope.row.onlineStatus != 2 && scope.row.effectType != 2" :limit-code="$buttonCode.marketingEditEcm" @click="editData(scope.row)">编辑</el-button>
          <el-button type="text" v-else @click="$router.push(`/ecm/info/${scope.row.ecmPlanId}`)">详情</el-button>
          <!-- </template> -->
          <!-- <dm-delete v-if="scope.row.effectType !== 2 && scope.row.onlineStatus === 1 && scope.row.canEdit !== false" @confirm="offlineEcmPlan(scope.row)" tips="是否下线该计划?">
            <el-button type="text">下线</el-button>
          </dm-delete> -->
          <el-button type="text" @click="toRecord(scope.row)">提交日志</el-button>
          <!-- <template v-if="scope.row.putonStatus !== 2 && scope.row.canEdit !== false">
            <el-button v-if="xsxsFlag && isOpenFlag(scope.row.analyseJson)" type="text" @click="onDelete(scope.row)">删除</el-button>
            <dm-delete v-else @confirm="delData(scope.row)" tips="是否删除该计划?">
              <el-button type="text">删除</el-button>
            </dm-delete>
          </template> -->
          <!-- <el-button type="text" @click="toRecord(scope.row)">记录</el-button>
          <el-button type="text" @click="toTouch(scope.row)" v-if="xsxsFlag && isOpenFlag(scope.row.analyseJson)">触达效果</el-button> -->
          <el-dropdown style="margin-left:8px" trigger="click" @command="onCommand($event, scope.row)" v-if="($getButtonLimit($buttonCode.marketingDelEcm) && scope.row.putonStatus !== 2 && scope.row.canEdit !== false) || ($getButtonLimit($buttonCode.marketingOutlineEcm) && scope.row.effectType !== 2 && scope.row.onlineStatus === 1 && scope.row.canEdit !== false) || (xsxsFlag && isOpenFlag(scope.row.analyseJson))">
            <el-button type="text">更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item :command="1">记录</el-dropdown-item> -->
              <el-dropdown-item v-if="$getButtonLimit($buttonCode.marketingDelEcm) && scope.row.putonStatus !== 2 && scope.row.canEdit !== false" :limit-code="$buttonCode.marketingDelEcm" :command="1">删除</el-dropdown-item>
              <el-dropdown-item v-if="$getButtonLimit($buttonCode.marketingOutlineEcm) && scope.row.effectType !== 2 && scope.row.onlineStatus === 1 && scope.row.canEdit !== false" :limit-code="$buttonCode.marketingOutlineEcm" @confirm="offlineEcmPlan(scope.row)" :command="2">下线</el-dropdown-item>
              <el-dropdown-item v-if="xsxsFlag && isOpenFlag(scope.row.analyseJson)" :command="3">触达效果</el-dropdown-item>
              <!-- <el-dropdown-item :command="4">复制新建</el-dropdown-item> -->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
    <description :drawer.sync="drawer" :contentTitle="contentTitle" />
  </section>
</template>
<script>
import description from '@/views/ecm/touch-components/description.vue';
import activitySelect from '@/components/activity-select/index.vue';
import { loadEcmList, deleteEcm, offlineEcmPlan, getUseStoredFalg, getXsxsFalg } from '@/service/api/ecmApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import { ecmTypes } from '@/config/ecm.js';
const marketingTypeOptions = [/* { value: '', label: '所有发送类型', visible: true },  */...JSON.parse(JSON.stringify(ecmTypes))]; // eslint-disable-line
export default {
  name: 'ecm-list',
  data() {
    return {
      drawer: false,
      showSearch: false,
      dateTime: null,
      formatDateTimeByType,
      effectTypeOption: [
        // { value: '', label: '所有时效' },
        { value: 0, label: '触点' },
        { value: 1, label: '重复' },
        { value: 2, label: '单次' }
      ], // eslint-disable-line
      onlineOptions: [
        // { value: '', label: '所有状态' },
        { value: 0, label: '未开始' },
        { value: 1, label: '进行中' },
        { value: 2, label: '已结束' }
      ], // eslint-disable-line
      marketingTypeOptions,
      listParams: {
        effectType: '', // 全部失效的默认值是-1,提交时判断''改为-1
        marketingType: '',
        marketingActivityId: '',
        onlineStatus: '',
        searchName: '',
        currentPage: 1,
        pageSize: 20,
        showSelfFlag: ''
      },
      xsxsFlag: 0, // 销售线索开关 1 开 0 关
      total: 0,
      loading: false,
      tableHeader: [
        {
          label: '时效',
          prop: 'effectType',
          minWidth: '180',
          align: 'left',
          formatter(row) {
            if (row.effectType == 0) {
              return '触点';
            } else if (row.effectType == 1) {
              /** '重复执行频率(1:天; 2:周 3:月)' **/
              const html = row.execDateType == 1 ? '每天' : row.execDateType == 2 ? '每周' : '每月';
              return `重复(${html})`;
            } else if (row.effectType == 2) {
              /** '单次执行类型(1:立即执行; 0:定时执行)' **/
              if (row.execType == 0) {
                return `<div>单次</div>
                        <span>
                          (<i class="el-icon-time fz16 vertical-middle" style="margin-right:2px"></i><span class="vertical-middle">${formatDateTimeByType(row.execTime, 'yyyy-MM-dd HH:mm:ss')}</span>)
                        </span>`;
              } else {
                return '单次(立即执行)';
              }
            }
          }
        },
        { label: '营销方式', prop: 'marketingType', minWidth: '140', align: 'left', tooltip: true },
        {
          label: '数据对话',
          prop: 'marketingActivityName',
          minWidth: '140',
          align: 'left',
          formatter(row) {
            return row.marketingActivityName || '--';
          }
        },
        { label: '营销人次', prop: 'timesForPeople', minWidth: '120', align: 'left' },
        {
          label: '状态',
          prop: 'onlineStatus',
          minWidth: '140',
          align: 'left'
          // formatter(row) {
          //   let result = '--';
          //   switch (row.onlineStatus) {
          //     case 0:
          //       result = '<span class="dm-status--primary">未开始</span>';
          //       break;
          //     case 1:
          //       result = '<span class="dm-status--primary--flash"></span><span class="vertical-middle">进行中</span>';
          //       break;
          //     case 2:
          //       result = '<span class="dm-status--info">已结束</span>';
          //       break;
          //   }
          //   return result;
          // }
        },
        {
          label: '计划触达人数',
          prop: 'ecmMemberNum',
          minWidth: '120',
          align: 'left',
          formatter(row) {
            let openFlag = row.analyseJson ? JSON.parse(row.analyseJson) : null;
            if (!openFlag) openFlag = {};
            return !openFlag.open_flag ? '--' : row.ecmMemberNum || 0;
          }
        },
        {
          label: '触达人数',
          prop: 'ecmSuccessNum',
          minWidth: '120',
          align: 'left',
          formatter(row) {
            let openFlag = row.analyseJson ? JSON.parse(row.analyseJson) : null;
            if (!openFlag) openFlag = {};
            return !openFlag.open_flag ? '--' : row.ecmSuccessNum || 0;
          }
        },
        {
          label: '转化人数',
          prop: 'ecmTranNum',
          minWidth: '120',
          align: 'left',
          formatter(row) {
            let openFlag = row.analyseJson ? JSON.parse(row.analyseJson) : null;
            if (!openFlag) openFlag = {};
            return !openFlag.open_flag ? '--' : row.ecmTranNum || 0;
          }
        },
        {
          label: '转化收益',
          prop: 'ecmTranIncome',
          minWidth: '120',
          align: 'left',
          formatter(row) {
            let openFlag = row.analyseJson ? JSON.parse(row.analyseJson) : null;
            if (!openFlag) openFlag = {};
            return !openFlag.open_flag ? '--' : Number(row.ecmTranIncome).toFixed(2) || '0.00';
          }
        },
        {
          label: '卡券收益',
          prop: 'cardSalesAmt',
          minWidth: '120',
          align: 'left',
          formatter(row) {
            let openFlag = row.analyseJson ? JSON.parse(row.analyseJson) : null;
            if (!openFlag) openFlag = {};
            return !openFlag.open_flag ? '--' : Number(row.cardSalesAmt).toFixed(2) || '0.00';
          }
        }
      ],
      tableList: []
    };
  },
  components: {
    activitySelect,
    description
  },
  beforeRouteLeave(to, from, next) {
    const paths = ['/ecm/copy', '/ecm/edit', '/ecm/oncelist', '/ecm/currentlist', '/ecm/batchlist', '/ecm/touch', '/ecm/info'];
    const matched = paths.some(el => to.path.indexOf(el) > -1);
    if (!matched) {
      this.$store.commit('setKeepAlive', []);
    } else {
      this.$store.commit('setKeepAlive', ['ecm-list']);
    }
    next();
  },
  created() {
    this.setXsxsFlag();
    getUseStoredFalg().then(res => {
      if (res.result.useStoredFlag) {
        this.marketingTypeOptions.find(el => el.value == 'grade').visible = true;
      }
    });
    this.loadEcmList();
  },
  methods: {
    resetFilter() {
      let keys = ['effectType', 'marketingType', 'marketingActivityId', 'onlineStatus', 'searchName', 'currentPage', 'showSelfFlag'];
      keys.forEach(el => {
        if (el === 'currentPage') {
          this.listParams[el] = 1;
        } else {
          this.listParams[el] = '';
        }
      });
      this.dateTime = null;
      this.$refs.activity.marketingActivityId = '';
      this.$refs.activity.updateActId('');
      // this.search();
    },
    search() {
      this.listParams.currentPage = 1;
      this.loadEcmList();
    },
    handleSizeChange(val) {
      this.listParams.pageSize = val;
      this.loadEcmList();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.loadEcmList();
    },
    async loadEcmList() {
      this.loading = true;
      if (this.dateTime) {
        this.listParams.beginTime = this.dateTime[0];
        this.listParams.endTime = this.dateTime[1];
      } else {
        this.listParams.beginTime = '';
        this.listParams.endTime = '';
      }
      const params = { ...this.listParams };
      if (params.effectType === '') {
        params.effectType = -1; // 全部时效的默认值是-1
      }
      let res = await loadEcmList(params);
      this.tableList = res.result.result || [];
      this.total = res.result.totalCount;
      this.loading = false;
    },
    //编辑
    copyData(row) {
      this.$router.push('/ecm/copy/' + row.ecmPlanId);
    },
    //编辑
    editData(row) {
      this.$router.push('/ecm/edit/' + row.ecmPlanId);
    },
    // 记录
    toRecord(row) {
      const prefix = row.effectType == 1 ? 'batchlist' : row.effectType == 2 ? 'oncelist' : 'currentlist';
      this.$router.push({ path: `/ecm/${prefix}/${row.ecmPlanId}`, query: { name: row.ecmPlanName, effectType: row.effectType } });
    },
    // 触达效果
    toTouch(row) {
      this.$router.push({ path: `/ecm/touch/${row.ecmPlanId}`, query: { name: row.ecmPlanName, createTime: row.createTime, effectType: row.effectType } });
    },
    // 删除
    async delData(row) {
      try {
        let res = await deleteEcm({ ecmPlanId: row.ecmPlanId });
        if (res.errorCode === 0) {
          this.$tips({ type: 'success', message: '删除成功!' });
          if (this.tableList.length === 1 && this.listParams.currentPage !== 1) {
            this.listParams.currentPage--;
          }
          this.loadEcmList();
        } else {
          this.$tips({ type: 'error', message: res.message || '删除失败!' });
        }
      } catch (err) {
        this.$tips({ type: 'error', message: '删除失败!' });
      }
    },
    // 下线
    async offlineEcmPlan(row) {
      try {
        let res = await offlineEcmPlan({ ecmPlanId: row.ecmPlanId });
        if (res.errorCode === 0) {
          this.$tips({ type: 'success', message: '下线成功!' });
          this.loadEcmList();
        } else {
          this.$tips({ type: 'error', message: res.message || '下线失败!' });
        }
      } catch (err) {
        this.$tips({ type: 'error', message: '下线失败!' });
      }
    },
    setXsxsFlag() {
      // 是否开启销售线索
      getXsxsFalg().then(res => {
        this.xsxsFlag = res.result;
        this.$store.state.marketing.xsxsFlag = res.result;
        if (this.xsxsFlag == 0) {
          let arr = [];
          this.tableHeader.forEach(item => {
            if (item.label != '线索转化收益' && item.label != '转化人数' && item.label != '触达人数' && item.label != '计划触达人数') {
              arr.push(item);
            }
          });
          this.tableHeader = arr;
        }
        if (this.xsxsFlag) {
          // this.marketingTypeOptions.find(el => el.value == 'qywx').visible = true;
          this.marketingTypeOptions.find(el => el.value == 'qfxx').visible = true;
          this.marketingTypeOptions.find(el => el.value == 'teltask-fail').visible = true;
          this.marketingTypeOptions.find(el => el.value == 'message-fail').visible = true;
        }
      });
    },
    async onCommand(command, row) {
      if (command == 1) {
        // this.toRecord(row);
        if (this.xsxsFlag && this.isOpenFlag(row.analyseJson)) {
          await this.$confirm('是否删除该计划？删除后触达效果数据会一起被删除', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
        } else {
          await this.$confirm('是否删除该计划?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
        }
        this.delData(row);
      } else if (command == 2) {
        await this.$confirm('是否下线该计划?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });
        this.offlineEcmPlan(row);
      } else if (command == 3) {
        this.toTouch(row);
      } else if (command == 4) {
        this.copyData(row);
      }
    },
    async onDelete(row) {
      await this.$confirm('是否删除该计划？删除后触达效果数据会一起被删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      this.delData(row);
    }
  },
  computed: {
    contentTitle() {
      const name = (this.$route.meta && this.$route.meta.aliasName) || this.$route.name; // 有些params跳转的需要用到route.name 这种情况如果meta中有aliasName，优先aliasName
      return name;
    },
    resetDisable() {
      return !this.listParams.searchName && this.listParams.effectType === '' && !this.listParams.marketingType && this.listParams.onlineStatus === '' && !this.dateTime && !this.listParams.marketingActivityId && !this.listParams.showSelfFlag;
    },
    isOpenFlag(item) {
      return item => {
        if (!item) return false;
        item = JSON.parse(item);
        if (!item) item = {};
        if (item.open_flag == 0) {
          return false;
        } else {
          return true;
        }
      };
    },
    showMarketingTypeOptions() {
      return this.marketingTypeOptions.filter(el => el.visible == true);
    }
  }
};
</script>

<style lang="scss" scoped>
.intro_wrap {
  float: right;
  display: inline-flex;
  align-items: center;
  .introlIcon {
    color: #2f54eb;
    font-size: 16px;
    margin-right: 5px;
  }
  .intro {
    width: 64px;
    height: 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2f54eb;
    line-height: 22px;
    cursor: pointer;
  }
}
.el-icon-refresh {
  color: #909399;
  cursor: pointer;
  &:hover {
    color: #606266;
  }
}
.has-remark::before {
  background: #f5222d;
}
.senior-search {
  margin-left: 10px;
  font-size: 14px;
}
.senior-search .el-icon-d-arrow-right {
  display: inline-block;
  transform: rotate(90deg);
  margin-left: 5px;
}
.senior-search .el-icon-d-arrow-left {
  display: inline-block;
  transform: rotate(90deg);
  margin-left: 5px;
}
.senior-search-content {
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  padding: 15px 24px 15px 10px;
  margin-bottom: 20px;
}
.inline-item {
  display: inline-block;
  width: 500px;
  vertical-align: top;
}
</style>
