<!--
  @description: 供应商报价物资明细
  @Modifier：gmy
  @routerPath:
  @date:2020-8-13- 19:03:19
-->
<template>
  <div class="mb16">
    <!--   报价物资明细数据表格   -->
    <el-table
      ref="table"
      :data="offerSubjectMatterList"
      style="width:100%"
      class="mb16 clear-hint"
    >
      <el-table-column type="index" label="序号" width="60" align="center" fixed />
      <!-- 产品描述 -->
      <el-table-column
        header-align="center"
        fixed
        align="left"
        prop="purchaseDesc"
        min-width="230"
        label="产品描述"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.purchaseDesc }}</span>
        </template>
      </el-table-column>
      <!-- 行项目编号 -->
      <el-table-column
        header-align="center"
        align="left"
        prop="purchaseNo"
        min-width="140"
        label="行项目编号"
      />
      <!-- 类别 隐藏 -->
      <!-- <el-table-column header-align="center" align="center" min-width="60" label="类别" prop="purchaseType">
        <template slot-scope="scope">
          <p>{{ filterDictText(plan_purchase_typeList,scope.row.purchaseType ) }}</p>
        </template>
      </el-table-column> -->
      <!-- 数量 -->
      <el-table-column header-align="center" align="right" width="80" label="数量">
        <!-- 千分位转换数量-->
        <template slot-scope="scope">
          <p>{{ moneyFormat(scope.row.quantity) }}</p>
        </template>
      </el-table-column>
      <!-- 计量单位 -->
      <el-table-column
        header-align="center"
        align="left"
        min-width="80"
        prop="unit"
        label="计量单位"
      >
        <template slot-scope="scope">
          <span>{{ filterDictText(purchaseUnitList,scope.row.unit ) }}</span>
        </template>
      </el-table-column>
      <!-- 税率 -->
      <el-table-column
        header-align="center"
        label="税率(%)"
        align="left"
        min-width="140"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.taxRate">{{ filterDictText(taxRateList,scope.row.taxRate.toString() ) }}</span>
        </template>
      </el-table-column>
      <!-- 交货时间 -->
      <el-table-column
        header-align="center"
        align="center"
        min-width="110"
        prop="deliveryDate"
        label="交货时间"
      />
      <!-- 采购单位-->
      <el-table-column
        header-align="center"
        align="left"
        min-width="160"
        prop="buyersName"
        label="采购单位"
      />
      <el-table-column header-align="center" align="left" min-width="230" label="交货地点">
        <template slot-scope="scope">
          <span>{{ scope.row.deliveryAreaName }}{{ scope.row.deliveryAdress }}</span>
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column header-align="center" align="left" prop="remark" label="备注" min-width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <!-- 附件 -->
      <!-- <el-table-column header-align="center" align="center" min-width="80" label="附件">
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.isContainAttachment==='1'"
            :underline="false"
            type="primary"
            size="mini"
            plain
            @click.stop="lineItemFileClick(scope.row)"
          >
            [查看]
          </el-link>
        </template>
      </el-table-column> -->
      <!-- 不含税单价 -->
      <el-table-column header-align="center" align="right" min-width="130">
        <template slot="header">
          <span class="procurement_orange-color">*</span>
          <span>不含税单价(元)</span>
        </template>
        <template slot-scope="scope">
          <!--      金币组件 全部报价      -->
          <el-form-item v-if="lineItemOther.allowEdit==='01'" :prop="'offerSubjectMatterList.' + scope.$index + '.taxUnitPrice'" :rules="rules.taxUnitPrice">
            <!--供应商报价时，把超预算报价的限制的提示给去掉-->
            <!--@input="taxUnitPriceChange(scope.row)"-->
            <money
              :thousands="true"
              size="mini"
              width="auto"
              :money-value="scope.row"
              name="taxUnitPrice"
            />
          </el-form-item>
          <!-- 部分报价 -->
          <p v-else>
            {{ scope.row.taxUnitPrice }}
          </p>
        </template>
      </el-table-column>
      <!-- 不含税总价 -->
      <el-table-column header-align="center" align="right" min-width="130">
        <template slot="header">
          <span>不含税总价(元)</span>
        </template>
        <template slot-scope="scope">
          <p>{{ moneyFormat(scope.row.singleTotalOfferPrice) }}</p>
        </template>
      </el-table-column>
      <!-- 品牌/生产厂家 -->
      <el-table-column header-align="center" align="right" min-width="130">
        <template slot="header">
          <span class="procurement_orange-color">*</span>
          <span>品牌/生产厂家</span>
        </template>
        <template slot-scope="scope">
          <el-form-item v-if="lineItemOther.allowEdit==='01'" :prop="'offerSubjectMatterList.' + scope.$index + '.offerRemarks'" :rules="rules.offerRemarks">
            <el-input
              v-model="scope.row.offerRemarks"
              placeholder="请输入"
              style="width:100%"
            />
          </el-form-item>
          <p v-else>
            {{ scope.row.offerRemarks }}
          </p>
        </template>
      </el-table-column>
      <!-- 最快交货日期 -->
      <el-table-column header-align="center" align="center" min-width="300">
        <template #header>
          <div class="deliveryTime">
            <span>最快交货日期</span>
            <el-date-picker
              v-if="lineItemOther.allowEdit==='01'"
              v-model="fastestDeliveryDate"
              :value-format="elValueFormatDate"
              :picker-options="disabledPickerOptions"
              class="date-select"
              align="center"
              type="date"
              placeholder="选择日期"
              maxlength="20"
              size="mini"
              @change="deliveryDateChange"
            />
          </div>
        </template>
        <template slot-scope="scope">
          <!-- 报价有效期校验 但是不含税单价有值是才校验 -->
          <!-- <el-form-item :prop="'offerSubjectMatterList.' + scope.$index + '.fastestDeliveryDate'" :rules="scope.row.taxUnitPrice ? rules.fastestDeliveryDate: {}" /> -->
          <el-date-picker
            v-if="lineItemOther.allowEdit==='01'"
            v-model="scope.row.fastestDeliveryDate"
            :picker-options="disabledPickerOptions"
            :value-format="elValueFormatDate"
            type="date"
            placeholder="选择日期时间"
            maxlength="20"
            size="mini"
          />
          <p v-else>
            {{ scope.row.fastestDeliveryDate }}
          </p>
        </template>
      </el-table-column>
      <!--报价说明-->
      <el-table-column header-align="center" min-width="260" label="报价说明">
        <template slot-scope="scope">
          <el-form-item v-if="lineItemOther.allowEdit==='01'">
            <el-input
              v-model.trim="scope.row.offerInstructions"
              size="mini"
              placeholder="请输入"
            />
          </el-form-item>
          <p v-else>
            {{ scope.row.offerInstructions }}
          </p>
        </template>
      </el-table-column>
    </el-table>
    <!--  计算行项目总价-->
    <el-row class="chinese p0-16">
      <el-col :span="24">
        总报价（元）：
        <span class="red-star">{{ moneyFormat(totalPrice) }}</span>
        <p class="amount_words">
          （ 大写：<span>{{ numberChinese(totalPrice) }}</span>）
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
/*   公共方法*/
import {
  totalHeadCount, // 计算总价
  numberChinese, // 数字转大写
  moneyFormat, // 保留千分位
  filterDictText // 数据字典方法
} from '@/assets/js/utils'
import { procurementGroupMixins } from '@/views/procurement/mixins/procurementGrounpMixins' // 公共字典
import { procurementOfferGroupMixin } from '../mixins/procurementOffGroupMixin'

/* 公共组件 */
import money from '@comp/common/money/money' // 金币组件

export default {
  name: 'ProcurementOfferGoodsDetailVue',
  components: {
    money // 金币组件
  },
  mixins: [procurementGroupMixins, procurementOfferGroupMixin],
  props: {
    // 行项目数据
    offerSubjectMatterList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 其他数据
    lineItemOther: {
      type: Object,
      default: () => {
        return {
          allowEdit: '',
          isverify: false, // 是否校验 全部报价时需校验
          isEdit: false // 是否可编辑
        }
      }
    },
    // 查看行项目文件点击事件（row 行项目信息）
    lineItemFileClick: {
      type: Function,
      default: function(row) {}
    },
    // 校验数据
    offerFromRules: {
      type: Object,
      default: () => {
        return { }
      }
    }
  },
  data() {
    return {
      fastestDeliveryDate: '', // 最有效交货时间
      tableHeight: window.innerHeight * 0.75, // 表格高度
      totalPriceData: [], // 报价总额数据接收器
      rules: {
        fastestDeliveryDate: [{ required: true, message: '不为空', trigger: 'input' }], // 报价有效期
        remark: [{ required: true, message: '不能为空', trigger: 'blur' }], // 备注信息校验
        taxUnitPrice: [{ required: true, pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '请输入', trigger: 'blur' }], // 不含税单价
        offerRemarks: [{ required: true, message: '不能为空', trigger: 'blur' }] // 品牌/生产厂家
      }
    }
  },
  computed: {
    // 计算总价
    totalPrice: function() {
      // 初始化数据
      const totalPriceData = []
      let totalPrice = 0
      this.offerSubjectMatterList &&
        this.offerSubjectMatterList.map(cur => {
          // 判断单向总价是否是数值
          if (!isNaN(cur.singleTotalOfferPrice)) {
            // 将总价push到初始数据中
            totalPriceData.push(cur.singleTotalOfferPrice)
            // 调用公共求和方法
            totalPrice = Math.round((Number(totalHeadCount(totalPriceData)) + Number.EPSILON) * 1000000) / 1000000 // 含税总价保留六位小数
            return
          }
          totalPrice = 0
        })
      return totalPrice
    }
  },
  watch: {
    // 监听行项目数据税率和单价的变化
    'offerSubjectMatterList': {
      handler(val) {
        val &&
          val.forEach(cur => {
            // 单价(withoutTaxNitPrice) 都有值时
            if (cur.taxUnitPrice && !isNaN(cur.taxUnitPrice)) {
              cur.singleTotalOfferPrice = Math.round((Number(cur.taxUnitPrice * cur.quantity) + Number.EPSILON) * 1000000) / 1000000 // 含税总价保留六位小数
              return
            }
            cur.singleTotalOfferPrice = 0
          })
      },
      deep: true
    }

  },
  created() {
    // 查询项目字典
    this.initWebTypeGroup()
  },
  methods: {
    filterDictText,
    numberChinese,
    moneyFormat,
    // 表格的报价有效时间
    deliveryDateChange(val) {
      // 动态修改全部数据报价有效时间
      this.offerSubjectMatterList.forEach(item => {
        item.fastestDeliveryDate = val
      })
    },
    // 行项目单价与供应商报价输入校验
    taxUnitPriceChange(row) {
      if (row.taxUnitPrice > row.unitBudget) {
        this.$elAlert('含税单价不能大于采购预算单价', 'warning')
        row.taxUnitPrice = ''
        return false
      }
      return true
    },
    // 保存或提交时 组装数据然后返回
    assemblyData() {
      // 提交各行项目单价与供应商报价输入校验
      for (let i = 0; i < this.offerSubjectMatterList.length; i++) {
        this.offerSubjectMatterList[i].taxUnitPrice = this.offerSubjectMatterList[i].taxUnitPrice ? this.offerSubjectMatterList[i].taxUnitPrice + '' : '0'
        // 7.	供应商报价时，把超预算报价的限制的提示给去掉
        /*    if (!this.taxUnitPriceChange(this.offerSubjectMatterList[i])) {
          return false
        }*/
      }
      // 返回
      return {
        fastestDeliveryDate: this.fastestDeliveryDate, // 最有效交货时间
        offerTotal: this.totalPrice, // 不含税总报价
        offerTotalChinese: numberChinese(this.totalPrice), // 不含税总报价大写转换
        offerSubjectMatterList: this.offerSubjectMatterList // 报价物资明细
      }
    }
  }
}
</script>

<style lang="less" scoped>
.deliveryTime {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    justify-content: center;
}
 /deep/.el-form-item--small.el-form-item{
    margin: 0;
  }
 .date-select{
   /deep/ .el-input--mini .el-input__inner{
     width: 186px;
   }
 }
  .clear-hint{
    /deep/ .el-form-item--small .el-form-item__error{
      display: none;
    }
  }
  // @hdk表格样式
  /deep/ .el-table--striped .el-table__body td {
    border-left: none;
  }
  /deep/ .el-table--striped .el-table__header th.is-leaf {
    border-left: none;
  }
</style>
