<!--
 * @Description: 创建采购单-行项目信息组件编辑
 * @Author: gmy
 * @Date: 2020-08-3 10:13:30
-->
<template>
  <div>
    <el-table :data="lineProjectData" border>
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
        fixed
      />
      <el-table-column
        header-align="center"
        align="left"
        prop="purchaseDesc"
        min-width="260"
        label="产品描述"
        fixed
      />
      <el-table-column
        header-align="center"
        label="行项目编号"
        prop="purchaseNo"
        min-width="180"
        align="center"
      />
      <el-table-column
        header-align="center"
        min-width="180"
        align="center"
        prop="productNo"
        label="产品编码"
      />
      <!--<el-table-column
        header-align="center"
        align="center"
        min-width="60"
        label="类型"
      >
        <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"
        prop="quantity"
        label="数量"
      />
      <el-table-column header-align="center" align="center" min-width="320">
        <template slot="header" slot-scope="scope">
          <div class="deliveryTime">
            <span class="red-star">*</span>
            <span>税率（%）</span>
            <el-select v-model="taxRateVal" placeholder="请选择" class="taxRate-select" style="width:205px" @change="taxRateChange">
              <el-option
                v-for="item in taxRateList"
                :key="item.typecode"
                style="width:180px"
                :label="item.typename"
                :value="item.typecode"
              />
            </el-select>
          </div>
        </template>
        <template slot-scope="scope">
          <el-select v-model="scope.row.taxRate" style="width:267px" placeholder="请选择" @change="taxRateChange(scope.row)">
            <el-option
              v-for="item in taxRateList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" width="110" label="计量单位">
        <template slot-scope="scope">
          <span>{{ filterDictText(purchaseUnitList,scope.row.unit ) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="right"
        min-width="100"
        label="预算单价(元)"
      >
        <template slot-scope="scope">
          <p>{{ moneyFormat(scope.row.unitBudget) }}</p>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="right"
        min-width="140"
        prop="totalBudget"
        label="预算总额(元)"
      >
        <template slot-scope="scope">
          <p>{{ moneyFormat(scope.row.totalBudget) }}</p>
        </template>
      </el-table-column>
      <!-- 交货时间 procFrameType 区分采购项目或者框架项目 00采购 01框架 采购项目交货时间可选择 框架项目交货时间已实际项目为准 -->
      <el-table-column
        header-align="center"
        :align="deliveryDateAligin"
        min-width="250"
      >
        <!-- 采购项目的交货时间 -->
        <template slot="header" slot-scope="scope">
          <div
            v-if="otherParameter.procFrameType==='00'"
            class="deliveryTime"
          >
            <span class="red-star">*</span>
            <span>交货时间</span>
            <el-date-picker
              v-model="fastestDeliveryDate"
              :value-format="elValueFormatDate"
              :picker-options="disabledPickerOptions"
              style="display: inline-block"
              align="center"
              type="date"
              placeholder="选择日期时间"
              maxlength="20"
              size="mini"
              @change="deliveryDateChange"
            />
          </div>
          <span v-if="otherParameter.procFrameType==='01'">交货时间</span>
        </template>
        <template slot-scope="scope">
          <!-- 采购项目的交货时间 -->
          <el-date-picker
            v-if="otherParameter.procFrameType==='00'"
            v-model="scope.row.deliveryDate"
            :value-format="elValueFormatDate"
            :picker-options="disabledPickerOptions"
            type="date"
            placeholder="选择日期时间"
            maxlength="20"
            style="width: 180px"
          />
          <!-- 框架项目的交货时间 -->
          <span v-if="otherParameter.procFrameType==='01'">已实际项目情况为准</span>
        </template>
      </el-table-column>
      <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"
        min-width="230"
        prop="buyersName"
        label="采购单位"
      />
      <el-table-column
        header-align="center"
        align="left"
        prop="remark"
        label="备注"
        min-width="180"
      >
        <template slot-scope="scope">
          <el-input v-model="scope.row.remark" />
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="附件"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <!-- isContainAttachment 行项目有无附件 0 没有 1 有  没有显示上传 有显示查看  查看中也可上传 -->
          <el-link
            v-if="scope.row.isContainAttachment!=='1'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="lookMatter(scope.row)"
          >
            [上传]
          </el-link>
          <el-link
            v-if="scope.row.isContainAttachment==='1'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="lookMatter(scope.row)"
          >
            [查看]
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        label="操作"
        align="center"
        min-width="120"
      >
        <template
          slot-scope="scope"
        >
          <!-- otherParameter.isEdit 布尔值 二次询价项目不显示操作列 -->
          <!-- issourceType 布尔值 含有01A true B类采购单 false 未非B类项目 -->
          <!-- 退回/移除行项目隐藏 -->
          <!-- <span v-if="otherParameter.isEdit">
            <el-link
              v-if="otherParameter.issourceType"
              :underline="false"
              size="mini"
              plain
              type="primary"
              @click="sendBack(scope.row)"
            >
              [退回]
            </el-link>
            <el-link
              v-else
              :underline="false"
              size="mini"
              plain
              type="primary"
              delete-row
              @click="deleteRow(scope.row)"
            >
              [移除]
            </el-link>
          </span> -->
          <span>
            <el-link
              :underline="false"
              size="mini"
              plain
              type="primary"
              delete-row
              @click="lookLineItemClick(scope.row)"
            >
              [查看]
            </el-link>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--   查看附件弹框-->
    <lookAccessory-dialog v-if="attachmentDialog.dialog" :dialog-data="attachmentDialog" />
    <!-- 退回释放说明弹框 -->
    <projectRelease v-if="dialogProjectRelease.dialog" :dialog-data="dialogProjectRelease" @projectRelease="projectRelease" />
    <!-- 查看行项目信息弹框 -->
    <lookLineItem-dialog v-if="lookLineItemInfoDialog.dialog" :dialog-data="lookLineItemInfoDialog" />
  </div>
</template>

<script>
/* api接口*/
import { cancelPurchaseSubjectMatter, updateSubjectMatterListTax } from '@/api/procurement/procurementProject' // 暂存 ，获取  saveSubjectMatterInfoList
/* 公共方法*/
import { moneyFormat, filterDictText } from '@/assets/js/utils' // 金额转换千分位
import { procurementProjectMixins } from '../mixins/procurementProjectMixins'
import { procurementGroupMixins } from '@/views/procurement/mixins/procurementGrounpMixins' // 采购公共数据字典方法
/* 组件*/
import lookAccessory from './lookLineItemInfoAccessory-dialog' // 查看行项目物资附件弹框
import projectRelease from './procurementProjectRelease-dialog.vue' /* 释放说明弹框*/
import lookLineItem from './procurementProjectLineItemLook-dialog.vue' // 查看行项目信息弹框
export default {
  name: 'ProcurementProjectMaterialAddVue',
  components: {
    'lookAccessory-dialog': lookAccessory, // 查看行项目物资附件弹框
    'lookLineItem-dialog': lookLineItem, // 查看行项目详情弹框
    projectRelease
  },
  mixins: [procurementGroupMixins, procurementProjectMixins],
  props: {
    // 其他参数
    otherParameter: {
      type: Object,
      default: () => {
        return {
          isEdit: true, // 是否隐藏操作列
          procFrameType: '00' // 区分采购项目或者框架项目 00采购 01框架
        }
      }
    },
    // 行项目数据
    lineProjectData: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tenderOrgMethod: this.$route.query.tenderOrgMethod, // 项目组织形式 00 自采 01 代理采购
      fastestDeliveryDate: '', // 最快交货日期
      taxRateVal: '', // 税率
      lineProjectId: '', // 保存行项目id
      // 查看行项目物资附件弹框-展示/隐藏状态 true 展示/false 隐藏
      attachmentDialog: {
        dialog: false,
        bizId: ''
      },
      // 项目释放退回弹框
      dialogProjectRelease: {
        dialog: false
      },
      // 查看行项目信息弹框
      lookLineItemInfoDialog: {
        dialog: false,
        planDetailId: '' // 行项目信息id
      },
      deliveryDateAligin: 'content' // 交货时间文案位置显示 默认居中
    }
  },
  watch: {
    // 监听查看附件弹框
    'attachmentDialog.dialog'(val) {
      if (!val) {
        this.attachmentDialog.bizId = ''
      }
    }
  },
  created() {
    // 查询项目字典
    this.initWebTypeGroup()
  },
  mounted() {
    // 根据是否是框架采购项目判断交货时间algin位置
    this.setdeliveryDateAligin()
  },
  methods: {
    filterDictText,
    moneyFormat,
    // 交货地点时间时间
    deliveryDateChange(val) {
      // 动态修改全部数据报价有效时间
      this.lineProjectData.forEach(item => {
        item.deliveryDate = val
      })
    },
    // 税率
    taxRateChange(row) {
      const mtterIds = []
      if (typeof row === 'object') {
        mtterIds.push(row.id)
      } else {
        this.lineProjectData.forEach(item => {
          mtterIds.push(item.id)
          item.taxRate = row
        })
      }
      const params = {
        subjectMatterIds: mtterIds.join(','),
        taxRate: typeof row === 'object' ? row.taxRate : row,
        tenderId: this.otherParameter.tenderId
      }
      updateSubjectMatterListTax(params).then((res) => {
        this.$emit('upTax', res.data)
      })
    },
    // 非B类采购单位释放将重新退回寻源
    deleteRow(row) {
      this.$confirm('此操作将释放该行项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      })
        .then(() => {
          const data = {
            id: row.id, // 行项目物资id
            tenderId: this.$route.query.tenderId, // 项目id
            reason: '111' // 原因
          }
          if (data.id && data.tenderId) {
            // 移除 退回 接口请求调用
            this.setCancelPurchaseSubjectMatter(data)
            return
          }
          this.$message.warning('缺少参数，请刷新页面')
        })
    },
    // B类采购单行项目列表未退回 将不退回寻源
    sendBack(row) {
      // 获取行项目id
      this.lineProjectId = row.id
      // 打开 退回说明弹框
      this.dialogProjectRelease.dialog = true
    },
    // 整单释放/整单退回释放说明的弹框回调
    projectRelease(releaseData) {
      setTimeout(() => {
        this.$confirm('此操作将把行项目退回计划管控平台, 确认退回吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        })
          .then(() => {
            const data = {
              id: this.lineProjectId, // 行项目物资id
              tenderId: this.$route.query.tenderId, // 项目id
              reason: releaseData.reason // 原因
            }
            if (data.id && data.tenderId) {
            // 移除 退回 接口请求调用
              this.setCancelPurchaseSubjectMatter(data)
              return
            }
            this.$message.warning('缺少参数，请刷新页面')
          })
      }, 500)
    },
    // 开启查看物资附件弹框
    lookMatter(row) {
      // 获取文件上传id
      this.attachmentDialog.bizId = row.planDetailId
      // 打开弹框
      this.attachmentDialog.dialog = true
    },
    // 查看行项目信息弹框
    lookLineItemClick(lineItemInfo) {
      // 获取行项目详情id
      this.lookLineItemInfoDialog.planDetailId = lineItemInfo.planDetailId
      // 开启弹框
      this.lookLineItemInfoDialog.dialog = true
    },
    // 移除退回行项目信息接口请求
    setCancelPurchaseSubjectMatter(data) {
      cancelPurchaseSubjectMatter(data).then(res => {
        this.$emit('watchData', true)
      })
    },
    /*
    * 根据是否是框架采购项目判断交货时间algin位置
    * procFrameType 00 采购项目 01框架采购项目
    */
    setdeliveryDateAligin() {
      if (this.otherParameter.procFrameType === '00') {
        this.deliveryDateAligin = 'content'
      } else if (this.otherParameter.procFrameType === '01') {
        this.deliveryDateAligin = 'left'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.deliveryTime {
  display: flex;
  justify-content: space-around;
  .el-input__suffix{
    right: 10px;
  }
}
.taxRate-select{
  width: 180px;
 /deep/ .el-input--small .el-input__inner{
    width:180px;
  }
}
</style>
