<template>
  <div class="source-code-detail-warp">
    <common current-name="agricultural">
      <template #main>
        <div class="source-code-detail-info">
          <div class="top-warp-b">
            <div class="top-title">
              <div class="father-title" @click="toBack(-2)">农资交易</div>
              <div class="father-title father-after" @click="toBack(-1)">查看详情</div>
              <div class="current-title">溯源详情</div>
            </div>
            <div class="top-img-txt">
              <el-image :src="getAssetsFile('images/ecommerce/' + 'tracetxt.png')?.href ?? ''" fit="cover" />
            </div>
            <div class="top-bottom-warp">
              <div v-for="(b, indexb) in bottomList" :key="indexb" class="top-bottom-item">
                <div class="bottom-item-img">
                  <el-image :src="getAssetsFile('images/ecommerce/' + b.img)?.href ?? ''" fit="cover" />
                </div>
              </div>
            </div>
            <el-image :src="getAssetsFile('images/ecommerce/' + 'traceb.png')?.href ?? ''" fit="cover" />
          </div>
          <div class="tab-content-warp">
            <el-tabs v-model="activeCurrent" class="demo-tabs">
              <el-tab-pane v-for="(t, indext) in bottomList" :key="indext" :label="t.title" :name="t.name">
                <div v-if="activeCurrent == 'baseInfo'" class="baseInfo-content">
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <banner name="codeinfo" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
                    </el-col>
                    <el-col :span="18">
                      <el-row :gutter="16">
                        <el-col :span="12" class="des-item">
                          <span class="label">产品名称：</span>
                          <span class="val">有机沙瓤西红柿</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">追溯次数：</span>
                          <span class="val">30次</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">生产经营主体：</span>
                          <span class="val">北大荒农业技术有限公司</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">原产地：</span>
                          <span class="val">云南省耿马县孟定镇下坝村</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">储存仓库：</span>
                          <span class="val">耿马县农产品1号仓库</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">种植土地：</span>
                          <span class="val">XBC00001</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">采收日期：</span>
                          <span class="val">2025年1月1日</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">溯源码：</span>
                          <span class="val">SY100000202501010001</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>

                <div v-if="activeCurrent == 'report'" class="report-content">
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <banner name="report" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
                    </el-col>
                    <el-col :span="18">
                      <el-row :gutter="16">
                        <el-col :span="12" class="des-item">
                          <span class="label">农药残留检测：</span>
                          <span class="val text-main">合格</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">重金属污染检测：</span>
                          <span class="val text-main">合格</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">微生物检测：</span>
                          <span class="val text-main">合格</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">添加剂与防腐剂：</span>
                          <span class="val text-error">不合格</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">转基因成分检测：</span>
                          <span class="val text-main">合格</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">有机认证：</span>
                          <span class="val text-main">合格</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">国家标准：</span>
                          <span class="val text-main">GB-2762</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">行业标准：</span>
                          <span class="val text-main">NY-3548</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>

                <div v-if="activeCurrent == 'business'" class="business-content">
                  <el-row :gutter="16">
                    <el-col :span="6">
                      <banner name="business" :imglist="bannerList" indicator-pos="none" arrow="always" height="160px" :is-view="true"> </banner>
                    </el-col>
                    <el-col :span="18">
                      <el-row :gutter="16">
                        <el-col :span="12" class="des-item">
                          <span class="label">经营主体：</span>
                          <span class="val">北大荒农业技术有限公司</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">证书编号：</span>
                          <span class="val">JY23101010004682</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">经营范围：</span>
                          <span class="val">全品类农产品经营</span>
                        </el-col>
                        <el-col :span="12" class="des-item">
                          <span class="label">法人：</span>
                          <span class="val">张三</span>
                        </el-col>
                        <el-col :span="24" class="des-item">
                          <span class="label">公司地址：</span>
                          <span class="val">云南省昆明市呈贡区银河科技园K栋4楼</span>
                        </el-col>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>

                <div v-if="activeCurrent == 'farming'" class="farming-content">
                  <el-row>
                    <el-col :span="24">
                      <el-table :data="tableData" style="width: 100%" height="280" @row-click="rowClick">
                        <el-table-column prop="id" label="编号" />
                        <el-table-column prop="title" label="活动名称" />
                        <el-table-column prop="inputs" label="投入品" />
                        <el-table-column prop="operator" label="作业人" />
                        <el-table-column prop="time" label="日期" width="180px" />
                      </el-table>
                    </el-col>
                  </el-row>
                </div>

                <div v-if="activeCurrent == 'link'" class="link-content">
                  <div class="link-content-pos">
                    <div class="report">
                      <!-- <el-image :src="getAssetsFile('images/ecommerce/' + 'pic.png')" fit="none" /> -->
                      <costomImg
                        :url="'images/ecommerce/' + 'pic.png'"
                        :preview-list="[getAssetsFile('images/ecommerce/' + 'pic.png')?.href ?? '']"
                        :is-view="true"
                      ></costomImg>
                      <span class="img-tips">溯源证书</span>
                    </div>
                    <div class="qr-code">
                      <!-- <el-image :src="qrImg" fit="cover" /> -->
                      <costomImg :url="qrImg" :preview-list="[qrImg]" :is-view="true" :is-montage="false" :fit="'cover'"></costomImg>
                      <span class="img-tips">溯源码</span>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </template>
    </common>
  </div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
import { ref, reactive, onMounted, watch, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
import banner from './components/banner.vue';
import { qrImg } from '@/layouts/component/Header/base64img.js';
import { useRoute, useRouter } from 'vue-router';
import costomImg from '@/components/costomImg.vue';
const route = useRoute();
const router = useRouter();

let bottomList = reactive([
  { title: '基本信息', img: 'trace01.png', name: 'baseInfo' },
  { title: '检测报告', img: 'trace02.png', name: 'report' },
  { title: '经营主体', img: 'trace03.png', name: 'business' },
  { title: '农事服务', img: 'trace05.png', name: 'farming' },
  { title: '上链信息', img: 'trace06.png', name: 'link' },
]);

let activeCurrent = ref('baseInfo');

let bannerList = reactive(['images/ecommerce/' + 'pic.png', 'images/ecommerce/' + 'pic.png']);

let tableData = reactive([
  { id: 'NS10000111', title: '施肥', inputs: '氮肥', operator: '张三', time: '2025-04-02 12:25:36' },
  { id: 'NS10000112', title: '灌溉', inputs: '矿物质', operator: '李四', time: '2025-04-01 12:25:36' },
  { id: 'NS10000113', title: '喷洒农药', inputs: '杀虫剂', operator: '王五', time: '2025-04-02 13:25:36' },
  { id: 'NS10000114', title: '施肥', inputs: '有机肥', operator: '张三', time: '2025-04-02 12:25:36' },
  { id: 'NS10000115', title: '灌溉', inputs: '白糖水', operator: '李四', time: '2025-03-31 12:25:36' },
  { id: 'NS10000116', title: '喷洒农药', inputs: '除草剂', operator: '王五', time: '2025-04-02 12:25:36' },
  { id: 'NS10000117', title: '施肥', inputs: '钾肥', operator: '张三', time: '2025-04-02 12:25:36' },
  { id: 'NS10000118', title: '灌溉', inputs: '尿素水', operator: '李四', time: '2025-04-02 12:25:36' },
]);

const toBack = (level) => {
  router.go(level);
};
</script>
<style lang="scss" scoped>
.source-code-detail-warp {
  .source-code-detail-info {
    width: 100%;
    margin-bottom: 16px;
    background: $color-fff;
    border-radius: 16px;
    overflow: hidden;
    .top-warp-b {
      width: 100%;
      height: 488px;
      position: relative;
    }
    .top-img-txt {
      position: absolute;
      left: 50%;
      bottom: 42%;
      z-index: 1;
      transform: translateX(-50%);
    }
    .top-bottom-warp {
      position: absolute;
      left: 0;
      bottom: 24px;
      z-index: 1;
      display: inline-flex;
      width: 100%;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 32px;
      padding: 0 32px;
      .top-bottom-item {
        display: inline-flex;
        width: calc(100% / 5 - 28px);
        height: 80px;
        background: linear-gradient(180deg, #ffbe4d, #ffffff);
        border-radius: 16px;
        position: relative;
        .bottom-item-img {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 20px;
        }
      }
    }
    .top-title {
      padding: 16px;
      width: 100%;
      text-align: left;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      cursor: pointer;
      .father-title,
      .current-title {
        display: inline-block;
        vertical-align: middle;
        font-weight: 700;
        cursor: pointer;
      }
      .father-title {
        font-size: 18px;
        color: $color-fff;
      }
      .father-after {
        position: relative;
        padding-left: 16px;
      }
      .father-after::after {
        content: '.';
        position: absolute;
        left: 4px;
        top: 30%;
        transform: translateY(-50%);
      }
      .current-title {
        font-size: 16px;
        color: $color-main;
        position: relative;
        padding: 0 8px;
        margin-left: 8px;
      }
      .current-title::before {
        content: '.';

        position: absolute;
        left: 0;
        top: 30%;
        transform: translateY(-50%);
      }
    }

    .tab-content-warp {
      width: 100%;
      padding: 0 32px 32px 32px;
      .text-main {
        color: $color-main !important;
      }
      .text-error {
        color: $color-danger !important;
      }
      .des-item {
        width: 100%;
        margin: 3px 0;
        display: inline-flex;
        justify-content: space-between;
        .label,
        .val {
          vertical-align: top;
          font-size: 18px;
        }
        .label {
          color: $color-999;
          width: 150px;
          text-align: left;
        }
        .val {
          color: $color-333;
          text-align: right;
          width: calc(100% - 150px);
        }
      }

      .farming-content {
        ::v-deep() {
          thead {
            border-radius: 16px;
            overflow: hidden;
          }
          thead th {
            background: $color-main-table-header;
            color: $color-999 !important;
            border: none !important;
            padding: 10px 0;
            font-size: 16px !important;
          }
          thead th:first-child {
            border-top-left-radius: 16px;
            border-bottom-left-radius: 16px;
          }
          thead th:last-child {
            border-top-right-radius: 16px;
            border-bottom-right-radius: 16px;
          }
          table {
            margin-top: 16px !important;
          }
          tbody td {
            border: none !important;
            font-size: 16px !important;
          }
          .el-table__inner-wrapper::before {
            display: none !important;
          }
        }
      }

      .link-content {
        width: 100%;
        text-align: center;

        .link-content-pos {
          margin: 64px auto;
          display: inline-flex;
          justify-content: space-between;
          gap: 120px;
          .el-image {
            width: 100%;
            height: 100%;
          }
          .img-tips {
            text-align: center;
            font-size: 16px;
            line-height: 32px;
          }
          .report,
          .qr-code {
            display: inline-block;
          }
          .report {
            width: 120px;
            height: 160px;
          }
          .qr-code {
            width: 160px;
            height: 160px;
          }
        }
      }

      ::v-deep() {
        .el-tabs__nav {
          width: 100% !important;
        }
        .el-tabs__nav-wrap:after {
          background: transparent !important;
        }
        .el-tabs__item {
          font-size: 20px !important;
          width: 20% !important;
          padding: 0 !important;
        }
        .el-tabs__active-bar {
          height: 5px !important;
          border-radius: 4px;
          width: 40px !important;
          left: 7% !important;
        }
        .el-descriptions__label,
        .el-descriptions__content {
          font-size: 16px !important;
        }
        .cell-item {
          display: inline-flex;
        }
        .el-descriptions__label {
          color: $color-999;
        }
        .el-descriptions__content {
          color: $color-333;
        }
      }

      ::v-deep() {
        .ecommerce-banner {
          padding: 0 48px !important;
          position: relative;
        }
        .el-carousel {
          position: unset !important;
        }
        .el-carousel__arrow--left {
          left: 0 !important;
        }
        .el-carousel__arrow--right {
          right: 0 !important;
        }
        .el-carousel__container {
          height: 160px !important;
        }
      }
    }
  }
}
</style>
