<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form label-width="77px" class="ele-form-search">
        <el-row :gutter="15">
          <el-col :md="6" :sm="12">
            <el-form-item label="名称:">
              <el-input
                placeholder="请输入名称"
                clearable
                v-model="where.title"
              />
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <el-form-item label="价格区间:">
              <el-select v-model="where.priceRange" multiple>
                <el-option
                  v-for="item in priceRange"
                  :key="item.dictDataId"
                  :value="item.dictDataId"
                  :label="item.dictDataName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <el-form-item label="能源类型:">
              <el-select v-model="where.carProductLabel" multiple>
                <el-option
                  v-for="item in carProductLabel"
                  :key="item.dictDataId"
                  :value="item.dictDataId"
                  :label="item.dictDataName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <el-form-item label="车辆级别:">
              <el-select v-model="where.productLevel" multiple>
                <el-option
                  v-for="item in productLevel"
                  :key="item.dictDataId"
                  :value="item.dictDataId"
                  :label="item.dictDataName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="24">
            <el-form-item label="品牌:">
              <brand-select
                v-model="where.brands"
                type="provinceCity"
                :props="{ multiple: true }"
              />
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <el-form-item label="推广范围:">
              <regions-select
                v-model="where.citys"
                type="provinceCity"
                placeholder="请选择省市"
                :props="{ multiple: true }"
                class="ele-fluid"
              />
            </el-form-item>
          </el-col>
          <el-col :md="6" :sm="12">
            <div class="ele-form-actions">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="ele-btn-icon"
                @click="reload"
              >
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
        cache-key="pingProductTable"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar> </template>
        <template v-slot:title="{ row }">
          <div class="ele-cell-content">
            <el-image
              v-if="row.banner"
              :src="row.banner[0]['url']"
              class="table-image"
            />
          </div>
          <div>
            <el-link
              type="primary"
              :underline="false"
              class="table-text"
              @click="goDetail(row)"
              style="width: 100%"
            >
              <div>{{ row.title }}</div>
              <div>{{ row.guide_price }}</div>
              <div>
                <template v-for="item in priceRange">
                  <el-tag
                    :key="item.dictDataId"
                    v-if="row.labels.includes(item.dictDataId)"
                    size="mini"
                    >{{ item.dictDataName }}</el-tag
                  >
                </template>
                <template v-for="item in productLevel">
                  <el-tag
                    :key="item.dictDataId"
                    v-if="row.labels.includes(item.dictDataId)"
                    size="mini"
                    >{{ item.dictDataName }}</el-tag
                  >
                </template>
                <template v-for="item in carProductLabel">
                  <el-tag
                    :key="item.dictDataId"
                    v-if="row.labels.includes(item.dictDataId)"
                    size="mini"
                    >{{ item.dictDataName }}</el-tag
                  >
                </template>
              </div>
            </el-link>
          </div>
        </template>
        <template v-slot:commission="{ row }">
          <div class="ele-text-danger">L：{{ row.cluesCommission }}</div>
          <div class="ele-text-danger">S：{{ row.orderCommission }}</div>
        </template>
        <template v-slot:cityName="{ row }">
          {{ row.cityName[0] }}
          <el-link
            size="mini"
            v-if="row.cityName.length > 1"
            type="primary"
            class="ele-btn-icon"
            @click="showAllCityName(row)"
          >
            查看所有>>
          </el-link>
        </template>
        <template v-slot:couponBiz="{ row }">
          <template v-if="row.coupon">
            <template v-if="row.coupon.userType === 1">所有门店</template>
            <template v-else>
              <template v-if="row.coupon.bizList['list'][0]">
                <div>{{ row.coupon.bizList['list'][0]['biz_name'] }}</div>
                <div>
                  {{ row.coupon.bizList['list'][0]['province_name'] }}-{{
                    row.coupon.bizList['list'][0]['city_name']
                  }}
                </div>
                <div>
                  {{ row.coupon.bizList['list'][0]['address'] }}
                </div>
                <el-link
                  size="mini"
                  v-if="row.coupon.bizList['count'] > 1"
                  type="primary"
                  class="ele-btn-icon"
                  @click="showAllBizName(row.coupon.couponId)"
                >
                  查看所有>>
                </el-link>
              </template>
            </template>
          </template>
        </template>
        <template v-slot:timeBetween="{ row }">
          <!--
          <div
            >{{ row.timeStart.split(' ')[0] }} ~
            {{ row.timeEnd.split(' ')[0] }}</div
          >
          -->
          <div> 开始时间:{{ row.timeStart.split(' ')[0] }}</div>
          <div> 结束时间:{{ row.timeEnd.split(' ')[0] }}</div>
        </template>
        <template v-slot:coupon="{ row }">
          <div> {{ row.coupon.price }}元 </div>
          <div> 开始时间:{{ row.coupon.timeStart }}</div>
          <div> 结束时间:{{ row.coupon.timeEnd }}</div>
        </template>
        <!--用户画像-->
        <template v-slot:crowdProfiling="{ row }">
          <template v-for="(item, index) in crowdProfiling">
            <el-tag
              style="margin-top: 5px"
              :key="index"
              v-if="row.crowdProfiling.includes(item.dictDataId)"
              size="small"
              >{{ item.dictDataName }}</el-tag
            >
          </template>
        </template>
        <!--核心买点-->
        <template v-slot:couponSelling="{ row }">
          <template v-for="(item, index) in couponSelling">
            <el-tag
              style="margin-top: 5px"
              :key="index"
              v-if="row.labels.includes(item.dictDataId)"
              size="small"
              >{{ item.dictDataName }}</el-tag
            >
          </template>
        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="showPromotionText(row)"
          >
            推广文案
          </el-link>
          <el-link
            v-if="row.roleManage"
            type="primary"
            :underline="false"
            @click="showPosterView(row)"
          >
            推广海报
          </el-link>
          <!--
          <el-link type="primary" :underline="false" @click="showCoupon(row)">
            购车券
          </el-link>
          -->
        </template>
      </ele-pro-table>
      <!-- 推广文案 -->
      <el-dialog :visible.sync="showPromotion" title="推广文案" width="30%">
        <template v-if="current && current.promotion_text">
          <div v-for="(item, index) in current.promotion_text" :key="index">
            <el-input :value="item" type="textarea" :rows="3" />
            <div style="margin: 5px 0 5px 0; text-align: right">
              <el-button
                type="primary"
                size="mini"
                v-clipboard:copy="item"
                v-clipboard:success="onCopy"
                >复制</el-button
              >
            </div>
          </div>
        </template>
      </el-dialog>
      <el-dialog :visible.sync="showPoster" title="推广海报" width="300px">
        <!-- 走马灯组件实现滑动 -->
        <el-carousel
          :interval="5000"
          arrow="always"
          height="60vh"
          v-if="current && current.posterBg"
        >
          <el-carousel-item
            v-for="(img, index) in current.posterBg"
            :key="index"
          >
            <div class="image-container">
              <el-image fit="cover" :src="img['url']" class="sliding-image" />
            </div>
          </el-carousel-item>
        </el-carousel>
        <template v-if="current && current.postUrl">
          <div style="margin-top: 10px">
            <el-input :value="current.postUrl" type="textarea" :rows="1" />
            <div style="margin: 5px 0 5px 0; text-align: right">
              <el-button
                type="primary"
                size="mini"
                v-clipboard:copy="current.postUrl"
                v-clipboard:success="onCopy"
              >
                复制
              </el-button>
            </div>
          </div>
        </template>
      </el-dialog>
      <el-dialog-wrapper
        v-if="current && current.preview"
        :visible.sync="dialogVisible"
        width="300px"
        height="60vh"
        title="车型预览"
        :iframe-src="current.preview"
      />
      <ele-modal
        width="800px"
        :visible.sync="showCityName"
        :append-to-body="true"
        :close-on-click-modal="true"
        custom-class="ele-dialog-form"
        title="推广范围"
      >
        <el-row style="padding-bottom: 20px">
          <template v-for="(item, index) in cityNames">
            <el-tag :key="index" type="info" style="margin-bottom: 10px">{{
              item
            }}</el-tag>
          </template>
        </el-row>
      </ele-modal>
      <!--
      <ele-modal
        width="800px"
        :visible.sync="showBizList"
        :append-to-body="true"
        :close-on-click-modal="true"
        custom-class="ele-dialog-form"
        title="适用门店"
      >
        <el-row style="padding-bottom: 20px">
          <template v-for="(item, index) in bizList">
            <el-tag :key="index" type="info" style="margin-bottom: 10px">{{
              item
            }}</el-tag>
          </template>
        </el-row>
      </ele-modal>
      -->
      <coupon-bizs
        :visible.sync="showBizList"
        :coupon-id="couponId"
      ></coupon-bizs>
    </el-card>
  </div>
</template>

<script>
  import { listDictionaryData } from '@/api/system/dictionary-data';
  import { pageProduct } from '@/api/car/product';
  import ElDialogWrapper from '@/components/IframePre/index.vue';
  import RegionsSelect from '@/components/RegionsSelect/index.vue';
  import CouponBizs from './components/couponBizs.vue';
  import BrandSelect from '@/components/BrandSelect/index.vue';

  export default {
    name: 'carProduct',
    components: {
      BrandSelect,
      RegionsSelect,
      ElDialogWrapper,
      CouponBizs
    },
    data() {
      return {
        where: {
          title: '',
          brands: [],
          priceRange: [],
          carProductLabel: [],
          productLevel: [],
          citys: []
        },
        // 表格列配置
        columns: [
          {
            prop: 'title',
            label: '车型',
            slot: 'title',
            align: 'center',
            width: 200,
            fixed: 'left'
          },
          {
            prop: 'couponSelling',
            label: '核心卖点',
            align: 'center',
            slot: 'couponSelling',
            width: 220
          },
          {
            prop: 'crowdProfiling',
            label: '人群画像',
            align: 'center',
            slot: 'crowdProfiling',
            width: 200
          },
          {
            prop: 'discounts',
            label: '补贴详情',
            align: 'center',
            width: 200
          },
          {
            prop: 'commission',
            label: '佣金',
            slot: 'commission',
            align: 'center',
            width: 100
          },
          // {
          //   prop: 'coupon',
          //   label: '补贴信息',
          //   align: 'center',
          //   slot: 'coupon',
          //   minWidth: 100
          // },
          // {
          //   prop: 'cityName',
          //   label: '范围',
          //   showOverflowTooltip: true,
          //   align: 'center',
          //   minWidth: 100,
          //   slot: 'cityName'
          // },
          {
            prop: 'couponBiz',
            label: '适用门店',
            align: 'center',
            width: 200,
            slot: 'couponBiz'
          },
          {
            prop: 'timeBetween',
            label: '周期',
            align: 'center',
            slot: 'timeBetween',
            width: 180
          },
          {
            columnKey: 'action',
            label: '推广',
            width: 150,
            align: 'center',
            resizable: false,
            slot: 'action'
          }
          // {
          //   prop: 'viewNum',
          //   label: '浏览量',
          //   showOverflowTooltip: true,
          //   minWidth: 80,
          //   align: 'center'
          // },
          // {
          //   prop: 'cluesNum',
          //   label: '留资数',
          //   width: 80,
          //   align: 'center',
          //   resizable: false,
          //   showOverflowTooltip: true
          // }
        ],
        // 表格选中数据
        selection: [],
        // 当前编辑数据
        current: null,
        showPromotion: false,
        componentKey: '',
        dialogVisible: false,
        showPoster: false,
        showCityName: false,
        cityNames: [],
        //价格区间
        priceRange: [],
        //能源类型
        productLevel: [],
        //产品标签
        carProductLabel: [],
        //用户画像
        crowdProfiling: [],
        couponSelling: [],
        showBizList: false,
        bizList: [],
        couponId: ''
      };
    },
    created() {
      listDictionaryData({ dictCode: 'priceRange' }).then((data) => {
        this.priceRange = data;
      });
      listDictionaryData({ dictCode: 'productLevel' }).then((data) => {
        this.productLevel = data;
      });
      listDictionaryData({ dictCode: 'carProductLabel' }).then((data) => {
        this.carProductLabel = data;
      });
      listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
        this.crowdProfiling = data;
      });
      listDictionaryData({ dictCode: 'couponSelling' }).then((data) => {
        this.couponSelling = data;
      });
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return pageProduct({ ...where, ...order, page, limit });
      },
      /* 刷新表格 */
      reload() {
        this.$refs.table.reload({ page: 1, where: this.where });
      },
      /* 重置搜索 */
      reset() {
        this.where = {};
        // 更新 key 强制组件重新渲染
        this.componentKey = Date.now();
        this.reload();
      },
      showPromotionText(row) {
        this.current = row;
        this.showPromotion = true;
      },
      showPosterView(row) {
        this.current = row;
        this.showPoster = true;
      },
      onCopy() {
        this.$message.success('复制成功！');
      },
      goDetail(row) {
        const path = '/car/product/detail';
        this.$nextTick(() => {
          this.$router.push({
            path,
            query: row ? { id: row.id } : undefined
          });
        });
      },
      showCoupon(row) {
        const path = '/car/product/coupon';
        this.$nextTick(() => {
          this.$router.push({
            path,
            query: row ? { id: row.id, title: row.title } : undefined
          });
        });
      },
      showAllCityName(row) {
        this.showCityName = true;
        this.cityNames = row.cityName;
      },
      objFirstValue(myObject) {
        const keys = Object.keys(myObject);
        return keys.length > 0 ? myObject[keys[0]] : null;
      },
      showAllBizName(couponId) {
        this.couponId = couponId;
        this.showBizList = true;
      }
    }
  };
</script>
<style scoped>
  .table-image {
    width: 100px;
    height: 80px;
    margin-right: 5px;
  }
  .table-text {
    /* 文本样式 */
    overflow: hidden;
  }
  .el-dialog__body {
    padding: 0;
  }
  /* 容器确保图片居中 */
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  /* 图片样式 */
  .sliding-image {
    max-width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
  }
  ::v-deep .el-cascader__tags input::-webkit-input-placeholder {
    color: white;
    opacity: 0;
  }
</style>
