<template>
  <div v-loading="loading">
    <!-- 网格布局实现的表格，共8列 -->
    <div class="product-content">
      <!-- 第一行合并所有八个单元格，内容为：嘉祥科伦普重工有限公司 -->
      <div class="table-row table-header">
        <div class="table-cell" colspan="3">
          <div class="company-name">产品名称：<el-input style="width: 50%" v-model="productName" placeholder="请输入产品名称" size="small" :readonly="readonly"/></div>
        </div>
        <div class="table-cell" colspan="5">
          <div class="company-name">生产厂家：嘉祥科伦普重工有限公司</div>
        </div>
      </div>
      
      <!-- 第二行为表头 -->
      <div class="table-row">
        <div class="table-cell">序号</div>
        <div class="table-cell">规格（mm）</div>
        <div class="table-cell">材质</div>
        <div class="table-cell">数量（吨）</div>
        <div class="table-cell" v-if="false">含税单价（元/吨）</div>
        <div class="table-cell">不含税单价（元/吨）</div>
        <div class="table-cell">含税总额（元）</div>
        <div class="table-cell">不含税总额（元）</div>
        <div class="table-cell">
          备注
          <el-button 
            v-if="!readonly" 
            type="primary" 
            size="mini" 
            icon="el-icon-plus" 
            @click="addProduct"
            style="margin-left: 10px;"
          >
            添加行
          </el-button>
        </div>
      </div>
      
      <!-- 产品行 -->
      <div 
        v-for="(item, index) in products" 
        :key="index"
        class="table-row"
        :class="{ 'table-row-hover': !readonly }"
      >
        <div class="table-cell">
          <div class="serial-number">
            <span>{{ index + 1 }}</span>
            <el-button 
              v-if="!readonly && products.length > 1" 
              type="text" 
              size="mini" 
              icon="el-icon-delete" 
              class="delete-btn"
              @click="removeProduct(index)"
            />
          </div>
        </div>
        <div class="table-cell">
          <el-input 
            v-model="item.spec" 
            placeholder="请输入规格" 
            :readonly="readonly"
            size="small"
          />
        </div>
        <div class="table-cell">
          <el-input 
            v-model="item.material" 
            placeholder="请输入材质" 
            :readonly="readonly"
            size="small"
          />
        </div>
        <div class="table-cell">
          <el-input 
            v-model.number="item.quantity" 
            placeholder="请输入数量" 
            type="number" 
            :readonly="readonly"
            size="small"
            @change="calculateTotals"
          />
        </div>
        <div class="table-cell" v-if="false">
          <el-input 
            v-model.number="item.taxPrice" 
            placeholder="请输入含税单价" 
            type="number" 
            :readonly="readonly"
            size="small"
            @change="calculateTotals"
          />
        </div>
        <div class="table-cell">
          <el-input 
            v-model.number="item.noTaxPrice" 
            placeholder="请输入不含税单价" 
            type="number" 
            :readonly="readonly"
            size="small"
            @change="calculateTotals"
          />
        </div>
        <div class="table-cell">
          <el-input 
            v-model.number="item.taxTotal" 
            placeholder="含税总额" 
            type="number" 
            :readonly="true"
            size="small"
          />
        </div>
        <div class="table-cell">
          <el-input 
            :value="((item.taxTotal || 0) / 1.13).toFixed(2)" 
            placeholder="不含税总额" 
            type="number" 
            :readonly="true"
            size="small"
          />
        </div>
        <div class="table-cell">
          <el-input 
            v-model="item.remark" 
            placeholder="请输入备注" 
            :readonly="readonly"
            size="small"
          />
        </div>
      </div>
      
      <!-- 合计行 -->
      <div class="table-row table-total-row">
        <div class="table-cell" colspan="3">合计</div>
        <div class="table-cell">{{ totalQuantity }}</div>
        <div class="table-cell" v-if="false"></div>
        <div class="table-cell"></div>
        <div class="table-cell">{{ totalTaxTotal }}</div>
        <div class="table-cell">{{ ((totalTaxTotal || 0) / 1.13).toFixed(2) }}</div>
        <div class="table-cell"></div>
      </div>
      
      <!-- 合计人民币(大写) -->
      <div class="table-row">
        <div class="table-cell" colspan="8">
          <span>合计人民币(大写)：</span>
          <span>{{ totalAmountInWords }}</span>
        </div>
      </div>
      
      <!-- 备注 -->
      <div class="table-row">
        <div class="table-cell" colspan="8">
          <span>备注：</span>
          <el-input 
            v-model="remark" 
            type="textarea" 
            placeholder="请输入备注" 
            :readonly="readonly"
            :autosize="{ minRows: 2 }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  parseProductContent,
  calculateTotalQuantity,
  calculateTotalTaxTotal,
  calculateProductTaxTotal,
  convertToChinese
} from '@/utils/productContent';

export default {
  name: 'ProductContent',
  props: {
    value: {
      // 一个json字符串
      type: String,
      required: true,
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      products: [],
      remark: '',
      productName: '',
    }
  },
  computed: {
    // 计算总数量
      totalQuantity() {
        return calculateTotalQuantity(this.products);
      },
      // 计算总含税总额
      totalTaxTotal() {
        return calculateTotalTaxTotal(this.products);
      },
      // 计算大写金额
      totalAmountInWords() {
        return convertToChinese(this.totalTaxTotal);
      },
    // 生成JSON字符串
    jsonContent() {
      // 只存储非空行
      const nonEmptyProducts = this.products.filter(item => {
        return item.spec || item.material || item.quantity || item.taxPrice || item.noTaxPrice || item.remark;
      });
      const data = {
        products: nonEmptyProducts,
        productName: this.productName,
        remark: this.remark,
        totalQuantity: this.totalQuantity,
        totalTaxTotal: this.totalTaxTotal,
        totalAmountInWords: this.totalAmountInWords
      };
      return JSON.stringify(data, null, 2);
    },
  },
  watch: {
    // 监听jsonContent变化，触发update事件
    jsonContent: {
      handler(newValue) {
        this.$emit('input', newValue);
      },
      deep: true
    },
    // 监听value变化，更新内部数据
    value: {
      handler(newValue) {
        if (!newValue) {
          this.products = [{}];
          this.remark = '';
          this.productName = '';
          return;
        }
        this.parseContent(newValue);
      },
      immediate: true
    }
  },
  methods: {
    // 解析content字符串
      parseContent(content) {
        try {
          const data = parseProductContent(content);
          this.products = data.products.length > 0 ? data.products : [{}];
          this.remark = data.remark || '';
          this.productName = data.productName || '';
        } catch (error) {
          console.error('解析content失败:', error);
          this.products = [{}];
          this.remark = '';
        }
      },
      // 计算金额
      calculateTotals() {
        this.products.forEach(item => {
          item.taxTotal = calculateProductTaxTotal(item);
        });
      },
    // 添加产品行
    addProduct() {
      this.products.push({});
    },
    // 删除产品行
    removeProduct(index) {
      if (this.products.length > 1) {
        this.products.splice(index, 1);
        this.calculateTotals();
      }
    }
  },
  mounted() {
    // 确保至少有一个空行
    if (this.products.length === 0) {
      this.products.push({});
    }
  }
}
</script>

<style scoped>
  .product-content {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    overflow: hidden;
  }
  
  .table-header {
    background-color: #f5f7fa;
    text-align: center;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .company-name {
    font-size: 16px;
    font-weight: bold;
  }
  
  .table-row {
    display: grid;
    grid-template-columns: 80px 150px 120px 100px 160px 120px 140px 1fr;
    border-bottom: 1px solid #e4e7ed;
  }
  
  .table-row-hover:hover {
    background-color: #f5f7fa;
  }
  
  .table-header-row {
    background-color: #f5f7fa;
    font-weight: bold;
  }
  
  .table-total-row {
    background-color: #f5f7fa;
    font-weight: bold;
  }
  
  .table-cell {
    padding: 8px;
    border-right: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
  }
  
  .table-cell:last-child {
    border-right: none;
  }
  
  .table-cell[colspan="3"] {
    grid-column: span 3;
  }

  .table-cell[colspan="5"] {
    grid-column: span 5;
  }
  
  .table-cell[colspan="8"] {
    grid-column: span 8;
  }
  .table-cell[colspan="9"] {
    grid-column: span 9;
  }
  
  .serial-number {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  
  .delete-btn {
    opacity: 0;
    margin-left: 10px;
  }
  
  .serial-number:hover .delete-btn {
    opacity: 1;
  }
  
  .el-input {
    width: 100%;
  }
</style>