<!--
  @description: 中铸-报表-选择物资编码
  @author: 杨胜国
  @date： 2021-05-10 09:52
-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogSonData.dialogVisibleGoogs"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :lock-scroll="false"
      custom-class="el-dialog__body-p8 el-dialog_table"
      title="产品分类"
      width="1200px"
    >
      <section
        :class="{ SearchContent_show: toggleSearchStatus }"
        class="clearfix SearchContent"
      >
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            label-width="98px"
            label-position="left"
            inline
            @submit.native.prevent
          >
            <el-form-item
              ref="purchaseCode"
              label="物资品名编码"
              prop="purchaseCode"
            >
              <gx-input
                v-model.trim="searchForm.purchaseCode"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <el-form-item
              ref="purchaseName"
              label="物资名称"
              prop="purchaseName"
            >
              <gx-input
                v-model.trim="searchForm.purchaseName"
                style="width: 20vw"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <el-form-item
              ref="purchaseSpecification"
              label="规格型号"
              prop="purchaseSpecification"
            >
              <gx-input
                v-model.trim="searchForm.purchaseSpecification"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重 置
          </el-button>
        </div>
      </section>
      <section style="margin: 10px 0px" class="elTable_dialog">
        <el-table
          v-loading="loading"
          :row-key="getRowKey"
          :data="tableData"
          size="mini"
          select-on-indeterminate
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="60px"
            align="center"
            fixed="left"
          />
          <el-table-column
            type="index"
            width="60px"
            align="center"
            label="序号"
          />
          <el-table-column
            min-width="100px"
            align="center"
            prop="purchaseCode"
            label="物资编码"
          />
          <el-table-column
            min-width="150px"
            align="left"
            header-align="center"
            prop="purchaseName"
            label="物料名称"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="purchaseClassification"
            label="专业分类"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="purchaseSpecification"
            label="物资规格型号"
          />
          <el-table-column
            min-width="120px"
            header-align="center"
            align="left"
            prop="purchaseBrand"
            label="品牌"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="largeName"
            label="大类名称"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="middleName"
            label="中类名称"
          />
          <el-table-column
            min-width="150px"
            header-align="center"
            align="left"
            prop="smallName"
            label="小类名称"
          />
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="confirmLoading" type="primary" @click="ensure">
          {{ language.Determine }}
        </el-button>
        <el-button @click="dialogSonData.dialogVisibleGoogs = false">
          {{ language.cancel }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* 接口*/
// saveBatchPurchasePlanDetailInfo // 批量保存
import {
  ListTBMaterialStoreInfo, // 查询物料录信息列表
  getTBMaterialStoreInfoByItemIds // 根据物料编码ID查询物料信息
} from '@/api/procurement/purchasplan'
/* 公用组件 */
import { ListMixin } from '@/mixins/ListMixin' // 分页
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { procurementPlanGrounpMixins } from '@/views/procurement/procurementPlan/mixins/procurementPlanGroupMixins' // 采购立项 公共字典
import {
  filterObj,
  restoreInitialValue,
  filterDictText
} from '@/assets/js/utils'
import { mapGetters } from 'vuex'
export default {
  name: 'PricePlanEntryGoogsDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin, procurementPlanGrounpMixins],
  props: {
    dialogSonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: true, // laoding
      confirmLoading: false, // btnLoading
      itemIds: [], // 存储表格选中id
      tableData: [], // 表格数据
      // 搜索条件参数
      searchForm: {
        purchaseCode: '', // 物资编码
        purchaseName: '', // 物资名称
        purchaseSpecification: '' // 物资规格型号
      }
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  created() {
    this.loadData()
  },
  methods: {
    filterDictText, // 数据字典查询
    // 数据请求方法
    loadData() {
      const params = this.getQueryParams() // 查询条件
      ListTBMaterialStoreInfo(params)
        .then((response) => {
          this.loading = false
          this.tableData = response.data.records
          this.paginationData.total = response.data.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 选择
    handleSelectionChange(row) {
      this.itemIds = row
    },
    // 点击一行获取下标
    // rowClick(row) {
    //   this.itemId = row.itemId
    //   this.getIndex = row.index
    // },
    // 获取表格内每一行下标
    // selectedHighlight({ row, rowIndex }) {
    //   row.index = rowIndex
    // },
    // 给选中的一行添加样式
    // tableRowClassName({ row, rowIndex }) {
    //   if (this.getIndex === rowIndex) {
    //     return 'procurement_pith_on'
    //   }
    // },
    handleClose() {
      this.dialogSonData.dialogVisibleGoogs = false
    },
    // 指定一个key标识这一行的数据
    getRowKey(row) {
      return row.itemId
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.loadData() // 查询数据
    },
    // 确定
    ensure() {
      this.confirmLoading = true // btnLoading
      if (this.itemIds.length <= 0) {
        this.$message.warning('请勾选物料')
        this.confirmLoading = false // btnLoading
        return false
      }
      const itemIds = this.itemIds.map(item => item.itemId).join(',')
      const params = {
        itemIds
      }
      new Promise((resolve, reject) => {
        getTBMaterialStoreInfoByItemIds(params).then((response) => {
          resolve(response)
        })
      }).then((res) => {
        const params = res.data.map((item) => {
          return {
            operation: '00', // 保存
            planMainId: this.dialogSonData.planMainId, // 计划id
            // purchaseType: this.dialogSonData.purchaseType, // 采购计划类型
            purchaseType: '00', // 采购计划类型  // 计划编制'00'框架编制'01'
            planDetailId: this.dialogSonData.planDetailId, // 计划详情id
            ...item
          }
        })
        // saveBatchPurchasePlanDetailInfo(params).then((res) => {
        this.confirmLoading = false // btnLoading
        this.$emit('onRes', params) // 关闭录入行项目信息弹框
        this.$emit('close', params) // 刷新录入采购计划页面
        this.dialogSonData.dialogVisibleGoogs = false
        // }).catch(() => {
        //   this.confirmLoading = false // btnLoading
        // })
      }).catch(() => {
        this.confirmLoading = false // btnLoading
      })
    },
    // 重置
    resetForm() {
      // 清除数据
      restoreInitialValue(this.searchForm)
      this.onSearch()
    }
  }
}
</script>
<style lang="less" scoped>
// 引入变量
@import "./../../reportChart.public.less";
// 序号名次排列颜色
@serial_one: #6068e6; //第一
@serial_two: #f37b5d; //第二
@serial_three: #09c86f; //第三
@serial_rests: #c8c8d1; //其他
// 新增颜色
@tipColor: #99AAC7; /* 提示字体颜色 */
@bgcell: #182b63;
@bgysg:#0f1d5d;
@bgysgSpr:#072f63;
@bgtheader:#0f1d5d;
@borderColor: rgba(255, 255, 255, 0.1); /* 常规边框颜色 */
@bgGrid: #2D3552; /* 数据网格背景 */

/deep/.elTable_dialog{
  .el-table {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    thead {
      color: @tipColor;
      font-weight: normal;
    }
  }
  .el-table, .el-table__expanded-cell {
    background-color: @bgysg;
    ;
  }
  .el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: @borderColor;
  }
  .el-table th, .el-table tr {
    background-color: @bgysg;
  }
  .el-table th{
    background-color: @bgtheader;
    color:#fff;
    font-size: 14px;
    font-weight: bolder;
  }

  .el-table td, .el-table th.is-leaf {
    border-bottom: 1px solid @borderColor;
  }
  .el-table--small th {
    padding: 6px 0;
  }
  .el-table--small td {
    padding: 8px 0;
  }
  .el-table .cell {
    line-height: 18px;
  }
  .el-table .cell, .el-table th div, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell {
    padding-left: 8px;
  }
  .el-table .cell, .el-table th div {
    padding-right: 8px;
  }
  .el-table__body tr:hover > td {
    background-color: @bgysg !important;
  }
  // 斑马条 - 背景
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: @bgysgSpr;
  }
  // border table
  .el-table--border, .el-table--group {
    border: 1px solid @borderColor;
  }
  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
    border-right: 1px solid @borderColor;
  }
  // 固定列
  .el-table__body tr.hover-row.current-row>td, .el-table__body tr.hover-row.el-table__row--striped.current-row>td, .el-table__body tr.hover-row.el-table__row--striped>td, .el-table__body tr.hover-row>td {
    background-color: @bgysg!important;
  }
  .el-table__fixed-right::before, .el-table__fixed::before {
    background-color: @borderColor;
  }
  .el-table--border th.gutter:last-of-type {
    border-color: @borderColor;
  }
  .el-table__fixed-right-patch {
    background-color: @bgGrid;
  }
  .el-table--border th, .el-table__fixed-right-patch {
    border-color: @borderColor;
  }
  .el-table .el-table__body-wrapper .el-table__empty-block {
    min-height: 40px;
    border-bottom: none;
  }
}
</style>
