<!--
  @description: 订单详情-行项目列表公共
  @author: gmy
  @date： 2020-9-24 22:41:12
-->
<template>
  <div>
    <div class="clearfix offerInfo">
      <p v-if="roleCode!=='12'" class="fl page-title">
        5.行项目列表
      </p>
      <p v-else class="fl page-title">
        4.行项目列表
      </p>
      <p class="fr mt10 tip-size">
        不含税总价（元）：<span class="procurement_orange-color">{{ totalPrice }}</span>
        币种： <span class="procurement_orange-color">{{ filterDictText(protproject_currencyList, lineItemOther.currency) }}</span>
      </p>
    </div>
    <el-table :data="lineItemInfoList" border class="mb16 tableLimit" @selection-change="selectLineItem">
      <el-table-column v-if="lineItemOther.isEdit!=='00'" type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column
        prop="lineItemNumber"
        header-align="center"
        align="center"
        min-width="150"
        label="行项目编号"
      />
      <el-table-column
        prop="productNo"
        header-align="center"
        align="center"
        min-width="140"
        label="产品编码"
      />
      <el-table-column
        prop="productDescribe"
        header-align="center"
        align="left"
        min-width="230"
        label="产品描述"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.productDescribe }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" min-width="60" label="类别">
        <template slot-scope="scope">
          <span> {{ filterDictText(plan_purchase_typeList, scope.row.productCategory) }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" min-width="80" align="right">
        <template slot="header">
          <span v-if="lineItemOther.isEdit!=='00'" class="orange-color">*</span>
          <span>数量</span>
        </template>
        <template slot-scope="scope">
          <p v-if="lineItemOther.isEdit==='00'">
            {{ scope.row.quantity }}
          </p>
          <money v-else :thousands="true" :width="'70px'" :money-value="scope.row" name="quantity" />
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        prop="unit"
        align="left"
        min-width="80"
        label="计量单位"
      >
        <template slot-scope="scope">
          {{ filterDictText(purchaseUnitList, scope.row.unit) }}
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="left"
        min-width="120"
        label="税率(%)"
      >
        <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="right" min-width="110">
        <template slot="header">
          <span v-if="lineItemOther.isEdit!=='00'" class="orange-color">*</span>
          <span>含税单价（元）</span>
        </template>
        <template slot-scope="scope">
          <p v-if="lineItemOther.isEdit==='00'">
            {{ scope.row.unitPrice }}
          </p>
          <!-- 金额组件 -->
          <money
            v-else
            :thousands="true"
            :width="'110px'"
            :money-value="scope.row"
            name="unitPrice"
          />
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" min-width="240">
        <template slot="header" slot-scope="scope">
          <div class="deliveryDate">
            <span v-if="lineItemOther.isEdit!=='00'" class="orange-color">*</span>
            <span>交货时间</span>
            <el-date-picker
              v-if="lineItemOther.isEdit!=='00'"
              v-model="deliveryDateTime"
              :value-format="elValueFormatDate"
              :picker-options="disabledPickerOptions"
              type="date"
              placeholder="选择日期时间"
              maxlength="20"
              size="mini"
              @change="deliveryDateChange"
            />
          </div>
        </template>
        <template slot-scope="scope">
          <p v-if="lineItemOther.isEdit==='00'">
            {{ $Moment(scope.row.deliveryTime).format(momentDateTime) }}
          </p>
          <el-date-picker
            v-else
            v-model="scope.row.deliveryTime"
            :value-format="elValueFormatDate"
            type="date"
            placeholder="选择日期时间"
            maxlength="20"
            size="mini"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/* 公共方法 */
import { filterDictText } from '@/assets/js/utils' // 深拷贝
import { procurementGroupMixins } from '@/views/procurement/mixins/procurementGrounpMixins' // 公共字典
import { totalHeadCount } from '@/assets/js/utils' // 计算总价 randomData
import money from '@comp/common/money/money' // 金币组件

export default {
  name: 'ProcurementOrderLineItemTableVue',
  components: {
    money // 金额组件
  },
  mixins: [procurementGroupMixins],
  props: {
    // 行项目信息列表
    lineItemInfoList: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 行项目的其他数据
    lineItemOther: {
      type: Object,
      default: function() {
        return {
          currency: '00', // 币种 默认00不可编辑
          isEdit: '' // 是否可编辑字段 00 是 01 否
        }
      }
    }
  },
  data() {
    return {
      roleCode: '', // 角色编码
      deliveryDateTime: '', // 选择交货时间
      lineitemSelect: [] // 选中供应商数据
    }
  },
  computed: {
    // 计算总价
    totalPrice: function() {
      // 初始化数据
      const totalPriceData = []
      let totalPrice = 0
      this.lineItemInfoList &&
        this.lineItemInfoList.map(cur => {
          // 判断单向总价是否是数值
          if (!isNaN(cur.singleTotalPrice)) {
            // 将总价push到初始数据中
            totalPriceData.push(cur.singleTotalPrice)
            // 调用公共求和方法
            totalPrice = totalHeadCount(totalPriceData).toFixed(2)
            return
          }
          totalPrice = 0
        })
      return totalPrice
    }
  },
  watch: {
    // 行项目数据
    'lineItemInfoList': {
      handler(val) {
        val && val.forEach(cur => {
          // 单价(withoutTaxNitPrice) 都有值时
          cur.singleTotalPrice = (cur.unitPrice * cur.quantity).toFixed(2) // 含税总价  cur.quantity
        })
      },
      deep: true
    }
  },
  created() {
    this.roleCode = this.$store.getters.info.currentRol.roleCode // 角色code
    // 查询行项目典信息
    this.initWebTypeGroup()
    // 查询项目规则数据字典
    this.initqueryProcurementProjectRuleInitInfo()
  },
  methods: {
    filterDictText,
    // 改变日期
    deliveryDateChange(val) {
      this.lineItemInfoList.forEach(item => {
        item.deliveryTime = val
      })
    },
    // 选中的行项目
    selectLineItem(lineItemArr) {
      this.lineitemSelect = lineItemArr
    },
    // 释放 退回 行项目时数据
    getExportLineItemId() {
      if (this.lineitemSelect.length > 0) {
        const lineItemIdArr = [] // 接受行项目id空数组
        this.lineitemSelect.forEach(lineItem => {
          lineItemIdArr.push(lineItem.id) // 推入空数组
        })
        // 选中的行项目数据转字符串
        const lineItemBond = lineItemIdArr.toString()
        return {
          lineItemBond
        }
      } else {
        return {
          lineItemBond: ''
        }
      }
    }
  }

}
</script>

<style lang="less" scoped>
@import url("~@/assets/style/common/public.less");
.offerInfo{
  .tip-size;
}
.deliveryDate {
  display: flex;
  justify-content: space-around;
}
.orange-color{
  color: @orange;
}
</style>
