<!--
  @description: 计划打包/框架计划工作流代办处理页
  @author: lxl
  @date： 2020-11-02 14:32
-->
<template>
  <div class="p0-16">
    <p class="page-title">
      1.业务基本信息
    </p>
    <table class="tableData">
      <!-- <tr>
        <td>
          采购计划名称
        </td>
        <td colspan="3">
          {{ formData.purchasePlanName }}
        </td>
      </tr> -->
      <tr>
        <td>
          采购单编号
        </td>
        <td colspan="3">
          {{ formData.tenderNo }}
        </td>
      </tr>
      <tr>
        <td>
          评审办法
        </td>
        <td>
          {{ filterDictText(reviewMethodList,formData.reviewMethod) }}
        </td>
        <td>
          采购方式
        </td>
        <td>
          {{ filterDictText(tenderMethodList,formData.tenderMethod) }}
        </td>
      </tr>
      <tr v-if="isFrame==='00'">
        <td>
          公开/邀请
        </td>
        <td>
          {{ filterDictText(tenderTypeList,formData.tenderType) }}
        </td>
        <td>是否优先</td>
        <td>{{ filterDictText(priorityOrderByList,formData.priorityOrderBy) }}</td>
      </tr>
      <tr v-else>
        <td>
          公开/邀请
        </td>
        <td colspan="3">
          {{ filterDictText(tenderTypeList,formData.tenderType) }}
        </td>
      </tr>
      <!--tenderMethod 11询价 tenderType 01邀请-->
<!--      <template v-if="formData.tenderMethod==='11' && formData.tenderType==='01'">
        <tr>
          <td>
            是否联合体
          </td>
          <td colspan="3">
            {{ filterDictText(ifComboTypeList,formData.ifCombo) }}
          </td>
        </tr>
        <tr v-if="formData.ifCombo==='01'">
          <td>
            联合体协议
          </td>
          <td colspan="3">
            <downloadFile v-if="invitationComboFileType.bizId" :data="invitationComboFileType" />
          </td>
        </tr>
      </template>-->
      <tr>
        <td>
          采购单净预算(元)
        </td>
        <td>
          {{ formData.budgetTotalMoney && numFilter(formData.budgetTotalMoney) }}
        </td>
        <td>采购单含税总预算(元)</td>
        <td>{{ formData.budgetTotalTaxMoney && numFilter(formData.budgetTotalTaxMoney) }}</td>
      </tr>
      <tr>
        <td>采购方式说明</td>
        <td colspan="3">
          {{ formData.tendermethodRemarks }}
        </td>
      </tr>
      <tr>
        <td>
          供应商属性
        </td>
        <td colspan="3">
          {{ filterDictText(supplierAttributeList,formData.supplierAttribute) }}
        </td>
      </tr>
      <tr>
        <td>
          供应商分类
        </td>
        <td colspan="3">
          {{ filterDictText(supplierCategoryList,formData.supplierCategory) }}
        </td>
      </tr>
      <tr>
        <td>内部附件({{ formData.insideTenderFile }})</td>
        <td>
          <el-link
            v-if="formData.insideTenderFile+'' !== '0'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="checkAccessory('01')"
          >
            查看
          </el-link>
        </td>
        <td>公开附件({{ formData.openTenderFile }})</td>
        <td>
          <el-link
            v-if="formData.openTenderFile+'' !== '0'"
            :underline="false"
            size="mini"
            plain
            type="primary"
            @click="checkAccessory('02')"
          >
            查看
          </el-link>
        </td>
      </tr>
    </table>
    <template v-if="formData.tenderType==='01'">
      <p class="page-title">
        2.供应商信息
      </p>
      <el-table
        ref="multipleTable"
        :data="formData.supplierList"
        row-key="id"
        default-expand-all
        :tree-props="{children: 'lists', hasChildren:'hasChildren'}"
      >
        <el-table-column type="index" label="序号" width="60" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.index }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="supplierName"
          header-align="center"
          label="供应商"
        />
        <el-table-column
          prop="businesslicence"
          label="统一社会信用代码"
          header-align="center"
          min-width="110"
          align="left"
        />
        <el-table-column
          prop="linkerName"
          header-align="center"
          label="联系人"
        />
        <el-table-column
          prop="linkerTel"
          align="center"
          label="联系方式"
        />
        <el-table-column
          v-if="formData.ifCombo==='01'"
          prop="supplierIfComboType"
          align="center"
          label="类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.supplierIfComboType==='00'">牵头人</span>
            <span v-if="scope.row.supplierIfComboType==='01'">联合体成员</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <p class="page-title">
      {{ `${formData.tenderType==='00'? '2.行项目信息':'3.行项目信息' }` }}
      <el-button type="primary" size="small" plain icon="iconfont icon-export" :loading="exportLoading" style="margin-left: 10px;" @click="exportFile">
        导出
      </el-button>
    </p>
    <section class="table_border_wrap" style="margin:10px 0px">
      <el-table :row-class-name="rowClassNameFn" :data="tableData" :stripe="stripeFlag">
        <el-table-column type="index" label="序号" fixed="left" align="center" />
        <el-table-column prop="purchaseNo" label="行项目编号" fixed="left" min-width="150" header-align="center" align="left" />
        <el-table-column prop="purchaseCode" label="物资编码" fixed="left" min-width="120" header-align="center" align="left" />
        <!-- <el-table-column prop="purchaseName" label="物资名称" min-width="220" header-align="center" align="left" /> -->
        <el-table-column prop="purchaseSpecification" label="物资描述" min-width="220" header-align="center" align="left" />
        <!-- <el-table-column label="是否集采" min-width="220" header-align="center" align="left">
          <template slot-scope="scope">
            {{ filterDictText(collectionTypeList,scope.row.collectionType) }}
          </template>
        </el-table-column> -->
        <el-table-column label="创建日期" min-width="150" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime && $Moment(scope.row.createTime).format(momentDate) }}
          </template>
        </el-table-column>
        <el-table-column label="交货日期" min-width="220" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ scope.row.planType === '01' ? scope.row.deliveryAddress : scope.row.deliveryTime && $Moment(scope.row.deliveryTime).format(momentDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="deliveryAddress" label="交货地点" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column prop="purchaseBrand" label="品牌" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <!-- <el-table-column prop="purchaseBuyer" label="采购员姓名" min-width="220" show-overflow-tooltip header-align="center" align="left" /> -->
        <el-table-column prop="purchaseClassificationParent" width="150" label="一级专业分类" header-align="center" />
        <el-table-column prop="purchaseClassification" label="二级专业分类" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column prop="purchaseDepartName" label="采购单位" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column prop="purchasePlanNo" label="采购申请编号" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column prop="purchaseSpecification" label="规格型号" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column label="税率" min-width="150" show-overflow-tooltip header-align="center" align="left">
          <template slot-scope="scope">
            {{ filterDictText(taxRateList,scope.row.purchaseTaxRate) }}
          </template>
        </el-table-column>
        <el-table-column label="计量单位" min-width="100" align="center">
          <template slot-scope="scope">
            {{ filterDictText(purchaseUnitList,scope.row.purchaseUnit) }}
          </template>
        </el-table-column>
        <el-table-column prop="purchaseUserRealName" label="上报人" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column prop="remark" label="备注" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <!-- <el-table-column prop="resultExeNo" label="结果执行编号" min-width="220" show-overflow-tooltip header-align="center" align="left" /> -->
        <el-table-column prop="suppliersName" label="供货厂商名称" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column prop="tenderManager" label="技术联系人/电话" min-width="220" show-overflow-tooltip header-align="center" align="left" />
        <el-table-column label="采购方式" min-width="150" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ filterDictText(tenderMethodList,scope.row.tenderMethod) }}
          </template>
        </el-table-column>
        <el-table-column prop="tenderNo" label="采购单编号" min-width="220" header-align="center" align="left" />
        <el-table-column label="公开/邀请" min-width="100" align="center">
          <template slot-scope="scope">
            {{ filterDictText(tenderTypeList,scope.row.tenderType) }}
          </template>
        </el-table-column>
        <el-table-column prop="purchaseNum" label="采购数量" min-width="150" header-align="center" align="right" />
        <el-table-column label="预算净单价(元)" min-width="150" header-align="center" align="right">
          <template slot-scope="scope">
            {{ scope.row.purchaseBudget && numFilter(scope.row.purchaseBudget) }}
          </template>
        </el-table-column>
        <el-table-column label="预算净总价(元)" min-width="150" header-align="center" align="right">
          <template slot-scope="scope">
            {{ scope.row.purchaseTotalBudget && numFilter(scope.row.purchaseTotalBudget) }}
          </template>
        </el-table-column>
        <el-table-column min-width="80" fixed="right" label="附件" align="center">
          <template slot-scope="scope">
            <el-link v-if="scope.row.isContainAttachment==='1'" type="primary" @click.stop="checkFile(scope.row)">
              查看
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </section>
    <!-- 查看附件 -->
    <template>
      <checkFIleCompDialog :dialog-file-data="dialogFileData" />
    </template>
  </div>
</template>
<script>
/* api*/
import { getPurchasePlanDetailsPackedByTodoList, downProcurementPlanDetailAuditPackedList } from '@/api/procurement/purchasplan'
/* 公用*/
import { ListMixin } from '@/mixins/ListMixin' // 分页
import { paging } from '@/assets/js/utils/index.js' // 前端分页
import { filterDictText, numFilter, download } from '@/assets/js/utils' // 公用方法
import checkFIleCompDialog from '@/views/procurement/procurementPlan/components/checkFIleComp-dialog.vue'// 查看附件
/* 组件*/
import pagination from '@comp/common/pagination/pagination' // 分页组件
import downloadFile from '@comp/common/updownload/downloadFile' // 附件下载
import { lineItemBackAdd } from '@/views/procurement/procurementPlan/mixins/lineItemBackAdd.js' // 打包混入
export default {
  name: 'ProcurementPlanBaleFlowDetail',
  components: {
    downloadFile, // 附件下载
    checkFIleCompDialog, // 查看附件
    pagination // 分页
  },
  mixins: [ListMixin, lineItemBackAdd],
  props: {
    tenderId: {
      type: String,
      default: ''
    },
    // 行项目列
    lineItemList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {}, // 基本数据
      tableData: [], // 表格数据
      stripeFlag: true, // table斑马纹状态
      exportLoading: false, // 导出状态
      isFrame: this.$route.meta.isFrame, // 判断进入来源 01框架 00集采打包
      // 查看附件弹框数据
      dialogFileData: {
        checkFileVisible: false, // 查看附件弹框状态
        bizId: '', // 附件主键id
        fileType: ''
      }
    }
  },
  created() {
    this.getGroupType() // 字典请求初始化
    this.initData() // 数据初始化
  },
  methods: {
    filterDictText,
    numFilter,
    // 字典请求
    getGroupType() {
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    initData() {
      const params = {
        tenderId: this.$route.query.id ? this.$route.query.id : this.tenderId,
        bizVersionId: this.$route.query.webParam
      }
      getPurchasePlanDetailsPackedByTodoList(params).then((res) => {
        this.formData = res.data
        this.invitationComboFileType.bizId = this.formData.tenderId
        this.$emit('getBizId', this.formData.tenderId)
        // 判断树形数据不为空，执行方法
        if (this.formData.supplierList.length > 0) this.setTableIndex(this.formData.supplierList)
        this.loadData()
      })
    },
    // 树形列表index层级，实现方法（可复制直接调用）
    setTableIndex(arr, index) {
      arr.forEach((item, key) => {
        item.index = key + 1
        if (index) {
          item.index = index + '.' + (key + 1)
        }
        if (item.lists) {
          this.setTableIndex(item.lists, item.index)
        }
      })
    },
    // 行项目数据分页
    loadData() {
      if (this.lineItemList.length > 0) {
        const tabArr = this.formData.packList
        const list = this.lineItemList.map(item => item.purchaseNo)
        const arr = tabArr.map((item) => {
          return {
            rowClassFlag: list.includes(item.purchaseNo),
            ...item
          }
        })
        this.tableData = paging({}, arr, this.paginationData)
      } else {
        this.tableData = paging({}, this.formData.packList, this.paginationData)
      }
    },
    // 导出行项目
    exportFile() {
      const params = {
        tenderId: this.formData.tenderId
      }
      this.exportLoading = true
      downProcurementPlanDetailAuditPackedList(params).then((res) => {
        this.exportLoading = false
        download(res, '行项目信息.xls')
      }).catch(() => {
        this.exportLoading = false
      })
    },
    // 查看附件
    checkAccessory(val) {
      this.dialogFileData.checkFileVisible = true
      this.dialogFileData.bizId = this.formData.tenderId
      if (val === '01') {
        this.dialogFileData.fileType = 'inside_tender_plan_file' // 内部
      } else {
        this.dialogFileData.fileType = 'open_tender_project_file' // 公开
      }
    },
    // 查看附件
    checkFile(row) {
      this.dialogFileData.bizId = row.planDetailId
      this.dialogFileData.checkFileVisible = true
    },
    // 设置表格类名
    rowClassNameFn({ row }) {
      if (row.rowClassFlag === false && this.lineItemList.length > 0) {
        this.stripeFlag = false
        return 'rowRed'
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
