<template>
  <div class="ele-body ele-body-card">
    <el-card shadow="never pd10">
      <el-row class="pd10">
        <el-col :span="24"><h2>概况</h2></el-col>
      </el-row>
      <el-row class="pd10">
        <el-col :span="6">品牌:{{ product.brandName }}</el-col>
        <el-col :span="6">车型:{{ product.seariesName }}</el-col>
        <el-col :span="6">
          官方售价:
          <span class="ele-text-danger">{{ product.guide_price }}</span></el-col
        >
        <el-col :span="6"></el-col>
      </el-row>
      <el-row class="pd10">
        <el-col :span="24"
          >产品标签:
          <template v-for="(item, index) in priceRange">
            <el-tag
              :key="index"
              v-if="product.labels.includes(item.dictDataId)"
              :type="randomTypeName()"
              >{{ item.dictDataName }}</el-tag
            >
          </template>
          <template v-for="(item, index) in productLevel">
            <el-tag
              :key="index"
              v-if="product.labels.includes(item.dictDataId)"
              :type="randomTypeName()"
              >{{ item.dictDataName }}</el-tag
            >
          </template>
          <template v-for="(item, index) in carProductLabel">
            <el-tag
              :key="index"
              v-if="product.labels.includes(item.dictDataId)"
              :type="randomTypeName()"
              >{{ item.dictDataName }}</el-tag
            >
          </template>
        </el-col>
      </el-row>
      <el-row class="pd10">
        <el-col :span="24"><h2>优惠</h2></el-col>
      </el-row>
      <el-row class="pd10">
        <el-col :span="6">
          <span class="ele-text-danger">{{ product.discounts }}</span></el-col
        >
        <el-col :span="6">
          <span class="ele-text-danger">{{ product.discounts2 }}</span></el-col
        >
        <el-col :span="6">
          <span class="ele-text-danger">{{ product.discounts3 }}</span></el-col
        >
      </el-row>
      <el-row class="pd10">
        <el-col :span="24"><h2>客户画像</h2></el-col>
      </el-row>
      <el-row class="pd10">
        <el-col :span="12">
          人群标签:
          <template v-for="(item, index) in crowdProfiling">
            <el-tag
              :key="index"
              v-if="product.crowdProfiling.includes(item.dictDataId)"
              :type="randomTypeName()"
              >{{ item.dictDataName }}</el-tag
            >
          </template>
        </el-col>
      </el-row>
      <el-row class="pd10">
        <el-col :span="24"><h2>推广文案</h2></el-col>
      </el-row>
      <el-row
        class="pd10"
        v-for="(item, index) in product.promotion_text"
        :key="index"
      >
        <el-col :span="20">
          <el-input :value="item"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button
            style="margin-left: 5px"
            type="primary"
            v-clipboard:copy="item"
            v-clipboard:success="onCopy"
            >复制</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  import { getProduct } from '@/api/car/product';
  import { listDictionaryData } from '@/api/system/dictionary-data';
  const ROUTE_PATH = '/car/product/detail';
  export default {
    name: 'carProductDetail',
    components: {},
    data() {
      return {
        loading: false,
        product: {
          id: '',
          brandName: '',
          seariesName: '',
          guide_price: '',
          promotion_text: [],
          crowdProfiling: [],
          discounts2: '',
          discounts: '',
          discounts3: '',
          labels: []
        },
        crowdProfiling: [],
        // 预定义的 CSS 类数组
        availableClasses: ['', 'success', 'info', 'warning', 'danger'],
        priceRange: [],
        productLevel: [],
        carProductLabel: []
      };
    },
    created() {
      listDictionaryData({ dictCode: 'crowdProfiling' }).then((data) => {
        this.crowdProfiling = data;
      });
      listDictionaryData({ dictCode: 'priceRange' }).then((data) => {
        this.priceRange = data;
      });
      listDictionaryData({ dictCode: 'productLevel' }).then((data) => {
        this.productLevel = data;
      });
      listDictionaryData({ dictCode: 'carProductLabel' }).then((data) => {
        this.carProductLabel = data;
      });
    },
    methods: {
      query() {
        const id = this.$route.query.id;
        if (!id || this.product.id === Number(id)) {
          return;
        }
        this.loading = true;
        getProduct(Number(id))
          .then((data) => {
            this.loading = false;
            this.$util.assignObject(this.product, {
              ...data,
              createTime: this.$util.toDateString(data.createTime)
            });
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      },
      onCopy() {
        this.$message.success('复制成功！');
      },
      randomTypeName() {
        const index = Math.floor(Math.random() * 5); // 生成 0~4 的整数
        return this.availableClasses[index];
      }
    },
    watch: {
      $route: {
        handler(route) {
          const { path } = route;
          if (path !== ROUTE_PATH) {
            return;
          }
          this.query();
        },
        immediate: true
      }
    }
  };
</script>
<style scoped>
  .pd10 {
    padding: 10px;
  }
</style>
