<!-- 价格申报单-列表 -->
<template>
  <el-card v-loading="loading" class="priceDeclaration" :body-style="{ padding: 0 }">

    <addPriceDeclaration ref="addDeclaration"></addPriceDeclaration>
    <seePriceDeclaration ref="seeDeclaration"></seePriceDeclaration>

    <!-- 检索 -->
    <el-form size="mini" label-position="right" label-width="85px" :model="searchParams" style="padding: 20px 0 0 0">
      <el-row :gutter="24">
        <el-col :span="22">
          <el-row :gutter="20">
            <el-col v-for="column in showSearchColumns" :key="column.title" :xl="6" :lg="6" :md="8" :sm="12" :xs="24">
              <el-form-item :prop="column.key" :label="column.title">
                <el-input v-model="searchParams[column.key]" :placeholder="column.placeholder"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-button type="primary" size="mini">搜索</el-button>
            </el-col>
            <el-col v-show="!isSimpleSearch" :span="24" style="margin: 10px 0 0">
              <el-button size="mini">重置</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
    <el-divider>
      <i :class="isSimpleSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" style="cursor: pointer"
        @click="handleSearchChange"></i>
    </el-divider>

    <!-- 操作 -->
    <el-row :gutter="24" style="padding: 0 20px">
      <!-- <el-col :span="6">  </el-col> -->
      <el-col :span="24" style="text-align: right">
        <el-button size="mini" type="danger" @click="handleAddDeclaration">新增</el-button>
        <el-button-group>
          <el-dropdown>
            <el-button size="mini">
              导入<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>导入</el-dropdown-item>
              <el-dropdown-item>模板下载</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown>
            <el-button size="mini">
              导出<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>Excel导出</el-dropdown-item>
              <el-dropdown-item>导出明细</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-button-group>

        <el-button-group>
          <el-button size="mini">删除</el-button>
          <el-button size="mini">打印</el-button>
          <el-button size="mini">下载</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <el-container>
      <el-main>
        <!-- 主信息 -->
        <el-table class="pd-mainTable" :data="tableData" size="mini" @row-dblclick="handleOpenDetails">
          <el-table-column type="selection" width="35" />
          <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.key" :label="column.title"
            :width="column.width || 180" :show-overflow-tooltip="column.showOverflowTooltip || true">
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total"
          :page-sizes="pageSizes" :page-size="page.pageSize" :current-page="page.pageNum" hide-on-single-page
          layout="total, prev, pager, next, sizes, jumper">
        </el-pagination>

        <!-- 附表格 -->
        <div class="pd-viceTable">
          <el-tabs class="pd-tabs" v-model="activeName" @tab-click="handleTabClick" style="width: 100%;">
            <el-tab-pane v-for="v in viceTable" :label="v.title" :name="v.name">

              <el-table class="pd_viceTable" :data="tabTableDatas[v.name]" style="width: 100%;">
                <el-table-column v-if="tabTableDatas[v.name].lenth" type="index" width="35" />
                <el-table-column v-for="(column, index) in v.columns" :key="index" :prop="column.key"
                  :label="column.title" :width="column.width || 180"
                  :show-overflow-tooltip="column.showOverflowTooltip || true">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>

      </el-main>
    </el-container>

  </el-card>
</template>

<script>
import declaration from '@/api/business/purchase/priceDeclaration'
import addPriceDeclaration from './add-price-declaration.vue'
import seePriceDeclaration from './see-price-declaration.vue'

export default {
  name: 'priceDeclaration',
  components: {
    addPriceDeclaration,
    seePriceDeclaration
  },
  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };
    // 检索列
    const searchColumns = [
      // { key: "id", title: "id", type: '' },
      // { key: "status", title: "单据状态" },
      // { key: "priceName", title: "价格名称" },
      // { key: "supplier", title: "供应商" },
      // { key: "supplierName", title: "供应商名称" },
      { key: "puOrg", title: "采购组织" },
      // { key: "puOrgName", title: "采购组织名称" },
      // { key: "currency", title: "币种" },
      // { key: "currencyName", title: "币种名称" },
      // { key: "explain", title: "价格合理性说明" },
      { key: "buyer", title: "采购员" },
      // { key: "buyerName", title: "采购员名称" },
      { key: "puDept", title: "采购部门" },
      // { key: "puDeptName", title: "采购部门名称" },
      // { key: "sourceType", title: "来源单据类型" },
      { key: "source", title: "来源单据号" },
      // { key: "isEffective", title: "是否已推价格" },
      // { key: "effectiveDate", title: "生效日期" },
      // { key: "file", title: "附件" },
      // { key: "tenantId", title: "租户号" },
      // { key: "revision", title: "乐观锁" },
      // { key: "createByName", title: "创建人名称" },
      // { key: "updateByName", title: "更新人" },
      // { key: "delFlag", title: "删除标记" }
    ];
    // 表头
    const tableHeader = [
      { key: "id", title: "id" },
      { key: "status", title: "单据状态" },
      { key: "priceName", title: "价格名称" },
      { key: "supplier", title: "供应商" },
      { key: "supplierName", title: "供应商名称" },
      { key: "puOrg", title: "采购组织" },
      { key: "puOrgName", title: "采购组织名称" },
      { key: "currency", title: "币种" },
      { key: "currencyName", title: "币种名称" },
      { key: "explain", title: "价格合理性说明" },
      { key: "buyer", title: "采购员" },
      { key: "buyerName", title: "采购员名称" },
      { key: "puDept", title: "采购部门" },
      { key: "puDeptName", title: "采购部门名称" },
      { key: "sourceType", title: "来源单据类型" },
      { key: "source", title: "来源单据号" },
      { key: "isEffective", title: "是否已推价格" },
      { key: "effectiveDate", title: "生效日期" },
      { key: "file", title: "附件" },
      { key: "tenantId", title: "租户号" },
      { key: "revision", title: "乐观锁" },
      { key: "createByName", title: "创建人名称" },
      { key: "updateByName", title: "更新人" },
      { key: "delFlag", title: "删除标记" }
    ];
    // 附表
    const viceTable = [
      {
        name: 'materialBasic',
        title: '物料信息表',
        columns: [],
      },
      {
        name: 'enforcementScope',
        title: '执行范围组织',
        columns: [],
      },
    ]

    // 初始化搜索列
    const initSearchColumns = () => searchColumns;
    // 初始化搜索参数
    const initSearchParams = () => arr2Obj(initSearchColumns(), "key", "value");
    // 初始化表头
    const initTableHeader = () => tableHeader;
    // 附表格
    const initViceTable = () => viceTable;

    return {
      loading: false,
      // 简单检索
      isSimpleSearch: true,
      // 标签页激活
      activeName: 'materialBasic',
      // 检索参数
      searchParams: {
        isAsc: "desc",
        reasonable: "",
        orderByColumn: "",
        ...initSearchParams(),
      },
      // 检索列
      searchColumns: initSearchColumns(),
      // 列表
      tableColumns: initTableHeader(),
      // 附表格
      viceTable: initViceTable(),
      // 附表格数据
      tabTableDatas: {
        // 物料信息表
        materialBasic: [],
        // 执行范围组织
        enforcementScope: [],
      },
      // 列表数据
      tableData: [
        {
          buyer: '1',
          buyerName: '1',
          createByName: '1',
          currency: '1',
          currencyName: '1',
          delFlag: '1',
          effectiveDate: '1',
          explain: '1',
          file: '1',
          id: '1',
          isAsc: '1',
          isEffective: '1',
          orderByColumn: '1',
          priceName: '1',
          puDept: '1',
          puDeptName: '1',
          puOrg: '1',
          puOrgName: '1',
          reasonable: '1',
          revision: '1',
          source: '1',
          sourceType: '1',
          status: '1',
          supplier: '1',
          supplierName: '1',
          tenantId: '1',
          updateByName: '1'
        }
      ],
      page: { pageNum: 1, pageSize: 25 },
      total: 1,
      pageSizes: [25, 50, 100],
    }
  },
  computed: {
    showSearchColumns() {
      return this.isSimpleSearch
        ? this.searchColumns.slice(0, 4)
        : this.searchColumns;
    },
  },
  methods: {
    // 改变页数大小
    handleSizeChange() { },
    // 改变当前页
    handleCurrentChange() { },
    // 查询条件改变
    handleSearchChange() {
      this.isSimpleSearch = !this.isSimpleSearch;
      // this.$notify.info({
      //   title: this.isSimpleSearch ? "Simple Search" : "All Search",
      // });
    },
    // 新增
    handleAddDeclaration() {
      const { setVisible } = this.$refs.addDeclaration;
      setVisible(true);
      setTimeout(() => {
        this.$notify.info("Open Add Drawer");
      }, 250);
    },
    // 标签页切换
    handleTabClick() {
      console.log(this.activeName, '标签页切换');

    },
    // 行双击-进入详情
    handleOpenDetails(row) {
      console.log(row, '行双击-进入详情');
      const { setVisible } = this.$refs.seeDeclaration;
      setVisible(true);
      setTimeout(() => {
        this.$notify.info("Open See Drawer");
      }, 250);
    },
    // 行编辑
    handleEdit(index, row) {
      console.log(index, row, '行编辑');
    },
    // 行删除
    handleDelete(index, row) {
      console.log(index, row, '行删除');
    },
    // 查询列表
    handlePriceApplyList() {
      let data = {
        ...this.page,
        ...this.searchParams,
      }
      declaration.getPriceApplyList(data).then(res => {
        console.log(res, 'res');
      }).catch(error => {

      })
    },
  },
  created() {
    console.log(this.searchParams, 'searchParams');
    // this.handlePriceApplyList();
  }
}
</script>

<style lang="scss" scoped>
.priceDeclaration {
  width: calc(100% - 24px);
  height: 100%;
  margin: 10px;

  .el-main {
    padding-top: 0px;

    .pd-mainTable {
      width: 100%;
      margin: 20px 0 0 0;
    }

    .pd-viceTable {
      padding: 20px 0 0 0;
      display: flex;
      flex-wrap: wrap;
    }

    // .pd_tabs {
    //   margin-top: 20px;
    // }
  }
}
</style>

<style scoped>
.pd_mainTable>>>.el-table__body-wrapper {
  max-height: 400px;
  overflow: auto;
}
</style>